Semantični HTML

Semantični HTML pomeni, da HTML pišemo tako, da uporabljamo ustrezne oznake za krepitev pomena informacij na spletni strani ali aplikaciji, ne pa zgolj za vizualne predstavitve – design.

Semantični HTML elementi so elementi, ki natančno določajo pomen tako brskalnikom, kot tudi razvijalcem spletnih strani. Semantični elementi so <nav>, <form>, <table> <button>, … ki že v oznaki skrivajo pomen ali gre npr. za tabele, gumb, … Ne semantični HTML elementi pa so <div> in <span>, ki nič ne povejo o dejanski vsebini, ki nas čaka.

Semantični elementi v HTML-ju

Pri razvoju spletnih straneh je bila HTML oznaka <div> največkrat “zlorabljena” za ne semantično uporabo. Uporabljala se je za navigacijo, vsebino, … glavo, nogo, … s prihodom HTML5 pa smo dobili nove semantične oznake za definiranje posameznih delov, kot je glava, navigacija, …

Nove oznake so:

  • main: določa glavno vsebino dokumenta/strani.
  • header: označuje glavo ali uvod v dokument ali razdelek. Uporabimo ga, kadar hočemo določiti naslov celotne spletne strani, naslov article vsebine ali naslov section vsebine.
  • nav: določa odsek za navigacijo.
  • section: segment, blok, razdelek v nekem dokumentu kot je na primer poglavje, glava, noga ali kak drug segment dokumenta, ki ima svoj naslov in tematsko združuje vsebino.
  • article: označuje vsebinsko zaključeno celoto. Npr. blog objava.
  • aside: značka določa vsebino, ki se povezuje z ostalo vsebino.
  • figure: uporabimo, kadar hočemo združiti več skupnih HTML elementov. Uporabimo jo kadar hočemo razložiti, opisati del dokumenta, oziroma da združimo grafiko in video.
  • figcaption: besedilo, ki opisuje vsebino figure značke. Je znotraj figure značke.
  • footer: označuje nogo določenega razdelka ali dokumenta.
  • details: označuje dodatne informacije, ki jih uporabnik lahko prikaže ali skrije.
  • summary: določa vidne naslove za elemente details
  • mark: določa označeno besedilo. Z njim poudarimo, označimo besedilo.
  • time: oznaka določa čas ali datum ali oboje v Gregorijanskem koledarju, opcijsko tudi z zamikom cone.

Prikaz nove strukture strani s semantičnem označevanjem:

Semantični HTML

Semantični HTML.

Semantični HTML in spletna dostopnost

Pomožne tehnologije (Assistive technology), kot so npr. spletni bralniki tudi uporabljajo semantični HTML, da lažje razumejo informacije oz. kako najlažje elemente prenesti uporabniku.

Pri bralnikih zaslona daje semantični HTML kontekst bralcem zaslona. Ker imajo spletna mesta linearen način branja vsebine lahko z ustrezno HTML semantiko preskakujejo določene vsebine. Če naša stran nima semantičnega HTML-ja tako oviramo uporabnike do dostopa do vsebine.

Semantični HTML pride prav tudi pri uporabi tipkovnice za navigiranje po strani. Forme, meniji, navigacija, video, … slednji so brez semantičnega HTML-ja precej manj dostopni. Npr. semantični HTML elementi lahko prenesejo informacijo ali je bilo okno v formi izpolnjeno ali ne, kater opis paše k kateri formi (label). Za uporabnike, ki se zanašajo na tipkovnico lahko semantični HTML odloča o tem ali lahko določene elemente na strani, kot je npr. forma – vnosna polja uporablja ali pa spletno mesto zaradi frustracije zapusti.

Dodatno branje:

Oznake: DostopnostHTMLsemantični HTML

Komentiraj


*