Semantyka w HTML

Semantyka odgrywa kluczową rolę w tworzeniu stron internetowych za pomocą HTML. Ale co to właściwie znaczy? Słowo "semantyka" pochodzi z języka greckiego i oznacza "znaczenie". W kontekście HTML mówimy o semantyce, kiedy omawiamy znaczenie danego elementu - co dany element reprezentuje lub jakie ma zadanie.

Załóżmy, że strona internetowa to starożytny egipski obelisk. Bez semantyki, obelisk byłby po prostu blokiem kamienia z różnymi hieroglifami. Ale dla tych, którzy rozumieją semantykę hieroglifów, obelisk staje się źródłem informacji, opowiadając historię lub przekazując wiadomość. Każdy hieroglif ma swoje znaczenie, a ich kombinacje tworzą pełne zdania. HTML działa podobnie, ale zamiast hieroglifów, używamy tagów.

Semantyka w HTML odnosi się do znaczenia i celu, które dany element (tag) HTML ma w strukturze strony internetowej. Podobnie jak hieroglify, które mają swoje znaczenie, tagi HTML mówią przeglądarce (i innym robotom, takim jak wyszukiwarki), jakie informacje zawierają i jak powinny być interpretowane.

Na przykład, tag <header> mówi, że zawartość wewnątrz niego jest nagłówkiem strony, podobnie jak tytuł na początku staroegipskiego papirusu. Tag <footer> to stopka strony, podobna do podpisu na końcu listu. Tag <article> to niezależna część treści, tak jak osobne opowieści zapisane na starożytnych zwojach.

Używanie semantycznych tagów HTML ma wiele zalet. Po pierwsze, pomaga w utrzymaniu struktury i czytelności kodu. Po drugie, ułatwia robotom wyszukiwarek zrozumienie, co jest na stronie, co może poprawić jej pozycję w wynikach wyszukiwania. Po trzecie, pomaga osobom z niepełnosprawnościami korzystać z internetu, ponieważ technologie asystujące, takie jak czytniki ekranu, mogą lepiej zrozumieć strukturę strony.

Podobnie jak starożytni Egipcjanie, którzy używali hieroglifów do komunikacji, my używamy semantycznego HTML do tworzenia jasnej i zrozumiałej struktury naszych stron internetowych. Początkowo HTML nie miał zbyt wielu semantycznych elementów. Wszystko było formatowane za pomocą znaczników takich jak <div> i <span>, które nie mają żadnego semantycznego znaczenia - są to po prostu generyczne pojemniki na inne elementy.

Jednak w miarę rozwoju technologii internetowych, zaczęło pojawiać się więcej semantycznych elementów. Dzisiejsze strony internetowe są tworzone z użyciem znaczników takich jak <header>, <nav>, <main>, <article>, <section>, <footer> i wiele innych, które mają konkretną semantyczną rolę.

Oto kilka semantycznych elementów HTML:

<header>

Ten element definiuje nagłówek strony lub sekcji i zwykle zawiera logo, tytuł strony oraz nawigację.

1<header>
2  <h1>Nazwa strony</h1>
3  <nav>
4    <!-- Linki nawigacyjne -->
5  </nav>
6</header>

<nav>

Element <nav> zawiera główne linki nawigacyjne na stronie.

1<nav>
2  <a href="/">Strona główna</a>
3  <a href="/kontakt">Kontakt</a>
4</nav>

<article>

Oznacza niezależny, samodzielny blok zawartości, który ma sens sam w sobie, np. pojedynczy post na blogu.

1<article>
2  <h2>Tytuł posta</h2>
3  <p>Treść posta</p>
4</article>

<section>

Definiuje sekcję dokumentu, taką jak rozdział, zakładkę lub jakikolwiek inny wydzielony obszar zawartości.

1<section>
2  <h2>Nagłówek sekcji</h2>
3  <p>Treść sekcji</p>
4</section>

<footer>

Oznacza stopkę strony, która zwykle zawiera informacje prawne, autorskie oraz linki do polityki prywatności.

1<footer>
2  <p>&copy; 2023 Nazwa firmy</p>
3</footer>

Dlaczego semantyka jest ważna?

Ważność semantyki w HTML wynika z kilku powodów:

1. Dostępność: Semantyczne znaczniki HTML pomagają technologiom asystującym, takim jak czytniki ekranowe dla osób niewidomych, lepiej zrozumieć strukturę i zawartość strony. Na przykład, element <nav> informuje czytnik ekranu, że zawiera linki do innych stron lub sekcji na stronie.

2. SEO (Search Engine Optimization): Wyszukiwarki, takie jak Google, wykorzystują semantyczną strukturę strony do lepszego zrozumienia jej treści. Dobrze zorganizowane, semantyczne strony mogą pomóc w poprawie widoczności strony w wynikach wyszukiwania.

3. Czytelność kodu: Semantyczne elementy HTML ułatwiają zrozumienie struktury strony innym programistom. Kiedy patrzymy na kod strony, możemy łatwo zidentyfikować, gdzie jest nagłówek, gdzie jest główna treść, a gdzie stopka.

4. Wsparcie dla stylów CSS i JavaScript: Semantyczne elementy HTML ułatwiają stylizację strony za pomocą CSS i dodawanie interaktywnych funkcji za pomocą JavaScript. Na przykład, możemy łatwo stylizować wszystkie nagłówki na stronie, wybierając elementy <h1> do <h6>.

Pamiętaj, że wybór odpowiedniego semantycznego znacznika HTML jest kluczowy dla tworzenia funkcjonalnych, dostępnych i dobrze zorganizowanych stron internetowych.

Struktura dokumentu HTML

Podstawowy układ HTML zaczyna się od deklaracji typu dokumentu, a następnie zawiera elementy <html>, <head> i <body>.

1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>Tytuł Strony</title>
6</head>
7<body>
8  <!-- Tu będzie zawartość strony -->
9</body>
10</html>

Dodawanie nagłówka, stopki i głównej treści

Możesz dalej rozbudować układ, dodając semantyczne elementy, takie jak <header>, <footer> oraz <main> dla głównej treści strony.

1<body>
2  <header>
3    <h1>Nazwa strony</h1>
4    <nav>
5      <a href="/">Strona główna</a>
6      <a href="/kontakt">Kontakt</a>
7    </nav>
8  </header>
9  <main>
10    <section>
11      <h2>Wprowadzenie</h2>
12      <p>To jest przykładowa sekcja.</p>
13    </section>
14    <!-- Możesz dodać więcej sekcji -->
15  </main>
16  <footer>
17    <p>&copy; 2023 Nazwa firmy</p>
18  </footer>
19</body>

Masz chwilę na eksperymenty z semantycznymi elementami HTML. Spróbuj dodać lub/i edytować kilka elementów do swojej strony i sprawdź, jak wygląda strona po zmianach.

1<header>
2<h1>Nazwa strony</h1>
3<nav>
4<a href="/">Strona główna</a>
5<a href="/kontakt">Kontakt</a>
6</nav>
7</header>
8<main>
9<section>
10<h2>Wprowadzenie</h2>
11<p>To jest przykładowa sekcja.</p>
12</section>
13<!-- Możesz dodać więcej sekcji -->
14</main>
15<footer>
16<p>&copy; 2023 Nazwa firmy</p>
17</footer>