Objašnjeni semantički HTML5 elementi

Semantički HTML elementi su oni koji jasno opisuju svoje značenje na ljudski i strojno čitljiv način.

Elementi kao što su , i svi se smatraju semantički, jer oni točno opisuju svrhu elementa i vrstu sadržaja koji je u njima.

Što su semantički elementi?

HTML je izvorno stvoren kao označni jezik za opisivanje dokumenata na ranom Internetu. Kako je internet rastao i što ga je više ljudi usvajalo, njegove su se potrebe promijenile.

Tamo gdje je internet izvorno bio namijenjen dijeljenju znanstvenih dokumenata, sada su ljudi željeli dijeliti i druge stvari. Vrlo brzo, ljudi su počeli željeti da web izgleda ljepše.

Budući da web u početku nije napravljen da bi bio dizajniran, programeri su koristili različite hakere kako bi stvari postavili na različite načine. Umjesto da koristite

za opisivanje podataka pomoću tablice, programeri bi ih koristili za pozicioniranje ostalih elemenata na stranici.

Kako je uporaba vizualno dizajniranih izgleda napredovala, programeri su počeli koristiti generičku "nesemantičku" oznaku poput . Često bi tim elementima dali atribut classili idatribut da bi opisali njihovu svrhu. Na primjer, umjesto ovog često se pisalo kao .

Kako je HTML5 još uvijek relativno nov, ta je upotreba nesemantičkih elemenata i danas vrlo česta na web mjestima.

Popis novih semantičkih elemenata

Semantički elementi dodani u HTML5 su:

Elementi kao što su , , , , , i djeluju više ili manje kao elemenata. Ostale elemente grupiraju u odjeljke stranica. Međutim, tamo gdje oznaka može sadržavati bilo koju vrstu informacija, lako je prepoznati kakve bi informacije išle u semantičkom području.

Primjer rasporeda semantičkih elemenata od strane w3schools

Semantički elementi postavljanja stranice od strane w3schools

Zašto koristiti semantičke elemente?

Da bismo pogledali blagodati semantičkih elemenata, evo dva dijela HTML koda. Ovaj prvi blok koda koristi semantičke elemente:

Iako ovaj drugi blok koda koristi nesemantičke elemente:

Prvo, puno je lakše čitati . To je vjerojatno prvo što ćete primijetiti gledajući prvi blok koda pomoću semantičkih elemenata. Ovo je mali primjer, ali kao programer možete čitati stotine ili tisuće redaka koda. Što je lakše pročitati i razumjeti taj kôd, to vam olakšava posao.

Ima veću dostupnost . Niste jedini kojima je semantičke elemente lakše razumjeti. Tražilice i pomoćne tehnologije (poput čitača zaslona za korisnike s oštećenjem vida) također mogu bolje razumjeti kontekst i sadržaj vaše web stranice, što znači i bolje iskustvo za vaše korisnike.

Sve u svemu, semantički elementi također vode do dosljednijeg koda . Prilikom stvaranja zaglavlje pomoću ne-semantičke elemente, različite programeri mogli napisati ovo kao , , ili jednostavno . Postoji toliko mnogo načina na koje možete stvoriti element zaglavlja, a svi oni ovise o osobnim željama programera. Stvaranjem standardnog semantičkog elementa olakšava svima.

Od listopada 2014. HTML4 je nadograđen na HTML5, zajedno s nekim novim "semantičkim" elementima. Do danas bi se neki od nas još uvijek mogli zbuniti zašto toliko različitih elemenata koji kao da ne pokazuju neke veće promjene.

i

"Kakva je razlika?", Možete se zapitati. Oba ova elementa koriste se za dijeljenje sadržaja i da, definitivno se mogu koristiti naizmjenično. Stvar je u kojoj situaciji. HTML4 je ponudio samo jednu vrstu elementa spremnika, a to je . Iako se ovo još uvijek koristi u HTML5, HTML5 nam je pružio i na neki način zamijenio .

I elementi su konceptualno slične i mogu zamijeniti. Da biste odlučili što biste trebali odabrati, uzmite u obzir sljedeće:

  1. Članak je namijenjen neovisnoj distribuciji ili ponovnoj upotrebi.
  2. Odjeljak je tematsko grupiranje sadržaja.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

i

Element se obično nalazi na vrhu dokumenta, odjel, ili članak i obično sadrži glavni naslov i neke navigaciju i pretraživanje alata.

Company A

  • Home
  • About
  • Contact us

Element koji treba koristiti gdje želite glavni naslov s jednim ili više podnaslova.

Heading 1

Subheading 1

Subheading 2

ZAPAMTITE da element može sadržavati bilo koji sadržaj, ali element može sadržavati samo druga zaglavlja, tj

do

i uključujući .

Element namijenjen za sadržaj koji nije dio toka teksta u kojem se pojavljuje, no još uvijek se odnosi na neki način. Ovo je bočna traka vašeg glavnog sadržaja.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Prije HTML5, naši su izbornici izrađivani s

    je i
  • 's. Sada, zajedno s njima, možemo razdvojiti stavke izbornika pomoću a za navigaciju između vaših stranica. Na stranici možete imati bilo koji broj elemenata, na primjer, uobičajeno je da globalna navigacija bude preko vrha (u ) i lokalna navigacija na bočnoj traci (u elementu).

    
           
    • Home
    • About
    • Contact us

    Ako postoji, mora postojati a . A se obično nalazi na dnu dokumenta, odjeljka ili članka. Baš kao što je sadržaj općenito metainformacija, kao što su detalji o autoru, pravne informacije i / ili veze na povezane informacije. Također je valjano uključiti elemente unutar podnožja.

    ©Company A

    Elemenata često se pojavljuje unutar ili elementa koji bi obično sadrže informacije o autorskim pravima ili pravne odricanja, i druge takve fine print. Međutim, ovo nije namijenjeno smanjenju teksta. Samo opisuje njegov sadržaj, a ne propisuje prezentaciju.

    ©Company A Date

    Element omogućava da nedvosmisleno ISO 8601 Datum biti priključena na verziju čovjeku čitljivom tog datuma.

    Tuesday, 31 October 2017

    Zašto se zamarati ? Iako ljudi mogu normalno čitati vrijeme koje se može razdvojiti kroz kontekst, računala mogu pročitati datum ISO 8601 i vidjeti datum, vrijeme i vremensku zonu.

    i

    služi za omotavanje sadržaja vaše slike oko nje i za opis slike.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Saznajte više o novim elementima HTML5:

    • w3schools pruža jednostavne i jasne opise mnogih elemenata vijesti i kako / gdje ih treba koristiti.
    • MDN također pruža izvrsnu referencu za sve HTML elemente i ulazi dublje u svaki od njih.