Znaczniki semantyczne

HTML5 wprowadził wiele znaczników semantycznych, które mają na celu poprawę czytelności kodu oraz dostępności stron internetowych. Znaczniki semantyczne jasno określają rolę, jaką pełnią poszczególne części strony internetowej, co ułatwia pracę zarówno deweloperom, jak i przeglądarkom, a także narzędziom wspomagającym, takim jak czytniki ekranowe. W tej lekcji omówimy najważniejsze znaczniki semantyczne dostępne w HTML5, ich zastosowanie oraz jak mogą one przyczynić się do lepszej strukturyzacji Twoich stron internetowych.

Znaczniki semantyczne

  1. <header> – Definiuje nagłówek strony lub sekcji.
  2. <nav> – Przeznaczony do oznaczania nawigacji po stronie.
  3. <main> – Wskazuje główną zawartość strony.
  4. <article> – Określa niezależną, samowystarczalną treść.
  5. <section> – Reprezentuje ogólną sekcję dokumentu lub aplikacji.
  6. <aside> – Służy do oznaczania treści pobocznych, niezwiązanych bezpośrednio z główną zawartością.
  7. <footer> – Definiuje stopkę strony lub sekcji.
  8. <figure> i <figcaption> – Używane do grupowania mediów (np. obrazów, wykresów) wraz z ich podpisami.

Przykład kodu

Poniższy kod demonstruje użycie niektórych z tych znaczników na prostym przykładzie strony internetowej:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantyczne znaczniki HTML5</title>
    <style>
        header, nav, main, article, aside, footer {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Nagłówek strony</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Strona główna</a></li>
            <li><a href="#">Artykuły</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>Tytuł artykułu</h2>
            <p>Treść artykułu...</p>
        </article>
        <aside>
            <h3>Powiązane tematy</h3>
            <ul>
                <li><a href="#">Temat 1</a></li>
                <li><a href="#">Temat 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>Stopka strony</p>
    </footer>
</body>
</html>

W tym przykładzie użyto znaczników <header>, <nav>, <main>, <article>, <aside> oraz <footer> do zdefiniowania struktury strony. Każdy z tych elementów pełni określoną rolę semantyczną, co ułatwia zrozumienie struktury dokumentu i poprawia dostępność.

Podsumowanie

Znaczniki semantyczne wprowadzone w HTML5 znacząco przyczyniają się do poprawy struktury, czytelności oraz dostępności stron internetowych. Używając tych znaczników, deweloperzy mogą tworzyć bardziej zorganizowane i łatwiejsze do zrozumienia dokumenty HTML, co jest korzystne zarówno dla użytkowników, jak i wyszukiwarek.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top