HTML: Elementy semantyczne

Elementy semantyczne nie tylko spełniają swoje zadanie, ale również określają do czego tak naprawdę służą.

Przykładem elementów niesemantycznych są np. div czy span. Nie określają one do jakiej czynności konkretnie służą, jakie dane będą w nich przechowywane.

Elementy semantyczne natomiast, to chociażby form, table czy article.

Nowe elementy semantyczne w HTML5

<article>	Zawiera treść artykułu
<aside>	Treść poboczna strony
<details>	Dodatkowe informacje, które można widzieć lub ukryć
<figure>	Zawiera ilustrację, diagram czy zdjęcie
<figcaption>	Opis dla grafiki ze znacznika <figure>
<footer>	Stopka dokumentu
<header>	Nagłówek dokumentu
<main>	Główna część dokumentu
<mark>	Podświetlony / wyróżniony tekst
<nav>	Elementy nawigacyjne
<section>	Sekcja dokumentu
<summary>	Widoczny nagłówek dla elementu <details>
<time>	Kontener dla daty, czasu

HTML: Nowe elementy semantyczne

<section>

Sekcja ma zawierać zgrupowaną tematycznie treść.

<section>
  <h1>Technik informatyk</h1>
  <p>Kierunek technik informatyk podzielony jest na...</p>
</section>

<article>

Artykuł to niezależna od innych część strony, wykorzystywana na forach, blogach czy internetowych gazetach bądź czasopismach.

<article>
  <h1>Czym zajmuje się technik informatyk?</h1>
  <p>Technik kończąc kierunek informatyczny może...</p>
</article>

<header>

Element nagłówka ma być wprowadzeniem do treści, które znajdują się po nim. Może występować wiele elementów <header> na jednej stronie.

<article>
  <header>
    <h1>Czym zajmuje się technik informatyk?</h1>
    <p>Egzamin i co dalej?</p>
  </header>
  <p>Technik kończąc kierunek informatyczny może...</p>
</article>

<footer>

Stopka również jest elementem, który może powtarzać się na stronie. Jest elementem zawierającym informacje o treści powyżej, np. o prawach autorskich, autorze czy informacje kontaktowe. Element ten może dotyczyć zarówno całego dokumentu, jak i poszczególnych sekcji.

<footer>
  <p>Umieścił: Administrator</p>
  <p>Skontaktuj się z nami: <a href="mailto:przykladowy@mail.ti">
  przykladowy@mail.ti</a>.</p>
</footer>

<nav>

Zawiera zestaw elementów nawigacyjnych.

Nie wszystkie odnośniki na stronie internetowej mają znajdować się w elemencie <nav>. Dotyczy on jedynie nawigacji po witrynie.

<nav>
  <a href="/kurs-html/">Kurs HTML</a> |
  <a href="/kurs-css/">Kurs CSS</a> |
  <a href="/kurs-js/">Kurs JavaScript</a>
</nav>

<aside>

Treść poboczna dokumentu, powinna jednak być tematycznie związania z treścią aktualnej strony.

<p>Odwiedziliśmy dzisiaj Pałac Kultury i Nauki w Warszawie.</p>

<aside>
  <h4>Pałac Kultury i Nauki</h4>
  <p>Pałac Kultury i Nauki, PKiN – najwyższy budynek w Polsce...</p>
</aside>

HTML & CSS