- Ispravno koristite doctype, html, head i body kako biste preglednicima i pretraživačima pružili predvidljiv, standardizirani kostur.
- Strukturirajte vidljivi sadržaj pomoću semantičkih elemenata (zaglavlje, navigacija, glavni dio, odjeljak, članak, strana, podnožje) i čiste hijerarhije naslova h1–h6.
- Pojačajte pristupačnost i SEO deklarisanjem jezika, korištenjem orijentira, pisanjem smislenog alternativnog teksta i validacijom HTML-a.
- Unaprijed isplanirajte strukturu stranica i web-mjesta kako bi svaki dokument bio konzistentan, jednostavan za navigaciju i jednostavan za održavanje tokom vremena.
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 SEO optimizirana. Kada je vaš HTML organiziran s jasnom hijerarhijom, preglednici, tražilice i pomoćne tehnologije odmah razumiju šta svaki odjeljak znači i kako se sve to uklapa.
Umjesto da HTML smatrate samo načinom dodavanja oznaka na stranicu, korisno je da ga vidite kao nacrt vašeg dokumenta. Čvrstom strukturom definirate gdje se nalazi vaš glavni sadržaj, kako su naslovi povezani, šta je navigacija, šta su sekundarne informacije i koji dijelovi opisuju sam dokument u zaglavlju. U ovom vodiču ćemo detaljno proći kroz strukturu sadržaja u HTML-u: od globalnog kostura stranice, do naslova, semantike, pristupačnosti i nekih konkretnih obrazaca rasporeda za stvarne stranice.
1. Globalni skelet HTML dokumenta
Svaki HTML dokument počinje istom strukturom visokog nivoa: doctype, html, head i body. Ovo može izgledati kao šablonski primjer, ali svaki dio igra ključnu ulogu u načinu na koji preglednik parsira i prikazuje vaš sadržaj i kako pretraživači interpretiraju vašu stranicu.
Prvi red je deklaracija doctype-a, napisana kao <!DOCTYPE html> u HTML5. Ova instrukcija ne proizvodi vidljivi izlaz; ona govori pregledniku da koristi standardni način rada umjesto quirks načina rada, izbjegavajući naslijeđena ponašanja renderiranja koja mogu potpuno uništiti vaš raspored ili CSS.
Odmah nakon doctype-a dolazi korijenski element <html>, koji obavija cijeli dokument. Gotovo sve - i metapodaci dokumenta i vidljiva stranica - nalazi se unutar <html>…</html>. Ovdje također deklarirate ljudski jezik dokumenta pomoću atributa lang, na primjer <html lang=”en”> za engleski ili <html lang=”es-ES”> za španski iz Španije.
Deklarisanje jezika pomoću parametra lang je ključno za pristupačnost, SEO i alate za prevođenje. Čitači ekrana ga koriste za odabir ispravnih pravila izgovora, pretraživači i automatski prevodioci 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 direktna potomka: <head> i <body>. Head sadrži sve metapodatke i resurse potrebne za interpretaciju i predstavljanje stranice (kodiranje, naslov, CSS, ikone, kanonske URL-ove itd.), dok body sadrži sadržaj koji korisnici zapravo vide i s kojim komuniciraju u prozoru preglednika.
2. Šta spada u (i zašto je to važno)
Zaglavlje je nevidljivo za videće posjetioce, ali je apsolutno ključno za to kako se vaša stranica ponaša, kako funkcionira i kako se rangira. Informacije koje ovdje unesete vode pretraživače, društvene platforme, preglednike i uređaje o tome kako da rukuju vašom stranicom i kako da je prezentiraju.
Jedna od prvih stvari unutar <head> treba biti deklaracija kodiranja znakova korištenjem <meta charset=”utf-8″ />. 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 jedinstveni i opisni element <title>. Sadržaj unutar <title>…</title> pojavljuje se u kartici preglednika, oznakama, historiji preglednika i, što je najvažnije, kao primarni naslov na koji se može kliknuti na stranicama rezultata pretraživanja, osim ako nije prepisan određenim meta oznakama. Sa SEO stanovišta, 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štenjem <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> govorite mobilnim preglednicima da prilagode veličinu izgleda širini uređaja umjesto da smanje dizajn desktopa na mali ekran, što je ključno za responzivni dizajn i za prolazak osnovnih mobilnih i revizija pristupačnosti.
Pored skupa znakova, naslova i prikaza, zaglavlje je mjesto gdje definirate većinu svojih metapodataka, stilova i ključnih linkova. 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 indirektno doprinose tome kako se razumije struktura vašeg sadržaja i koliko se vaša web-stranica osjeća upotrebljivom.
Osnovni metapodaci i strukturni resursi
CSS je obično povezan unutar <head> pomoću <link rel=”stylesheet” href=”styles.css”>. Vanjski stilski listovi odvajaju prezentaciju od strukture, mogu se keširati na više stranica radi boljih performansi i pomažu u održavanju jedinstvenog izvora istine za vaš dizajnerski sistem.
Također možete uključiti CSS u blok <style> unutar <head> ili čak uvesti dodatne stilske listove odatle. Na primjer, programeri ponekad koriste @import unutar oznake stila kako bi smjestili stilski list u određeni kaskadni sloj ili deklariraju prilagođena svojstva (varijable) CSS-a na :root nivou prije nego što ih referenciraju na cijeloj web stranici.
Element <link> služi za više svrha od samo stilskih listova. Promjenom atributa rel možete ukazati na favicon sa rel=”icon”, definirati alternativne jezičke verzije sa rel=”alternate” i hreflang, odrediti kanonski URL sa rel=”canonical” ili referencirati manifeste aplikacije i druge odnose o kojima bi preglednici i pretraživači trebali znati.
Definisanje ikona pomoću <link rel=”icon” …> osigurava da je vaš brend prepoznatljiv na kartici i oznakama preglednika. Možete odrediti različite veličine ili tipove (kao što su PNG ili SVG), pa čak i obezbijediti posebne ikone za platforme poput iOS-a pomoću rel=”apple-touch-icon” ili maskirati ikone za zakačene kartice u Safariju.
Alternativni linkovi su ključni za višejezične postavke ili postavke sindikacije sadržaja. Kada koristite <link rel=”alternate” href=”…” hreflang=”fr-FR” />, na primjer, govorite pretraživačima da postoji francuska verzija iste stranice i koju kombinaciju jezika/regije cilja. Slično tome, alternativni linkovi mogu ukazivati na RSS feedove ili PDF varijante ako navedete odgovarajući tip.
Kanonski URL-ovi, skripte i rijetko korišteni sadržaji
Kanonski linkovi sa rel=”canonical” pomažu u rješavanju situacija dupliciranog sadržaja 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 izbjegava pretraživač da nagađa koju verziju treba indeksirati.
JavaScript se pridružuje pomoću elementa <script>, koji može ili ugraditi inline kod ili referencirati vanjsku datoteku putem atributa src. Budući da JavaScript po defaultu 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 kod u potpunosti raščlanjen. Nasuprot tome, async također izbjegava blokiranje tokom preuzimanja, ali pokreće skriptu čim je spremna, potencijalno prekidajući tok parsiranja, što može biti problem kada skripta zavisi od DOM elemenata definiranih kasnije u dokumentu.
Element <base>, koji se pojavljuje samo u zaglavlju, definira osnovni URL i zadani cilj za sve relativne linkove. Postavljanjem <base href=”https://example.com” target=”_top” /> efektivno 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šeg nivoa.
Iako <base> može biti moćan, ima nuspojave, posebno za sidra unutar stranice i relativne putanje resursa. Dozvoljen je samo jedan osnovni element po dokumentu, mora se pojaviti prije bilo kojeg relativnog URL-a i transformira jednostavna sidra poput <a href=”#section”> u pune URL zahtjeve s fragmentima pridruženim osnovnom href-u.
3. Sloj vidljivog sadržaja: i semantički raspored
Sve što korisnici zapravo vide i s čime komuniciraju nalazi se unutar elementa <body>. Ovdje strukturirate svoj sadržaj pomoću semantičkih elemenata koji opisuju ulogu svakog dijela stranice: navigacija, glavni sadržaj, članci, bočne trake, podnožja i još mnogo toga.
HTML5 je uveo skup semantičkih elemenata rasporeda koji su u mnogim situacijama zamijenili generičke <div> kontejnere. Elementi kao što su <header>, <nav>, <main>, <section>, <article>, <aside> i <footer> opisuju značenje umjesto pukog izgleda, što pomaže asistivnim tehnologijama i pretraživačima da izgrade mentalnu mapu vaše stranice.
<header> 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 meni ili glavni naslov. Možete imati zaglavlje na nivou stranice pri vrhu tijela i dodatna zaglavlja unutar odjeljaka ili članaka kada su vam potrebni poduvodi.
<nav> je namijenjen navigacijskim blokovima i obično se koristi za glavne menije ili grupe važnih linkova. Glavnu navigaciju možete postaviti unutar zaglavlja, ali nav se može pojaviti i na drugim mjestima, na primjer u bočnoj traci ili podnožju, sve dok se koristi za navigaciju, a ne za generičke kolekcije nepovezanih linkova.
<main> označava jedinstveni, centralni sadržaj stranice i treba se pojaviti samo jednom po dokumentu. Unutar glavnog elementa obično ćete organizirati svoj sadržaj koristeći <section> za tematske blokove, <article> za nezavisne dijelove kao što su objave na blogu ili vijesti i <aside> za povezane, ali sekundarne informacije poput sporedne bilješke, oglasa ili komplementarne navigacije.
Odjeljci, članci, odlomci sa strane i podnožja
<section> predstavlja tematski zaseban blok sadržaja, obično sa svojim vlastitim naslovom. To može biti poglavlje u dugom članku, blok "Features" na stranici proizvoda ili dio vaše početne stranice kao što su "Testimonials" ili "Pricing". Sekcije pomažu u razbijanju složenih dokumenata u logičke dijelove.
<article> se koristi 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, linkovima za dijeljenje ili metapodacima).
<aside> je rezervisan za sadržaj koji je tangencijalno povezan s glavnim tokom, kao što su bočne trake, citati, povezani linkovi ili reklamni blokovi. Budući da mu je svrha dopunska, čitači ekrana i drugi alati mogu ga tretirati u skladu s tim, a korisnici mogu lakše razlikovati osnovnu naraciju od sekundarnih dodataka.
<footer> se pojavljuje na kraju odjeljka ili na dnu cijele stranice. Podnožje na nivou stranice obično sadrži obavještenja o autorskim pravima, kontakt informacije, sekundarnu navigaciju, pravne linkove ili podatke o autorima web-mjesta, dok podnožje na nivou č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 linkova koji nisu dio navigacije ili koristiti main više puta po stranici.
4. Hijerarhija naslova i tekstualna struktura
Naslovi su osnova strukture vašeg sadržaja, definirajući hijerarhiju tema i podtema u cijelom dokumentu. HTML nudi šest nivoa naslova, od <h1> (najvažniji) do <h6> (najmanje važan), a način na koji ih organizirate utječe i na ljudske čitatelje i na pretraživače.
Obično postoji jedan <h1> koji izražava glavnu temu stranice, nakon čega slijede <h2> za primarne odjeljke i <h3>-<h6> za dublje pododjeljke. Kada dva naslova dijele isti nivo, oni predstavljaju srodne odjeljke, dok naslov nižeg nivoa uvodi ugniježđeni pododjeljak unutar prethodnog, višeg nivoa.
Paragrafi i ostali sadržaj koji slijedi iza naslova pripadaju odjeljku definiranom tim naslovom. Kada se pojavi novi naslov istog nivoa, prethodni odjeljak se smatra zatvorenim i počinje novi. Ovu implicitnu strukturu koriste pomoćne tehnologije za izgradnju plana kroz koji korisnici mogu brzo preskakati.
Proizvoljno preskakanje nivoa - poput direktnog prelaska sa h1 na h4 - može zbuniti i automatizovane alate i čitaoce. Opšta preporuka je da se krećete korak po korak u hijerarhiji: od h1 do h2 za pododjeljke, zatim opcionalno do h3 i tako dalje, silazeći samo jedan nivo po jedan 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 možete poboljšati prezentaciju pomoću CSS-a, a da pritom osnovna semantička hijerarhija ostane netaknuta.
Paragrafi, liste i inline semantika
Normalan tekstualni sadržaj ide u <p> elemente, od kojih svaki predstavlja zaseban paragraf. Zadržavanje jedne glavne ideje po paragrafu poboljšava čitljivost i usklađeno je s načinom na koji pomoćne tehnologije omogućavaju korisnicima navigaciju kroz blokove teksta.
Uređene liste (<ol>) i neuređene liste (<ul>) sa stavkama <li> idealne su za grupisane informacije kao što su koraci, funkcije ili često postavljana pitanja. Uređene liste prenose redoslijed ili prioritet, dok neuređene liste jednostavno grupišu povezane stavke bez impliciranja redoslijeda; obje su izuzetno korisne za strukturiranje složenih objašnjenja.
Ugrađeni elementi poput <strong>, <em>, <a>, <span> i drugih obogaćuju sadržaj bez prekidanja toka paragrafa. <strong> prenosi snažnu važnost (i obično se pojavljuje podebljano), <em> naglašava tekst (često kurzivom), a <a href=”…”> kreira hiperveze koje povezuju dokumente na vašoj web stranici ili s vanjskim resursima.
Slike sa <img> se smatraju zamijenjenim elementima i ne prelamaju sadržaj, ali i dalje učestvuju u semantičkoj strukturi putem atributa poput alt. Atribut alt je posebno važan za pristupačnost i SEO, jer opisuje sliku korisnicima koji je ne mogu vidjeti i pretraživačima koji samo parsiraju tekst.
Pažljivo kombinovanje blokovskih i inline elemenata omogućava vam da izrazite hijerarhiju, odnose i naglasak isključivo putem HTML-a, ostavljajući vizuelne detalje poput boja, fontova i razmaka CSS-u. Ovo razdvajanje 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 ekrana, navigaciju pomoću tastature ili druge pomoćne tehnologije zavise od vaše HTML semantike kako bi razumjeli i efikasno se kretali kroz sadržaj.
Deklarisanje jezika dokumenta pomoću lang na elementu <html> jedan je od prvih koraka za pristupačnost. Kada je jezik eksplicitan, čitači ekrana 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 koristeći lang na elementima kao što su <span> ili <p>. Kada fragment pređe 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.
Pored jezika, naslovi, orijentacione tačke i alternativni tekst čine jezgro pristupačne strukture. Jasna hijerarhija naslova, ispravna upotreba glavnih, navigacijskih, zaglavlja, podnožja, sekcije i aside atributa, plus značajni alt atributi na slikama, omogućavaju pomoćnim tehnologijama da izgrade strukturu i pruže navigaciju orijentacionim tačkama poput „skoči na glavni sadržaj“ ili „idi na navigaciju“.
Boja i vizualni stil sami po sebi nikada ne bi trebali biti jedini način prenošenja važnih informacija. Visok kontrast, čitljive veličine fonta, stanja fokusa za interaktivne elemente i opisni tekstovi linkova poput „Pročitajte više o prevenciji požara“ umjesto samo „Kliknite ovdje“ su sve dio toga da vaš strukturirani sadržaj bude upotrebljiv za što veći broj ljudi.
Validacija HTML-a i pokretanje 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 neispravnu upotrebu orijentira, a sve se to može ispraviti direktno u vašim oznakama prije nego što utječu na stvarne korisnike.
6. Planiranje strukture sadržaja web stranice
Prije nego što napišete i jedan tag, isplati se isplanirati logičku strukturu vaše web stranice i stranica. Razmišljanje u smislu odjeljaka, prioriteta informacija i tokova navigacije dovodi do HTML-a koji je lakše održavati, proširivati i optimizirati za pretraživače.
Uobičajena početna tačka je skiciranje mape sajta ili strukturnog dijagrama web stranice. To obično uključuje stranice najvišeg nivoa 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 (glavni dio, značajke, recenzije, cijene), dio za sekundarni sadržaj i podnožje koje sadrži kontakt informacije i pravne linkove.
Dodjeljivanje naslova tim blokovima u ranoj fazi održava vašu h1-h6 hijerarhiju koherentnom. Unaprijed odlučujete šta će biti pojedinačni h1, koji dijelovi zaslužuju h2 naslove i gdje su dublji podnaslovi poput h3 ili h4 potrebni za objašnjenje složenih tema bez preopterećenja čitaoca.
Sa SEO i UX perspektive, pametno je postaviti ključni sadržaj i važne odjeljke ranije u DOM-u. Tražilice uglavnom obraćaju više pažnje na sadržaj pri vrhu dokumenta, a korisnici cijene brzo pronalaženje primarnih informacija umjesto skrolovanja pored dugih uvoda ili dekorativnih elemenata.
Najbolje prakse za održive HTML strukture
Koristite opisna imena klasa i ID-ove za označavanje strukturnih elemenata kada je to potrebno, ali izbjegavajte prekomjerno ugniježđivanje div-ova. Klase poput .main-nav, .site-header ili .sidebar vam na prvi pogled govore šta komponenta radi, što vaš HTML i CSS čini mnogo lakšim za čitanje mjesecima kasnije.
Neka vaš HTML bude što ravniji, a istovremeno izražavajte 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.
Grupišite 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 odvojeni od glavne naracije.
Ponovo pregledajte svoju strukturu svaki put kada proširite stranicu ili redizajnirate odjeljak. HTML dokumenti lako akumuliraju jednokratne omotače i ad-hoc elemente tokom vremena, tako da ih periodično refaktorisanje u koherentan semantički oblik isplati u smislu održivosti, performansi i pristupačnosti.
Dokumentovanje vaših strukturnih obrazaca – kao što je način 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čiti ponovljene komponente može spriječiti da se vaša kodna baza pretvori u strukturni patchwork.
7. Praktični strukturni obrasci za uobičajene tipove stranica
Različite vrste stranica obično dijele strukturne obrasce koje možete ponovo koristiti i prilagođavati različitim projektima. Prepoznavanje ovih obrazaca pomoći će vam da dizajnirate strukture sadržaja koje se korisnicima čine prirodnima i koje je jednostavno implementirati u HTML-u.
Tipična početna stranica može početi s globalnim <header> koji sadrži logo i primarni <nav>. Nakon toga često slijedi <main> s više <section> blokova: glavni dio s h1 i pozivom na akciju, dio s karakteristikama, možda dio za preporuke i posljednji dio koji poziva korisnike da nas kontaktiraju ili se prijave.
Ispod glavnog sadržaja, <footer> obično pruža globalne informacije i dodatnu navigaciju. Ovdje se nalaze linkovi do politika privatnosti, uslova korištenja, opcija kontakta, društvenih mreža i sekundarnih menija, što ih čini lakim za pronalaženje bez odvraćanja pažnje od primarnog sadržaja iznad.
Stranica blog posta je savršen kandidat za element <article>. Članak bi obično sadržavao vlastiti zaglavlje s naslovom posta (često h1 stranice), datumom objavljivanja i podacima o autoru, nakon čega slijedi tijelo posta, podijeljeno u odjeljke s h2/h3 naslovima, i na kraju podnožje članka koje sadrži oznake, dugmad za dijeljenje ili linkove srodnog sadržaja.
Bočne trake ili sekundarni paneli su prirodno predstavljeni elementima <aside>. Oni mogu uključivati liste nedavnih objava, filtere kategorija, obrasce za prijavu na bilten ili kontekstualnu pomoć. Budući da je aside semantički označen kao komplementarni sadržaj, pomoćne tehnologije ga mogu kao takvog predstaviti korisnicima.
Stranice za kontakt i stranice za usluge ponovo koriste iste gradivne blokove, ali naglašavaju jasnoću i jednostavnost interakcije. Jasni naslovi, koncizni paragrafi, pravilno označene kontrole obrasca i logičan redoslijed čitanja osiguravaju da korisnici mogu pronaći kako da vas kontaktiraju ili razumiju 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 kako oni funkcionišu zajedno daje vam preciznu kontrolu nad strukturom sadržaja, prezentacijskim hookovima i ponašanjem.
HTML element se sastoji od početne oznake, opcionalnih atributa, dijela sadržaja i, u većini slučajeva, zatvarajuće oznake. Na primjer, <p>Ovo je paragraf.</p> uključuje početnu oznaku <p>, tekstualni čvor i završnu oznaku </p>, koji svi zajedno predstavljaju element paragrafa.
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 završna tagova; neki su prazni (void) elementi koji nemaju sadržaj. Elementi poput <img>, <meta>, <link> i <br> spadaju u ovu kategoriju. Oni i dalje učestvuju u vašoj strukturi, ali samo putem svojih atributa, budući da ne obuhvataju unutrašnji tekst ili djecu.
World Wide Web Consortium (W3C) održava specifikaciju koja definira kako svi ovi elementi i atributi funkcioniraju 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 stranice: jasan nacrt dokumenta, precizna upotreba naslova, promišljen raspored 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 pretraživačima.
