Elementy semantyczne HTML
Elementy semantyczne = elementy mające znaczenie.
Czym są elementy semantyczne?
Element semantyczny jasno opisuje swoje znaczenie zarówno dla przeglądarki, jak i dla programisty.
Przykłady elementów niesemantycznych : <div>oraz <span>- Nie mówią nic o swojej zawartości.
Przykłady elementów semantycznych : <form>, <table>, i <article>- Wyraźnie określa swoją zawartość.
Elementy semantyczne w HTML
Wiele witryn internetowych zawiera kod HTML, taki jak: <div id="nav"> <div class="header"> <div id="footer"> wskazujący nawigację, nagłówek i stopkę.
W HTML jest kilka elementów semantycznych, których można użyć do zdefiniowania różnych części strony internetowej:
- <artykuł>
- <na bok>
- <szczegóły>
- <podpis rysunku>
- <figura>
- <stopka>
- <nagłówek>
- <główna>
- <oznaczenie>
- <nawigacja>
- <sekcja>
- <podsumowanie>
- <czas>
HTML <sekcja> Element
Element <section>definiuje sekcję w dokumencie.
Według dokumentacji HTML W3C: „Sekcja to tematyczne pogrupowanie treści, zazwyczaj z nagłówkiem”.
Przykłady zastosowań <section>elementu:
- Rozdziały
- Wstęp
- Nowości
- Informacje kontaktowe
Stronę internetową można zwykle podzielić na sekcje zawierające wprowadzenie, treść i informacje kontaktowe.
Przykład
Dwie sekcje w dokumencie:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <artykuł> Element
Element <article>określa niezależną, samodzielną treść.
Artykuł powinien mieć sens sam w sobie i powinien być możliwy do rozpowszechniania niezależnie od reszty serwisu.
Przykłady zastosowań <article>elementu:
- Posty na forum
- Posty na blogu
- Komentarze użytkowników
- Karty produktów
- Artykuły z gazety
Przykład
Trzy artykuły z niezależną, samodzielną treścią:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Przykład 2
Użyj CSS, aby nadać styl elementowi <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Zagnieżdżanie <artykułu> w <sekcji> czy odwrotnie?
Element <article>
określa niezależną, samodzielną treść.
Element <section>definiuje sekcję w dokumencie.
Czy możemy użyć definicji, aby zdecydować, jak zagnieździć te elementy? Nie, nie możemy!
Tak więc znajdziesz strony HTML z <section>elementami zawierającymi <article>elementy i <article>elementy zawierające <section>elementy.
HTML <nagłówek> Element
Element <header>reprezentuje kontener na treści wprowadzające lub zestaw linków nawigacyjnych.
Element <header>zazwyczaj zawiera:
- jeden lub więcej elementów nagłówka (<h1> - <h6>)
- logo lub ikona
- informacje o autorze
Uwaga: W jednym dokumencie HTML może znajdować się kilka <header>elementów. Nie <header>można jednak umieścić w elemencie ani <footer>w <address>innym <header>elemencie.
Przykład
Nagłówek <artykułu>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <stopka> Element
Element <footer>definiuje stopkę dokumentu lub sekcji.
Element <footer>zazwyczaj zawiera:
- informacje o autorze
- Informacje o prawach autorskich
- informacje kontaktowe
- mapa strony
- powrót do górnych linków
- powiązane dokumenty
W jednym dokumencie możesz mieć kilka <footer>elementów.
Przykład
Sekcja stopki w dokumencie:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav> Element
Element <nav>definiuje zestaw linków nawigacyjnych.
Zauważ, że NIE wszystkie linki dokumentu powinny znajdować się wewnątrz <nav>elementu. Element
<nav>jest przeznaczony tylko dla głównego bloku linków nawigacyjnych.
Przeglądarki, takie jak czytniki ekranu dla niepełnosprawnych użytkowników, mogą używać tego elementu do określania, czy pominąć początkowe renderowanie tej treści.
Przykład
Zestaw linków nawigacyjnych:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside> Element
Element <aside>definiuje pewną zawartość poza zawartością, w której jest umieszczony (jak pasek boczny).
Treść <aside>powinna być pośrednio związana z otaczającą treścią.
Przykład
Wyświetlaj niektóre treści poza treścią, w której są umieszczone:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Przykład 2
Użyj CSS, aby nadać styl elementowi <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Elementy HTML <figure> i <figcaption>
Tag <figure>określa niezależną treść, taką jak ilustracje, diagramy, zdjęcia, wykazy kodów itp.
Znacznik <figcaption>definiuje podpis dla <figure>elementu. Element <figcaption>może być umieszczony jako pierwszy lub ostatni <figure>element potomny.
Element <img>określa rzeczywisty obraz/ilustrację.
Przykład
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Dlaczego elementy semantyczne?
Według W3C: „Sieć semantyczna umożliwia udostępnianie i ponowne wykorzystywanie danych w aplikacjach, przedsiębiorstwach i społecznościach”.
Elementy semantyczne w HTML
Poniżej znajduje się lista niektórych elementów semantycznych w HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .