Značky div nemusíte používať zakaždým. Použite tieto sémantické značky HTML, aby bola vaša stránka štruktúrovanejšia a prístupnejšia.
Pred zavedením sémantického HTML vývojári používali divs na usporiadanie obsahu. Prvky div samy osebe nemajú žiadny význam. Poskytujú iba spôsob použitia štýlov a usporiadania obsahu.
Slovo sémantický znamená týkajúci sa významu. Sémantické prvky HTML popisujú účel ich obsahu. Poskytujú význam vývojárom, používateľom, vyhľadávacím nástrojom a asistenčným technológiám. Tu je zoznam populárnych sémantických značiek HTML, ktoré môžete použiť vo svojom ďalšom projekte.
Čo sú to Divs?
V HTML je prvok div (division) kontajner na úrovni bloku. Pomocou prvku div zoskupíte alebo rozdelíte prvky HTML do sekcií na webovej stránke. Syntax je uvedená nižšie:
<div>
div>
Výhody používania sémantických prvkov HTML nad prvkami Div
HTML5 zaviedlo sémantické prvky HTML na uľahčenie čítania kódu. Sémantické prvky dodávajú obsahu webu význam a štruktúru.
Vďaka nim je váš kód zrozumiteľný pre ostatných vývojárov. Tiež uľahčujú vyhľadávačom nájsť váš obsah a zvýšiť návštevnosť vašich stránok. Tu je niekoľko sémantických prvkov, ktoré môžete použiť vo svojom
Projekty HTML a CSS.1.
The tag definuje sekciu hlavičky v dokumente. Zvyčajne obsahuje logo lokality, navigáciu a názov stránky. Je to sekcia, ktorá sa zobrazuje v hornej časti webovej stránky. Hlavičku si môžete prispôsobiť podľa svojich potrieb. Syntax je nasledovná:
<telo><hlavička>
<h1> Ahoj!h1>
<p>Som hlavičkap>
hlavička>
telo>
2.
The značka obsahuje navigačné odkazy na webovú stránku. Môžu to byť ponuky, obsahy alebo indexy. Zvyčajne sa umiestňuje v rámci tag. Syntax je nasledovná:
<hlavička><nav>
<ul>
<li>Odkazy na moje stránkyli>
<li><ahref="#"> Domova>li>
<li ><ahref="#"> O nás a>li>
ul>
nav>
<h1>Vyššie uvedené je navigačná časť mojej webovej stránky.h1>
hlavička>
V prehliadači to bude vyzerať takto:
Môžete použiť modely rozloženia CSS ako napr CSS flexbox zarovnať
3.
The tag obsahuje hlavný obsah webovej stránky. Oddeľuje obsah od hlavičky, bočného panela a päty. Hlavná predstavuje dominantný obsah oddiele.
<telo><hlavička>
<titul> Fakty o webovej stránke titul>
hlavička>
<Hlavná>
<p> Táto webová stránka je krátkou ukážkou toho, ako funguje hlavný tag.p>
<p> Ohraničuje časť webovej stránky s užitočným obsahom.p>
Hlavná>
<päta>
<h3> Toto je päta h3>
päta>
telo>
Vyzerá to takto:
4.
Použi tag na definovanie samostatných sekcií v dokumente alebo webovej lokalite. Môžete ich použiť napríklad na štruktúrovanie blogových príspevkov, časopisov alebo produktových kariet. The prvok môže uzatvárať ďalšie prvky vrátane iných článkov, sekcií a nadpisov. Priložené prvky by sa mali týkať témy článku.
<článok>
<h1>Stranger than Fictionh1><článok>
<h3>Úvodh3>
<p>Udalosti a osoby opísané v tejto knihe sú fiktívne.p>
článok>
<článok>
<h3>Prvá kapitolah3>
<p> Deň bol jasný a slnko sa usmievalo z oblohyp>
článok>
článok>
Vyzerá to takto:
5.
The tag obsahuje obsah súvisiaci s hlavným obsahom. Túto značku použite na vytvorenie bočných panelov pre citácie, komentáre alebo výkriky. zvýrazňuje informácie, ktoré by čitateľovi mohli uniknúť. Odlišuje sa od zvyšku obsahu.
html><html>
<štýl>
telo{
background-color:#abdbe3;
}
stranou {
šírka: 30 %;
polstrovanie vľavo: 0,5 mm;
ľavý okraj: 1rem;
ohyb: vľavo;
box-shadow: inset 5px 0 5px -5px green;
štýl písma: kurzíva;
farba: červená;
}
stranou > p {
okraj: 0,5rem;
štýl>
<telo>
<Hlavná>
<h1> Weaver Birdsh1>
<p>Ploceidae je čeľaď malých vtákov pasierovcov. Mnohé z nich sa nazývajú snovače, snovače, snovače a biskupi.p>
<stranou>
<p>Kráľovstvo: Animalia
Kmeň: Chordatap>stranou>
<p>V najnovších klasifikáciách je Ploceidae klad, vylučuje niektoré vtáky, ktoré boli historicky zaradené do čeľade. Niektoré z vrabcov, ale zahŕňa monotypickú podčeľaď Amblyospizinae.p>
Hlavná>
telo>
html>
6.
The obsahuje časť stránky bez špecifického sémantického prvku. Sekcie môžu mať nadpis, ktorý predstavuje obsah a uzatvára ďalšie prvky HTML. predstavuje súčasti webovej stránky, ako sú kapitoly v knihe alebo blogu.
html><html>
<telo>
<h1>Bibliah1>
<oddiele>
<h2>Úvodh2>
<p>Biblia je zbierka náboženských textov posvätných v kresťanstve, judaizme, samaritánstve. Biblia je antológia – kompilácia textov rôznych foriem – pôvodne napísané v hebrejčine, aramejčine a gréčtine koiné.p>
oddiele>
<oddiele>
<h2>Kapitola prvá: Genesish2>
<p>Kniha Genezis je prvou knihou hebrejskej Biblie a kresťanského Starého zákona. Jeho hebrejský názov je rovnaký ako jeho prvé slovo, Bereshit. Genezis je popisom stvorenia sveta, ranej histórie ľudstva, predkov Izraela a pôvodu židovského národa.p>
oddiele>telo>
html>
Vyzerá to takto:
7.
The prvok uzatvára samostatné ilustrácie, ako sú obrázky alebo diagramy. Tieto ilustrácie odkazujú na obsah na hlavnej stránke. Obrázky sú dodávané s popismi špecifikovanými v element. The vysvetľuje, o čom je obrázok. The
html><html>
<telo>
<Hlavná>
<oddiele>
<h1>Časti počítačah1>
<p> Existuje niekoľko častí, ktoré spolupracujú pri zostavovaní počítačap>
<obrázok>
<imgsrc="nejaka-url.jpg"alt="počítačová myš">
<figcaption>Toto je počítačová myšfigcaption>
obrázok>
oddiele>
Hlavná>
telo>
html>
Môžete ísť ďalej a učiť sa ako vytvárať responzívne obrázky v HTML.
The HTML element uzatvára informácie v spodnej časti webovej stránky. Je to opak toho element. The môže obsahovať informácie o vlastníkovi stránky. Patria sem údaje o autorských právach alebo odkazy na ďalšie informácie o lokalite.
html><html>
<telo>
<Hlavná>
<oddiele>
<h1>Časti počítačah1>
<obrázok>
<imgsrc="nejaka-url.jpg"alt="počítačová myš">
<figcaption>Toto je počítačová myšfigcaption>
obrázok>
oddiele>
Hlavná>
<päta>
<p> Vyrobené spoločnosťou ComputerTech © 2023p>
päta>
telo>
html>
Vyššie uvedený kód pridá pätu do Časti počítača stránku, ako je znázornené na nasledujúcom obrázku.
Prečo používať sémantické prvky HTML?
Použitie sémantických prvkov HTML dáva kódu kontext. Každý, kto sa pozrie na kód, ho ľahko pochopí. Značky uľahčujú štýlovanie prvkov a spoluprácu na projektoch.
Sémantické HTML môžete použiť s frontend knižnicami a frameworkami. Väčšina moderných webových prehliadačov uprednostňuje sémantické prvky HTML pred tradičnými prvkami. Začnite používať sémantické HTML a sledujte, ako váš kód vyzerá moderne, čitateľne a prezentovateľne.
