Meklēt pareizajā HTML5 semantikā
Ja jūs rūpīgi plānojat savu HTML dokumentu struktūru, varat palīdziet datoriem saprast jūsu satura nozīmi. Pareizai sintaksei ir svarīga nozīme, bet tā pamatā tikai sniedz parsers, meklētājprogrammas un palīgtehnoloģijas ar bezjēdzīgu datu kopumu..
Ja uzlabosiet priekšplāna darbplūsmu, pievēršot uzmanību semantikai, varat izveidot augstākas kvalitātes saturu, kas piesaista vairāk apmeklētāju. Semantika ir jēgas izpēte, plašākā kontekstā tas ir loģikas un valodniecības nozare.
Tīmekļa izstrādes pasaulē mēs runājam par semantisko saturu, kad datori saprot dokumenta struktūru un elementu iekšpusē. Ja mēs vēlamies izveidot atbilstošu semantiku, mums ir dziļi jāapgūst saprast struktūru mūsu satura un spējas tehnoloģijas.
Tātad, kādi ir taustāmi ieguvumi? Pareiza semantika nozīmē a vairāk meklēšanas saturu kas noved pie a labāka meklētājprogrammu klasifikācija. Mēs arī palielinām pieejamību, kā palīgtehnoloģijas, piemēram, ekrāna lasītāji var labāk interpretēt mūsu satura nozīmi.
Ir daudzas dažādas front-end izstrādes metodes, kas ļauj izstrādātājiem sasniegt semantisku lapas struktūru. Šis ieraksts sniegs jums īsu ievadu semantiskajos HTML tagos un dokumenta izklāsta koncepcijā.
Semantiskais un neemantiskais HTML marķējums
Semantikas jēdziens nav tik jauns, kā šķiet, tas pastāvēja jau pirms HTML5 laikmeta. Semantiskā web termins tika radīts jau 2001.gadā Sir Tim Berners-Lee. Zem “semantiskais tīmeklis” viņš nozīmēja datu tīklu, ko var apstrādāt mašīnas.
Tas galvenokārt nozīmē to atsevišķiem HTML elementiem ir jābūt atšķirīgām strukturālām lomām. Saskaņā ar W3C definīciju “semantiskais elements skaidri apraksta tā nozīmi gan pārlūkprogrammā, gan izstrādātājā”.
Semantiskie elementi pirms HTML5
Semantiskie elementi pastāvēja arī pirms HTML5, vairumā gadījumu izstrādātāji to nezināja daži no tagiem, ko viņi izmantoja, faktiski bija semantiski. Padomājiet par vai
To uzdevumi ir skaidri gan mums, gan lietotāja aģentam: vienkārši satur formu, tāpat kā
The
Pasūtīts un neierobežoti saraksti, punktu, h1-h6 virsraksta tagi visi semantiskie elementi, kas bija pirms HTML5.
Ne-semantiskie elementi
Ne semantiskajiem elementiem nav nekādas īpašas nozīmes, hierarhiskās attiecības starp tām ir tikai iluzoriskas. Visplašāk izmantotie ne-semantisko HTML tagu piemēri ir un tagus.
Ja jūsu vietne jebkad ir aizturējusi briesmīgo slimību divīts, jūs zināt, par ko es runāju. Yep. Divs ne vienmēr ir nepareizi, bet divīts ir jācīnās, ja mēs vēlamies rakstīt uzturamu, modulāru un jēgpilnu HTML kodu.
Smashing Magazine skaisti izskaidro, kāda ir reālā problēma ar pārmērīgu un nepamatotu lietošanu Starp abiem nav nekādu sakaru, tāpat kā Neuztraucieties, ja jūs joprojām jūtaties piesaistīti HTML5 ieviesa daudzus jaunus semantiskus elementus, kas padara vienkāršu satura organizēšanu iespējamu. Tie ne tikai palīdz jums organizēt saturu visa dokumenta līmenī (sīkāk skatiet nākamajā nodaļā), bet arī teksta blokos, kā inline tagus. Iespējams, ka populārākie teksta līmeņa semantiskie tagi ir Skatiet šo sarakstu visiem teksta līmeņa semantiskajiem elementiem, kas pašlaik tiek izmantoti. Dokumenta izklāsts ir HTML dokumenta struktūra. Tas parāda, kā elementi ir savstarpēji saistīti. Dokumenta izklāsts ir radīts, tikai kartējot elementus, piemēram, virsrakstus, tabulu nosaukumus, veidlapu nosaukumus un citus agrākās HTML versijas, piemēram, HTML4.01 un XHTML. HTML5 formātā algoritms ir uzlabots ar jauniem sekciju elementiem, proti: HTML5 ir piektais šķērsgriezuma elements, bet tas nav jauns, tas ir Ja mēs vēlamies izveidot labi strukturētu dokumentu izklāstu, mums jāpievērš uzmanība šādiem noteikumiem: 1. Ārējais sekcijas elements vienmēr ir 2. HTML5 sadaļas var ligzdot. 3. Katrai sadaļai ir sava virsrakstu hierarhija. Katrai no tām (pat visdziļākajai ligzdai) var būt 4. Lai gan dokumenta izklāstu galvenokārt nosaka pieci sadalīšanas elementi, tai ir vajadzīgas arī atbilstošas pozīcijas katrai sadaļai. 5. Tas vienmēr ir pirmais virsraksts elements (ļaujiet tai būt h1 vai zemākas kategorijas virsraksta tagam), kas nosaka konkrētās sadaļas virsrakstu. Šai sadaļai ir jābūt šādām virsraksta tagām. (Ja pirmā virsraksts šķērsgriezuma elementā ir h3, pēc tam neievietojiet h3.) 6. Sadaļas, ko noteikusi 7. Katrai sadaļai (ķermenim, sekcijai, rakstam, malā, nav) var būt savs Redzēsim piemēru semantiskajam dokumentam, lai redzētu, kā tas darbojas. Mūsu piemēru kods radīs šādu dokumentu struktūru: Un šeit ir kods ar atbilstošu semantisko sekciju: Šeit ir mūsu logotips un sauklis. 1. punkts pirmajā daļā Pirmā punkta 2. \ T 1. punkts otrajā daļā 2. punkts otrajā daļā Ja aplūkojat iepriekš minēto koda fragmentu, redzēsiet, ka galvenes un kājenes ir izvēles, mēs varam brīvi izvēlēties, vai mēs vēlamies tos izmantot vai nē, bet tas ir ļoti ieteicams vienmēr iekļaut virsrakstu katrai sadaļai, pretējā gadījumā sadaļa būs “Bez nosaukuma” dokumenta kontūrā. Par laimi internetā ir daudz lielisku rīku, kas ļauj pārbaudīt dokumenta izklāstu, šoreiz mēs izmantosim html5.org Outliner rīku. Ja ievietosim koda fragmentu formā, ko sniedz ārējs, un noklikšķiniet uz “Izklāstiet to!” poga, mēs redzēsim šādu rezultātu: Tas ir dokumentu parauga paraugs, tas ir, kā meklētājprogrammas to redz, un ekrāna lasītāji to lasa saviem vājredzīgajiem lietotājiem. Tas ir semantisks, labi strukturēts, un nav nekādu šķebinošu “Bez nosaukuma” sadaļā. Ja vēlaties apskatīt, kā Unlinled sadaļa izskatās Outliner, vienkārši izdzēsiet dažus virsraksta tagus piemēru kodā. Semantiskās HTML tagi un dokumentu kontūras ir tikai neliela daļa no tīmekļa semantikas. Tīmekļa lapas saturu var padarīt vēl nozīmīgāku, izmantojot WAI-ARIA pieejamības protokolu un strukturētus datus, ko var izmantot kopā ar RDFa protokolu, mikrodatiem vai JSON-LD marķējumu. atzīme, kas darbojas tādā pašā veidā, tikai inline līmenī.-tomēr, kā tiem nav nepieciešams pilnībā grāvēt. Tie joprojām ir labākā izvēle, lai grupētu saturu tikai veidošanas nolūkos un citos pēdējos gadījumos. Teksta semantika HTML5
un , bet tie pastāvēja arī pirms HTML5. Starp jaunajiem semantiskajiem elementiem mēs varam atrast, piemēram, , tagu cilvēku nolasāmi datumi, un par izcelts teksts.Dokumenta izklāsts HTML5
par sadaļas, kas sagrupētas ap konkrētu tēmu par pilnīga vai patstāvīga kompozīcija piemēram, emuāra ziņu vai logrīku par navigācijas bloki par papildu saturu, piemēram, sānjoslas. tag. The tagi ir arī jauni, bet dokumentā tie nerada jaunas sadaļas, tie sadala saturu sadaļās. Tas nozīmē ka katrs šķērsgriezuma elements (virsbūve, artikuls, sadaļa, nav un malā) var būt sava galvene un kājene.Padomi semantiski strukturētam saturam
tag.h1 tag., un tagi nepieder HTML dokumenta galvenajam kontam, tie parasti netiek sniegti ar palīgtehnoloģijām. tagus, kas definē galveni (piemēram, logotipu, autora vārdu, datumus, metas informāciju utt.) un kājenes (autortiesības, piezīmes, saites utt.).Piemērs: semantiskais kontūrs
Laipni lūdzam mūsu mājas lapā!
Panta nosaukums. \ T
Panta apakšvirsraksts. \ T
Pirmā loģiskā daļa (piem., "Teorija")
Dažas citas apakšpozīcijas pirmajā daļā
Otrā loģiskā daļa (piem., "Prakse")
Citi Web semantikas aspekti
