3.1 Tag <main>
HTML5 wprowadził wiele nowych elementów semantycznych, które pomagają developerom tworzyć bardziej uporządkowane
i zrozumiałe strony webowe. Wśród nich szczególne miejsce zajmują tagi <main> i <aside>,
które są używane do tworzenia kontenerów dla głównej i dodatkowej treści odpowiednio.
Tag <main> oznacza główną zawartość dokumentu. Używa się go do umieszczenia unikalnej i kluczowej dla
danej strony treści. Treść znajdująca się wewnątrz tagu <main> powinna być unikalna dla każdej
strony i nie zawierać elementów powtarzających się na wszystkich stronach, takich jak logotypy, paski boczne, linki nawigacyjne czy stopki.
Składnia:
<main>
<!-- Główna zawartość strony -->
</main>
Przykład użycia:
<body>
<header>
<h1>Website Header</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>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Główne cechy:
- Zawartość: tag
<main>powinien zawierać główną treść strony, która jest unikalna dla danej strony - Położenie: na stronie powinien być tylko jeden tag
<main> - Dostępność: tag
<main>poprawia dostępność strony, pomagając technologiom wspomagającym (takim jak programy do czytania ekranu) szybciej znaleźć główną zawartość
Zastosowanie:
- Główna treść strony
- Unikalna zawartość związana z bieżącą stroną
Zalety:
- Semantyczna struktura: pomaga wyszukiwarkom i technologiom wspomagającym zrozumieć, co jest główną zawartością strony
- Poprawa struktury strony: wyraźnie oddziela główną treść od innych części strony, takich jak nagłówki, paski boczne i stopki
Właściwości:
- Powinien zawierać unikalną dla strony treść
- Nie powinien zawierać elementów, które się powtarzają na innych stronach (np. paski nawigacyjne, boczne, stopki)
3.2 Tag <aside>
Tag <aside> jest używany do oznaczania dodatkowej zawartości, która jest związana z główną treścią, ale nie
jest częścią głównego strumienia dokumentu. Zwykle jest używany do paneli bocznych zawierających reklamy, linki
do powiązanych artykułów, biografie autorów i inne pomocnicze elementy.
Składnia:
<aside>
<!-- Dodatkowa zawartość -->
</aside>
Przykład użycia:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Główne cechy:
- Zawartość: tag
<aside>zawiera dodatkowe informacje związane z główną treścią, ale nie jest częścią głównego strumienia dokumentu. - Położenie: może być umieszczony wewnątrz lub na zewnątrz tagu
<main>, w zależności od kontekstu. - Zastosowanie: używany do paneli bocznych, bloków reklamowych, linków do powiązanych artykułów i innych pomocniczych informacji.
Zastosowanie:
- Panele boczne z dodatkowymi informacjami
- Bloki reklamowe
- Linki do powiązanych zasobów
- Dodatkowe materiały związane z główną zawartością
Zalety:
- Semantyczna struktura: pomaga wyszukiwarkom i technologiom wspomagającym zrozumieć, że to jest treść pomocnicza względem głównej zawartości
- Poprawa struktury strony: wyraźnie oddziela dodatkową treść od głównej, czyniąc stronę bardziej zorganizowaną i łatwą do zrozumienia
Właściwości:
- Zawiera treść związaną z główną, ale nie będącą jej częścią
- Może być używany do paneli bocznych, bloków reklamowych, subskrypcji i innych dodatkowych materiałów
GO TO FULL VERSION