- Teisingai naudokite „doctype“, „html“, „head“ ir „body“, kad naršyklėms ir paieškos sistemoms pateiktumėte nuspėjamą, standartus atitinkantį struktūrą.
- Struktūrizuokite matomą turinį naudodami semantinius elementus (antraštė, naršymo juosta, pagrindinis elementas, skyrius, straipsnis, poraštė) ir aiškią h1–h6 antraščių hierarchiją.
- Sustiprinkite prieinamumą ir SEO, deklaruodami kalbą, naudodami orientyrus, rašydami prasmingą alternatyvųjį tekstą ir patvirtindami HTML.
- Iš anksto suplanuokite puslapio ir svetainės struktūrą, kad kiekvienas dokumentas būtų nuoseklus, lengvai naršomas ir paprastai prižiūrimas laikui bėgant.
Išmokimas struktūrizuoti turinį HTML kalba yra skirtumas tarp puslapio, kuris tiesiog „rodo kažką ekrane“, ir puslapio, kuriame lengva naršyti, kuris yra prieinamas ir pritaikytas paieškos sistemoms. Kai jūsų HTML kodas yra sutvarkytas pagal aiškią hierarchiją, naršyklės, paieškos sistemos ir pagalbinės technologijos iš karto supranta, ką reiškia kiekviena skiltis ir kaip ji dera tarpusavyje.
Užuot galvojus apie HTML tik kaip apie būdą įterpti žymas į puslapį, geriau jį vertinti kaip dokumento projektą. Turėdami tvirtą struktūrą, apibrėžiate, kur yra pagrindinis turinys, kaip susijusios antraštės, kas yra navigacija, kas yra antrinė informacija ir kurios dalys antraštėje apibūdina patį dokumentą. Šiame vadove išsamiai aptarsime HTML turinio struktūrą: nuo bendro puslapio karkaso iki antraščių, semantikos, pritaikymo neįgaliesiems ir kai kurių konkrečių išdėstymo šablonų realaus pasaulio puslapiams.
1. HTML dokumento pasaulinis skeletas
Kiekvienas HTML dokumentas prasideda ta pačia aukšto lygio struktūra: doctype, html, head ir body. Tai gali atrodyti kaip standartinė formulė, tačiau kiekviena dalis atlieka lemiamą vaidmenį, kaip naršyklė analizuoja ir pateikia jūsų turinį ir kaip paieškos sistemos interpretuoja jūsų puslapį.
Pati pirmoji eilutė yra „doctype“ deklaracija, parašyta taip: HTML5 kalba. Ši instrukcija nesukuria matomos išvesties; ji nurodo naršyklei naudoti standartinį, o ne keiksmažodžių režimą, vengiant pasenusio vaizdavimo elgesio, kuris gali visiškai sugadinti jūsų išdėstymą ar CSS.
Iškart po „doctype“ seka šakninis elementas , kuris apvynioja visą dokumentą. Beveik viskas – ir dokumento metaduomenys, ir matomas puslapis – yra viduje … Čia taip pat deklaruojate dokumento kalbą, parašytą žmogaus kalba, naudodami atributą „lang“, pavyzdžiui: anglų kalba arba ispanų kalba iš Ispanijos.
Kalbos deklaravimas naudojant „lang“ yra būtinas prieinamumo, SEO ir vertimo įrankiams. Ekrano skaitytuvai naudoja jį teisingoms tarimo taisyklėms pasirinkti, paieškos sistemos ir automatiniai vertėjai – pagrindinei kalbai suprasti, o CSS netgi gali pritaikyti kalbą konkrečiam stiliui naudodamas tokius selektorius kaip [lang|=”fr”] arba :lang(en).
Šakniniame HTML elemente visada yra du tiesioginiai vaikai: ir . Antraštėje yra visi metaduomenys ir ištekliai, reikalingi puslapiui interpretuoti ir pateikti (kodavimas, pavadinimas, CSS, piktogramos, kanoniniai URL ir kt.), o pagrindinėje dalyje yra turinys, kurį vartotojai iš tikrųjų mato ir su kuriuo sąveikauja naršyklės lange.
2. Kas priklauso (ir kodėl tai svarbu)
Antraštės skiltis nematoma regintiems lankytojams, tačiau ji yra absoliučiai svarbi jūsų svetainės veikimui, našumui ir reitingavimui. Čia pateikta informacija padeda paieškos sistemoms, socialinėms platformoms, naršyklėms ir įrenginiams tvarkyti ir pateikti jūsų puslapį.
Vienas pirmųjų dalykų viduje turėtų būti simbolių kodavimo deklaracija, naudojant . UTF-8 yra HTML5 standartas, palaikantis praktiškai visus simbolius ir jaustukus bei užtikrinantis, kad jūsų pavadinimai, tekstas, CSS ir „JavaScript“ būtų interpretuojami teisingai, nepriklausomai nuo naudojamos kalbos ar simbolių.
Kiekvienas puslapis taip pat turi apibrėžti unikalų ir aprašomąjį elementas. Turinys viduje … rodomas naršyklės skirtuke, žymėse, naršyklės istorijoje ir, svarbiausia, kaip pagrindinė spustelėjama antraštė paieškos sistemos rezultatų puslapiuose, nebent jį perrašo konkrečios metažymės. SEO požiūriu tai yra viena vertingiausių teksto dalių jūsų dokumente.
Dar vienas beveik privalomas meta elementas šiuolaikiniuose maketuose yra peržiūros srities deklaracija. Naudojant Nurodote mobiliųjų įrenginių naršyklėms pritaikyti maketo dydį prie įrenginio pločio, o ne sumažinti darbalaukio dizainą iki mažo ekrano, o tai yra labai svarbu reaguojančiam dizainui ir norint sėkmingai atlikti pagrindinius mobiliųjų įrenginių ir prieinamumo auditus.
Be kodų rinkinio, pavadinimo ir peržiūros srities, antraštėje apibrėžiate daugumą metaduomenų, stilių ir pagrindinių nuorodų. Tai apima SEO orientuotus meta aprašymus, CSS failus, svetainės piktogramas, alternatyvias kalbų versijas, kanoninius URL, žiniatinklio manifestus, išankstinius prisijungimus ir daug daugiau. Visi šie elementai netiesiogiai prisideda prie to, kaip suprantama jūsų turinio struktūra ir kaip patogu naudoti jūsų svetainę.
Esminiai metaduomenys ir struktūriniai ištekliai
CSS paprastai yra prijungtas viduje naudojant . Išoriniai stilių lapai atskiria pateikimą nuo struktūros, gali būti kaupiami talpykloje keliuose puslapiuose, kad būtų geresnis našumas, ir padeda išlaikyti vieną patikimą informacijos šaltinį jūsų dizaino sistemai.
Taip pat galite įtraukti CSS į block within , or even import additional stylesheets from there. Pavyzdžiui, kūrėjai kartais naudoja @import stiliaus žymės viduje, norėdami įdėti stiliaus lapą į konkretų kaskadinį sluoksnį arba deklaruoti CSS pasirinktines ypatybes (kintamuosius) :root lygmenyje prieš nurodydami jas visoje svetainėje.
The elementas atlieka ne tik stiliaus lapų funkciją. Pakeitę „rel“ atributą, galite nukreipti į favicon su rel=”icon”, apibrėžti alternatyvias kalbos versijas su rel=”alternate” ir hreflang, nurodyti kanoninį URL su rel=”canonical” arba nurodyti programų manifestus ir kitus ryšius, apie kuriuos turėtų žinoti naršyklės ir robotai.
Apibrėžiant piktogramas su užtikrina, kad jūsų prekės ženklas būtų atpažįstamas naršyklės skirtuke ir žymėse. Galite nurodyti skirtingus dydžius arba tipus (pvz., PNG arba SVG) ir netgi pateikti specialias piktogramas tokioms platformoms kaip „iOS“ su rel="apple-touch-icon" arba užmaskuoti piktogramas prisegtiems skirtukams „Safari“ naršyklėje.
Alternatyvios nuorodos yra labai svarbios daugiakalbėms arba turinio sindikacijos konfigūracijoms. Kai naudojate , pavyzdžiui, nurodote paieškos sistemoms, kad egzistuoja to paties puslapio versija prancūzų kalba ir kokiam kalbos / regiono deriniui ji skirta. Panašiai alternatyvios nuorodos gali nukreipti į RSS sklaidos kanalus arba PDF variantus, jei nurodote tinkamą tipą.
Kanoniniai URL, scenarijai ir retai naudojami
Kanoninės nuorodos su rel=”canonical” padeda išspręsti pasikartojančio turinio problemas, nurodant, kuris URL yra autoritetingas šaltinis. Jei tas pats straipsnis yra keliuose keliuose keliuose arba yra publikuojamas kituose domenuose, kanoninis URL sujungia reitingavimo signalus ir paieškos sistemai nereikia spėlioti, kurią versiją indeksuoti.
„JavaScript“ pridedamas naudojant element, which can either embed inline code or reference an external file through the src attribute. Kadangi „JavaScript“ pagal numatytuosius nustatymus blokuoja vaizdavimą, daugelis kūrėjų scenarijaus žymas deda teksto pabaigoje arba naudoja „defer“ arba „async“ atributus, kad HTML turinys būtų vaizduojamas prieš vykdant scenarijus.
Atributas „defer“ nurodo naršyklei atsisiųsti scenarijų neblokuojant atvaizdavimo ir vykdyti jį, kai HTML kodas bus visiškai išanalizuotas. Priešingai, asinchroninis atsisiuntimas taip pat neblokuoja, bet paleidžia scenarijų, kai tik jis yra paruoštas, todėl gali sutrikti analizės srautas, o tai gali būti problema, kai scenarijus priklauso nuo vėliau dokumente apibrėžtų DOM elementų.
The elementas, kuris rodomas tik antraštėje, apibrėžia bazinį URL ir numatytąjį visų santykinių nuorodų taikinį. Nustatant Jūs iš esmės nurodote naršyklei, kad kiekvienas santykinis URL puslapyje turėtų būti sprendžiamas iš tos šaknies ir, pasirinktinai, atidaromas konkrečiame naršymo kontekste, pvz., naujame lange arba aukščiausio lygio rėmelyje.
Nors gali būti veiksmingas, tačiau turi šalutinį poveikį, ypač puslapio inkarams ir santykiniams išteklių keliams. Vienam dokumentui leidžiamas tik vienas bazinis elementas, jis turi būti rodomas prieš bet kokius santykinius URL ir transformuoja paprastus inkarus, pvz. , į pilnus URL užklausas su fragmentais, pridėtais prie bazinio href.
3. Matomas turinio sluoksnis: ir semantinis išdėstymas
Viskas, ką vartotojai iš tikrųjų mato ir su kuo sąveikauja, gyvena viduje elementas. Čia galite struktūrizuoti savo turinį naudodami semantinius elementus, kurie apibūdina kiekvienos puslapio dalies vaidmenį: navigaciją, pagrindinį turinį, straipsnius, šonines juostas, poraštes ir kt.
HTML5 pristatė semantinio išdėstymo elementų rinkinį, kuris pakeitė bendrinius konteineriai daugeliu atvejų. Tokie elementai kaip , , , , , ir apibūdinkite prasmę, o ne vien išvaizdą, o tai padeda pagalbinėms technologijoms ir paieškos sistemoms sukurti jūsų puslapio mentalinį žemėlapį.
paprastai pateikiamas įvadinis puslapio arba konkretaus skyriaus turinys arba naršymas. Tai gali būti logotipas, svetainės pavadinimas, pagrindinis meniu arba pagrindinė antraštė. Galite turėti puslapio lygio antraštę šalia pagrindinio teksto viršaus ir papildomas antraštes skyriuose ar straipsniuose, kai reikia paantraštės.
skirtas naršymo blokams ir paprastai naudojamas pagrindiniams meniu arba svarbių nuorodų grupėms. Pagrindinę naršymo juostą galite patalpinti antraštėje, bet „nav“ taip pat gali būti rodomas ir kitur, pavyzdžiui, šoninėje juostoje arba poraštėje, jei tik ji naudojama naršymui, o ne bendriniams nesusijusių nuorodų rinkiniams.
žymi unikalų, pagrindinį puslapio turinį ir turėtų būti rodomas tik vieną kartą dokumente. Pagrindinėje dalyje paprastai tvarkysite savo turinį naudodami teminiams blokams, nepriklausomiems straipsniams, pavyzdžiui, tinklaraščio įrašams ar naujienoms, ir susijusiai, bet antraeilei informacijai, pvz., pastaboms, reklamoms ar papildomai navigacijai.
Skyriai, straipsniai, išnašos ir poraštės
reiškia temiškai atskirą turinio bloką, paprastai turintį savo antraštę. Tai gali būti skyrius ilgame straipsnyje, „Savybių“ blokas produkto puslapyje arba jūsų pagrindinio puslapio dalis, pvz., „Atsiliepimai“ arba „Kainodara“. Skyriai padeda suskirstyti sudėtingus dokumentus į logines dalis.
naudojamas savarankiškam turiniui, kuris gali egzistuoti savarankiškai, nepriklausomai nuo aplinkinio konteksto. Pavyzdžiai: tinklaraščio įrašai, dokumentacijos įrašai, vartotojų komentarai, naujienos arba forumo pranešimai. Straipsnis dažnai turi savo antraštę (su pavadinimu, autoriumi ir data) ir poraštę (su žymėmis, bendrinimo nuorodomis arba metaduomenimis).
rezervuotas turiniui, kuris yra netiesiogiai susijęs su pagrindiniu srautu, pvz., šoninėms juostoms, citatoms, susijusioms nuorodoms ar reklamos blokams. Kadangi jo paskirtis yra papildoma, ekrano skaitytuvai ir kitos priemonės gali jį atitinkamai apdoroti, o vartotojai gali lengviau atskirti pagrindinį pasakojimą nuo antrinių priedų.
rodomas skyriaus pabaigoje arba viso puslapio apačioje. Puslapio lygio poraštėje paprastai pateikiami autorių teisių pranešimai, kontaktinė informacija, antrinė navigacija, teisinės nuorodos arba svetainių pavadinimai, o straipsnio lygio poraštėje gali būti autorių biografijos, kategorijos, atnaujinimo datos arba susiję įrašai.
Šių elementų lankstumas reiškia, kad galite juos maišyti ir įterpti, kad jie atitiktų jūsų dizainą, tačiau laikydamiesi jų numatytos reikšmės, jūsų HTML išliks mobilus ir suprantamas. Pavyzdžiui, „nav“ galite teisėtai įdėti antraštėje arba kitur tekste, bet neturėtumėte naudoti „nav“ atsitiktiniams nuorodų rinkiniams, kurie nėra navigacijos dalis, arba naudoti „main“ kelis kartus viename puslapyje.
4. Antraščių hierarchija ir teksto struktūra
Antraštės yra jūsų turinio struktūros pagrindas, apibrėžiantis temų ir potemių hierarchiją visame dokumente. HTML siūlo šešis antraščių lygius nuo (svarbiausia) iki (mažiausiai svarbu), o tai, kaip juos tvarkote, veikia tiek žmones, skaitančius tekstus, tiek paieškos sistemas.
Paprastai yra vienas kuris išreiškia pagrindinę puslapio temą, po kurios seka pirminiams skyriams ir - gilesniems poskyriams. Kai dvi antraštės yra tame pačiame lygyje, jos žymi giminingus skyrius, o žemesnio lygio antraštė įveda įterptąjį poskyrį ankstesnėje aukštesnio lygio antraštėje.
Po antraštės einančios pastraipos ir kitas turinys priklauso tos antraštės apibrėžtam skyriui. Kai atsiranda nauja to paties lygio antraštė, ankstesnė dalis laikoma uždaryta ir prasideda nauja. Šią netiesioginę struktūrą pagalbinės technologijos naudoja kurdamos planą, kurį vartotojai gali greitai peržiūrėti.
Savavališkas lygių praleidimas, pavyzdžiui, peršokant tiesiai iš h1 į h4, gali supainioti tiek automatinius įrankius, tiek skaitytojus. Bendroji rekomendacija – hierarchijoje judėti žingsnis po žingsnio: nuo h1 iki h2 poskyriams, tada pasirinktinai iki h3 ir t. t., įterpiant turinį giliau tik vienu lygiu žemyn.
Naršyklės antraštėms paprastai taiko numatytuosius stilius: didesnius šrifto dydžius, paryškinimą ir papildomus vertikalius tarpus. Šie integruoti stiliai jau vizualiai parodo struktūrą, tačiau galite patikslinti pateikimą naudodami CSS, išlaikant pagrindinę semantinę hierarchiją nepažeistą.
Pastraipos, sąrašai ir eilutės semantika
Įprastas teksto turinys patenka į elementai, kurių kiekvienas žymi atskirą pastraipą. Vienos pagrindinės minties išlaikymas kiekvienoje pastraipoje pagerina skaitomumą ir atitinka tai, kaip pagalbinės technologijos leidžia vartotojams naršyti teksto blokuose.
Sutvarkyti sąrašai ( ) ir netvarkingus sąrašus ( ) su elementai idealiai tinka grupuotai informacijai, pvz., žingsniams, funkcijoms ar DUK. Sutvarkyti sąrašai perteikia seką arba prioritetą, o netvarkingi sąrašai tiesiog grupuoja susijusius elementus nenurodydami tvarkos; abu yra labai naudingi struktūrizuojant sudėtingus paaiškinimus.
Įterptiniai elementai, tokie kaip , , ir kiti, praturtina turinį nepertraukdami pastraipos srauto. pabrėžia dokumentų svarbą (ir paprastai yra paryškintas), pabrėžia tekstą (dažnai kursyvu) ir sukuria nuorodas, kurios jungia dokumentus visoje jūsų svetainėje arba su išoriniais ištekliais.
Vaizdai su laikomi pakeistais elementais ir neapvynioja turinio, tačiau vis tiek dalyvauja semantinėje struktūroje per tokius atributus kaip „alt“. „Alt“ atributas yra ypač svarbus prieinamumui ir SEO, nes jis apibūdina vaizdą vartotojams, kurie jo nemato, ir paieškos sistemoms, kurios analizuoja tik tekstą.
Apgalvotas blokinio lygio ir eilutės elementų derinimas leidžia išreikšti hierarchiją, ryšius ir pabrėžimą vien tik HTML kalba, paliekant vizualines detales, tokias kaip spalvos, šriftai ir tarpai, CSS. Toks rūpesčių atskyrimas užtikrina tvarkingą žymėjimą ir vėliau palengvina dizaino pakeitimus.
5. Prieinamumas ir kalba turinio struktūroje
Gerai struktūrizuotas HTML dokumentas ne tik atrodo tvarkingai; tai yra būtina sąlyga prieinamumui. Žmonės, kurie naudoja ekrano skaitytuvus, klaviatūros naršymą ar kitas pagalbines technologijas, pasikliauja jūsų HTML semantika, kad suprastų turinį ir efektyviai juo naršytų.
Dokumento kalbos deklaravimas naudojant „lang“ elementas yra vienas iš pirmųjų prieinamumo žingsnių. Kai kalba yra neaiški, ekrano skaitytuvai parenka teisingą tarimą ir žodynus, o automatiniai vertimo įrankiai tiksliau apdoroja jūsų turinį skirtinguose regionuose ir tarmėse.
Taip pat galite pažymėti kalbos pakeitimus tekste naudodami „lang“ tokiuose elementuose kaip „arba“ . Kai fragmentas persijungia į kitą kalbą, nustatant lang=”fr-CA” arba lang=”pt-BR” tame fragmente, pagalbinėms priemonėms pranešama, kad tarimo ir skaitymo taisyklės turėtų pasikeisti tik tai daliai.
Be kalbos, antraštės, orientyrai ir alternatyvus tekstas sudaro prieinamos struktūros pagrindą. Aiški antraščių hierarchija, teisingas pagrindinės, naršymo, antraštės, poraštės, sekcijos ir šoninės eilutės naudojimas bei prasmingi „alt“ atributai vaizduose leidžia pagalbinėms technologijoms sukurti struktūrą ir teikti orientyrų navigaciją, pvz., „pereiti prie pagrindinio turinio“ arba „eiti į naršymą“.
Vien spalvos ir vizualinis stilius niekada neturėtų būti vienintelis būdas perteikti svarbią informaciją. Didelis kontrastas, įskaitomi šrifto dydžiai, interaktyvių elementų fokusavimo būsenos ir aprašomieji nuorodų tekstai, pvz., „Skaitykite daugiau apie gaisrų prevenciją“, o ne tiesiog „Spustelėkite čia“, yra visa tai, kad jūsų struktūrizuotas turinys būtų patogus kuo daugiau žmonių.
HTML patvirtinimas ir pritaikymo neįgaliesiems patikrinimų atlikimas naudojant automatinius įrankius ir rankinius testus padeda anksti atskleisti struktūrines problemas. Įrankiai gali aptikti trūkstamus „alt“ atributus, neteisingą įdėjimą, neveikiančias antraščių sekas arba neteisingą orientyrų naudojimą, ir visa tai galima ištaisyti tiesiogiai žymėjime, kol jie nepaveikė realių vartotojų.
6. Svetainės turinio struktūros planavimas
Prieš rašant vieną žymę, verta suplanuoti loginę svetainės ir puslapių struktūrą. Mąstant pagal skyrius, informacijos prioritetus ir naršymo srautus, sukuriamas HTML, kurį lengviau prižiūrėti, išplėsti ir optimizuoti paieškos sistemoms.
Įprastas atspirties taškas yra svetainės schemos arba struktūrinės schemos eskizas. Paprastai tai apima aukščiausio lygio puslapius, tokius kaip „Pagrindinis“, „Apie“, „Paslaugos“, „Tinklaraštis“, „Kontaktai“, o tada visus iš jų atsišakojančius antrinius puslapius ar kategorijas, rodančius, kaip vartotojai naršys tarp jų.
Viename puslapyje galite suplanuoti savo būsimą HTML struktūrą kaip semantinių blokų seriją. Pavyzdžiui, galite apibrėžti antraštę su logotipu ir naršymo juosta, pagrindinę sritį su keliais skyriais (pagrindinis elementas, funkcijos, atsiliepimai, kainos), papildomą skyrių antriniam turiniui ir poraštę su kontaktine informacija ir teisinėmis nuorodomis.
Priskyrus antraštes šiems blokams anksti, jūsų h1–h6 hierarchija išlieka nuosekli. Iš anksto nusprendžiate, koks bus vienas h1 skyrius, kuriems skyriams reikalingos h2 antraštės ir kur reikalingos gilesnės paantraštės, tokios kaip h3 ar h4, kad būtų galima paaiškinti sudėtingas temas neapkrauti skaitytojo.
Iš SEO ir UX perspektyvos, protinga pagrindinį turinį ir svarbias skiltis patalpinti anksčiau DOM. Paieškos sistemos paprastai daugiau dėmesio skiria turiniui dokumento viršuje, o vartotojai vertina tai, kad pagrindinę informaciją randa greitai, o ne slenka pro ilgas įžangas ar dekoratyvinius elementus.
Geriausia praktika, kaip tvarkyti HTML struktūras
Prireikus struktūriniams elementams žymėti naudokite aprašomuosius klasių pavadinimus ir ID, tačiau venkite per didelio div elementų įdėjimo. Tokios klasės kaip .main-nav, .site-header arba .sidebar iš pirmo žvilgsnio nurodo, ką veikia komponentas, todėl jūsų HTML ir CSS bus daug lengviau skaitomi po kelių mėnesių.
Išlaikykite HTML kuo plokščiesnį, tačiau tuo pačiu išreikšdami tikrąją hierarchiją. Giliai įterptus konteinerius, skirtus tik stilizavimui, dažnai galima pakeisti labiau apgalvota CSS, todėl žymėjimas tampa švaresnis ir lengvesnis, su kuriuo visiems lengviau dirbti.
Grupuokite susijusį turinį semantiniuose elementuose, o ne išsklaidykite jį po puslapį. Pavyzdžiui, tinklaraščio įrašas turėtų būti straipsnio viduje, nurodant pavadinimą, datą, autorių ir turinį kartu, o susiję įrašai arba autoriaus biografija gali būti pateikiami straipsnio apačioje arba poraštėje, aiškiai atskirti nuo pagrindinio pasakojimo.
Kaskart išplėsdami puslapį arba perkurdami skyrių, peržiūrėkite savo struktūrą. HTML dokumentuose laikui bėgant lengva sukaupti vienkartinius apvalkalus ir ad-hoc elementus, todėl periodiškas jų pertvarkymas į darnią semantinę formą atsiperka prižiūrimumo, našumo ir prieinamumo požiūriu.
Struktūrinių modelių, pvz., antraščių, skyrių, straipsnių ir poraštės kūrimo, dokumentavimas padeda didelėms komandoms išlaikyti nuoseklumą. Nedidelė vidinė gairė, paaiškinanti, kuriuos elementus naudoti navigacijai, kaip tvarkyti antraštes ir kaip žymėti pasikartojančius komponentus, gali padėti išvengti jūsų kodo bazės virtimo struktūriniu kratiniu.
7. Praktiniai dažniausiai naudojamų puslapių tipų struktūros modeliai
Skirtingi puslapių tipai paprastai turi bendrų struktūrinių modelių, kuriuos galite pakartotinai naudoti ir pritaikyti skirtinguose projektuose. Šių šablonų atpažinimas padės jums kurti turinio struktūras, kurios vartotojams atrodytų natūralios ir būtų lengvai įgyvendinamos HTML kalba.
Įprastas pagrindinis puslapis gali prasidėti pasauliniu su logotipu ir pagrindiniu . Po to dažnai seka su keliais blokai: pagrindinis skyrius su h1 ir raginimu veikti, funkcijų skyrius, galbūt atsiliepimų skyrius ir paskutinis skyrius, kuriame vartotojai kviečiami susisiekti arba užsiregistruoti.
Po pagrindiniu turiniu, a paprastai teikia visuotinę informaciją ir papildomą navigaciją. Čia pateikiamos nuorodos į privatumo politiką, paslaugų teikimo sąlygas, kontaktines parinktis, socialinius tinklus ir antrinius meniu, todėl juos lengva rasti nenukrypstant nuo pagrindinio turinio aukščiau.
Tinklaraščio įrašo puslapis yra puikus kandidatas elementas. Straipsnis paprastai turėtų savo antraštę su įrašo pavadinimu (dažnai puslapio h1 raide), publikavimo data ir autoriaus duomenimis, po jos sektų įrašo tekstas, suskirstytas į skyrius su h2/h3 antraštėmis, ir galiausiai straipsnio poraštę su žymėmis, bendrinimo mygtukais arba susijusio turinio nuorodomis.
Šoninės juostos arba antriniai skydeliai natūraliai pavaizduoti elementai. Jie gali apimti naujausių įrašų sąrašus, kategorijų filtrus, naujienlaiškio prenumeratos formas arba kontekstinę pagalbą. Kadangi papildomas turinys semantiškai pažymėtas kaip papildomas, pagalbinės technologijos gali jį pateikti vartotojams kaip tokį.
Kontaktų ir paslaugų puslapiuose pakartotinai naudojami tie patys elementai, tačiau pabrėžiamas aiškumas ir sąveikos paprastumas. Aiškios antraštės, glaustos pastraipos, tinkamai pažymėti formos valdikliai ir logiška skaitymo tvarka užtikrina, kad vartotojai galėtų lengvai rasti, kaip su jumis susisiekti ar suprasti jūsų pasiūlymą, be jokių spėlionių.
8. HTML elementai, atributai ir jų vaidmuo struktūroje
Po visais šiais šablonais viskas HTML kalboje susiveda į elementus, žymas ir atributus. Suprasdami, kaip jie veikia kartu, galite tiksliai kontroliuoti turinio struktūrą, pateikimo principus ir elgseną.
HTML elementą sudaro pradinė žymė, pasirenkami atributai, tam tikras turinys ir, daugeliu atvejų, uždaromoji žymė. Pavyzdžiui, Tai yra pastraipa. apima pradžios žymą , teksto mazgas ir pabaigos žymė , kurie visi kartu sudaro pastraipos elementą.
Atributai rodomi pradinėje žymoje ir pateikia papildomos informacijos apie elementą. Jie pateikiami kaip „name=”value” poros, pvz., „class=”highlight”, „id=”intro” arba „href=”/contact”. Kai kurie atributai yra globalūs ir gali būti rodomi bet kuriame elemente (pvz., „class”, „id”, „lang”), o kiti yra būdingi tik tam tikroms žymėms (pvz., „src” – paveikslėliui arba „type” – įvesties reikšmei).
Klasės yra ypač svarbios struktūrizuojant ir formuojant didesnius dokumentus. Priskirdami tą pačią klasę keliems elementams, tarkime, class=”important”, galite taikyti įprastas CSS taisykles arba nukreipti jas į „JavaScript“, išlaikydami savo struktūrą lanksčią, tačiau vis tiek valdomą.
Ne visiems elementams reikalingos uždaromosios žymės; kai kurie yra tušti (void) elementai, neturintys turinio. Elementai, tokie kaip , , ir patenka į šią kategoriją. Jie vis tiek dalyvauja jūsų struktūroje, bet tik per savo atributus, nes neapvynioja jokio vidinio teksto ar vaikų elementų.
Pasaulinio žiniatinklio konsorciumas (W3C) tvarko specifikaciją, apibrėžiančią, kaip visi šie elementai ir atributai veikia kartu. Laikantis šių standartų, jūsų puslapiai išlieka sąveikūs įvairiose naršyklėse ir įrenginiuose, o kruopščiai sukurta turinio struktūra kiekvienam lankytojui elgiasi nuspėjamai.
Visa tai įgyvendinant praktiškai reiškia, kad HTML laikomas semantiniu jūsų svetainės stuburu: aiški dokumento struktūra, tikslus antraščių naudojimas, apgalvotas išdėstymas su pagrindiniu, skyriais, straipsniais, nuorodomis ir porašte, prieinami metaduomenys antraštėje ir prasmingi kiekvieno elemento atributai kartu palengvina jūsų turinio skaitymą, naršymą ir aukštus reitingus paieškos sistemose.
