- Kasutage brauseritele ja otsingumootoritele etteaimatava ja standarditele vastava struktuuri andmiseks õigesti DOCTYPE'i, HTML-i, HEAD-i ja body-d.
- Struktureeri nähtavat sisu semantiliste elementide (päis, navigeerimine, põhiread, jaotis, artikkel, kõrvalread, jalus) ja selge h1–h6 pealkirjahierarhia abil.
- Tõhustage ligipääsetavust ja SEO-d keele deklareerimise, orientiiride kasutamise, sisuka alt-teksti kirjutamise ja HTML-i valideerimise abil.
- Planeeri lehe ja saidi struktuur ette, et iga dokument oleks järjepidev, hõlpsasti navigeeritav ja aja jooksul lihtsalt hooldatav.
HTML-i sisu struktureerimise õppimine eristab lehte, mis lihtsalt "näitab midagi ekraanil", lehest, mis on hõlpsasti navigeeritav, ligipääsetav ja SEO-sõbralik. Kui teie HTML on korraldatud selge hierarhia abil, saavad brauserid, otsingumootorid ja abitehnoloogiad koheselt aru, mida iga jaotis tähendab ja kuidas see kõik kokku sobib.
Selle asemel, et mõelda HTML-ist kui lihtsalt viisist siltide lehele lisamiseks, on kasulik näha seda kui dokumendi kavandit. Kindla struktuuriga määratlete, kus asub teie põhisisu, kuidas pealkirjad on omavahel seotud, mis on navigeerimine, mis on teisejärguline teave ja millised osad kirjeldavad dokumenti ennast päises. Selles juhendis käsitleme HTML-i sisustruktuuri põhjalikult: alates lehe globaalsest skeletist kuni pealkirjade, semantika, ligipääsetavuse ja mõnede konkreetsete paigutusmustriteni reaalsete lehtede jaoks.
1. HTML-dokumendi globaalne skelett
Iga HTML-dokument algab sama kõrgetasemelise struktuuriga: doctype, html, head ja body. See võib tunduda standardse struktuurina, kuid igal osal on oluline roll selles, kuidas brauser teie sisu analüüsib ja renderdab ning kuidas otsingumootorid teie lehte tõlgendavad.
Kõige esimene rida on doctype'i deklaratsioon, mis HTML5-s kirjutatakse kujul <!DOCTYPE html>. See käsk ei anna nähtavat väljundit; see käsib brauseril kasutada standardrežiimi quirks-režiimi asemel, vältides vananenud renderduskäitumist, mis võib teie paigutuse või CSS-i täielikult rikkuda.
Kohe pärast doctype'i tuleb juurelement <html>, mis ümbritseb kogu dokumenti. Peaaegu kõik – nii dokumendi metaandmed kui ka nähtav leht – asub <html>…</html> sees. Siin deklareeritakse ka dokumendi inimkeel atribuudi lang abil, näiteks <html lang=”en”> inglise keele või <html lang=”es-ES”> hispaania keele (Hispaania) jaoks.
Keele deklareerimine atribuudiga lang on oluline ligipääsetavuse, SEO ja tõlketööriistade jaoks. Ekraanilugejad kasutavad seda õigete hääldusreeglite valimiseks, otsingumootorid ja automaattõlkijad kasutavad seda põhikeele mõistmiseks ning CSS saab isegi keelespetsiifilist stiili sihtida, kasutades selektoreid nagu [lang|=”fr”] või :lang(en).
Juurelemendi HTML sees on alati kaks otsest tütarelementi: <head> ja <body>. Päis sisaldab kõiki lehe tõlgendamiseks ja esitamiseks vajalikke metaandmeid ja ressursse (kodeering, pealkiri, CSS, ikoonid, kanoonilised URL-id jne), samas kui keha sisaldab sisu, mida kasutajad brauseriaknas tegelikult näevad ja millega nad suhtlevad.
2. Mis sinna kuulub (ja miks see oluline on)
Päiseosa on nägevatele külastajatele nähtamatu, kuid see on teie saidi käitumise, toimivuse ja edetabelikoha jaoks ülioluline. Siia sisestatud teave juhendab otsingumootoreid, sotsiaalmeediaplatvorme, brausereid ja seadmeid, kuidas teie lehte hallata ja esitleda.
Üks esimesi asju <head> sees peaks olema märgikodeeringu deklaratsioon, kasutades <meta charset=”utf-8″ />. UTF-8 on HTML5 standard, mis toetab praktiliselt kõiki märke ja emotikone ning tagab, et teie pealkirjad, tekst, CSS ja JavaScript tõlgendatakse õigesti olenemata kasutatavast keelest või sümbolitest.
Igal lehel peab olema ka unikaalne ja kirjeldav <title> element. <title>…</title> sees olev sisu kuvatakse brauseri vahekaardil, järjehoidjates, brauseriajaloos ja mis kõige tähtsam, otsingumootori tulemuste lehtedel peamise klikitava pealkirjana, välja arvatud juhul, kui seda kirjutatakse üle konkreetsete metamärgenditega. SEO seisukohast on see teie dokumendi üks väärtuslikumaid tekstiosi.
Teine peaaegu kohustuslik metaelement tänapäevastes paigutustes on vaatepordi deklaratsioon. Kasutades parameetrit <meta name=”viewport” content=”width=device-width, initial-scale=1″ />, antakse mobiilibrauseritele käsk paigutuse suuruse kohandada seadme laiusele, selle asemel, et töölaua kujundust pisikeseks ekraanile kahandada, mis on ülioluline reageeriva disaini ja mobiilseadmete ning ligipääsetavuse auditite läbimise jaoks.
Lisaks kooditabelile, pealkirjale ja vaateväljale on päis see koht, kus saate määratleda enamiku oma metaandmetest, stiilidest ja peamistest linkidest. See hõlmab SEO-keskseid metakirjeldusi, CSS-faile, saidi ikoone, alternatiivseid keeleversioone, kanoonilisi URL-e, veebimanifeste, eelühendusi ja palju muud. Kõik need osad aitavad kaudselt kaasa sellele, kuidas teie sisustruktuuri mõistetakse ja kui kasutatav teie sait tundub.
Olulised metaandmed ja struktuuriressursid
CSS on tavaliselt ühendatud <head> sees, kasutades <link rel=”stylesheet” href=”styles.css”>. Välised stiililehed hoiavad esitluse struktuurist eraldi, neid saab parema jõudluse tagamiseks vahemällu salvestada erinevatele lehtedele ning need aitavad säilitada ühtset tõelist allikat teie disainisüsteemi jaoks.
CSS-i saab lisada ka <style>-plokki <head>-i sees või isegi importida sealt täiendavaid stiililehti. Näiteks kasutavad arendajad mõnikord stiilisildi sees @import-i, et paigutada stiilileht kindlale kaskaadkihile või deklareerida CSS-i kohandatud omadusi (muutujaid) :root tasemel enne neile saidil viitamist.
<link> element täidab enamat kui lihtsalt stiililehti. Atribuudi rel muutmisega saate viidata faviconile atribuudiga rel=”icon”, defineerida alternatiivseid keeleversioone atribuutide rel=”alternate” ja hreflang abil, määrata kanoonilise URL-i atribuudiga rel=”canonical” või viidata rakenduse manifestidele ja muudele seostele, millest brauserid ja robotid peaksid teadma.
Ikoonide defineerimine atribuudiga <link rel=”icon” …> tagab teie brändi äratuntavuse brauseri vahekaardil ja järjehoidjates. Saate määrata erinevad suurused või tüübid (nt PNG või SVG) ja isegi pakkuda spetsiaalseid ikoone platvormidele nagu iOS atribuudiga rel=”apple-touch-icon” või maskeerida ikoone kinnitatud vahekaartide jaoks Safaris.
Alternatiivsed lingid on üliolulised mitmekeelsete või sisusündikatsiooni seadistuste puhul. Näiteks kui kasutate linki <link rel=”alternate” href=”…” hreflang=”fr-FR” />, annate otsingumootoritele teada, et samast lehest on olemas prantsuskeelne versioon ja millist keele/regiooni kombinatsiooni see sihib. Samamoodi võivad alternatiivsed lingid viidata RSS-voogudele või PDF-variantidele, kui määrate sobiva tüübi.
Kanoonilised URL-id, skriptid ja harva kasutatavad
Kanoonilised lingid atribuudiga rel=”canonical” aitavad lahendada duplikaatsisu olukordi, näidates, milline URL on autoriteetne allikas. Kui sama artikkel eksisteerib mitmel teel või on postitatud teistele domeenidele, koondab kanooniline URL edetabelisignaale ja hoiab ära otsingumootori peatamise, millist versiooni indekseerida.
JavaScripti manustatakse elemendi <script> abil, mis saab kas manustada tekstisisest koodi või viidata välisele failile atribuudi src kaudu. Kuna JavaScript blokeerib vaikimisi renderdamist, paigutavad paljud arendajad skriptisildid sisu lõppu või kasutavad atribuute defer või async, et HTML-sisu saaks enne skriptide käivitamist renderdada.
Atribuut „defer” annab brauserile märku skripti alla laadida ilma renderdamist blokeerimata ja see käivitada pärast HTML-i täielikku parsimist. Seevastu asünkroonne versioon väldib samuti blokeerimist allalaadimise ajal, kuid käivitab skripti kohe, kui see on valmis, mis võib parsimisvoogu katkestada, mis võib olla probleemiks, kui skript sõltub dokumendis hiljem määratletud DOM-elementidest.
<base> element, mis kuvatakse ainult päises, määratleb baas-URL-i ja vaikesihtmärgi kõigile suhtelistele linkidele. <base href=”https://example.com” target=”_top” /> määramisega annate brauserile sisuliselt teada, et iga lehe suhteline URL tuleks lahendada sellest juurest ja valikuliselt avada konkreetses sirvimiskontekstis, näiteks uues aknas või ülemise taseme raamis.
Kuigi <base> võib olla võimas, on sellel kõrvalmõjusid, eriti lehelisiseste ankrute ja suhteliste ressursiteede puhul. Dokumendi kohta on lubatud ainult üks baaselement, see peab ilmuma enne kõiki suhtelisi URL-e ja see teisendab lihtsad ankrud, näiteks <a href=”#section”>, täielikeks URL-i päringuteks, mille fragmendid on lisatud baas-href-ile.
3. Nähtava sisu kiht: ja semantiline paigutus
Kõik, mida kasutajad tegelikult näevad ja millega suhtlevad, asub elemendi <body> sees. Siin struktureerid oma sisu semantiliste elementidega, mis kirjeldavad lehe iga osa rolli: navigeerimine, põhisisu, artiklid, külgribad, jalused ja palju muud.
HTML5 tutvustas semantilise paigutuse elementide komplekti, mis asendas paljudes olukordades üldised <div> konteinerid. Elemendid nagu <header>, <nav>, <main>, <section>, <article>, <aside> ja <footer> kirjeldavad pelgalt välimuse asemel tähendust, mis aitab abitehnoloogiatel ja otsingumootoritel luua teie lehe mentaalse kaardi.
<header> sisaldab tavaliselt lehe või konkreetse jaotise sissejuhatavat sisu või navigatsiooni. See võib hõlmata logo, saidi pealkirja, peamenüüd või põhipealkirja. Lehekülje tasemel päis võib asuda sisu ülaosas ja lisapäised jaotiste või artiklite sees, kui vajate alapealkirju.
<nav> on pühendatud navigeerimisplokkidele ja seda kasutatakse tavaliselt suuremate menüüde või oluliste linkide rühmade jaoks. Võite paigutada peamise navigeerimise päise sisse, kuid nav võib ilmuda ka mujale, näiteks külgribale või jalusesse, kui seda kasutatakse navigeerimiseks ja mitte üldiste mitteseotud linkide kogumite jaoks.
<main> tähistab lehe ainulaadset ja keskset sisu ning peaks dokumendis esinema ainult üks kord. Maini sees korraldatakse sisu tavaliselt järgmiselt: <section> temaatiliste plokkide, <article> iseseisvate osade, näiteks ajaveebipostituste või uudiste jaoks ja <aside> seotud, kuid teisejärgulise teabe, näiteks kõrvalmärkuste, reklaamide või täiendava navigeerimise jaoks.
Jaotised, artiklid, kõrvalepõiged ja jalused
<section> tähistab temaatiliselt eraldiseisvat sisuplokki, millel on tavaliselt oma pealkiri. See võib olla peatükk pikas artiklis, tootelehe „Funktsioonide“ plokk või osa teie avalehest, näiteks „Iseloomustused“ või „Hinnakujundus“. Jaotised aitavad keerulisi dokumente loogilisteks osadeks jagada.
<article> kasutatakse iseseisva sisu puhul, mis saab kontekstist eraldiseisvalt eksisteerida. Näideteks on ajaveebipostitused, dokumentatsiooni sissekanded, kasutajate kommentaarid, uudised või foorumisõnumid. Artiklil on sageli oma päis (pealkirja, autori ja kuupäevaga) ja jalus (siltide, jagamislinkide või metaandmetega).
<aside> on reserveeritud sisule, mis on põhivooga tangentsiaalselt seotud, näiteks külgribad, tsitaadid, seotud lingid või reklaamiblokid. Kuna selle eesmärk on täiendav, saavad ekraanilugejad ja muud tööriistad seda vastavalt käsitleda ning kasutajad saavad põhinarratiivi teisestest lisadest kergemini eristada.
<jalus> kuvatakse jaotise lõpus või kogu lehe allosas. Lehekülje tasemel jalus sisaldab tavaliselt autoriõiguse märkusi, kontaktandmeid, teisest navigeerimist, juriidilisi linke või saidi viiteid, samas kui artikli tasemel jalus võib sisaldada autorite elulugusid, kategooriaid, värskenduskuupäevi või seotud postitusi.
Nende elementide paindlikkus tähendab, et saate neid oma kujunduse järgimiseks segada ja pesastada, kuid nende kavandatud tähendusest kinnipidamine hoiab teie HTML-i kaasaskantava ja arusaadavana. Näiteks võite navigeerimiselemendi õiguspäraselt paigutada päisesse või mujale teksti sisusse, kuid te ei tohiks navigeerimiselementi kasutada juhuslike linkide komplektide jaoks, mis ei ole osa navigeerimisest, ega kasutada main-elementi mitu korda lehel.
4. Pealkirjade hierarhia ja teksti struktuur
Pealkirjad on sisustruktuuri selgroog, mis määratleb teemade ja alateemade hierarhia kogu dokumendis. HTML pakub kuut pealkirjataset alates <h1> (kõige olulisem) kuni <h6> (kõige vähem oluline) ja see, kuidas te neid korraldate, mõjutab nii inimestest lugejaid kui ka otsingumootoreid.
Tavaliselt on üks <h1>, mis väljendab lehe peamist teemat, millele järgneb <h2> peamiste jaotiste jaoks ja <h3>-<h6> sügavamate alajaotiste jaoks. Kui kaks pealkirja on samal tasemel, esindavad nad sugulasjaotisi, samas kui madalama taseme pealkiri tutvustab eelmise kõrgema taseme pealkirja sees pesastatud alajaotist.
Pealkirjale järgnevad lõigud ja muu sisu kuuluvad selle pealkirjaga määratletud jaotisse. Kui ilmub sama taseme uus pealkiri, loetakse eelmine jaotis suletuks ja algab uus. Seda varjatud struktuuri kasutavad abitehnoloogiad ülevaate loomiseks, mida kasutajad saavad kiiresti läbida.
Tasemete suvaline vahelejätmine – näiteks otse h1-st h4-sse hüppamine – võib segadusse ajada nii automatiseeritud tööriistu kui ka lugejaid. Üldine soovitus on liikuda hierarhias samm-sammult: alajaotiste puhul h1-st h2-ni, seejärel valikuliselt h3-ni ja nii edasi, langedes sisu sügavamale pesastades ainult ühe taseme võrra allapoole.
Brauserid rakendavad pealkirjadele tavaliselt vaikestiile: suuremaid kirjasuurusi, paksu kirja ja suuremat vertikaalset vahet. Need sisseehitatud stiilid muudavad struktuuri juba visuaalselt nähtavaks, kuid esitlust saab CSS-iga täpsustada, säilitades samal ajal aluseks oleva semantilise hierarhia.
Lõigud, loendid ja tekstisisene semantika
Tavaline tekstisisu läheb <p> elementidesse, millest igaüks esindab eraldi lõiku. Ühe põhiidee säilitamine lõigus parandab loetavust ja on kooskõlas sellega, kuidas abitehnoloogiad võimaldavad kasutajatel tekstiplokkides navigeerida.
Järjestatud loendid (<ol>) ja järjestamata loendid (<ul>) koos <li> elementidega sobivad ideaalselt rühmitatud teabe, näiteks sammude, funktsioonide või KKK jaoks. Järjestatud loendid edastavad järjestust või prioriteeti, samas kui järjestamata loendid lihtsalt rühmitavad seotud üksusi ilma järjekorda vihjamata; mõlemad on äärmiselt kasulikud keerukate selgituste struktureerimiseks.
Tekstisisesed elemendid nagu <strong>, <em>, <a>, <span> ja teised rikastavad sisu lõigu voogu katkestamata. <strong> annab edasi olulist rolli (ja kuvatakse tavaliselt paksus kirjas), <em> rõhutab teksti (sageli kursiivis) ja <a href="…"> loob hüperlinke, mis ühendavad teie saidi dokumente või väliste ressurssidega.
Pilte, millel on <img> element, peetakse asendatud elementideks ja need ei kata sisu, kuid osalevad siiski semantilises struktuuris atribuutide, näiteks alt, kaudu. Alt atribuut on eriti oluline ligipääsetavuse ja SEO jaoks, kuna see kirjeldab pilti kasutajatele, kes seda ei näe, ja otsingumootoritele, mis ainult teksti parsivad.
Plokitaseme ja tekstisisesete elementide läbimõeldud kombineerimine võimaldab teil hierarhiat, seoseid ja rõhuasetusi väljendada puhtalt HTML-i abil, jättes visuaalsed detailid, nagu värvid, fondid ja vahed, CSS-i hooleks. See murede eraldamine hoiab teie märgistuse puhtana ja lihtsustab hilisemaid disainimuudatusi.
5. Ligipääsetavus ja keel sisustruktuuris
Hästi struktureeritud HTML-dokument ei ole ainult korraliku välimuse tagamine; see on ligipääsetavuse eeltingimus. Inimesed, kes toetuvad ekraanilugejatele, klaviatuuril navigeerimisele või muudele abitehnoloogiatele, sõltuvad teie HTML-semantikast, et sisust tõhusalt aru saada ja selles liikuda.
Dokumendi keele deklareerimine <html> elemendi lang abil on üks esimesi ligipääsetavuse samme. Kui keel on selgesõnaline, valivad ekraanilugejad õige häälduse ja sõnastikud ning automatiseeritud tõlketööriistad käsitlevad teie sisu täpsemalt eri piirkondades ja dialektides.
Samuti saate keelemuudatusi märkida teksti sees, kasutades lang-märki sellistele elementidele nagu <span> või <p>. Kui fragment lülitub teisele keelele, annab lang=”fr-CA” või lang=”pt-BR” määramine sellele lõigule abivahenditele märku, et hääldus- ja lugemisreeglid peaksid muutuma ainult selle osa jaoks.
Lisaks keelele moodustavad ligipääsetava struktuuri tuuma pealkirjad, orientiirid ja alternatiivtekst. Selge pealkirjade hierarhia, põhi-, navigeerimis-, päise-, jaluse-, jaotise- ja kõrvalriba korrektne kasutamine ning piltidel olevad sisukad atribuudid võimaldavad abitehnoloogiatel luua ülevaate ja pakkuda orientiirinavigatsiooni, näiteks „hüppa põhisisu juurde” või „mine navigeerimisse”.
Olulise teabe edastamiseks ei tohiks kunagi olla ainus viis värvi ja visuaalse kujunduse kasutamine. Suur kontrastsus, loetavad kirjasuurused, interaktiivsete elementide fookusseisundid ja kirjeldavad lingitekstid, näiteks „Loe lähemalt tuleohutusest” lihtsalt „Klõpsa siia” asemel, on kõik osa sellest, et muuta teie struktureeritud sisu võimalikult paljudele inimestele kasutatavaks.
HTML-koodi valideerimine ja ligipääsetavuse kontrollimine automatiseeritud tööriistade ja käsitsi testide abil aitab struktuurilisi probleeme varakult avastada. Tööriistad suudavad tuvastada puuduvaid alt-atribuute, sobimatuid pesastusi, katkiseid pealkirjajärjestusi või vale orientiiride kasutamist, mida kõiki saab otse teie märgistuses parandada enne, kui need tegelikke kasutajaid mõjutavad.
6. Veebisaidi sisustruktuuri planeerimine
Enne ühe sildi kirjutamist tasub planeerida oma saidi ja lehtede loogiline struktuur. Mõeldes jaotistele, teabe prioriteetidele ja navigeerimisvoogudele, on tulemuseks HTML, mida on otsingumootorite jaoks lihtsam hallata, laiendada ja optimeerida.
Levinud alguspunkt on veebisaidi saidikaardi või struktuuridiagrammi visandamine. See hõlmab tavaliselt tipptaseme lehti, nagu Avaleht, Teave, Teenused, Blogi, Kontakt, ja seejärel kõiki alamlehti või kategooriaid, mis neist hargnevad, näidates, kuidas kasutajad nende vahel navigeerivad.
Ühel lehel saate oma tulevase HTML-struktuuri kaardistada semantiliste plokkide jadana. Näiteks võite määratleda päise logo ja navigeerimisribaga, põhiala mitme jaotisega (peaelement, funktsioonid, iseloomustused, hinnakujundus), eraldi ala teisese sisu jaoks ja jaluse kontaktandmete ja juriidiliste linkidega.
Pealkirjade määramine plokkidele varakult hoiab teie h1-h6 hierarhia sidusana. Te otsustate eelnevalt, milline on üks h1, millised osad väärivad h2 pealkirju ja kus on vaja sügavamaid alapealkirju, näiteks h3 või h4, et selgitada keerulisi teemasid ilma lugejat üle koormamata.
SEO ja UX seisukohast on tark paigutada põhisisu ja olulised osad DOM-is varem. Otsimootorid pööravad üldiselt rohkem tähelepanu dokumendi ülaosas olevale sisule ja kasutajad hindavad põhiteabe kiiret leidmist, mitte pikkade sissejuhatuste või dekoratiivsete elementide vahel kerimist.
Parimad tavad hallatavate HTML-struktuuride jaoks
Vajadusel kasutage struktuurielementide märgistamiseks kirjeldavaid klassinimesid ja ID-sid, kuid vältige div-elementide liiga palju pesastamist. Klassid nagu .main-nav, .site-header või .sidebar näitavad teile lühidalt, mida komponent teeb, muutes teie HTML-i ja CSS-i palju lihtsamini loetavaks kuude pärast.
Hoidke oma HTML võimalikult lame, väljendades samal ajal ehtsat hierarhiat. Sügavalt pesastatud konteinerid, mis eksisteerivad ainult stiili jaoks, saab sageli asendada läbimõelduma CSS-iga, mille tulemuseks on puhtam ja kergem märgistus, millega on kõigil lihtsam töötada.
Grupeeri seotud sisu semantiliste elementide sisse, selle asemel, et seda lehel laiali pillutada. Näiteks blogipostitus peaks asuma artikli sees, pealkirja, kuupäeva, autori ja sisuga koos, samas kui seotud postitused või autori biograafia võivad asuda kõrvalreal või artikli jaluses, põhijutust selgelt eraldatuna.
Vaadake oma struktuur üle iga kord, kui lehte laiendate või sektsiooni ümber kujundate. HTML-dokumentides on aja jooksul lihtne koguda ühekordseid ümbriseid ja ad-hoc elemente, seega tasub nende perioodiline sidusaks semantiliseks kujuks tagasi kujundamine hooldatavuse, jõudluse ja ligipääsetavuse osas ära.
Struktuurimustrite dokumenteerimine – näiteks kuidas päiseid, jaotisi, artikleid ja jaluseid luua – aitab suurtel meeskondadel järjepidevust säilitada. Väike sisemine juhis, mis selgitab, milliseid elemente navigeerimiseks kasutada, kuidas pealkirju korraldada ja kuidas korduvaid komponente märgistada, aitab vältida koodibaasi muutumist struktuuriliseks lapitekiks.
7. Praktilised struktuurimustrid levinud lehetüüpide jaoks
Erinevat tüüpi lehtedel on tavaliselt ühised struktuurimustrid, mida saab projektide vahel uuesti kasutada ja kohandada. Nende mustrite äratundmine aitab teil kujundada sisustruktuure, mis tunduvad kasutajatele loomulikud ja mida on HTML-is lihtne rakendada.
Tüüpiline avaleht võib alata globaalse <header>-iga, mis sisaldab logo ja peamist <nav>-i. Sellele järgneb sageli <main> mitme <section>-i plokiga: põhiosa h1-ga ja üleskutsega tegutsemisele, funktsioonide osa, võib-olla ka iseloomustuste osa ning viimane osa, mis kutsub kasutajaid ühendust võtma või registreeruma.
Põhisisu all asub <footer>, mis pakub tavaliselt üldist teavet ja täiendavat navigeerimist. Siin asuvad lingid privaatsuspoliitikatele, teenusetingimustele, kontaktvõimalustele, sotsiaalvõrgustikele ja teisestele menüüdele, mistõttu on neid lihtne leida ilma ülaltoodud põhisisult tähelepanu hajutamata.
Blogipostituse leht on ideaalne kandidaat elemendile <article>. Artiklil oleks tavaliselt oma päis postituse pealkirjaga (sageli lehe h1), avaldamiskuupäeva ja autori andmetega, millele järgneb postituse põhitekst, mis on jagatud h2/h3 pealkirjadega osadeks, ja lõpuks artikli jalus, mis sisaldab silte, jagamisnuppe või seotud sisulinke.
Külgribasid või teiseseid paneele esindavad loomulikult elemendid <aside>. Nende hulka võivad kuuluda hiljutiste postituste loendid, kategooriafiltrid, uudiskirja registreerumisvormid või kontekstuaalne abi. Kuna „aside” on semantiliselt märgitud täiendava sisuna, saavad abitehnoloogiad seda kasutajatele sellisena esitleda.
Kontaktide lehed ja teenuselehed kasutavad samu ehitusplokke, kuid rõhutavad selgust ja suhtluse lihtsust. Selged pealkirjad, sisutihedad lõigud, õigesti märgistatud vormi juhtnupud ja loogiline lugemisjärjekord tagavad, et kasutajad leiavad teiega ühenduse võtmise või teie pakkumisest aru ilma oletusteta.
8. HTML-i elemendid, atribuudid ja nende roll struktuuris
Kõigi nende mustrite all taandub HTML-is kõik elementidele, siltidele ja atribuutidele. Nende koostoime mõistmine annab teile täpse kontrolli sisu struktuuri, esitluskonksude ja käitumise üle.
HTML-element koosneb avasildist, valikulistest atribuutidest, sisust ja enamasti ka sulgemissildist. Näiteks <p>See on lõik.</p> sisaldab avamissilti <p>, tekstisõlme ja lõpusilti </p>, mis kõik koos moodustavad lõiguelemendi.
Atribuudid ilmuvad avasildi sees ja annavad elemendi kohta lisateavet. Need on kujul name=”value” paar, näiteks class=”highlight”, id=”intro” või href=”/contact”. Mõned atribuudid on globaalsed ja võivad ilmuda mis tahes elemendi sees (näiteks class, id, lang), teised aga on spetsiifilised teatud siltidele (näiteks src pildi või type sisendi jaoks).
Klassid on eriti olulised suuremate dokumentide struktureerimisel ja kujundamisel. Sama klassi määramisega mitmele elemendile – näiteks class=”important” – saate rakendada tavalisi CSS-i reegleid või suunata neid JavaScriptis, hoides oma struktuuri paindliku ja samal ajal hallatavana.
Kõik elemendid ei vaja sulgevaid silte; mõned on tühjad (void) elemendid, millel pole sisu. Elemendid nagu <img>, <meta>, <link> ja <br> kuuluvad sellesse kategooriasse. Need osalevad endiselt teie struktuuris, kuid ainult oma atribuutide kaudu, kuna nad ei mässi sisemist teksti ega lapsi.
World Wide Web Consortium (W3C) haldab spetsifikatsiooni, mis määratleb, kuidas kõik need elemendid ja atribuudid koos toimivad. Nende standardite järgimine tagab teie lehtede koostalitlusvõime eri brauserites ja seadmetes ning tagab, et teie hoolikalt kujundatud sisustruktuur käitub iga külastaja jaoks etteaimatavalt.
Kõige selle praktikas rakendamine tähendab HTML-i käsitlemist teie saidi semantilise selgroona: selge dokumendi ülesehitus, pealkirjade täpne kasutamine, läbimõeldud paigutus põhi-, jaotis-, artikli-, kõrval- ja jalusereaga, ligipääsetavad metaandmed päises ja iga elemendi sisukad atribuudid muudavad teie sisu kokkuvõttes loetavamaks, navigeeritavamaks ja otsingumootorites kõrgele reastatavamaks.
