Struktura vsebine HTML: popoln vodnik za izdelavo trdnih strani

Domov » Python » Struktura vsebine HTML: popoln vodnik za izdelavo trdnih strani

Učenje strukturiranja vsebine v HTML-ju je razlika med stranjo, ki preprosto »prikazuje nekaj na zaslonu«, in stranjo, ki je enostavna za navigacijo, dostopna in prijazna do SEO. Ko je vaš HTML organiziran z jasno hierarhijo, brskalniki, iskalniki in podporne tehnologije takoj razumejo, kaj pomeni vsak razdelek in kako se vse skupaj ujema.

Namesto da bi HTML obravnavali zgolj kot način dodajanja oznak na stran, je koristno, da ga vidite kot načrt vašega dokumenta. Z dobro strukturo določite, kje se nahaja vaša glavna vsebina, kako so naslovi povezani, kaj je navigacija, kaj so sekundarne informacije in kateri deli v glavi opisujejo sam dokument. V tem priročniku se bomo poglobljeno posvetili strukturi vsebine v HTML-ju: od globalnega ogrodja strani do naslovov, semantike, dostopnosti in nekaterih konkretnih vzorcev postavitve za resnične strani.

1. Globalni skelet dokumenta HTML

Vsak dokument HTML se začne z isto strukturo na visoki ravni: doctype, html, head in body. To se morda zdi kot šablonski vzorec, vendar vsak del igra ključno vlogo pri tem, kako brskalnik razčlenjuje in upodablja vašo vsebino ter kako iskalniki interpretirajo vašo stran.

Prva vrstica je deklaracija doctype, zapisana kot v HTML5. To navodilo ne ustvari vidnega izpisa; brskalniku naroči, naj uporabi standardni način namesto načina quirks, s čimer se izogne ​​​​zastarelim vedenjem upodabljanja, ki lahko popolnoma pokvarijo vašo postavitev ali CSS.

Takoj za doctype-om sledi korenski element , ki zavije celoten dokument. Skoraj vse – tako metapodatki dokumenta kot vidna stran – je shranjeno v … Tukaj na primer z atributom lang deklarirate tudi človeški jezik dokumenta za angleščino oz. za španščino iz Španije.

Deklariranje jezika z oznako lang je bistvenega pomena za dostopnost, SEO in prevajalska orodja. Bralniki zaslona ga uporabljajo za izbiro pravilnih pravil izgovorjave, iskalniki in samodejni prevajalniki ga uporabljajo za razumevanje primarnega jezika, CSS pa lahko celo cilja na jezikovno specifično oblikovanje z uporabo selektorjev, kot sta [lang|=”fr”] ali :lang(en).

Znotraj korenskega elementa html imate vedno dva neposredna podrejena elementa: in . Glava vsebuje vse metapodatke in vire, potrebne za interpretacijo in predstavitev strani (kodiranje, naslov, CSS, ikone, kanonične URL-je itd.), telo pa vsebuje vsebino, ki jo uporabniki dejansko vidijo in z njo komunicirajo v oknu brskalnika.

2. Kaj spada v (in zakaj je to pomembno)

Razdelek »glava« je za videče obiskovalce neviden, vendar je ključnega pomena za to, kako se vaše spletno mesto obnaša, deluje in uvršča. Informacije, ki jih vnesete tukaj, vodijo iskalnike, družbene platforme, brskalnike in naprave pri upravljanju in predstavitvi vaše strani.

Ena prvih stvari v notranjosti bi morala biti deklaracija kodiranja znakov z uporabo . UTF-8 je standard za HTML5, podpira praktično vse znake in emoji ter zagotavlja, da se vaši naslovi, besedilo, CSS in JavaScript pravilno interpretirajo ne glede na jezik ali simbole, ki jih uporabljate.

Vsaka stran mora opredeliti tudi edinstven in opisen element. Vsebina v notranjosti … prikaže se na zavihku brskalnika, med zaznamki, zgodovino brskalnika in, kar je najpomembneje, kot glavni naslov, na katerega je mogoče klikniti, na straneh z rezultati iskalnika, razen če ga prepišejo določene metaoznake. Z vidika SEO je to eden najvrednejših delov besedila v vašem dokumentu.

Drug skoraj obvezen metaelement v sodobnih postavitvah je deklaracija viewport-a. Uporaba Mobilnim brskalnikom naročite, naj prilagodijo velikost postavitve širini naprave, namesto da bi skrčili namizno zasnovo na majhen zaslon, kar je ključnega pomena za odzivno oblikovanje in za uspešno opravljanje osnovnih pregledov mobilnih naprav in dostopnosti.

Poleg nabora znakov, naslova in vidnega polja je glava mesto, kjer definirate večino metapodatkov, slogov in ključnih povezav. To vključuje SEO-usmerjene meta opise, datoteke CSS, ikone spletnih mest, različice alternativnih jezikov, kanonične URL-je, spletne manifeste, predhodne povezave in še veliko več. Vsi ti deli posredno prispevajo k razumevanju strukture vaše vsebine in k temu, kako uporabno se zdi vaše spletno mesto.

Bistveni metapodatki in strukturni viri

CSS je običajno povezan znotraj z uporabo . Zunanje slogovne predloge ločujejo predstavitev od strukture, jih je mogoče predpomniti na več straneh za boljšo učinkovitost in pomagajo ohranjati en sam vir resnice za vaš oblikovalski sistem.

CSS lahko vključite tudi v block within , or even import additional stylesheets from there. Razvijalci na primer včasih uporabljajo @import znotraj oznake sloga, da postavijo slogovno predlogo v določeno kaskadno plast, ali pa deklarirajo lastnosti po meri CSS (spremenljivke) na ravni :root, preden se nanje sklicujejo po celotnem spletnem mestu.

The Element služi več namenom kot le slogovnim predlogam. S spreminjanjem atributa rel lahko s parametrom rel=”icon” pokažete na ikono za priljubljeno, z parametroma rel=”alternate” in hreflang določite alternativne jezikovne različice, z parametroma rel=”canonical” določite kanonični URL ali pa se sklicujete na manifeste aplikacij in druga razmerja, ki bi jih morali brskalniki in pajki poznati.

Definiranje ikon z zagotavlja, da je vaša blagovna znamka prepoznavna na zavihku in med zaznamki brskalnika. Določite lahko različne velikosti ali vrste (na primer PNG ali SVG) in celo zagotovite posebne ikone za platforme, kot je iOS, z rel=”apple-touch-icon” ali masknimi ikonami za pripete zavihke v Safariju.

Alternativne povezave so ključne za večjezične nastavitve ali nastavitve sindikacije vsebin. Ko uporabljate Na primer, iskalnikom sporočate, da obstaja francoska različica iste strani in na katero kombinacijo jezika/regije cilja. Podobno lahko alternativne povezave kažejo na vire RSS ali različice PDF, če določite ustrezno vrsto.

Kanonični URL-ji, skripti in redko uporabljeni

Kanonske povezave z rel="canonical" pomagajo rešiti situacije s podvojeno vsebino, saj navajajo, kateri URL je avtoritativni vir. Če isti članek obstaja na več poteh ali je navzkrižno objavljen na drugih domenah, kanonični URL združi signale uvrstitve in prepreči iskalniku, da bi ugibal, katero različico naj indeksira.

JavaScript je priložen z uporabo element, which can either embed inline code or reference an external file through the src attribute. Ker JavaScript privzeto blokira upodabljanje, mnogi razvijalci postavijo oznake skriptov na konec telesa ali uporabijo atributa defer ali async, da se lahko vsebina HTML upodobi, preden se skripti izvedejo.

Atribut defer brskalniku sporoči, naj prenese skript brez blokiranja upodabljanja in ga izvede, ko je HTML v celoti razčlenjen. V nasprotju s tem se asinhronost izogne ​​tudi blokiranju med prenosom, vendar zažene skript takoj, ko je pripravljen, kar lahko prekine tok razčlenjevanja, kar je lahko težava, če je skript odvisen od elementov DOM, ki so definirani pozneje v dokumentu.

The Element , ki se pojavi samo v glavi, določa osnovni URL in privzeti cilj za vse relativne povezave. Z nastavitvijo Brskalniku dejansko sporočite, da je treba vsak relativni URL na strani razrešiti iz tega korena in ga po želji odpreti v določenem kontekstu brskanja, kot je novo okno ali okvir najvišje ravni.

Čeprav Čeprav je lahko močan, ima stranske učinke, zlasti za sidra na strani in relativne poti virov. V vsakem dokumentu je dovoljen samo en osnovni element, ki se mora pojaviti pred vsemi relativnimi URL-ji in pretvori preprosta sidra v celotne zahteve za URL-je s fragmenti, priloženimi osnovnemu href-u.

3. Vidna plast vsebine: in semantična postavitev

Vse, kar uporabniki dejansko vidijo in z čimer komunicirajo, živi znotraj element. Tukaj strukturirate svojo vsebino s semantičnimi elementi, ki opisujejo vlogo posameznega dela strani: navigacija, glavna vsebina, članki, stranske vrstice, noge in drugo.

HTML5 je uvedel niz semantičnih elementov postavitve, ki so nadomestili generične posode v mnogih situacijah. Elementi, kot so , , , , , in opišite pomen namesto zgolj videza, kar pomaga podpornim tehnologijam in iskalnikom zgraditi miselni zemljevid vaše strani.

običajno vsebuje uvodno vsebino ali navigacijo za stran ali za določen razdelek. To lahko vključuje logotip, naslov spletnega mesta, glavni meni ali glavni naslov. Glavo na ravni strani lahko imate blizu vrha telesa in dodatne glave znotraj razdelkov ali člankov, če potrebujete poduvode.

je namenjen navigacijskim blokom in se običajno uporablja za glavne menije ali skupine pomembnih povezav. Glavno navigacijo lahko postavite v glavo, vendar se lahko navigacija prikaže tudi drugje, na primer v stranski vrstici ali nogi, če se uporablja za navigacijo in ne za generične zbirke nepovezanih povezav.

označuje edinstveno, osrednjo vsebino strani in se mora pojaviti le enkrat na dokument. Znotraj glavnega menija boste običajno organizirali svojo vsebino z uporabo za tematske bloke, za neodvisne prispevke, kot so objave na blogih ali novice, in za povezane, a sekundarne informacije, kot so opombe, oglasi ali dopolnilna navigacija.

Oddelki, članki, odstavki in podnožja

predstavlja tematsko ločen blok vsebine, običajno s svojim naslovom. To je lahko poglavje v dolgem članku, blok »Značilnosti« na strani izdelka ali del vaše domače strani, kot sta »Pričevanja« ali »Cenik«. Razdelki pomagajo razdeliti kompleksne dokumente na logične dele.

se uporablja za samostojno vsebino, ki lahko stoji samostojno zunaj okoliškega konteksta. Primeri vključujejo objave v spletnem dnevniku, vnose v dokumentacijo, komentarje uporabnikov, novice ali sporočila na forumu. Članek pogosto vključuje svojo glavo (z naslovom, avtorjem in datumom) in nogo (z oznakami, povezavami za skupno rabo ali metapodatki).

je rezervirano za vsebino, ki je posredno povezana z glavnim tokom, kot so stranske vrstice, citati, povezane povezave ali oglasni bloki. Ker je njegov namen dopolnilen, ga lahko bralniki zaslona in druga orodja ustrezno obravnavajo, uporabniki pa lažje ločijo osrednjo pripoved od sekundarnih dodatkov.

prikaže se na koncu razdelka ali na dnu celotne strani. Noga na ravni strani običajno vsebuje obvestila o avtorskih pravicah, kontaktne podatke, sekundarno navigacijo, pravne povezave ali podatke o spletnem mestu, medtem ko lahko noga na ravni članka vsebuje biografije avtorjev, kategorije, datume posodobitev ali sorodne objave.

Prilagodljivost teh elementov pomeni, da jih lahko mešate in gnezdite, da se ujemajo z vašo zasnovo, vendar če se držite njihovega predvidenega pomena, ostane vaš HTML prenosljiv in razumljiv. Na primer, lahko legitimno postavite nav znotraj glave ali drugam v telesu, vendar ne smete uporabljati nav za naključne nize povezav, ki niso del navigacije, ali uporabljati main večkrat na stran.

4. Hierarhija naslovov in besedilna struktura

Naslovi so hrbtenica strukture vaše vsebine, ki določajo hierarhijo tem in podtem v celotnem dokumentu. HTML ponuja šest ravni naslovov, od (najpomembnejše) do (najmanj pomembno), in način, kako jih organizirate, vpliva tako na človeške bralce kot na iskalnike.

Običajno obstaja en sam ki izraža glavno temo strani, ki ji sledi za primarne odseke in - za globlje pododdelke. Ko si dva naslova delita isto raven, predstavljata sorodne razdelke, medtem ko naslov nižje ravni uvaja vgnezdeni podrazdelek znotraj prejšnjega, višje ravni.

Odstavki in druga vsebina, ki sledijo naslovu, spadajo v razdelek, ki ga določa ta naslov. Ko se pojavi nov naslov iste ravni, se prejšnji razdelek šteje za zaprtega in začne se nov. To implicitno strukturo uporabljajo podporne tehnologije za izgradnjo orisa, skozi katerega lahko uporabniki hitro preskočijo.

Samovoljno preskakovanje nivojev – na primer skok neposredno s h1 na h4 – lahko zmede tako avtomatizirana orodja kot bralnike. Splošno priporočilo je, da se v hierarhiji premikate korak za korakom: od h1 do h2 za podrazdelke, nato po izbiri do h3 in tako naprej, pri globljem gnezdenju vsebine pa se spuščate le za eno raven naenkrat.

Brskalniki običajno uporabljajo privzete sloge za naslove: večje velikosti pisav, krepko težo in dodaten navpični razmik. Ti vgrajeni slogi že omogočajo vizualno podobo strukture, vendar lahko predstavitev izboljšate s CSS-jem, hkrati pa ohranite osnovno semantično hierarhijo nedotaknjeno.

Odstavki, seznami in semantika v vrstici

Običajna besedilna vsebina gre v elementi, od katerih vsak predstavlja ločen odstavek. Če na odstavek ohranimo eno glavno idejo, se izboljša berljivost in je to v skladu s tem, kako podporne tehnologije uporabnikom omogočajo navigacijo po blokih besedila.

Urejeni seznami ( ) in neurejeni seznami ( ) z Elementi so idealni za združene informacije, kot so koraki, funkcije ali pogosta vprašanja. Urejeni seznami izražajo zaporedje ali prioriteto, medtem ko neurejeni seznami preprosto združujejo povezane elemente, ne da bi nakazovali vrstni red; oba sta izjemno koristna za strukturiranje kompleksnih razlag.

Vrstični elementi, kot so , , in drugi, obogatijo vsebino, ne da bi pri tem prekinili tok odstavka. sporoča velik pomen (in je običajno prikazan krepko), poudarja besedilo (pogosto v poševnem tisku) in ustvarja hiperpovezave, ki povezujejo dokumente na vašem spletnem mestu ali z zunanjimi viri.

Slike z se štejejo za nadomeščene elemente in ne ovijajo vsebine, vendar še vedno sodelujejo v semantični strukturi prek atributov, kot je alt. Atribut alt je še posebej pomemben za dostopnost in SEO, saj opisuje sliko uporabnikom, ki je ne morejo videti, in iskalnikom, ki razčlenjujejo samo besedilo.

Premišljeno kombiniranje elementov na ravni blokov in vrstičnih elementov vam omogoča, da hierarhijo, odnose in poudarke izrazite zgolj s HTML-jem, vizualne podrobnosti, kot so barve, pisave in razmiki, pa prepustite CSS-ju. Ta ločitev skrbi ohranja čistočo označevanja in olajša kasnejše spremembe oblikovanja.

5. Dostopnost in jezik v strukturi vsebine

Dobro strukturiran dokument HTML ni le urejen videz; je ​​predpogoj za dostopnost. Ljudje, ki se zanašajo na bralnike zaslona, ​​navigacijo s tipkovnico ali druge podporne tehnologije, so odvisni od semantike vašega HTML-ja, da bi razumeli in se učinkovito premikali po vsebini.

Deklarisanje jezika dokumenta z lang na element je eden prvih korakov dostopnosti. Ko je jezik ekspliciten, bralniki zaslona izberejo pravilno izgovorjavo in slovarje, orodja za avtomatizirano prevajanje pa natančneje obravnavajo vašo vsebino v različnih regijah in narečjih.

Spremembe jezika lahko označite tudi znotraj telesa z uporabo elementov lang, kot sta ali . Ko se del kode preklopi v drug jezik, nastavitev parametra lang=”fr-CA” ali lang=”pt-BR” na ta del kode sporoči podpornim orodjem, da se morajo pravila izgovorjave in branja spremeniti samo za ta del.

Poleg jezika jedro dostopne strukture tvorijo tudi naslovi, orientacijski elementi in alternativno besedilo. Jasna hierarhija naslovov, pravilna uporaba glavnih elementov, elementov nav, glave, noge, razdelka in ob strani ter smiselni atributi alt na slikah omogočajo podpornim tehnologijam, da zgradijo oris in zagotovijo navigacijo po mejnikih, kot sta »skok na glavno vsebino« ali »pojdi na navigacijo«.

Barva in vizualno oblikovanje ne smeta biti edini način posredovanja pomembnih informacij. Visok kontrast, berljive velikosti pisav, stanja fokusa za interaktivne elemente in opisna besedila povezav, kot je »Preberite več o požarni varnosti« namesto le »Kliknite tukaj«, so del tega, da bo vaša strukturirana vsebina uporabna za čim več ljudi.

Preverjanje kode HTML in izvajanje preverjanj dostopnosti z avtomatiziranimi orodji in ročnimi testi pomagata zgodaj odkriti strukturne težave. Orodja lahko zaznajo manjkajoče atribute alt, neveljavno gnezdenje, pokvarjena zaporedja naslovov ali napačno uporabo orientacijskih točk, kar je mogoče popraviti neposredno v označevanju, preden to vpliva na dejanske uporabnike.

6. Načrtovanje vsebinske strukture spletnega mesta

Preden napišete eno samo oznako, se splača načrtovati logično strukturo vašega spletnega mesta in strani. Razmišljanje v smislu razdelkov, informacijskih prioritet in navigacijskih tokov vodi do HTML-ja, ki ga je lažje vzdrževati, razširjati in optimizirati za iskalnike.

Pogosto izhodišče je skiciranje zemljevida spletnega mesta ali strukturnega diagrama spletnega mesta. To običajno vključuje strani najvišje ravni, kot so Domov, O nas, Storitve, Blog, Kontakt, nato pa vse podstrani ali kategorije, ki se od njih odcepijo in prikazujejo, kako se bodo uporabniki premikali med njimi.

Znotraj ene same strani lahko začrtate svojo prihodnjo strukturo HTML kot niz semantičnih blokov. Na primer, lahko definirate glavo z logotipom in navigacijo, glavno območje z več razdelki (junak, funkcije, pričevanja, cene), prostor za sekundarno vsebino in nogo s kontaktnimi podatki in pravnimi povezavami.

Zgodnje dodeljevanje naslovov tem blokom ohranja skladnost hierarhije h1-h6. Vnaprej se odločite, kakšen bo posamezni naslov h1, kateri razdelki si zaslužijo naslove h2 in kje so potrebni globlji podnaslovi, kot sta h3 ali h4, za razlago kompleksnih tem, ne da bi bralca preobremenili.

Z vidika SEO in UX je pametno ključno vsebino in pomembne razdelke postaviti prej v DOM. Iskalniki običajno namenijo več pozornosti vsebini blizu vrha dokumenta, uporabniki pa cenijo hitro iskanje primarnih informacij, namesto da bi se pomikali mimo dolgih uvodov ali okrasnih elementov.

Najboljše prakse za vzdrževalne strukture HTML

Po potrebi uporabite opisna imena razredov in ID-je za označevanje strukturnih elementov, vendar se izogibajte prekomernemu vgnezdevanju elementov div. Razredi, kot so .main-nav, .site-header ali .sidebar, vam na prvi pogled povedo, kaj komponenta počne, zaradi česar je vaš HTML in CSS veliko lažje berljiv mesece kasneje.

HTML naj bo čim bolj raven, hkrati pa naj bo še vedno izražena pristna hierarhija. Globoko vgnezdene vsebnike, ki obstajajo le za oblikovanje, je pogosto mogoče nadomestiti z bolj premišljenim CSS-jem, kar ima za posledico čistejše in lažje označevanje, s katerim je lažje delati vsem.

Združite sorodno vsebino znotraj semantičnih elementov, namesto da jo razpršite po strani. Na primer, objava v spletnem dnevniku bi morala biti znotraj članka, z naslovom, datumom, avtorjem in vsebino skupaj, medtem ko so lahko povezane objave ali biografija avtorja v obrobju ali v nogi članka, jasno ločene od glavne pripovedi.

Vsakič, ko razširite stran ali preoblikujete razdelek, ponovno preglejte svojo strukturo. V dokumentih HTML se sčasoma zlahka kopičijo enkratni ovoji in ad-hoc elementi, zato se njihovo občasno preoblikovanje v koherentno semantično obliko izplača pri vzdrževanju, delovanju in dostopnosti.

Dokumentiranje strukturnih vzorcev – na primer načina gradnje glav, razdelkov, člankov in nog – pomaga ohranjati doslednost velikih ekip. Majhna notranja smernica, ki pojasnjuje, katere elemente uporabiti za navigacijo, kako organizirati naslove in kako označiti ponavljajoče se komponente, lahko prepreči, da bi se vaša kodna baza spremenila v strukturni mozaik.

7. Praktični strukturni vzorci za pogoste vrste strani

Različne vrste strani imajo običajno skupne strukturne vzorce, ki jih lahko ponovno uporabite in prilagodite med projekti. Prepoznavanje teh vzorcev vam bo pomagalo oblikovati strukture vsebine, ki se uporabnikom zdijo naravne in jih je enostavno implementirati v HTML.

Tipična domača stran se lahko začne z globalnim ki vsebuje logotip in primarno . Temu pogosto sledi z več bloki: glavni del s h1 in pozivom k dejanju, del s funkcijami, morda del za pričevanja in zadnji del, ki uporabnike vabi, da stopijo v stik ali se prijavijo.

Pod glavno vsebino je običajno zagotavlja globalne informacije in dodatno navigacijo. Povezave do pravilnikov o zasebnosti, pogojev storitve, možnosti stika, družbenih omrežij in sekundarnih menijev so tukaj, zato jih je enostavno najti, ne da bi odvračale pozornost od zgornje glavne vsebine.

Stran z objavo v spletnem dnevniku je odličen kandidat za element. Članek običajno vsebuje svojo glavo z naslovom objave (pogosto h1 strani), datumom objave in podatki o avtorju, sledi pa telo objave, razdeljeno na odseke z naslovi h2/h3, in na koncu še nogo članka z oznakami, gumbi za deljenje ali povezavami do sorodne vsebine.

Stranske vrstice ali sekundarne plošče so naravno predstavljene z elementi. Lahko vključujejo sezname nedavnih objav, filtre kategorij, obrazce za prijavo na novice ali kontekstualno pomoč. Ker je stran pomensko označena kot dopolnilna vsebina, jo lahko podporne tehnologije uporabnikom predstavijo kot tako.

Strani s stiki in strani s storitvami ponovno uporabljajo iste gradnike, vendar poudarjajo jasnost in enostavnost interakcije. Jasni naslovi, jedrnati odstavki, pravilno označeni kontrolniki obrazca in logičen vrstni red branja zagotavljajo, da lahko uporabniki brez ugibanja najdejo način, kako vas kontaktirati ali razumeti vašo ponudbo.

8. HTML elementi, atributi in njihova vloga v strukturi

Pod vsemi temi vzorci se vse v HTML-ju zreducira na elemente, oznake in atribute. Razumevanje njihovega medsebojnega delovanja vam omogoča podroben nadzor nad strukturo vsebine, predstavitvenimi elementi in delovanjem.

Element HTML je sestavljen iz uvodne oznake, neobveznih atributov, nekaj vsebine in v večini primerov zaključne oznake. Na primer, To je odstavek. vključuje začetno oznako , besedilno vozlišče in končna oznaka , ki vsi skupaj predstavljajo element odstavka.

Atributi se pojavijo znotraj uvodne oznake in zagotavljajo dodatne informacije o elementu. Pojavljajo se kot pari ime=»vrednost«, kot so class=»highlight«, id=»uvod« ali href=»/kontakt«. Nekateri atributi so globalni in se lahko pojavijo na katerem koli elementu (kot so class, id, lang), drugi pa so specifični za določene oznake (kot je src za sliko ali type za vnos).

Razredi so še posebej pomembni za strukturiranje in oblikovanje večjih dokumentov. Z dodelitvijo istega razreda več elementom – recimo class=”important” – lahko uporabite običajna pravila CSS ali jih ciljate v JavaScriptu, s čimer ohranite svojo strukturo prilagodljivo, hkrati pa jo je mogoče upravljati.

Vsi elementi ne potrebujejo zaključnih oznak; nekateri so prazni (void) elementi, ki nimajo vsebine. Elementi, kot so , , in spadajo v to kategorijo. Še vedno sodelujejo v vaši strukturi, vendar le prek svojih atributov, saj ne ovijajo notranjega besedila ali podrejenih elementov.

Konzorcij za svetovni splet (W3C) vzdržuje specifikacijo, ki določa, kako vsi ti elementi in atributi delujejo skupaj. Upoštevanje teh standardov zagotavlja, da so vaše strani združljive z različnimi brskalniki in napravami ter da se vaša skrbno zasnovana struktura vsebine obnaša predvidljivo za vsakega obiskovalca.

Če vse to uporabite v praksi, HTML obravnavajte kot semantično hrbtenico svojega spletnega mesta: jasen oris dokumenta, natančna uporaba naslovov, premišljena postavitev z glavnim naslovom, razdelkom, člankom, stranskim naslovom in podnožjem, dostopni metapodatki v glavi in ​​smiselni atributi na vsakem elementu skupaj olajšajo branje, navigacijo in dobro uvrstitev vaše vsebine v iskalnikih.