Semantiniai HTML5 elementai paaiškinti

Semantiniai HTML elementai yra tie, kurie aiškiai apibūdina jų reikšmę žmonėms ir mašinoms skaitomu būdu.

Elementai, kaip antai , ir visi laikomi semantinis, nes jie tiksliai aprašyti elemento paskirtį ir turinio tipą, kuris yra jų viduje.

Kas yra semantiniai elementai?

Iš pradžių HTML buvo sukurtas kaip žymėjimo kalba, apibūdinantis dokumentus ankstyvajame internete. Augant internetui ir jį priėmus daugiau žmonių, jo poreikiai pasikeitė.

Jei internetas iš pradžių buvo skirtas dalytis moksliniais dokumentais, dabar žmonės norėjo pasidalinti ir kitais dalykais. Labai greitai žmonės pradėjo norėti, kad internetas atrodytų gražiau.

Kadangi žiniatinklis iš pradžių nebuvo kuriamas taip, kad programavimas būtų atliekamas skirtingais būdais, programuotojai naudojo skirtingus įsilaužimus. Užuot naudoję

Norėdami aprašyti informaciją naudodamiesi lentele, programuotojai jas panaudos kitiems elementams išdėstyti puslapyje.

Vykdant vizualiai sukurtų maketų naudojimą, programuotojai pradėjo naudoti bendrą „ne semantinę“ žymą . Jie dažnai šiems elementams suteikdavo atributą classar idatributą, kad apibūdintų jų tikslą. Pavyzdžiui, vietoj to dažnai buvo parašyta kaip .

Kadangi HTML5 vis dar yra palyginti naujas, toks nesemantinių elementų naudojimas vis dar yra labai paplitęs interneto svetainėse.

Naujų semantinių elementų sąrašas

HTML5 pridėti semantiniai elementai yra šie:

Elementai, kaip antai , , , , , ir veikti daugiau ar mažiau kaip elementais. Jie sugrupuoja kitus elementus į puslapio skyrius. Tačiau kur žymoje gali būti bet kokio tipo informacija, lengva nustatyti, kokia informacija būtų pateikiama semantiniame regione.

„W3schools“ semantinių elementų išdėstymo pavyzdys

Semantiniai elementai, išdėstantys w3mokyklų puslapį

Kodėl verta naudoti semantinius elementus?

Norėdami pažvelgti į semantinių elementų pranašumus, pateikite dvi HTML kodo dalis. Pirmajame kodo bloke naudojami semantiniai elementai:

Nors šiame antrame kodo bloke naudojami ne semantiniai elementai:

Pirma, tai yra daug lengviau skaityti . Tai tikriausiai pirmas dalykas, kurį pastebėsite, žiūrėdami į pirmąjį kodo bloką naudodami semantinius elementus. Tai yra nedidelis pavyzdys, tačiau kaip programuotojas galite perskaityti šimtus ar tūkstančius kodo eilučių. Kuo lengviau skaityti ir suprasti tą kodą, tuo lengviau jis padaro jūsų darbą.

Jis turi didesnį prieinamumą . Ne jūs vienintelis lengviau suprantate semantinius elementus. Paieškos sistemos ir pagalbinės technologijos (pvz., Ekrano skaitytuvai naudotojams, turintiems regėjimo negalią) taip pat gali geriau suprasti jūsų svetainės kontekstą ir turinį, o tai reiškia geresnę patirtį jūsų vartotojams.

Apskritai semantiniai elementai taip pat lemia nuoseklesnį kodą . Kurdami antraštę naudojant ne semantinius elementus, įvairių programuotojai gali rašyti tai kaip , , , arba tiesiog . Yra tiek daug būdų, kaip galite sukurti antraštės elementą, ir visi jie priklauso nuo asmeninių programuotojo pageidavimų. Sukūrus standartinį semantinį elementą, jis tampa lengvesnis visiems.

Nuo 2014 m. Spalio mėn. HTML4 buvo atnaujintas į HTML5 kartu su keliais naujais „semantiniais“ elementais. Iki šiol kai kurie iš mūsų vis dar gali būti supainioti, kodėl tiek daug skirtingų elementų, kurie, atrodo, nerodo didelių pokyčių.

ir

„Koks skirtumas?“, Galite paklausti. Abu šie elementai naudojami skirstant turinį, ir taip, juos tikrai galima naudoti pakaitomis. Klausimas, kurioje situacijoje. HTML4 pasiūlė tik vieno tipo sudėtinius elementus . Nors tai vis dar naudojamas HTML5 HTML5 mums suteikė ir tokiu būdu pakeisti .

Ir elementai yra iš esmės panašios ir sukeisti. Norėdami nuspręsti, kurį iš jų turėtumėte pasirinkti, atkreipkite dėmesį į šiuos dalykus:

  1. Dirbinys skirtas atskirai platinti arba pakartotinai naudoti.
  2. Skyrius yra teminė turinio grupė.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

ir

Elementas paprastai yra rasti dokumento A skirsnio ar straipsnio viršuje ir paprastai yra pagrindinis antraštę ir kai navigacijos ir paieškos įrankius.

Company A

  • Home
  • About
  • Contact us

Elementas turėtų būti naudojama ten, kur norite pagrindinis pozicijoje, su vienu ar daugiau subpozicijose.

Heading 1

Subheading 1

Subheading 2

ATMINKITE, kad elemente gali būti bet koks turinys, tačiau elemente gali būti tik kitos antraštės, t

į

ir įskaitant .

Elementas skirtas turinio, kuris yra ne dalis teksto, kuriame jis pasirodo srauto, tačiau vis dar susijusios tam tikru būdu. Tai yra pagrindinio turinio šoninė juosta.

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

Prieš HTML5 mūsų meniu buvo sukurti naudojant

    'smėlis
  • 's. Dabar kartu su šiais elementais galime atskirti meniu elementus, kad galėtumėte naršyti tarp jūsų puslapių. Puslapyje galite turėti bet kokį skaičių elementų, pavyzdžiui, įprasta, kad naršymas viršuje (viršuje ) ir vietinė naršymas šoninėje juostoje ( elemente).

    
           
    • Home
    • About
    • Contact us

    Jei yra , turi būti . A paprastai yra dokumento, skyriaus ar straipsnio apačioje. Kaip ir turinys paprastai yra metainformacija, pvz., Išsami autoriaus informacija, teisinė informacija ir (arba) nuorodos į susijusią informaciją. Taip pat galioja elementų įtraukimas į poraštę.

    ©Company A

    Elementas dažnai atrodo per ar elementas, kuris būtų paprastai yra autorių teisių informacijos ar Teisinės, ir kitų tokių baudos spausdinti. Tačiau tai nėra tikslas, kad tekstas būtų mažesnis. Tai tik aprašo jo turinį, o ne nurodo pateikimą.

    ©Company A Date

    Šis elementas leidžia prie žmogaus skaitomos tos datos versijos pridėti aiškią ISO 8601 datą.

    Tuesday, 31 October 2017

    Kam vargti ? Nors žmonės gali skaityti laiką, kurį įprastu būdu galima atskirti kontekste, kompiuteriai gali skaityti ISO 8601 datą ir matyti datą, laiką ir laiko juostą.

    ir

    skirtas vaizdų turiniui apvynioti ir antraštei.

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

    Sužinokite daugiau apie naujus HTML5 elementus:

    • „w3schools“ pateikia paprastą ir aiškų daugelio naujienų elementų aprašymą ir tai, kaip / kur jie turėtų būti naudojami.
    • MDN taip pat suteikia puikią nuorodą visiems HTML elementams ir gilinasi į kiekvieną.