Elementy semantyczne HTML5

Semantyka (pochodząca z greckiej antykwizny) może być zdefiniowana jako badanie znaczenia języka.

Elementy semantyczne są elementami o znaczeniu.

Co to są elementy semantyczne?

Semantyczne elementy jasno opisują swoje znaczenie dla przeglądarek i deweloperów.

Nie-semantycznePrzykłady elementów: <div> i <span> - nie dostarczają informacji o ich treści.

SemantykaPrzykłady elementów: <form>, <table> oraz <img> - wyraźnie definiują ich treść.

Obsługa przeglądarek

Tak Tak Tak Tak Tak

Wszystkie współczesne przeglądarki obsługują semantyczne elementy HTML5.

Ponadto, możesz "pomóc" przestarzałym przeglądarkom obsługiwać "nieznane elementy".

Dowiedz się więcej o tej kapitole w przeglądarce HTML5.

Nowe semantyczne elementy w HTML5

Wiele stron internetowych zawiera kod HTML wskazujący na nawigację, nagłówek oraz stopkę, na przykład: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 oferuje nowe semantyczne elementy do definiowania różnych części strony:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elementy semantyczne HTML5

Elementy semantyczne HTML5

Element <section> w HTML5

Element <section> definiuje sekcję dokumentu.

Według dokumentacji HTML W3C: "Sekcja (section) to grupa treści o określonej tematyce, zazwyczaj z tytułem."

Strona główna witryny może być podzielona na sekcje takie jak wprowadzenie, treść, dane kontaktowe itp.

Przykład

<section>
   <h1>WWF</h1>
   <p>Światowy Fundusz na Rzecz Natury (WWF) to....</p>
</section>

Spróbuj sam

Element <article> w standardzie HTML5

Element <article> określa niezależny, zamknięty blok treści.

Dokument ma swoje własne znaczenie i może być czytany niezależnie od innych treści strony.

Zastosowanie elementu <article>:

  • Forum
  • Blog
  • Wiadomości

Przykład

<article>
   <h1>Czym się zajmuje WWF?</h1>
   <p>Misją WWF jest zatrzymanie degradacji naturalnego środowiska naszej planety,</p>
  i budować przyszłość, w której ludzie żyją w harmonii z naturą.</p>
</article>

Spróbuj sam

Wstawianie semantycznych elementów

W standardzie HTML5, element <article> definiuje kompletny, zamknięty blok elementów związanych.

Element <section> jest zdefiniowany jako blok elementów związanych.

Czy możemy użyć tej definicji, aby zdecydować, jak wstawiać elementy? Nie, nie możemy!

W Internecie znajdziesz strony HTML z elementami <section>, które zawierają elementy <article>, oraz strony z elementami <article>, które zawierają elementy <sections>.

Zauważysz również, że elementy <section> zawierają elementy <section>, a elementy <article> zawierają elementy <article>.

Element <header> w standardzie HTML5

Element <header> określa nagłówek dla dokumentu lub sekcji.

Element <header> powinien być używany jako kontener dla wprowadzających treści.

W jednym dokumencie może być wiele elementów <header>.

Poniżej znajduje się przykład artykułu zdefiniowanego za pomocą nagłówka:

Przykład

<article>
   <header>
     <h1>Czym się zajmuje WWF?</h1>
     <p>Misja WWF:</p>
   </header>
   <p>Misją WWF jest zatrzymanie degradacji naturalnego środowiska naszej planety,</p>
  i budować przyszłość, w której ludzie żyją w harmonii z naturą.</p>
</article>

Spróbuj sam

Element <footer> w standardzie HTML5

Element <footer> określa stopkę dla dokumentu lub sekcji.

Element <footer> powinien dostarczać informacje dotyczące zawartych w nim elementów.

Podkładka stopki zawiera informacje o autorze dokumentu, informacje o prawach autorskich, linki do warunków użytkowania, informacje kontaktowe i inne.

Możesz użyć wielu elementów <footer> w jednym dokumencie.

Przykład

<footer>
   <p>Opublikowane przez: Hege Refsnes</p>
   <p>Informacje kontaktowe: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Spróbuj sam

Element HTML5 <nav>

Element <nav> definiuje zbiór linków nawigacyjnych.

Element <nav> ma na celu zdefiniowanie dużego bloku linków nawigacyjnych. Jednakże, nie wszystkie linki w dokumencie powinny znajdować się w elemencie <nav>!

Przykład

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Spróbuj sam

Element HTML5 <aside>

Element <aside> zawiera pewne treści poza główną zawartością strony (np. boczna strona).

Zawartość aside powinna być związana z otaczającą treścią.

Przykład

<p>Moja rodzina i ja odwiedziliśmy Epcot Center latem.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Epcot Center to park tematyczny w Disney World, Floryda.</p>
</aside>

Spróbuj sam

Elementy HTML5 <figure> i <figcaption>

W książkach i gazetach, tytuły obok obrazów są dość powszechne.

Rola tytułu (caption) polega na dodawaniu widocznej interpretacji obrazu.

Dzięki HTML5, obrazy i tytuły mogą być łączone w <figure> w elemencie:

Przykład

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - Przekop na pulpicie, Norwegia.</figcaption>
</figure>

Spróbuj sam

<img> Element definiuje obraz,<figcaption> Element definiuje tytuł.

Dlaczego używać elementów HTML5?

Jeśli używasz HTML4, deweloperzy będą używać swoich ulubionych nazw atrybutów, aby ustawić styl elementów strony:

nagłówek, górna, dolna, stopka, menu, nawigacja, główna, kontener, treść, artykuł, boczna strona, górna nawigacja, ...

W ten sposób przeglądarka nie może rozpoznać poprawnej zawartości strony.

A poprzez elementy HTML5, takie jak: <header> <footer> <nav> <section> <article>, ten problem jest rozwiązany.

Według W3C, semantyka sieci:

„Pozwala na dzielenie i ponowne użycie danych między aplikacjami, firmami i grupami.”

Elementy semantyczne w HTML5

Poniżej znajduje się lista nowych elementów semantycznych HTML5 uporządkowanych alfabetycznie.

Te linki wskazują na pełną przeglądarkę referencyjną HTML.

Tagi Opis
<article> Definiowanie artykułu.
<aside> Definiowanie treści poza zawartością strony.
<details> Definiowanie dodatkowych szczegółów, które użytkownik może wyświetlić lub ukryć.
<figcaption> Definiowanie tytułu elementu <figure>.
<figure> Określenie zawartości zewnętrznej strony.
<footer> Definiowanie stopki dokumentu lub sekcji.
<header> Określenie nagłówka dokumentu lub sekcji.
<main> Określenie głównego treści dokumentu.
<mark> Definiowanie ważnego lub podkreślonego tekstu.
<nav> Definiowanie linków nawigacyjnych.
<section> Definiowanie sekcji dokumentu.
<summary> Definiowanie widocznego tytułu elementu <details>.
<time> Definiowanie daty i czasu.