Podręcznik

2. HTML5 - język opisu struktury

2.2. Wybrane znaczniki semantyczne

Język HTML5 wprowadza nowe znaczniki semantyczne, które lepiej definiują strukturę strony internetowej. Dzięki nim kod jest bardziej czytelny zarówno dla programistów, jak i dla przeglądarek oraz narzędzi wspomagających (np. czytników ekranowych).

Element <header>

Może pełnić rolę nagłówka strony lub sekcji. Liczba tych elementów nie jest ograniczona, np. każdy element <section> może posiadać swój nagłówek. Więcej przeczytasz tutaj.

Element <footer>

Może pełnić rolę stopki strony lub sekcji. Liczba tych elementów nie jest ograniczona, np. każdy element <section> może posiadać swoją stopkę. Więcej przeczytasz tutaj.

Elementy <article>

Element <article> reprezentuje samodzielną, niezależną treść, która może być czytana i rozumiana w oderwaniu od reszty strony. Treść wewnątrz <article> powinna mieć znaczenie również poza kontekstem strony, na której się znajduje.

Element <section>

Element <section> służy do organizowania treści w sekcje tematyczne. Sekcje są częścią większej całości i zazwyczaj współdziałają z innymi częściami strony, tworząc jej strukturę. W odróżnieniu od <article>, zawartość <section> nie musi być samodzielna ani niezależna.

Powyższe elementy języka HTML5 można wykorzystać do zorganizowania treści w następujący sposób:

<article>
    <header>
        <h2>Jak używać HTML5?</h2>
        <p>Autor: Jan Kowalski</p>
    </header>
    <section>
        <h3>Wprowadzenie</h3>
        <p>HTML5 to nowoczesny standard tworzenia stron internetowych...</p>
    </section>
    <section>
        <h3>Nowe funkcje HTML5</h3>
        <p>HTML5 wprowadza takie elementy, jak <article>, <section>...</p>
    </section>
    <footer>
        <p>Opublikowano 1 stycznia 2024</p>
    </footer>
</article>

Element <nav>

Element <nav> jest używany do definiowania obszaru nawigacyjnego. Służy do grupowania linków, które umożliwiają użytkownikom przemieszczanie się między różnymi częściami tej samej strony, innymi stronami w witrynie lub nawet zewnętrznymi zasobami. Element <nav> powinien być używany tylko wtedy, gdy zawiera kluczowe linki nawigacyjne. Oznacza to, że nie należy używać elementu <nav> do grupowania wszystkich linków na stronie (np. pojedynczych odnośników w treści artykułu), ponieważ nie byłyby to główne elementy nawigacyjne.
Użycie elementu <nav> jest lepsze pod względem semantycznym do budowy menu niż tradycyjne obudowanie grupy odnośników <a> w listę nienumerowaną <ul>. Więcej przeczytasz tutaj.

Element <aside>

Element <aside> służy do przedstawiania treści, które są dodatkowe lub poboczne w stosunku do głównej treści dokumentu. Jest to semantyczny znacznik, który oznacza, że zawarte w nim informacje mają charakter uzupełniający, ale nie są bezpośrednio związane z główną treścią. Przykłady zastosowania:

jako pasek boczny strony,
jako przypis lub notatka wewnątrz sekcji,
dla reklamy lub treści promocyjnych.

Więcej przeczytasz tutaj.

Element <main>

Element <main> w języku HTML5 jest semantycznym znacznikiem używanym do oznaczania głównej treści strony. Zawiera najważniejsze informacje związane z celem strony lub aplikacji. W związku z tym nie mogą znaleźć się w jego wnętrzu elementy, które są powtarzalne na wielu stronach, takie jak nagłówek (<header>), stopka (<footer>) czy paski nawigacyjne (<nav>). Więcej przeczytasz tutaj.

Specyfikacja języka