Semantički HTML predstavlja označavanje HTML elemenata prema njehovim semantičkim vrednostima, odnostno važnosti podataka na veb stranicama i veb aplikacijama.
HTML sadržaj na stranici raspoređen je u okviru logičkih celina koje su smeštene unutar <div> elemenata.
<div> elementi nemaju nikakvo dodatno značenje, stil ili strukturu. Oni grupišu sadržaj kako bi se njima moglo lakše upravljali putem CSS i JS pravila.
HTML elementi mogu biti stilizovani pomoću CSS tako da <span> tag može da izgleda poput <h1> taga, ali njegova semantička vrednost ostaje na nižem nivou u odnoosu na <h1> tag.
Upotreba semantičkih elemenata u HTML kodu omogućava da web spider-i i web crawler-I (Google, Yahoo) mogu lakše da razumeju šta se nalazi na HTML stranici, npr. koji deo stranice se odnosi na navigaciju, a koji na članke.
Možemo koristiti sledeći HTML da označimo navigaciju, članaka ali će se njihovo semantičko značenje razlikovati:
<div class="article"> // --> <article>
<div class="nav"> // --> <nav>
// Ali će <article> i <nav> imati veće semantičko značenje od div-a sa klasom.Semantičko značenje HTML elementa je bitno zbog: #
- – SEO jer će pretraživači koristiti ključne reči koje imaju važnije sematičko značenje i pomažu u rangiranju stranice na pretraživaču
- – Pomažu u čitanju sadržaja za korisnike sa oslabljenim vidom
- – Onogućavaju lakše pronalaženje elemenata nego kada je čitava struktura sajta izgrađena od <div> tagova
- – Omogućavaju pravilno imenovanje elemenata koji se nalaze unutar oznake
Neki od semantičkih elementata koji se koriste u HTML-u su: #
- <header> za header
- <footer> za footer
- <nav> za navigaciju
- <main> za glavni deo stranice
- <aside> – za sadržaj pored stranice (widget)
- <article> – za članke
- <details> za detalje koje korisnik može da otvori / zatvori
- <figure> za ilustacije, slike…
- <figcaption> za opis figure elementa
- <mark> za markirani tekst
- <section> za dodavanje proizvoljnih sekcija u HTML-u
- <summary> vidljiv deo koji ide uz <details>
- <time> za datum I vreme
- <ul> neuređena lista
- <ol> uređena lista
- <strong> označava boldovani tekst izuzetnog prioriteta
SEO Bitni elementi (by Spasimir) #
- <i> promena mood-a, <span> samo za oko, <em> naglašavanje
- <b> samo za oko, <strong> bitno, <mark> naglašavanje bitnog u odnosu na ostatak kontenta
- <blockquote> za navođenje, <cite> naslov navođenja, <q> za navođenje unutar linije teksta
- <abbr title=”značenje akronima”> za akronime, <dfn> nešto što je definisano po prvi put – može imati svoj title, a može se i koristiti u kombinaciji sa abbr, npr. <dfn><abbr title=””></abbr></dfn>, takođe može se objasniti jednom u tekstu, a posle toga linkovati, klasično kao anchor text, kako bi user kada po drugi put vidi mogao da klikne i vrati se i pročita opet šta je termin i o čemu govori
- <small> koristi se za copyright tag ili tako neke nebitne side comments, ne za privacy policy i one bitnije stvari
Inputi
- type=”text” – za ime i prezime
- type =”email” – za mejlove
- type=”password” – za šifru
- type=”number” – za broj
- <fieldset> umesto diva, za elemente koji su međusobno povezani, <legend> naslov tog fieldset-a
Tabele
- <caption> da se označi naslov tabele, bolja prakse nego <h> tagovi,
- <thead> podnaslovi kolona tabele
- <tbody> za sve elemente unutar tabele
- <tfoot> za nešto što nije u podacima, već ispod
Gruping
- <article> za blogove, i ostali standalone content
- <aside> ne samo za sidebar, već i za recent articles i slične div-ove,
- <figure> za standalone sadržaj tipa slika, i pridoda mu se <figcaption>,
- <section> srodan sadržaj se gura ovde, umesto u div,
- <adress> za footer
