>>Spis treści
- Czym jest semantyczny HTML?
- Zalety używania semantycznego HTML
- Semantyczne elementy HTML
- Ograniczenia i wyzwania
- Podsumowanie
- Zadania do wykonania
>>Czym jest semantyczny HTML?
Semantyczny HTML oznacza stosowanie takich elementów HTML, które jednoznacznie wskazują na swoje przeznaczenie i znaczenie w kontekście strony. Elementy semantyczne nie służą jedynie do budowania struktury dokumentu – ułatwiają one także przeglądarkom, wyszukiwarkom internetowym oraz technologiom wspomagającym (np. czytnikom ekranowym) prawidłową interpretację treści. Dzięki temu strony są bardziej dostępne, lepiej pozycjonowane i czytelniejsze zarówno dla ludzi, jak i maszyn.
>>Zalety używania semantycznego HTML
- Lepsza czytelność kodu: Kod oparty na semantycznych elementach jest bardziej zrozumiały i klarowny zarówno dla programistów, jak i dla narzędzi przetwarzających strony internetowe.
- SEO: Wyszukiwarki skuteczniej rozpoznają strukturę i znaczenie treści, co może poprawić pozycję strony w wynikach wyszukiwania.
- Dostępność: Semantyczny HTML sprawia, że technologie wspomagające (np. czytniki ekranowe) mogą lepiej przekazywać treść osobom z niepełnosprawnościami.
- Łatwiejsza konserwacja: Strony zbudowane w oparciu o semantyczny HTML są bardziej uporządkowane i łatwiejsze w utrzymaniu oraz rozbudowie.
>>Semantyczne elementy HTML
>>><!DOCTYPE html>
Deklaracja typu dokumentu HTML5. Informuje przeglądarkę o używanej wersji HTML – od tego rozpoczyna się każdy nowoczesny dokument HTML.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantyczny HTML</title>
</head>
<body>
<!-- Zawartość strony -->
</body>
</html>
>>><header>
Sekcja nagłówkowa strony lub danej sekcji. Zawiera zwykle tytuł, logo, wprowadzenie lub podstawową nawigację.
<header>
<h1>Tytuł strony</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Stosuj <header> na początku strony lub jako nagłówek sekcji.
>>><nav>
Wyodrębniony blok nawigacyjny. Zawiera zestaw linków prowadzących do różnych części serwisu lub do innych stron.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Element <nav> powinien obejmować tylko główną nawigację witryny.
>>><main>
Główna, unikatowa treść dokumentu. Może zawierać artykuły, sekcje, multimedia i inne elementy powiązane z tematem strony.
<main>
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
</main>
Tylko jeden element <main> na stronę!
>>><article>
Samodzielna jednostka treści, która ma sens także poza kontekstem strony (np. artykuł, wpis na blogu, post na forum).
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
Możesz mieć wiele <article> na jednej stronie.
>>><section>
Logiczna sekcja dokumentu grupująca powiązane tematycznie treści, np. rozdziały, bloki tematyczne.
<section>
<h2>Sekcja</h2>
<p>Treść sekcji...</p>
</section>
Używaj <section> do organizowania treści w logiczne grupy.
>>><aside>
Blok z treściami pobocznymi lub dodatkowymi – np. panele boczne, cytaty, reklamy, linki powiązane.
<aside>
<h2>Sidebar</h2>
<p>Informacje poboczne...</p>
</aside>
Elementy <aside> powinny zawierać treści niezwiązane bezpośrednio z główną osią tematyczną.
>>><footer>
Stopka strony lub sekcji. Zawiera informacje o autorze, prawa autorskie, dane kontaktowe, odnośniki do polityk i inne podobne treści.
<footer>
<p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
Możesz mieć <footer> zarówno dla całej strony, jak i dla poszczególnych sekcji czy artykułów.
>>><figure> i <figcaption>
Blok do zamieszczania ilustracji, zdjęć, diagramów, wykresów wraz z podpisem.
<figure>
<img src="obrazek.jpg" alt="Opis obrazka" />
<figcaption>Opis obrazka</figcaption>
</figure>
Element <figcaption> zawsze powinien być związany z <figure>.
>>><time>
Element reprezentujący określony moment w czasie lub zakres dat.
<time datetime="2023-06-29">29 czerwca 2023</time>
Używaj atrybutu datetime dla maszynowej czytelności.
>>><mark>
Służy do wyróżnienia fragmentu tekstu, na który należy zwrócić szczególną uwagę.
<p>To jest <mark>ważne</mark> słowo.</p>
Pomaga w podkreśleniu słów kluczowych lub wyników wyszukiwania.
>>><address>
Reprezentuje dane kontaktowe autora strony, firmy lub działu.
<address>
<p>Jan Kowalski</p>
<p>ul. Przykładowa 1</p>
<p>00-000 Warszawa</p>
</address>
Nie używaj do oznaczania lokalizacji geograficznych lub kontaktowych innych niż autor/organizacja strony.
>>Ograniczenia i wyzwania
- Niewłaściwe użycie elementów: Błędne stosowanie elementów semantycznych może prowadzić do dezorientacji użytkowników oraz problemów z dostępnością.
- Brak wsparcia w starszych przeglądarkach: Niektóre starsze przeglądarki mogą nie interpretować poprawnie wszystkich elementów HTML5. Warto wtedy stosować odpowiednie polyfill'e lub style CSS resetujące.
- Wymagana większa precyzja: Tworzenie semantycznego HTML wymaga dokładnego zrozumienia przeznaczenia każdego elementu i stosowania ich zgodnie z dokumentacją.
>>Podsumowanie
Semantyczny HTML to fundament nowoczesnych stron. Umożliwia lepszą strukturę, czytelność kodu, wyższą dostępność oraz skuteczniejsze pozycjonowanie w wyszukiwarkach. Stosowanie odpowiednich elementów semantycznych pozwala tworzyć strony bardziej zrozumiałe zarówno dla użytkowników, jak i maszyn. To inwestycja w przyszłość i jakość Twoich projektów internetowych.
>>Zadania do wykonania
>>>Zadanie 1
Stwórz prostą stronę HTML, w której znajdą się:
- nagłówek (
<header>) - główna treść (
<main>) - nawigacja (
<nav>) - stopka (
<footer>)
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zadanie 1</title>
</head>
<body>
<header>
<h1>Moja Strona</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<p>Główna treść strony...</p>
</main>
<footer>
<p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
>>>Zadanie 2
Rozbuduj stronę z Zadania 1 o:
- sekcję (
<section>) w głównej części, - artykuł (
<article>) w sekcji, - blok poboczny (
<aside>) również w sekcji.
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zadanie 2</title>
</head>
<body>
<header>
<h1>Moja Strona</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
<aside>
<h2>Blok poboczny</h2>
<p>Informacje poboczne...</p>
</aside>
</section>
</main>
<footer>
<p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
>>>Zadanie 3
Dodaj do swojej strony ilustrację z podpisem, korzystając z elementów <figure> i <figcaption>, umieszczając je wewnątrz sekcji.
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zadanie 3</title>
</head>
<body>
<header>
<h1>Moja Strona</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
<aside>
<h2>Blok poboczny</h2>
<p>Informacje poboczne...</p>
</aside>
<figure>
<img src="obrazek.jpg" alt="Opis obrazka" />
<figcaption>Opis obrazka</figcaption>
</figure>
</section>
</main>
<footer>
<p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
To wszystko w temacie semantycznego HTML! Zachęcam do eksperymentowania, praktycznego stosowania elementów semantycznych oraz dalszego pogłębiania wiedzy na ten temat.