Semantiskie HTML5 elementi ir izskaidroti

Semantiskie HTML elementi ir tie, kas skaidri apraksta to nozīmi cilvēkiem un mašīnlasāmā veidā.

Tādi elementi kā , un visi tiek uzskatīti par semantiskiem, jo ​​tie precīzi raksturo elementa mērķi un saturā esošā satura veidu.

Kas ir semantiskie elementi?

HTML sākotnēji tika izveidots kā iezīmēšanas valoda, lai aprakstītu dokumentus agrīnā internetā. Pieaugot internetam un to pieņemot vairāk cilvēku, tā vajadzības mainījās.

Ja sākotnēji internets bija paredzēts zinātnisku dokumentu kopīgošanai, tagad cilvēki vēlējās dalīties arī ar citām lietām. Ļoti ātri cilvēki sāka vēlēties padarīt tīmekli izskatīgāku.

Tā kā tīmeklis sākotnēji netika veidots tā, lai to projektētu, programmētāji izmantoja dažādus uzlaušanas gadījumus, lai lietas izkārtotu dažādos veidos. Nevis izmantot

lai aprakstītu informāciju, izmantojot tabulu, programmētāji tos izmantotu, lai lapā izvietotu citus elementus.

Vizuāli izstrādātu izkārtojumu izmantošanas gaitā programmētāji sāka izmantot vispārīgu tagu, kas nav semantisks . Viņi bieži šiem elementiem piešķīra classvai idatribūtu, lai aprakstītu viņu mērķi. Piemēram, tā vietā bieži rakstīja kā .

Tā kā HTML5 joprojām ir salīdzinoši jauns, šāda nesemantisku elementu izmantošana vietnēs joprojām ir ļoti izplatīta.

Jauno semantisko elementu saraksts

HTML5 pievienotie semantiskie elementi ir:

Elementi, piemēram , , , , , un darbojas vairāk vai mazāk līdzīgi elementi. Viņi sagrupē citus elementus lapu sadaļās. Tomēr, ja tagā varētu būt jebkura veida informācija, ir viegli noteikt, kāda veida informācija nonāktu semantiskajā reģionā.

W3schools semantisko elementu izkārtojuma piemērs

Semantiskie elementi, kas izklāj lapu w3schools

Kāpēc izmantot semantiskos elementus?

Lai apskatītu semantisko elementu priekšrocības, šeit ir divi HTML koda fragmenti. Šis pirmais koda bloks izmanto semantiskos elementus:

Kamēr šajā otrajā koda blokā tiek izmantoti nemantiskie elementi:

Pirmkārt, to ir daudz vieglāk lasīt . Tas, iespējams, ir pirmais, ko pamanīsit, aplūkojot pirmo koda bloku, izmantojot semantiskos elementus. Šis ir mazs piemērs, taču kā programmētājs jūs varat lasīt simtiem vai tūkstošiem koda rindiņu. Jo vieglāk ir izlasīt un saprast šo kodu, jo vieglāk tas padara jūsu darbu.

Tam ir lielāka pieejamība . Jūs neesat vienīgais, kam semantiskie elementi ir vieglāk saprotami. Meklētājprogrammas un palīgtehnoloģijas (piemēram, ekrāna lasītāji lietotājiem ar redzes traucējumiem) arī spēj labāk izprast jūsu vietnes kontekstu un saturu, kas nozīmē labāku pieredzi lietotājiem.

Kopumā semantiskie elementi arī nodrošina konsekventāku kodu . Veidojot galveni, izmantojot ne-semantisko elementu, dažādi programmētāji varētu rakstīt to kā , , , vai vienkārši . Ir tik daudz veidu, kā varat izveidot galvenes elementu, un tie visi ir atkarīgi no programmētāja personīgās izvēles. Izveidojot standarta semantisko elementu, tas atvieglo ikvienu.

Kopš 2014. gada oktobra HTML4 tika jaunināts uz HTML5, kā arī daži jauni “semantiskie” elementi. Līdz šai dienai daži no mums joprojām varētu būt neizpratnē, kāpēc tik daudz dažādu elementu, kas, šķiet, neuzrāda būtiskas izmaiņas.

un

“Kāda ir atšķirība?”, Jūs varat jautāt. Abi šie elementi tiek izmantoti satura sadalīšanai, un jā, tos noteikti var izmantot savstarpēji. Jautājums, kurā situācijā. HTML4 piedāvāja tikai viena veida konteinera elementus, kas ir . Lai gan tas joprojām tiek izmantots HTML5, HTML5 mums nodrošināja un to aizstāja .

Un elementi ir konceptuāli līdzīgi un savstarpēji aizvietojami. Lai izlemtu, kuru no šiem izvēlēties, ņemiet vērā sekojošo:

  1. Izstrādājums ir paredzēts neatkarīgi izplatāms vai atkārtoti lietojams.
  2. Sadaļa ir tematiska satura grupēšana.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

un

Elements parasti atrodama augšpusē dokumenta sadaļā, vai raksts, un parasti satur galveno virsrakstu un daži navigācijas un meklēšanas rīkus.

Company A

  • Home
  • About
  • Contact us

Elements ir jāizmanto, ja vēlaties galveno virsrakstu ar vienu vai vairākiem apakšpozīcijās.

Heading 1

Subheading 1

Subheading 2

ATcerieties, ka elements var saturēt jebkuru saturu, bet elements var saturēt tikai citas galvenes, tas ir

uz

un ieskaitot .

Elements ir paredzēts saturu, kas nav daļa no plūsmas tekstu, kurā tas parādās, tomēr vēl joprojām saistīta kaut kādā veidā. Tas ir sānjosla jūsu galvenajam saturam.

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

Pirms HTML5 mūsu izvēlnes tika izveidotas ar

    'smiltis
  • 's. Tagad kopā ar tiem mēs varam nošķirt izvēlnes vienumus ar , lai pārvietotos starp jūsu lapām. Lappusē var būt jebkurš elementu skaits , piemēram, parasti ir globāla navigācija pāri augšai (sadaļā ) un vietējā navigācija sānjoslā ( elementā).

    
           
    • Home
    • About
    • Contact us

    Ja ir, tad jābūt . A parasti atrodas dokumenta, sadaļas vai raksta apakšdaļā. Tāpat kā saturs parasti ir metainformācija, piemēram, autora informācija, juridiskā informācija un / vai saites uz saistīto informāciju. Kājenē ir derīgi iekļaut arī elementus.

    ©Company A

    Elements bieži parādās laikā vai elementu, kas parasti satur autortiesību informāciju vai juridiskas atrunas, kā arī citu, piemēram fine print. Tomēr tas nav paredzēts, lai tekstu padarītu mazāku. Tas tikai apraksta tā saturu, nevis nosaka prezentāciju.

    ©Company A Date

    Šis elements ļauj nepārprotamu ISO 8601 datumu pievienot cilvēka lasāmai šī datuma versijai.

    Tuesday, 31 October 2017

    Kāpēc uztraukties ? Kamēr cilvēki var lasīt laiku, kas normālā veidā var atšķirties kontekstā, datori var nolasīt ISO 8601 datumu un redzēt datumu, laiku un laika joslu.

    un

    ir paredzēts attēla satīšanai ap to un ir paraksts jūsu attēlam.

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

    Uzziniet vairāk par jaunajiem HTML5 elementiem:

    • w3schools sniedz vienkāršu un skaidru daudzu ziņu elementu aprakstu un to, kā / kur tie jāizmanto.
    • MDN nodrošina arī lielisku atsauci uz visiem HTML elementiem un iekļauj tos dziļāk.