Struktura HTML sadržaja: cjeloviti vodič za izradu kvalitetnih stranica

Početna » Piton » Struktura HTML sadržaja: cjeloviti vodič za izradu kvalitetnih stranica

Učenje strukturiranja sadržaja u HTML-u je razlika između stranice koja jednostavno "prikazuje nešto na ekranu" i stranice koja je jednostavna za navigaciju, pristupačna i optimizirana za tražilice. Kada je vaš HTML organiziran s jasnom hijerarhijom, preglednici, tražilice i pomoćne tehnologije odmah razumiju što svaki odjeljak znači i kako se sve to uklapa.

Umjesto da HTML smatrate samo načinom dodavanja oznaka na stranicu, korisno ga je vidjeti kao nacrt vašeg dokumenta. S čvrstom strukturom definirate gdje se nalazi vaš glavni sadržaj, kako su naslovi povezani, što je navigacija, što su sekundarne informacije i koji dijelovi opisuju sam dokument u zaglavlju. U ovom ćemo vodiču detaljno proći kroz strukturu sadržaja u HTML-u: od globalnog kostura stranice, do naslova, semantike, pristupačnosti i nekih konkretnih obrazaca izgleda za stvarne stranice.

1. Globalni kostur HTML dokumenta

Svaki HTML dokument započinje istom visokorazinskom strukturom: doctype, html, head i body. Ovo možda izgleda kao šablonski primjer, ali svaki dio igra ključnu ulogu u načinu na koji preglednik parsira i prikazuje vaš sadržaj te kako tražilice interpretiraju vašu stranicu.

Prvi redak je deklaracija doctype-a, napisana kao u HTML5. Ova instrukcija ne proizvodi vidljivi izlaz; ona govori pregledniku da koristi standardni način rada umjesto načina rada s nedoumicama, izbjegavajući naslijeđena ponašanja renderiranja koja mogu potpuno uništiti vaš izgled ili CSS.

Odmah nakon doctype-a dolazi korijenski element , koji obuhvaća cijeli dokument. Gotovo sve - i metapodaci dokumenta i vidljiva stranica - nalazi se unutra ... Ovdje također deklarirate ljudski jezik dokumenta s atributom lang, na primjer za engleski ili za španjolski iz Španjolske.

Deklariranje jezika pomoću lang ključno je za pristupačnost, SEO i alate za prevođenje. Čitači zaslona ga koriste za odabir ispravnih pravila izgovora, tražilice i automatski prevoditelji ga koriste za razumijevanje primarnog jezika, a CSS čak može ciljati stil specifičan za jezik pomoću selektora poput [lang|=”fr”] ili :lang(en).

Unutar korijenskog html elementa uvijek imate dva izravna potomka: i . Zaglavlje sadrži sve metapodatke i resurse potrebne za interpretaciju i prikaz stranice (kodiranje, naslov, CSS, ikone, kanonske URL-ove itd.), dok tijelo sadrži sadržaj koji korisnici zapravo vide i s kojim komuniciraju u prozoru preglednika.

2. Što spada u (i zašto je to važno)

Zaglavlje je nevidljivo videćim posjetiteljima, ali je apsolutno ključno za ponašanje, performanse i rangiranje vaše stranice. Informacije koje ovdje unesete vode tražilice, društvene platforme, preglednike i uređaje o tome kako rukovati vašom stranicom i kako je prezentirati.

Jedna od prvih stvari unutra trebala bi biti deklaracija kodiranja znakova pomoću . UTF-8 je standard za HTML5, podržava gotovo svaki znak i emoji te osigurava da se vaši naslovi, tekst, CSS i JavaScript ispravno interpretiraju bez obzira na jezik ili simbole koje koristite.

Svaka stranica također mora definirati jedinstven i opisni element. Sadržaj unutra ... pojavljuje se u kartici preglednika, oznakama, povijesti preglednika i, što je najvažnije, kao primarni naslov na koji se može kliknuti na stranicama rezultata tražilice, osim ako ga ne prebrišu određene meta oznake. Sa stajališta SEO-a, ovo je jedan od najvrijednijih dijelova teksta u vašem dokumentu.

Još jedan gotovo obavezan meta element u modernim izgledima je deklaracija viewport-a. Korištenje Mobilnim preglednicima govorite da prilagode veličinu izgleda širini uređaja umjesto da smanjuju dizajn stolnog računala na mali zaslon, što je ključno za responzivni dizajn i za prolazak osnovnih mobilnih i revizija pristupačnosti.

Osim skupa znakova, naslova i prikaza, zaglavlje je mjesto gdje definirate većinu svojih metapodataka, stilova i ključnih poveznica. To uključuje SEO orijentirane meta opise, CSS datoteke, ikone web-mjesta, verzije alternativnih jezika, kanonske URL-ove, web manifeste, preconnects i još mnogo toga. Svi ovi dijelovi neizravno doprinose tome kako se struktura vašeg sadržaja razumije i koliko se vaša web-lokacija osjeća upotrebljivom.

Bitni metapodaci i strukturni resursi

CSS je obično povezan unutra koristeći . Vanjski stilski listovi odvajaju prezentaciju od strukture, mogu se pohraniti u predmemoriju na više stranica radi boljih performansi i pomažu u održavanju jedinstvenog izvora istine za vaš dizajnerski sustav.

Također možete uključiti CSS u block within , or even import additional stylesheets from there. Na primjer, programeri ponekad koriste @import unutar oznake stila kako bi smjestili stilski list u određeni kaskadni sloj ili deklariraju prilagođena CSS svojstva (varijable) na :root razini prije nego što ih referenciraju na cijeloj web stranici.

The Element služi za više svrha od samo stilskih listova. Promjenom atributa rel možete ukazati na favicon s rel=”icon”, definirati alternativne jezične verzije s rel=”alternate” i hreflang, odrediti kanonski URL s rel=”canonical” ili referencirati manifeste aplikacije i druge odnose koje bi preglednici i roboti za indeksiranje trebali znati.

Definiranje ikona pomoću osigurava prepoznatljivost vašeg brenda u kartici i oznakama preglednika. Možete odrediti različite veličine ili vrste (kao što su PNG ili SVG), pa čak i pružiti posebne ikone za platforme poput iOS-a s rel=”apple-touch-icon” ili maskirati ikone za prikvačene kartice u Safariju.

Alternativne poveznice ključne su za višejezične postavke ili postavke sindikacije sadržaja. Kada koristite , na primjer, govorite tražilicama da postoji francuska verzija iste stranice i koju kombinaciju jezika/regije cilja. Slično tome, alternativne poveznice mogu ukazivati ​​na RSS feedove ili PDF varijante ako navedete odgovarajuću vrstu.

Kanonski URL-ovi, skripte i rijetko korišteni sadržaji

Kanonske poveznice s rel="canonical" pomažu u rješavanju situacija s dupliciranim sadržajem tako što ukazuju na to koji je URL autoritativni izvor. Ako isti članak postoji na više putanja ili je objavljen na drugim domenama, kanonski URL objedinjuje signale rangiranja i sprječava tražilicu da nagađa koju verziju indeksirati.

JavaScript je priložen pomoću element, which can either embed inline code or reference an external file through the src attribute. Budući da JavaScript prema zadanim postavkama blokira renderiranje, mnogi programeri postavljaju oznake skripti na kraj tijela ili koriste atribute defer ili async kako bi se HTML sadržaj mogao renderirati prije izvršavanja skripti.

Atribut defer govori pregledniku da preuzme skriptu bez blokiranja renderiranja i da je izvrši nakon što je HTML potpuno parsiran. Nasuprot tome, asinkronost također izbjegava blokiranje tijekom preuzimanja, ali pokreće skriptu čim je spremna, potencijalno prekidajući tok parsiranja, što može biti problem kada skripta ovisi o DOM elementima definiranim kasnije u dokumentu.

The Element, koji se pojavljuje samo u zaglavlju, definira osnovni URL i zadani cilj za sve relativne poveznice. Postavljanjem Učinkovito govorite pregledniku da svaki relativni URL na stranici treba biti razriješen iz tog korijena i, opcionalno, otvoren u određenom kontekstu pregledavanja kao što je novi prozor ili okvir najviše razine.

Iako može biti moćan, ima nuspojave, posebno za sidra unutar stranice i relativne putanje resursa. Dopušten je samo jedan osnovni element po dokumentu, mora se pojaviti prije bilo kojeg relativnog URL-a i transformira jednostavna sidra u zahtjeve za punim URL-om s fragmentima pridruženim osnovnom href-u.

3. Vidljivi sloj sadržaja: i semantički raspored

Sve što korisnici zapravo vide i s čime komuniciraju nalazi se unutar element. Ovdje strukturirate svoj sadržaj semantičkim elementima koji opisuju ulogu svakog dijela stranice: navigacija, glavni sadržaj, članci, bočne trake, podnožja i drugo.

HTML5 je uveo skup semantičkih elemenata izgleda koji su zamijenili generičke kontejnere u mnogim situacijama. Elementi kao što su , , , , , i opisuju značenje umjesto pukog izgleda, što pomaže pomoćnim tehnologijama i tražilicama da izgrade mentalnu mapu vaše stranice.

obično sadrži uvodni sadržaj ili navigaciju za stranicu ili za određeni odjeljak. To može uključivati ​​logotip, naslov web-mjesta, glavni izbornik ili glavni naslov. Možete imati zaglavlje na razini stranice pri vrhu tijela i dodatna zaglavlja unutar odjeljaka ili članaka kada su vam potrebni poduvodi.

namijenjen je navigacijskim blokovima i obično se koristi za glavne izbornike ili grupe važnih poveznica. Glavnu navigaciju možete postaviti unutar zaglavlja, ali navigacija se može pojaviti i negdje drugdje, na primjer u bočnoj traci ili podnožju, sve dok se koristi za navigaciju, a ne za generičke zbirke nepovezanih poveznica.

označava jedinstveni, središnji sadržaj stranice i trebao bi se pojaviti samo jednom po dokumentu. Unutar glavnog sadržaja obično ćete organizirati svoj sadržaj koristeći za tematske blokove, za neovisne članke poput objava na blogu ili vijesti i za povezane, ali sekundarne informacije poput dodatnih bilješki, oglasa ili komplementarne navigacije.

Odjeljci, članci, odlomci i podnožja

predstavlja tematski zaseban blok sadržaja, obično s vlastitim naslovom. To može biti poglavlje u dugom članku, blok "Značajke" na stranici proizvoda ili dio vaše početne stranice kao što su "Preporuke" ili "Cijene". Odjeljci pomažu u dijeljenju složenih dokumenata u logičke dijelove.

koristi se za samostalni sadržaj koji može stajati samostalno izvan okolnog konteksta. Primjeri uključuju objave na blogu, unose u dokumentaciju, komentare korisnika, vijesti ili poruke na forumu. Članak često uključuje vlastito zaglavlje (s naslovom, autorom i datumom) i podnožje (s oznakama, poveznicama za dijeljenje ili metapodacima).

rezerviran je za sadržaj koji je tangencijalno povezan s glavnim tokom, kao što su bočne trake, citati, povezane poveznice ili reklamni blokovi. Budući da mu je svrha dodatna, čitači zaslona i drugi alati mogu ga tretirati u skladu s tim, a korisnici mogu lakše razlikovati glavnu naraciju od sekundarnih dodataka.

pojavljuje se na kraju odjeljka ili na dnu cijele stranice. Podnožje na razini stranice obično sadrži obavijesti o autorskim pravima, kontaktne podatke, sekundarnu navigaciju, pravne poveznice ili podatke o autorima web-mjesta, dok podnožje na razini članka može sadržavati biografije autora, kategorije, datume ažuriranja ili povezane objave.

Fleksibilnost ovih elemenata znači da ih možete miješati i ugnijezditi kako bi odgovarali vašem dizajnu, ali pridržavanje njihovog namjeravanog značenja održava vaš HTML prenosivim i razumljivim. Na primjer, možete legitimno postaviti nav unutar zaglavlja ili negdje drugdje u tijelu stranice, ali ne biste trebali koristiti nav za nasumične skupove poveznica koje nisu dio navigacije ili koristiti main više puta po stranici.

4. Hijerarhija naslova i tekstualna struktura

Naslovi su okosnica strukture sadržaja, definirajući hijerarhiju tema i podtema u cijelom dokumentu. HTML nudi šest razina zaglavlja, od (najvažnije) do (najmanje važno), a način na koji ih organizirate utječe i na ljudske čitatelje i na tražilice.

Obično postoji jedan koji izražava glavnu temu stranice, nakon čega slijedi za primarne dijelove i - za dublje pododjeljke. Kada dva naslova dijele istu razinu, oni predstavljaju srodne odjeljke, dok naslov niže razine uvodi ugniježđeni pododjeljak unutar prethodnog naslova više razine.

Odlomci i ostali sadržaj koji slijedi iza naslova pripadaju odjeljku definiranom tim naslovom. Kada se pojavi novi naslov iste razine, prethodni odjeljak se smatra zatvorenim i počinje novi. Pomoćne tehnologije koriste ovu implicitnu strukturu za izgradnju pregleda kroz koji korisnici mogu brzo preskakati.

Proizvoljno preskakanje razina - poput preskakanja s h1 izravno na h4 - može zbuniti i automatizirane alate i čitatelje. Opća preporuka je kretanje korak po korak u hijerarhiji: od h1 do h2 za pododjeljke, zatim opcionalno do h3 i tako dalje, spuštajući se samo jednu razinu po jednu prilikom dubljeg ugniježđivanja sadržaja.

Preglednici obično primjenjuju zadane stilove na naslove: veće veličine fonta, podebljano i dodatni vertikalni razmak. Ovi ugrađeni stilovi već čine strukturu vizualno vidljivom, ali prezentaciju možete poboljšati CSS-om, a pritom zadržati temeljnu semantičku hijerarhiju netaknutom.

Paragrafi, popisi i inline semantika

Normalni tekstualni sadržaj ide u elementi, od kojih svaki predstavlja zaseban odlomak. Zadržavanje jedne glavne ideje po odlomku poboljšava čitljivost i usklađeno je s načinom na koji pomoćne tehnologije omogućuju korisnicima navigaciju kroz blokove teksta.

Uređene liste ( ) i neuređene liste ( ) s Stavke su idealne za grupirane informacije kao što su koraci, značajke ili često postavljana pitanja. Uređene liste prenose redoslijed ili prioritet, dok neuređene liste jednostavno grupiraju povezane stavke bez impliciranja redoslijeda; obje su izuzetno korisne za strukturiranje složenih objašnjenja.

Ugrađeni elementi poput , , i drugih obogaćuju sadržaj bez prekidanja tijeka odlomka. prenosi snažnu važnost (i obično se pojavljuje podebljano), naglašava tekst (često kurzivom) i stvara hiperveze koje povezuju dokumente na vašoj web-lokaciji ili s vanjskim resursima.

Slike s smatraju se zamijenjenim elementima i ne omotavaju sadržaj, ali i dalje sudjeluju u semantičkoj strukturi putem atributa poput alt. Atribut alt je posebno važan za pristupačnost i SEO, budući da opisuje sliku korisnicima koji je ne mogu vidjeti i tražilicama koje parsiraju samo tekst.

Pažljivo kombiniranje blokovskih i inline elemenata omogućuje vam izražavanje hijerarhije, odnosa i naglaska isključivo putem HTML-a, ostavljajući vizualne detalje poput boja, fontova i razmaka CSS-u. Ovo odvajanje briga održava vaše oznake čistim i olakšava kasnije promjene dizajna.

5. Pristupačnost i jezik u strukturi sadržaja

Dobro strukturiran HTML dokument nije samo uredan izgled; on je preduvjet za pristupačnost. Ljudi koji se oslanjaju na čitače zaslona, ​​navigaciju pomoću tipkovnice ili druge pomoćne tehnologije ovise o vašoj HTML semantici kako bi razumjeli i učinkovito se kretali kroz sadržaj.

Deklariranje jezika dokumenta s lang na element je jedan od prvih koraka pristupačnosti. Kada je jezik eksplicitan, čitači zaslona odabiru ispravan izgovor i rječnike, a automatizirani alati za prevođenje preciznije obrađuju vaš sadržaj u različitim regijama i dijalektima.

Također možete označiti promjene jezika unutar tijela pomoću lang na elementima poput ili . Kada se fragment prebaci na drugi jezik, postavljanje `lang=”fr-CA” ili `lang=”pt-BR” na taj isječak signalizira pomoćnim alatima da se pravila izgovora i čitanja trebaju promijeniti samo za taj dio.

Osim jezika, naslovi, orijentiri i alternativni tekst čine jezgru pristupačne strukture. Jasna hijerarhija naslova, ispravna upotreba glavnih, navigacijskih elemenata, zaglavlja, podnožja, sekcije i aside atributa, plus značajni alt atributi na slikama, omogućuju pomoćnim tehnologijama izradu strukture i pružanje orijentirne navigacije poput "skoči na glavni sadržaj" ili "idi na navigaciju".

Boja i vizualni stil nikada ne bi trebali biti jedini način prenošenja važnih informacija. Visoki kontrast, čitljive veličine fonta, stanja fokusa za interaktivne elemente i opisni tekstovi poveznica poput „Pročitajte više o sprječavanju požara“ umjesto samo „Kliknite ovdje“ dio su toga da vaš strukturirani sadržaj bude upotrebljiv za što veći broj ljudi.

Validacija HTML-a i provođenje provjera pristupačnosti pomoću automatiziranih alata i ručnih testova pomaže u ranom otkrivanju strukturnih problema. Alati mogu otkriti nedostajuće alt atribute, nevažeće ugniježđivanje, oštećene nizove zaglavlja ili netočnu upotrebu orijentira, a sve se to može ispraviti izravno u vašem označavanju prije nego što utječe na stvarne korisnike.

6. Planiranje strukture sadržaja web stranice

Prije nego što napišete jednu oznaku, isplati se isplanirati logičku strukturu vaše web-lokacije i stranica. Razmišljanje u smislu odjeljaka, prioriteta informacija i navigacijskih tokova dovodi do HTML-a koji je lakše održavati, proširivati ​​i optimizirati za tražilice.

Uobičajena početna točka je skiciranje mape stranice ili strukturnog dijagrama web stranice. To obično uključuje stranice najviše razine kao što su Početna, O nama, Usluge, Blog, Kontakt, a zatim sve podstranice ili kategorije koje se od njih odvajaju, pokazujući kako će se korisnici kretati između njih.

Unutar jedne stranice možete mapirati svoju buduću HTML strukturu kao niz semantičkih blokova. Na primjer, možete definirati zaglavlje s logotipom i navigacijom, glavno područje s nekoliko odjeljaka (junak, značajke, recenzije, cijene), dio za sekundarni sadržaj i podnožje koje sadrži kontaktne podatke i pravne poveznice.

Dodjeljivanje naslova tim blokovima u ranoj fazi održava vašu h1-h6 hijerarhiju koherentnom. Unaprijed odlučujete što će biti jedan h1 naslov, koji odjeljci zaslužuju h2 naslove i gdje su potrebni dublji podnaslovi poput h3 ili h4 kako bi se objasnile složene teme bez preopterećenja čitatelja.

Iz perspektive SEO-a i UX-a, pametno je ključni sadržaj i važne odjeljke postaviti ranije u DOM-u. Tražilice općenito obraćaju više pažnje na sadržaj pri vrhu dokumenta, a korisnici cijene brzo pronalaženje primarnih informacija umjesto pomicanja pored dugih uvoda ili ukrasnih elemenata.

Najbolje prakse za održive HTML strukture

Koristite opisne nazive klasa i ID-ove za označavanje strukturnih elemenata kada je to potrebno, ali izbjegavajte pretjerano ugniježđivanje div-ova. Klase poput .main-nav, .site-header ili .sidebar vam na prvi pogled govore što komponenta radi, što vaš HTML i CSS čini puno lakšim za čitanje mjesecima kasnije.

Neka vaš HTML bude što ravniji, a da pritom i dalje izražavate istinsku hijerarhiju. Duboko ugniježđeni kontejneri koji postoje samo za stiliziranje često se mogu zamijeniti promišljenijim CSS-om, što rezultira čišćim i lakšim označavanjem s kojim je svima lakše raditi.

Grupirajte povezani sadržaj unutar semantičkih elemenata umjesto da ga raspršite po stranici. Na primjer, objava na blogu trebala bi se nalaziti unutar članka, s naslovom, datumom, autorom i sadržajem zajedno, dok povezane objave ili biografija autora mogu biti smještene sa strane ili u podnožju članka, jasno odvojene od glavne naracije.

Ponovno pregledajte svoju strukturu svaki put kada proširite stranicu ili redizajnirate odjeljak. HTML dokumenti lako s vremenom akumuliraju jednokratne omotače i ad-hoc elemente, stoga se njihovo povremeno refaktoriranje natrag u koherentan semantički oblik isplati u smislu održivosti, performansi i pristupačnosti.

Dokumentiranje strukturnih obrazaca - poput načina na koji gradite zaglavlja, odjeljke, članke i podnožja - pomaže u održavanju dosljednosti u velikim timovima. Mala interna smjernica koja objašnjava koje elemente koristiti za navigaciju, kako organizirati naslove i kako označavati ponovljene komponente može spriječiti da se vaša kodna baza pretvori u strukturnu zbrku.

7. Praktični strukturni obrasci za uobičajene tipove stranica

Različite vrste stranica obično dijele strukturne obrasce koje možete ponovno koristiti i prilagođavati u različitim projektima. Prepoznavanje ovih obrazaca pomoći će vam u dizajniranju struktura sadržaja koje se korisnicima čine prirodnima i jednostavne su za implementaciju u HTML-u.

Tipična početna stranica može započeti s globalnim koji sadrži logotip i primarni . Nakon toga često slijedi s više blokovi: glavni dio s h1 i pozivom na akciju, dio s značajkama, možda dio za recenzije i posljednji dio koji poziva korisnike da nas kontaktiraju ili se prijave.

Ispod glavnog sadržaja, a obično pruža globalne informacije i dodatnu navigaciju. Ovdje se nalaze poveznice na pravila o privatnosti, uvjete pružanja usluge, opcije kontakta, društvene mreže i sekundarne izbornike, što ih čini lakim za pronalaženje bez odvraćanja pažnje od primarnog sadržaja iznad.

Stranica s objavom na blogu savršen je kandidat za element. Članak obično sadrži vlastito zaglavlje s naslovom objave (često h1 stranice), datumom objave i podacima o autoru, nakon čega slijedi tijelo objave, podijeljeno u odjeljke s h2/h3 naslovima, te na kraju podnožje članka koje sadrži oznake, gumbe za dijeljenje ili poveznice na povezani sadržaj.

Bočne trake ili sekundarne ploče prirodno su predstavljene s elementi. Mogu uključivati ​​popise nedavnih objava, filtere kategorija, obrasce za prijavu na newsletter ili kontekstualnu pomoć. Budući da je aside semantički označen kao komplementarni sadržaj, pomoćne tehnologije mogu ga kao takvog prikazati korisnicima.

Stranice za kontakt i stranice usluga ponovno koriste iste gradivne blokove, ali naglašavaju jasnoću i jednostavnost interakcije. Jasni naslovi, koncizni odlomci, pravilno označene kontrole obrasca i logičan redoslijed čitanja osiguravaju da korisnici mogu pronaći kako vas kontaktirati ili razumjeti vašu ponudu bez nagađanja.

8. HTML elementi, atributi i njihova uloga u strukturi

Ispod svih ovih obrazaca, sve u HTML-u se svodi na elemente, oznake i atribute. Razumijevanje njihovog zajedničkog funkcioniranja daje vam preciznu kontrolu nad strukturom sadržaja, značajkama prezentacije i ponašanjem.

HTML element se sastoji od početne oznake, opcionalnih atributa, određenog sadržaja i, u većini slučajeva, završne oznake. Na primjer, Ovo je odlomak. uključuje početnu oznaku , tekstualni čvor i završna oznaka , koji svi zajedno predstavljaju element odlomka.

Atributi se pojavljuju unutar početne oznake i pružaju dodatne informacije o elementu. Dolaze kao parovi name=”value”, kao što su class=”highlight”, id=”intro” ili href=”/contact”. Neki atributi su globalni i mogu se pojaviti na bilo kojem elementu (kao što su class, id, lang), dok su drugi specifični za određene oznake (kao što su src za img ili type za input).

Klase su posebno važne za strukturiranje i stiliziranje većih dokumenata. Dodjeljivanjem iste klase više elemenata - recimo, class=”important” - možete primijeniti uobičajena CSS pravila ili ih ciljati u JavaScriptu, održavajući svoju strukturu fleksibilnom, a istovremeno i upravljivom.

Nisu svim elementima potrebne zatvarajuće oznake; neki su prazni (void) elementi koji nemaju sadržaj. Elementi poput , , i spadaju u ovu kategoriju. Oni i dalje sudjeluju u vašoj strukturi, ali samo putem svojih atributa, budući da ne omotavaju unutarnji tekst ili djecu.

World Wide Web Consortium (W3C) održava specifikaciju koja definira kako svi ovi elementi i atributi rade zajedno. Poštivanje tih standarda održava vaše stranice interoperabilnima u različitim preglednicima i uređajima te osigurava da se vaša pažljivo dizajnirana struktura sadržaja ponaša predvidljivo za svakog posjetitelja.

Primjena svega ovoga u praksi znači tretiranje HTML-a kao semantičke okosnice vaše web-lokacije: jasan nacrt dokumenta, precizna upotreba naslova, promišljen izgled s glavnim dijelom, odjeljkom, člankom, sa strane i podnožjem, pristupačni metapodaci u zaglavlju i značajni atributi na svakom elementu zajedno čine vaš sadržaj lakšim za čitanje, navigaciju i dobar rang u tražilicama.