Sémantické prvky HTML
Sémantické prvky = prvky s významem.
Co jsou sémantické prvky?
Sémantický prvek jasně popisuje jeho význam jak pro prohlížeč, tak pro vývojáře.
Příklady nesémantických prvků: <div>a <span>- Nevypovídá nic o svém obsahu.
Příklady sémantických prvků: <form>, <table>, a <article>- Jasně definuje jeho obsah.
Sémantické prvky v HTML
Mnoho webových stránek obsahuje kód HTML jako: <div id="nav"> <div class="header"> <div id="footer"> pro označení navigace, záhlaví a zápatí.
V HTML existují některé sémantické prvky, které lze použít k definování různých částí webové stránky:
- <článek>
- <stranou>
- <podrobnosti>
- <figcaption>
- <obrázek>
- <zápatí>
- <záhlaví>
- <hlavní>
- <mark>
- <nav>
- <sekce>
- <souhrn>
- <čas>
HTML prvek <section>
Prvek <section>definuje sekci v dokumentu.
Podle dokumentace HTML W3C: "Sekce je tematické seskupení obsahu, obvykle s nadpisem."
Příklady, kde lze <section>prvek použít:
- Kapitoly
- Úvod
- Novinky
- Kontaktní informace
Webovou stránku lze normálně rozdělit na sekce pro úvod, obsah a kontaktní informace.
Příklad
Dvě sekce v dokumentu:
<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 prvek <article>
Prvek <article>určuje nezávislý, samostatný obsah.
Článek by měl dávat smysl sám o sobě a mělo by být možné jej distribuovat nezávisle na zbytku webu.
Příklady, kde lze <article>prvek použít:
- Příspěvky na fóru
- Příspěvky na blogu
- Komentáře uživatelů
- Produktové karty
- Články v novinách
Příklad
Tři články s nezávislým, samostatným obsahem:
<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>
Příklad 2
Ke stylování prvku <article> použijte CSS:
<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>
Vnořit <článek> do <sekce> nebo naopak?
Prvek <article>
určuje nezávislý, samostatný obsah.
Prvek <section>definuje sekci v dokumentu.
Můžeme použít definice k rozhodnutí, jak tyto prvky vnořit? Ne, nemůžeme!
Najdete tedy HTML stránky s <section>prvky obsahujícími <article>prvky a <article>prvky obsahující <section>prvky.
HTML prvek <header>
Prvek <header>představuje kontejner pro úvodní obsah nebo sadu navigačních odkazů.
Prvek <header>obvykle obsahuje:
- jeden nebo více prvků nadpisu (<h1> - <h6>)
- logo nebo ikonu
- informace o autorství
Poznámka: V jednom HTML dokumentu můžete mít několik <header>prvků. Nelze <header>však umístit do prvku <footer>, <address>nebo jiného <header>prvku.
Příklad
Záhlaví pro <article>:
<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 prvek <footer>
Prvek <footer>definuje zápatí dokumentu nebo sekce.
Prvek <footer>obvykle obsahuje:
- informace o autorství
- informace o autorských právech
- kontaktní informace
- mapa webu
- zpět na horní odkazy
- související dokumenty
V jednom dokumentu můžete mít několik <footer>prvků.
Příklad
Sekce zápatí v dokumentu:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML prvek <nav>
Prvek <nav>definuje sadu navigačních odkazů.
Všimněte si, že NE všechny odkazy dokumentu by měly být uvnitř <nav>prvku. Prvek
<nav>je určen pouze pro hlavní blok navigačních odkazů.
Prohlížeče, jako jsou čtečky obrazovky pro handicapované uživatele, mohou tento prvek použít k určení, zda vynechat počáteční vykreslení tohoto obsahu.
Příklad
Sada navigačních odkazů:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML prvek <aside>
Prvek <aside>definuje nějaký obsah kromě obsahu, do kterého je umístěn (jako postranní panel).
Obsah <aside>by měl nepřímo souviset s okolním obsahem.
Příklad
Zobrazit nějaký obsah kromě obsahu, do kterého je umístěn:
<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>
Příklad 2
Ke stylování prvku <aside> použijte CSS:
<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>
Prvky HTML <figure> a <figcaption>
Značka <figure>určuje samostatný obsah, jako jsou ilustrace, diagramy, fotografie, seznamy kódů atd.
Značka <figcaption>definuje popisek pro <figure>prvek. Prvek <figcaption>může být umístěn jako první nebo jako poslední potomek <figure>prvku.
Prvek <img>definuje aktuální obrázek/ilustraci.
Příklad
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Proč sémantické prvky?
Podle W3C: "Sémantický web umožňuje sdílení a opětovné použití dat napříč aplikacemi, podniky a komunitami."
Sémantické prvky v HTML
Níže je uveden seznam některých sémantických prvků v 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 |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .