#Czym jest semantyczny HTML?
Semantyczny HTML polega na używaniu elementów HTML, które jednoznacznie opisują swoje znaczenie i cel. Elementy semantyczne nie tylko definiują strukturę dokumentu, ale również pomagają w interpretacji jego zawartości zarówno przez przeglądarki, jak i przez wyszukiwarki internetowe oraz technologie wspomagające (np. czytniki ekranowe).
#Zalety używania semantycznego HTML
- Lepsza czytelność kodu: Semantyczne elementy HTML sprawiają, że kod jest bardziej zrozumiały zarówno dla programistów, jak i dla narzędzi analitycznych.
- SEO: Wyszukiwarki internetowe lepiej rozumieją i indeksują semantyczny HTML, co może pozytywnie wpłynąć na pozycjonowanie strony.
- Dostępność: Technologie wspomagające, takie jak czytniki ekranowe, mogą lepiej interpretować i nawigować po treści semantycznie oznaczonej.
- Łatwiejsza konserwacja: Strony z semantycznym HTML są bardziej uporządkowane, co ułatwia ich modyfikację i utrzymanie.
#Semantyczne elementy HTML
#<!DOCTYPE html>
Deklaracja typu dokumentu HTML5, która informuje przeglądarkę o wersji HTML używanej w dokumencie.
<!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>
Zawiera wprowadzenie lub zestaw linków nawigacyjnych.
<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>
#<nav>
Definiuje blok nawigacyjny, zawierający linki do innych części strony 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>
#<main>
Reprezentuje główną zawartość dokumentu. Powinien być unikalny i zawierać główny temat strony.
<main>
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
</main>
#<article>
Oznacza samodzielną jednostkę treści, która mogłaby być dystrybuowana niezależnie.
<article>
<h2>Artykuł</h2>
<p>Treść artykułu...</p>
</article>
#<section>
Reprezentuje sekcję dokumentu, która zawiera grupę treści o podobnym temacie.
<section>
<h2>Sekcja</h2>
<p>Treść sekcji...</p>
</section>
#<aside>
Oznacza sekcję, która zawiera treści mniej istotne lub dodatkowe w stosunku do głównej treści.
<aside>
<h2>Sidebar</h2>
<p>Informacje poboczne...</p>
</aside>
#<footer>
Zawiera informacje o autorze, prawa autorskie, linki do polityki prywatności itp.
<footer>
<p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
#<figure> i <figcaption>
Używane do oznaczenia ilustracji, diagramów lub innych elementów graficznych oraz ich opisów.
<figure>
<img src="obrazek.jpg" alt="Opis obrazka" />
<figcaption>Opis obrazka</figcaption>
</figure>
#<time>
Reprezentuje określony czas, datę lub oba.
<time datetime="2023-06-29">29 czerwca 2023</time>
#<mark>
Oznacza tekst, który jest wyróżniony ze względu na kontekst.
<p>To jest <mark>ważne</mark> słowo.</p>
#<address>
Oznacza informacje kontaktowe.
<address>
<p>Jan Kowalski</p>
<p>ul. Przykładowa 1</p>
<p>00-000 Warszawa</p>
</address>
#Ograniczenia i wyzwania
- Niewłaściwe użycie: Używanie elementów semantycznych w niewłaściwy sposób może prowadzić do zamieszania i problemów z dostępnością.
- Starsze przeglądarki: Starsze przeglądarki mogą nie obsługiwać wszystkich semantycznych elementów HTML5.
- Większa dokładność: Tworzenie semantycznego HTML wymaga większej dbałości o szczegóły i zrozumienia struktury dokumentu.
#Podsumowanie
Używanie semantycznego HTML przynosi wiele korzyści, takich jak lepsza czytelność kodu, lepsze pozycjonowanie w wyszukiwarkach i większa dostępność dla osób niepełnosprawnych. Dzięki semantycznym elementom HTML możemy tworzyć bardziej strukturalne i zrozumiałe strony internetowe.
#Zadania do wykonania
#Zadanie 1
Stwórz prostą stronę HTML z nagłówkiem (<header>), główną treścią (<main>), sekcją nawigacyjną (<nav>) i stopką (<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
Dodaj do strony z Zadania 1 sekcję (<section>), która zawiera artykuł (<article>) oraz blok poboczny (<aside>).
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
Umieść na stronie obrazek z podpisem, używając elementów <figure> i <figcaption>.
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 tyle na temat semantycznego HTML! Zachęcam do dalszego zgłębiania tematu i praktycznego zastosowania zdobytej wiedzy.