Štruktúra obsahu HTML: kompletný sprievodca tvorbou solídnych stránok

Domov » Pytón » Štruktúra obsahu HTML: kompletný sprievodca tvorbou solídnych stránok

Naučiť sa štruktúrovať obsah v HTML je rozdiel medzi stránkou, ktorá jednoducho „zobrazuje niečo na obrazovke“, a stránkou, ktorá sa ľahko ovláda, je prístupná a optimalizovaná pre vyhľadávače. Keď je váš HTML kód usporiadaný s jasnou hierarchiou, prehliadače, vyhľadávače a asistenčné technológie okamžite pochopia, čo každá sekcia znamená a ako to všetko do seba zapadá.

Namiesto toho, aby ste HTML vnímali len ako spôsob pridávania značiek na stránku, je lepšie ho vnímať ako plán vášho dokumentu. Pomocou pevnej štruktúry definujete, kde sa nachádza váš hlavný obsah, ako súvisia nadpisy, čo je navigácia, čo sú sekundárne informácie a ktoré časti v hlavičke opisujú samotný dokument. V tejto príručke sa podrobne zameriame na štruktúru obsahu v HTML: od globálnej kostry stránky, cez nadpisy, sémantiku, prístupnosť až po niektoré konkrétne vzory rozloženia pre reálne stránky.

1. Globálna kostra HTML dokumentu

Každý HTML dokument začína rovnakou štruktúrou na vysokej úrovni: doctype, html, head a body. Môže to vyzerať ako štandardný text, ale každá jeho časť hrá kľúčovú úlohu v tom, ako prehliadač analyzuje a vykresľuje váš obsah a ako vyhľadávače interpretujú vašu stránku.

Úplne prvý riadok je deklarácia doctype, zapísaná ako v HTML5. Táto inštrukcia nevytvára viditeľný výstup; prehliadaču hovorí, aby použil štandardný režim namiesto režimu zvláštnych vlastností, čím sa zabráni zastaranému správaniu vykresľovania, ktoré môže úplne narušiť vaše rozloženie alebo CSS.

Hneď za doctype nasleduje koreňový element , ktorý zalomí celý dokument. Takmer všetko – metadáta dokumentu aj viditeľná stránka – sa nachádza vo vnútri … Tu tiež deklarujete ľudský jazyk dokumentu pomocou atribútu lang, napríklad pre angličtinu alebo pre španielčinu zo Španielska.

Deklarovanie jazyka pomocou lang je nevyhnutné pre prístupnosť, SEO a prekladateľské nástroje. Čítačky obrazovky ho používajú na výber správnych pravidiel výslovnosti, vyhľadávače a automatické prekladače ho používajú na pochopenie primárneho jazyka a CSS dokáže dokonca zacieliť na štýl špecifický pre daný jazyk pomocou selektorov ako [lang|=”fr”] alebo :lang(en).

Vnútri koreňového html elementu máte vždy dva priame potomky: a . Hlavička obsahuje všetky metadáta a zdroje potrebné na interpretáciu a prezentáciu stránky (kódovanie, názov, CSS, ikony, kanonické URL adresy atď.), zatiaľ čo telo obsahuje obsah, ktorý používatelia skutočne vidia a s ktorým interagujú v okne prehliadača.

2. Čo patrí do (a prečo je to dôležité)

Sekcia hlavičky je pre vidiacich návštevníkov neviditeľná, ale je absolútne kľúčová pre to, ako sa vaša stránka správa, funguje a ako sa umiestňuje vo vyhľadávaní. Informácie, ktoré sem uvediete, slúžia vyhľadávačom, sociálnym platformám, prehliadačom a zariadeniam ako spravovať a prezentovať vašu stránku.

Jedna z prvých vecí vo vnútri by mala byť deklarácia kódovania znakov pomocou . UTF-8 je štandard pre HTML5, podporuje prakticky všetky znaky a emoji a zabezpečuje správnu interpretáciu vašich názvov, textu, CSS a JavaScriptu bez ohľadu na jazyk alebo symboly, ktoré používate.

Každá stránka musí tiež definovať jedinečný a popisný prvok. Obsah vo vnútri … zobrazuje sa na karte prehliadača, v záložkách, v histórii prehliadača a predovšetkým ako primárny klikateľný nadpis na stránkach s výsledkami vyhľadávania, pokiaľ nie je prepísaný špecifickými metaznačkami. Z hľadiska SEO je to jeden z najhodnotnejších textových prvkov vo vašom dokumente.

Ďalším takmer povinným meta elementom v moderných rozloženiach je deklarácia viewportu. Používanie Mobilným prehliadačom poviete, aby prispôsobili rozloženie šírke zariadenia namiesto zmenšovania dizajnu pre počítače na malú obrazovku, čo je nevyhnutné pre responzívny dizajn a pre absolvovanie základných auditov mobilných zariadení a prístupnosti.

Okrem znakovej sady, názvu a zobrazovacej oblasti je záhlavie miestom, kde definujete väčšinu metadát, štýlov a kľúčových odkazov. Patria sem SEO orientované meta popisy, súbory CSS, ikony stránok, alternatívne jazykové verzie, kanonické adresy URL, webové manifesty, predbežné prepojenia a mnoho ďalšieho. Všetky tieto prvky nepriamo prispievajú k tomu, ako je štruktúra vášho obsahu chápaná a ako sa vaša stránka javí ako použiteľná.

Základné metadáta a štrukturálne zdroje

CSS je zvyčajne pripojený vo vnútri pomocou . Externé štýly oddeľujú prezentáciu od štruktúry, možno ich ukladať do vyrovnávacej pamäte naprieč stránkami pre lepší výkon a pomáhajú udržiavať jeden zdroj pravdivých údajov pre váš dizajnový systém.

Môžete tiež zahrnúť CSS do block within , or even import additional stylesheets from there. Napríklad vývojári niekedy používajú @import vo vnútri značky štýlu na umiestnenie šablóny so štýlmi do špecifickej kaskádovej vrstvy alebo deklarujú vlastné vlastnosti CSS (premenné) na úrovni :root predtým, ako sa na ne odkazujú v rámci celého webu.

Ten/Tá/To Prvok slúži na viac účelov než len na štýlové šablóny. Zmenou atribútu rel môžete odkazovať na favicon pomocou rel=”icon”, definovať alternatívne jazykové verzie pomocou rel=”alternate” a hreflang, zadať kanonickú URL adresu pomocou rel=”canonical” alebo odkazovať na manifesty aplikácií a ďalšie vzťahy, o ktorých by mali prehliadače a prehľadávače vedieť.

Definovanie ikon pomocou zabezpečuje, že vaša značka bude rozpoznateľná na karte a v záložkách prehliadača. Môžete zadať rôzne veľkosti alebo typy (napríklad PNG alebo SVG) a dokonca poskytnúť špeciálne ikony pre platformy ako iOS s rel=”apple-touch-icon” alebo maskovať ikony pre pripnuté karty v Safari.

Alternatívne odkazy sú kľúčové pre viacjazyčné nastavenia alebo nastavenia syndikácie obsahu. Keď používate Napríklad vyhľadávačom oznamujete, že existuje francúzska verzia tej istej stránky a na akú kombináciu jazyka/regiónu je zacielená. Podobne môžu alternatívne odkazy smerovať na RSS kanály alebo varianty PDF, ak zadáte vhodný typ.

Kanonické URL adresy, skripty a zriedka používané

Kanonické odkazy s parametrom rel="canonical" pomáhajú riešiť situácie s duplicitným obsahom tým, že označujú, ktorá URL adresa je autoritatívnym zdrojom. Ak ten istý článok existuje na viacerých cestách alebo je zverejnený na iných doménach, kanonická URL adresa zjednocuje signály hodnotenia a zabráni vyhľadávaču hádať, ktorú verziu má indexovať.

JavaScript je pripojený pomocou element, which can either embed inline code or reference an external file through the src attribute. Keďže JavaScript štandardne blokuje vykresľovanie, mnoho vývojárov umiestňuje značky skriptov na koniec tela kódu alebo používa atribúty defer alebo async, aby sa obsah HTML mohol vykresliť pred spustením skriptov.

Atribút defer informuje prehliadač, aby stiahol skript bez blokovania vykresľovania a spustil ho po úplnom analyzovaní HTML. Naproti tomu asynchrónna metóda sa tiež vyhýba blokovaniu počas sťahovania, ale spúšťa skript hneď, ako je pripravený, čo môže potenciálne prerušiť tok analýzy, čo môže byť problém, keď skript závisí od prvkov DOM definovaných neskôr v dokumente.

Ten/Tá/To Prvok , ktorý sa zobrazuje iba v hlavičke, definuje základnú URL adresu a predvolený cieľ pre všetky relatívne odkazy. Nastavením V podstate tak prehliadaču poviete, že každá relatívna URL adresa na stránke by sa mala vyhodnotiť z daného koreňového adresára a voliteľne otvoriť v konkrétnom kontexte prehliadania, ako je napríklad nové okno alebo rámec najvyššej úrovne.

Hoci môže byť silný, má vedľajšie účinky, najmä pre kotvy na stránke a relatívne cesty k zdrojom. V jednom dokumente je povolený iba jeden základný element, musí sa nachádzať pred všetkými relatívnymi URL adresami a transformuje jednoduché kotvy (anchors) na úplné URL požiadavky s fragmentmi pripojenými k základnému href.

3. Vrstva viditeľného obsahu: a sémantické rozloženie

Všetko, čo používatelia skutočne vidia a s čím interagujú, sa nachádza vo vnútri prvok. Tu štruktúrujete svoj obsah pomocou sémantických prvkov, ktoré opisujú úlohu každej časti stránky: navigácia, hlavný obsah, články, bočné panely, päty a ďalšie.

HTML5 zaviedol sadu sémantických prvkov rozloženia, ktoré nahradili generické kontajnery v mnohých situáciách. Prvky ako napríklad , , , , , a opisujú význam namiesto obyčajného vzhľadu, čo pomáha asistenčným technológiám a vyhľadávačom vytvoriť si mentálnu mapu vašej stránky.

zvyčajne obsahuje úvodný obsah alebo navigáciu pre stránku alebo pre konkrétnu sekciu. Môže to zahŕňať logo, názov stránky, hlavné menu alebo hlavný nadpis. Hlavičku na úrovni stránky môžete mať v hornej časti tela a ďalšie hlavičky vo vnútri sekcií alebo článkov, ak potrebujete podúvody.

je určený pre navigačné bloky a zvyčajne sa používa pre hlavné ponuky alebo skupiny dôležitých odkazov. Hlavnú navigáciu môžete umiestniť do hlavičky, ale navigácia sa môže zobraziť aj inde, napríklad v bočnom paneli alebo päte, pokiaľ sa používa na navigáciu a nie na generické súbory nesúvisiacich odkazov.

označuje jedinečný, ústredný obsah stránky a mal by sa v každom dokumente objaviť iba raz. V rámci hlavnej stránky si zvyčajne usporiadate obsah pomocou pre tematické bloky, pre nezávislé príspevky, ako sú blogové príspevky alebo správy, a pre súvisiace, ale sekundárne informácie, ako sú poznámky, reklamy alebo doplnková navigácia.

Sekcie, články, odstavce a päty

predstavuje tematicky odlišný blok obsahu, zvyčajne s vlastným nadpisom. Môže to byť kapitola v dlhom článku, blok „Funkcie“ na stránke produktu alebo časť vašej domovskej stránky, ako napríklad „Referencie“ alebo „Cenník“. Sekcie pomáhajú rozdeliť zložité dokumenty na logické časti.

sa používa pre samostatný obsah, ktorý môže obstáť samostatne mimo okolitého kontextu. Medzi príklady patria blogové príspevky, záznamy v dokumentácii, komentáre používateľov, správy alebo správy na fóre. Článok často obsahuje vlastnú hlavičku (s názvom, autorom a dátumom) a pätu (s tagmi, odkazmi na zdieľanie alebo metadátami).

je vyhradené pre obsah, ktorý sa len okrajovo vzťahuje na hlavný tok, ako sú bočné panely, citáty, súvisiace odkazy alebo reklamné bloky. Keďže jeho účel je doplnkový, čítačky obrazovky a ďalšie nástroje s ním môžu zaobchádzať zodpovedajúcim spôsobom a používatelia tak môžu ľahšie rozlíšiť hlavný príbeh od sekundárnych prvkov.

zobrazuje sa na konci sekcie alebo v dolnej časti celej stránky. Päta na úrovni stránky zvyčajne obsahuje upozornenia na autorské práva, kontaktné informácie, sekundárnu navigáciu, právne odkazy alebo informácie o autoroch stránok, zatiaľ čo päta na úrovni článku môže obsahovať životopisy autorov, kategórie, dátumy aktualizácií alebo súvisiace príspevky.

Flexibilita týchto prvkov znamená, že ich môžete kombinovať a vkladať tak, aby zodpovedali vášmu dizajnu, ale dodržiavanie ich zamýšľaného významu udrží váš HTML kód prenosný a zrozumiteľný. Napríklad môžete oprávnene umiestniť nav do hlavičky alebo inde v tele stránky, ale nemali by ste ho používať pre náhodné sady odkazov, ktoré nie sú súčasťou navigácie, ani používať main viackrát na stránke.

4. Hierarchia nadpisov a textová štruktúra

Nadpisy sú chrbticou štruktúry vášho obsahu a definujú hierarchiu tém a podtém v celom dokumente. HTML poskytuje šesť úrovní nadpisov, od (najdôležitejšie) až do (najmenej dôležité) a spôsob, akým ich usporiadate, ovplyvňuje ľudských čitateľov aj vyhľadávače.

Zvyčajne existuje jeden ktorý vyjadruje hlavnú tému stránky, za ktorou nasleduje pre primárne sekcie a - pre hlbšie podsekcie. Keď dva nadpisy zdieľajú rovnakú úroveň, predstavujú súrodenecké sekcie, zatiaľ čo nadpis nižšej úrovne predstavuje vnorenú podsekciu v rámci predchádzajúcej podsekcie vyššej úrovne.

Odseky a ďalší obsah, ktoré nasledujú za nadpisom, patria do sekcie definovanej týmto nadpisom. Keď sa objaví nový nadpis rovnakej úrovne, predchádzajúca sekcia sa považuje za uzavretú a začína sa nová. Túto implicitnú štruktúru používajú asistenčné technológie na vytvorenie osnovy, cez ktorú môžu používatelia rýchlo preskočiť.

Ľubovoľné preskakovanie úrovní – napríklad priamy skok z h1 na h4 – môže zmiasť automatizované nástroje aj čítačky. Všeobecným odporúčaním je postupovať v hierarchii krok za krokom: od h1 po h2 pre podsekcie, potom voliteľne po h3 atď., pričom pri hlbšom vnorení obsahu postupne zostupujte iba o jednu úroveň.

Prehliadače zvyčajne používajú na nadpisy predvolené štýly: väčšie veľkosti písma, tučné písmo a väčšie zvislé medzery. Tieto vstavané štýly už robia štruktúru vizuálne zreteľnou, ale prezentáciu môžete spresniť pomocou CSS a zároveň zachovať základnú sémantickú hierarchiu.

Odseky, zoznamy a vložená sémantika

Normálny textový obsah sa presúva do prvky, z ktorých každý predstavuje samostatný odsek. Zachovanie jednej hlavnej myšlienky na odsek zlepšuje čitateľnosť a je v súlade s tým, ako asistenčné technológie umožňujú používateľom navigovať v blokoch textu.

Usporiadané zoznamy ( ) a neusporiadané zoznamy ( ) s Položky sú ideálne pre zoskupené informácie, ako sú kroky, funkcie alebo najčastejšie otázky. Usporiadané zoznamy vyjadrujú postupnosť alebo prioritu, zatiaľ čo neusporiadané zoznamy jednoducho zoskupujú súvisiace položky bez toho, aby naznačovali poradie; obe sú mimoriadne užitočné na štruktúrovanie zložitých vysvetlení.

Vložené prvky ako , , , a ďalšie obohacujú obsah bez toho, aby narušili plynulosť odseku. vyjadruje silný význam (a zvyčajne sa zobrazuje tučným písmom), zdôrazňuje text (často kurzívou) a vytvára hypertextové odkazy, ktoré prepájajú dokumenty na vašej stránke alebo s externými zdrojmi.

Obrázky s sa považujú za nahradené prvky a neobalujú obsah, ale stále sa podieľajú na sémantickej štruktúre prostredníctvom atribútov ako alt. Atribút alt je obzvlášť dôležitý pre prístupnosť a SEO, pretože popisuje obrázok používateľom, ktorí ho nevidia, a vyhľadávačom, ktoré analyzujú iba text.

Premyslené kombinovanie blokových a inline elementov vám umožňuje vyjadriť hierarchiu, vzťahy a dôraz čisto prostredníctvom HTML, pričom vizuálne detaily, ako sú farby, písma a medzery, ponecháva na CSS. Toto oddelenie záujmov udržiava vaše značky čisté a uľahčuje neskoršie zmeny dizajnu.

5. Prístupnosť a jazyk v štruktúre obsahu

Dobre štruktúrovaný HTML dokument nie je len o tom, aby vyzeral úhľadne; je predpokladom pre prístupnosť. Ľudia, ktorí sa spoliehajú na čítačky obrazovky, navigáciu pomocou klávesnice alebo iné asistenčné technológie, sa spoliehajú na sémantiku vášho HTML, aby pochopili obsah a efektívne sa v ňom pohybovali.

Deklarovanie jazyka dokumentu pomocou lang na Prvok je jedným z prvých krokov prístupnosti. Keď je jazyk explicitný, čítačky obrazovky vyberú správnu výslovnosť a slovníky a automatizované prekladové nástroje spracujú váš obsah presnejšie naprieč regiónmi a dialektmi.

Zmeny jazyka môžete tiež označiť vo vnútri tela pomocou prvkov lang, ako napríklad alebo . Keď sa fragment prepne do iného jazyka, nastavenie parametra lang=”fr-CA” alebo lang=”pt-BR” v danom úryvku signalizuje pomocným nástrojom, že pravidlá výslovnosti a čítania by sa mali zmeniť len pre túto časť.

Okrem jazyka tvoria jadro prístupnej štruktúry nadpisy, orientačné body a alternatívny text. Jasná hierarchia nadpisov, správne používanie atribútov main, nav, hlavička, päta, sekcia a aside, plus zmysluplné atribúty alt na obrázkoch umožňujú asistenčným technológiám vytvoriť osnovu a poskytnúť orientačnú navigáciu, ako napríklad „skok na hlavný obsah“ alebo „prejsť na navigáciu“.

Farba a vizuálny štýl by nikdy nemali byť jediným spôsobom, ako vyjadriť dôležité informácie. Vysoký kontrast, čitateľné veľkosti písma, stavy zaostrenia pre interaktívne prvky a popisné texty odkazov, ako napríklad „Prečítajte si viac o požiarnej prevencii“ namiesto len „Kliknite sem“, sú súčasťou toho, aby bol váš štruktúrovaný obsah použiteľný pre čo najviac ľudí.

Overovanie HTML kódu a vykonávanie kontrol prístupnosti pomocou automatizovaných nástrojov a manuálnych testov pomáha včas odhaliť štrukturálne problémy. Nástroje dokážu odhaliť chýbajúce atribúty alt, neplatné vnorenie, poškodené sekvencie nadpisov alebo nesprávne použitie orientačných bodov, pričom všetky tieto problémy je možné opraviť priamo vo vašom kóde skôr, ako ovplyvnia skutočných používateľov.

6. Plánovanie štruktúry obsahu webovej stránky

Predtým, ako napíšete čo i len jeden tag, sa oplatí naplánovať logickú štruktúru vašej lokality a stránok. Myslenie z hľadiska sekcií, informačných priorít a navigačných tokov vedie k HTML, ktoré sa ľahšie udržiava, rozširuje a optimalizuje pre vyhľadávače.

Bežným východiskovým bodom je načrtnutie mapy stránok alebo štrukturálneho diagramu webovej stránky. Zvyčajne to zahŕňa stránky najvyššej úrovne, ako napríklad Domov, O nás, Služby, Blog, Kontakt a potom akékoľvek podstránky alebo kategórie, ktoré sa od nich oddeľujú a ukazujú, ako sa medzi nimi používatelia budú pohybovať.

V rámci jednej stránky si môžete zmapovať budúcu štruktúru HTML ako sériu sémantických blokov. Napríklad môžete definovať hlavičku s logom a navigačným panelom, hlavnú oblasť s niekoľkými sekciami (hrdina, funkcie, referencie, ceny), priestor pre sekundárny obsah a pätu s kontaktnými informáciami a právnymi odkazmi.

Priradenie nadpisov k týmto blokom už v ranom štádiu udržiava hierarchiu h1-h6 súdržnú. Vopred sa rozhodnete, aký bude jeden nadpis h1, ktoré sekcie si zaslúžia nadpisy h2 a kde sú potrebné hlbšie podnadpisy ako h3 alebo h4 na vysvetlenie zložitých tém bez toho, aby čitateľa zahltili.

Z hľadiska SEO a UX je rozumné umiestniť kľúčový obsah a dôležité sekcie skôr v DOM. Vyhľadávače vo všeobecnosti venujú väčšiu pozornosť obsahu v hornej časti dokumentu a používatelia oceňujú rýchle nájdenie primárnych informácií, než aby museli rolovať okolo dlhých úvodov alebo dekoratívnych prvkov.

Najlepšie postupy pre udržiavateľné HTML štruktúry

V prípade potreby použite na označenie štrukturálnych prvkov popisné názvy tried a ID, ale vyhnite sa nadmernému vnoreniu prvkov div. Triedy ako .main-nav, .site-header alebo .sidebar vám na prvý pohľad povedia, čo komponent robí, vďaka čomu sa váš HTML a CSS oveľa ľahšie čítajú aj o niekoľko mesiacov neskôr.

Udržujte svoj HTML kód čo najplochejší a zároveň vyjadrujte skutočnú hierarchiu. Hlboko vnorené kontajnery, ktoré existujú len na styling, sa dajú často nahradiť premyslenejším CSS, čo vedie k čistejšiemu a ľahšiemu značkovaniu, s ktorým sa ľahšie pracuje každému.

Zoskupujte súvisiaci obsah v rámci sémantických prvkov namiesto jeho rozptýlenia po stránke. Napríklad blogový príspevok by mal byť umiestnený v článku, pričom jeho názov, dátum, autor a obsah by mali byť spolu, zatiaľ čo súvisiace príspevky alebo životopis autora môžu byť umiestnené v odstavci alebo v päte článku, jasne oddelené od hlavného príbehu.

Vždy, keď rozšírite stránku alebo prepracujete sekciu, si prehodnoťte svoju štruktúru. V HTML dokumentoch sa časom ľahko hromadia jednorazové obaly a ad-hoc prvky, takže ich pravidelné refaktorovanie späť do koherentného sémantického tvaru sa vypláca z hľadiska udržiavateľnosti, výkonu a dostupnosti.

Dokumentovanie štrukturálnych vzorcov – napríklad spôsobu, akým vytvárate hlavičky, sekcie, články a päty – pomáha udržiavať konzistentnosť vo veľkých tímoch. Malá interná smernica, ktorá vysvetľuje, ktoré prvky použiť na navigáciu, ako organizovať nadpisy a ako označovať opakujúce sa komponenty, môže zabrániť tomu, aby sa vaša kódová základňa zmenila na štrukturálnu mozaiku.

7. Praktické štruktúrne vzory pre bežné typy stránok

Rôzne druhy stránok majú tendenciu zdieľať štrukturálne vzory, ktoré môžete opätovne použiť a prispôsobiť v rôznych projektoch. Rozpoznanie týchto vzorcov vám pomôže navrhnúť štruktúry obsahu, ktoré budú pre používateľov pôsobiť prirodzene a budú sa dať jednoducho implementovať v HTML.

Typická domovská stránka môže začínať globálnym obsahujúci logo a primárne . Toto často nasleduje s viacerými bloky: hlavná sekcia s h1 a výzvou na akciu, sekcia funkcií, prípadne sekcia s referenciami a záverečná sekcia, ktorá pozýva používateľov, aby sa s nami spojili alebo sa zaregistrovali.

Pod hlavným obsahom sa nachádza zvyčajne poskytuje globálne informácie a doplnkovú navigáciu. Odkazy na zásady ochrany osobných údajov, zmluvné podmienky, možnosti kontaktu, sociálne siete a sekundárne ponuky sa nachádzajú tu, vďaka čomu ich ľahko nájdete bez toho, aby odvádzali pozornosť od hlavného obsahu uvedeného vyššie.

Stránka s blogovým príspevkom je perfektným kandidátom na prvok. Článok zvyčajne obsahuje vlastnú hlavičku s názvom príspevku (často h1 stránky), dátumom publikovania a údajmi o autorovi, za ktorou nasleduje telo príspevku rozdelené do sekcií s nadpismi h2/h3 a nakoniec pätu článku obsahujúcu značky, tlačidlá na zdieľanie alebo odkazy na súvisiaci obsah.

Bočné panely alebo sekundárne panely sú prirodzene reprezentované prvky. Môžu zahŕňať zoznamy nedávnych príspevkov, filtre kategórií, formuláre na prihlásenie sa na odber noviniek alebo kontextovú pomoc. Keďže aside je sémanticky označený ako doplnkový obsah, asistenčné technológie ho môžu používateľom takto prezentovať.

Kontaktné stránky a stránky služieb používajú rovnaké stavebné bloky, ale kladú dôraz na prehľadnosť a jednoduchosť interakcie. Jasné nadpisy, stručné odseky, správne označené ovládacie prvky formulára a logické poradie čítania zabezpečujú, že používatelia nájdu spôsob, ako vás kontaktovať alebo pochopiť vašu ponuku bez dohadov.

8. HTML elementy, atribúty a ich úloha v štruktúre

Pod všetkými týmito vzormi sa všetko v HTML redukuje na prvky, značky a atribúty. Pochopenie toho, ako spolupracujú, vám poskytuje presnú kontrolu nad štruktúrou obsahu, prezentačnými funkciami a správaním.

HTML element sa skladá z otváracej značky, voliteľných atribútov, určitého obsahu a vo väčšine prípadov zo zatváracej značky. Napríklad, Toto je odsek. obsahuje štartovací tag , textový uzol a koncová značka , ktoré všetky spolu predstavujú element odseku.

Atribúty sa zobrazujú vo vnútri úvodnej značky a poskytujú ďalšie informácie o elemente. Dodávajú sa ako páry name=”value”, napríklad class=”highlight”, id=”intro” alebo href=”/contact”. Niektoré atribúty sú globálne a môžu sa zobraziť na ľubovoľnom prvku (ako class, id, lang), zatiaľ čo iné sú špecifické pre určité značky (ako src pre img alebo type pre input).

Triedy sú obzvlášť dôležité pre štruktúrovanie a štýlovanie väčších dokumentov. Priradením rovnakej triedy viacerým prvkom – napríklad class=”important” – môžete použiť bežné pravidlá CSS alebo ich zacieliť v JavaScripte, čím si zachováte flexibilitu a zároveň spravovateľnosť štruktúry.

Nie všetky prvky potrebujú uzatváracie značky; niektoré sú prázdne (void) prvky, ktoré nemajú obsah. Prvky ako , , a patria do tejto kategórie. Stále sa podieľajú na vašej štruktúre, ale iba prostredníctvom svojich atribútov, pretože neobalujú žiadny vnútorný text ani deti.

Konzorcium World Wide Web (W3C) spravuje špecifikáciu, ktorá definuje, ako všetky tieto prvky a atribúty spolupracujú. Dodržiavanie týchto štandardov zabezpečuje interoperabilitu vašich stránok v rôznych prehliadačoch a zariadeniach a zabezpečuje, že vaša starostlivo navrhnutá štruktúra obsahu sa bude správať predvídateľne pre každého návštevníka.

Uvedenie tohto všetkého do praxe znamená zaobchádzať s HTML ako so sémantickou chrbticou vašej stránky: jasná osnova dokumentu, presné použitie nadpisov, premyslené rozloženie s hlavným, sekciovým, článkovým, vedľajším a pätovým prvkom, prístupné metadáta v hlavičke a zmysluplné atribúty v každom prvku spoločne uľahčujú čítanie, navigáciu a dobré umiestnenie vášho obsahu vo vyhľadávačoch.