# Semantyczne tagi w HTML

# Semantyka tagów HTML

HTML jest językiem znaczników porządkujących treść oraz opisującym jej znaczenie w strukturze dokumentu. Możliwość przypisywania tagom HTML'a określonej funkcji w logicznej strukturze dokumentu nazywana jest semantyką. Uproszczając, poprzez stosowanie odpowiednich tagów określamy jakiej treści można się w ich wnętrzu spodziewać oraz w pełni wykorzystywać natywne możliwości elementów HTML w przeglądarkach internetowych.

Poprawny dobór tagów HTML'a wraz z wykorzystaniem odpowiednich atrybutów dostarcza korzyści na wielu polach:

wykorzystywanie natywnych elementów HTML (np. kalendarz pozwalający w precyzyjny i wygodny sposób wybrać datę w inpucie)
pozwala lepiej zrozumieć strukturę dokumentu i jego treści robotom indeksującym przeglądarek co pozytywnie wpływa na pozycjonowanie w wynikach wyszukiwania
poprawienie accessibility serwisów przy wykorzystaniu natywnych mechanizmów dostarczanych przez przeglądarki Jedną z cech HTML'a jest porządkowanie treści oraz nadawanie jej odpowiedniej wagi i znaczenia. Struktura treści dokumentu odzwierciedlana jest w html outline, a kluczową dla jej tworzenia jest odpowiednie stosowanie nagłówków oraz elementów sectionign content.

# Znaczniki słuzące grupowaniu contentu

# <article>

Element skupia powiązane ze sobą treści będące samodzielnym tworem pod względem logicznym. Oznacza to, że tag article powinien być używany w przypadku treści, którą możnaby oseparować od reszty contentu, a ta dalej byłaby zrozumiała i logicznie spójna.

# <section>

Służy do grupowania powiązanych ze sobą treści w większe bloki.

Semantycznie poprawny element powinien zawierać w sobie wprowadzenie do treści występujących w dalszej części dokumentu. Tag może być wykorzysywany wielokrotnie na jednej stronie, każda sekcja w outlinie dokumentu może mieć swój własny header.

Semantycznie poprawny element powinien skupiać treści o autorze, noty prawne, linkowania do powiązanych treści. Tag może być wykorzysywany wielokrotnie na jednej stronie, każda sekcja w outlinie dokumentu może mieć swój własny footer.

# <aside>

Element służący do grupowania treści będących powiązanych z głównym contentem, jednak nie dotyczącego w sposób bezpośredni. Często stosowany do jako kontener treści znajdujących się na sidebarze.

# <nav>

Semantyczne poprawny element powinien zawierać w sobie elementy pozwalające na nawigację po serwisie. Może występować więcej niż jeden raz, np dla menu głównego i bocznego.

# Najczęściej pomijane tagi słuzace do semantycznego opisu contentu

# <address>

Element zawiera informarcje o danych konktaktowych osób lub organizacji.

# <abbr>

Pozwala na dokładniejszy opis zastosowane akronimu w atrybucie title

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

# <cite>

Służy do wskazania cytowanego contentu. Wymaganam jest żeby zawierał w sobie tytuł dzieła.

# <code>

Element powinien zawierać w sobie tekst kodu komputerowego.

<p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>

# <data>

Pozwala na ilościowe przedstawienie cech jakościowych poprzez wprowadzenie mierzalnego parametru w atrybucie value.

<ul>
    <li><data value="100">Małe opakowanie</data></li>
    <li><data value="200">Duże opakowanie</data></li>
</ul>

1
2
3
4

# <em>

Pozwala na wyszczególnienie (zaakcentowanie) jakejś frazy w tekście

<p>Piszemy <em>semantycznie poprawny</em> HTML</p>

# <kbd>

Znacznik służy do opisu występujących w treści skrótów klawiszowych

<p>Wystarczy nadusić <kbd>Shift</kbd></p>

# <mark>

Znacznik służy podświetlenia/oznaczenia treści

<p>To jest <mark> bardzo ważny </mark> tekst </p>

# <dl> <dt> <dd>

Description list (<dl>) słuzy do wylistowania elementów wraz z ich szczegółowym opisem. Element moze zawierać w sobie dowolną ilość tagów description term (<dt>) wymieniających elementy. Dodatkowo do kazdego description term mozna (ale nie trzeba) przyporządkować jeden element description details (<dd>), którego celem jest dokładniejszy opis listowanych elementów.

<dl>
    <dt>Denim (semigloss finish)</dt>
    <dd>Ceiling</dd>
 
    <dt>Denim (eggshell finish)</dt>
    <dt>Evening Sky (eggshell finish)</dt>
    <dd>Layered on the walls</dd>
</dl>

1
2
3
4
5
6
7
8

# <figure>

Element pozwala na zdefiniowanie ilustracji/zdjęcia wraz z jego opisem. Poprawny semantycznie element powinien zawierać w swoim wnętrzy zdjęcie oraz jego podpis/opis w tagu <figure>. Element opisujący ilustrację powinien znajdować się jako pierwszy lub ostatni node wewnątrz <figure>.

<figure>
    <img src="/kot.png"
    width="136" height="200"
    alt="Kot">
  <figcaption>Kot domowy</figcaption>
</figure>

1
2
3
4
5
6

# <figcaption>

Słuzy do opisu ilustacji/zdjęć. Powinien znajdować się wenątrz tagu figure jako pierwsze lub ostatnie dziecko.

# <samp>

Słuzy do opisywania treści zawierających dane wyjściowe programu/algorytmu

<p><samp>Aby kontynuować naduś Enter</samp></p>

# <time>

Stosuje się do wprowadzenia zapisu dat w sposób bardziej zrozumiały dla maszyn tam gdzie data jest opisana w sposób czytelny tylko dla człowieka.

<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>

# Materiały:

https://www.w3.org/TR/2011/WD-html5-20110525/sections.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

← TypeScript Semantyczna struktura dokumentu HTML →