Znaczniki semantyczne w HTML5

By /

Html

Wprowadzenie HTML5 przyniosło ze sobą nowe znaczniki semantyczne, które mają na celu lepsze opisanie struktury i znaczenia treści na stronie internetowej. Zamiast stosowania nieokreślonych znaczników, takich jak <div> do wszystkiego, HTML5 pozwala na używanie bardziej opisowych elementów, takich jak <article>, <section>, <nav>, <header>, <footer> i inne. Użycie tych znaczników poprawia dostępność i czytelność strony zarówno dla użytkowników, jak i dla wyszukiwarek.

Znaczenie znaczników semantycznych

Znaczniki semantyczne dostarczają informacji o rodzaju zawartości, którą otaczają, co pomaga w zrozumieniu struktury strony. Na przykład, używając <nav> dla nawigacji czy <footer> dla stopki, wyraźnie wskazujemy przeznaczenie tych sekcji, co jest szczególnie ważne dla technologii asystujących, takich jak czytniki ekranu.

Przykład struktury strony z użyciem znaczników semantycznych

Poniżej znajduje się przykład prostego szablonu strony internetowej wykorzystującego znaczniki semantyczne HTML5, z komentarzami opisującymi ich zastosowanie.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład znaczników semantycznych</title>
</head>
<body>
    <!-- Komentarz: Nagłówek strony -->
    <header>
        <h1>Moja strona internetowa</h1>
        <nav>
            <!-- Komentarz: Nawigacja -->
            <ul>
                <li><a href="#home">Strona główna</a></li>
                <li><a href="#about">O nas</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Komentarz: Główna treść strony -->
    <main>
        <article>
            <!-- Komentarz: Artykuł -->
            <h2>Tytuł artykułu</h2>
            <p>Treść artykułu...</p>
        </article>
        <section>
            <!-- Komentarz: Sekcja -->
            <h2>Tytuł sekcji</h2>
            <p>Treść sekcji...</p>
        </section>
    </main>
    
    <!-- Komentarz: Stopka strony -->
    <footer>
        <p>&copy; 2023 Moja strona internetowa</p>
    </footer>
</body>
</html>

Podsumowanie

Znaczniki semantyczne w HTML5 są potężnym narzędziem, które pozwala deweloperom tworzyć strony internetowe z wyraźnie określoną strukturą i znaczeniem. Ułatwiają one nie tylko pracę z kodem i jego późniejsze utrzymanie, ale także poprawiają dostępność i SEO, co przekłada się na lepszą widoczność w wyszukiwarkach i doświadczenie użytkownika. Poprzez stosowanie tych znaczników, deweloperzy mogą skuteczniej komunikować zamiar i strukturę treści, co jest kluczowe dla nowoczesnego web designu.

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

 

 

 

 

Powiązane artykuły

Scroll to Top