Značky div nemusíte používat pokaždé. Použijte tyto sémantické HTML značky, aby byl váš web strukturovanější a přístupnější.
Před zavedením sémantického HTML používali vývojáři k uspořádání obsahu prvky div. Prvky div nemají samy o sobě žádný význam. Poskytují pouze způsob, jak použít styly a uspořádat obsah.
Slovo sémantický znamená týkající se významu. Sémantické prvky HTML popisují účel jejich obsahu. Poskytují význam vývojářům, uživatelům, vyhledávačům a pomocným technologiím. Zde je seznam oblíbených sémantických značek HTML, které můžete použít ve svém dalším projektu.
Co jsou Divs?
V HTML je prvek div (divize) kontejner na úrovni bloku. Pomocí prvku div seskupujete nebo rozdělujete prvky HTML do sekcí na webové stránce. Syntaxe je uvedena níže:
<div>
div>
Výhody použití sémantických prvků HTML nad prvky Div
HTML5 zavedlo sémantické prvky HTML, které usnadňují čtení kódu. Sémantické prvky dodávají obsahu webu smysl a strukturu.
Díky nim je váš kód srozumitelný ostatním vývojářům. Usnadňují také vyhledávačům najít váš obsah a zvýšit návštěvnost vašich stránek. Zde jsou některé sémantické prvky, které můžete použít ve svém
Projekty HTML a CSS.1.
The tag definuje sekci záhlaví v dokumentu. Obvykle obsahuje logo webu, navigaci a název stránky. Je to sekce, která se zobrazuje v horní části webové stránky. Hlavičku si můžete přizpůsobit podle svých potřeb. Syntaxe je následující:
<tělo><záhlaví>
<h1> Ahoj!h1>
<p>Jsem hlavičkap>
záhlaví>
tělo>
2.
The tag obsahuje navigační odkazy na web. Mohou to být nabídky, obsahy nebo rejstříky. Obvykle je umístěn v štítek. Syntaxe je následující:
<záhlaví><nav>
<ul>
<li>Odkazy na můj webli>
<li><Ahref="#"> DomovA>li>
<li ><Ahref="#"> O nás A>li>
ul>
nav>
<h1>Výše uvedené je navigační součástí mého webu.h1>
záhlaví>
V prohlížeči to bude vypadat takto:
Můžete použít modely rozložení CSS jako např CSS flexbox zarovnat
3.
The tag obsahuje hlavní obsah webové stránky. Odděluje obsah od záhlaví, postranního panelu a zápatí. Hlavní představuje dominantní obsah sekce.
<tělo><záhlaví>
<titul> Fakta o webu titul>
záhlaví>
<hlavní>
<p> Tento web je krátkou ukázkou toho, jak funguje hlavní tag.p>
<p> Ohraničuje část webu s užitečným obsahem.p>
hlavní>
<zápatí>
<h3> Toto je zápatí h3>
zápatí>
tělo>
Vypadá to takto:
4.
Použijte tag pro definování samostatných sekcí v dokumentu nebo webové stránce. Můžete je například použít ke strukturování blogových příspěvků, časopisů nebo produktových karet. The prvek může uzavírat další prvky včetně jiných článků, sekcí a nadpisů. Přiložené prvky by se měly týkat tématu článku.
<článek>
<h1>Podivnější než fikceh1><článek>
<h3>Úvodh3>
<p>Události a osoby vyprávěné v této knize jsou fiktivní.p>
článek>
<článek>
<h3>Kapitola jednah3>
<p> Den byl jasný a slunce se smálo z oblohyp>
článek>
článek>
Vypadá to takto:
5.
The tag obsahuje obsah související s hlavním obsahem. Pomocí této značky můžete vytvořit postranní panely pro citace, komentáře nebo výkřiky. zvýrazňuje informace, které by čtenáři mohly uniknout. Vyčnívá ze zbytku obsahu.
html><html>
<styl>
tělo{
background-color:#abdbe3;
}
stranou {
šířka: 30 %;
polstrování vlevo: 0,5rem;
okraj-levý: 1rem;
flex: vlevo;
box-shadow: inset 5px 0 5px -5px green;
styl písma: kurzíva;
červená barva;
}
stranou > p {
okraj: 0,5rem;
styl>
<tělo>
<hlavní>
<h1> Weaver Ptácih1>
<p>Ploceidae je čeleď malých pěvců. Mnozí z nich se nazývají snovači, snovačky, snovačky a biskupové.p>
<stranou>
<p>Království: Animalia
Kmen: Chordatap>stranou>
<p>Ve většině nedávných klasifikací, Ploceidae je klad, vylučuje některé ptáky, kteří byli historicky umístěni v rodině. Některé z vrabců, ale zahrnuje monotypickou podčeleď Amblyospizinae.p>
hlavní>
tělo>
html>
6.
The element obsahuje část stránky bez specifického sémantického prvku. Sekce mohou mít nadpis pro představení obsahu a uzavření dalších prvků HTML. představuje součásti webové stránky, jako jsou kapitoly v knize nebo blogu.
html><html>
<tělo>
<h1>Bibleh1>
<sekce>
<h2>Úvodh2>
<p>Bible je sbírka náboženských písem posvátných v křesťanství, judaismu a samaritánství. Bible je antologie – kompilace textů různých forem – původně napsáno v hebrejštině, aramejštině a řečtině koiné.p>
sekce>
<sekce>
<h2>Kapitola první: Genesish2>
<p>Kniha Genesis je první knihou hebrejské Bible a křesťanského Starého zákona. Jeho hebrejské jméno je stejné jako jeho první slovo, Bereshit. Genesis je popis stvoření světa, rané historie lidstva a izraelských předků a původu židovského národa.p>
sekce>tělo>
html>
Vypadá to takto:
7.
The prvek uzavírá samostatné ilustrace, jako jsou obrázky nebo diagramy. Tyto ilustrace odkazují na obsah na hlavní stránce. Obrázky jsou dodávány s popisky specifikovanými v živel. The vysvětluje, o čem obrázek je. The
html><html>
<tělo>
<hlavní>
<sekce>
<h1>Části počítačeh1>
<p> Existuje několik částí, které spolupracují na sestavení počítačep>
<postava>
<imgsrc="nejaka-url.jpg"alt="počítačová myš">
<figcaption>Toto je počítačová myšfigcaption>
postava>
sekce>
hlavní>
tělo>
html>
Můžete jít dál a učit se jak vytvářet responzivní obrázky v HTML.
The HTML element uzavírá informace ve spodní části webové stránky. Je to opak toho živel. The může obsahovat informace o vlastníkovi stránky. To zahrnuje údaje o autorských právech nebo odkazy na další informace o webu.
html><html>
<tělo>
<hlavní>
<sekce>
<h1>Části počítačeh1>
<postava>
<imgsrc="nejaka-url.jpg"alt="počítačová myš">
<figcaption>Toto je počítačová myšfigcaption>
postava>
sekce>
hlavní>
<zápatí>
<p> Vyrobeno společností ComputerTech © 2023p>
zápatí>
tělo>
html>
Výše uvedený kód přidá zápatí do Části počítače stránku, jak je znázorněno na následujícím obrázku.
Proč používat sémantické prvky HTML?
Použití sémantických prvků HTML dává kódu kontext. Každý, kdo se podívá do kódu, jej snadno pochopí. Značky usnadňují stylování prvků a spolupráci na projektech.
Sémantické HTML můžete použít s frontend knihovnami a frameworky. Většina moderních webových prohlížečů preferuje sémantické prvky HTML před tradičními prvky. Začněte používat sémantické HTML a sledujte, jak váš kód vypadá moderně, čitelně a prezentovatelně.