✅ Izkārtojums ar HTML5 SEO ar semantisku izjūtu

Satura rādītājs

Apakšvirsraksts
1. sadaļa
2. sadaļa

Daudzi dizaineri izmanto html vai xhtml atdalīšanas vai grupēšanas elementus slāņos ar div. Problēma ir tāda, ka, ja mums ir 50 div, nošķirti katrs ar savu klasi, kas nosaka tīmekļa lapas struktūru, tas būs lietderīgi dizaineram vai programmētājam, bet ne meklētājprogrammām, jo tās nevar atšķirt, kas ir katra klase, ja tā ir galvene , sadaļa, raksts, kājene utt.
Priekšrocība HTML5 salīdzinājumā ar XHTMLHtml5 piedāvā ļoti svarīgas priekšrocības salīdzinājumā ar tradicionālo xhtml, un tas ir tas, ka tam ir tagi, lai definētu semantisko struktūru.
Mēs šo html kodu saucam par semantisku html, kur struktūrai ir jēga meklētājprogrammām un tāpēc tā kalpo SEO pozicionēšanai. Runa ir par to, ka katra meklētājprogramma var saprast, kāda ir katra tīmekļa lapas daļa, pat noņemot visu saturu.
XHTML nav tagu, kas ļauj definēt elementu grupas vai blokus ar semantisku nozīmi.
HTML5 atrisina šo problēmu, piedāvājot elementus un tagus, kas ļauj mums noteikt tīmekļa lapas semantiku, daži no tiem ir headeR, kājenes, nav, hgroup, sadaļa un raksts.
Tālāk mēs definēsim vissvarīgāko semantiskā nozīmē:

galvene: Definējiet tīmekļa lapas galvenes bloku un pievienojiet galvenes saturu.
nav: definē bloku, kas attēlo izvēlni, tāpēc meklētājprogrammas, atrodot šo tagu, zina, ka tā ir navigācijas struktūra.
hgroup: definēt un grupēt nosaukumus un tādējādi piešķirt katram nosaukumam atšķirīgu nozīmi.
sadaļa un raksts: Iepriekšējie elementi, kas definē div> slāņus un tiek aizstāti ar sadaļu un rakstu tagiem, kuriem ir semantiskāka nozīme, definējot sadaļas un rakstus sadaļās.
malā: definē un grupē tīmekļa lapas tangenciālos elementus. Tas ir, saturs, kas nav galvenais, piemēram, tīmekļa sānu kolonnas vai sānjosla
kājene: definē un grupē elementus tīmekļa lapas kājenē.

HTML5 izmantošana nenozīmē, ka XHTML vairs netiek izmantots, tie joprojām ir ļoti labi, lai organizētu tīmekļa lapas struktūru un grupētu elementus vai izsauktu Jquery, atcerieties, ka HTML5 kalpo tam, lai piešķirtu tai semantisku sajūtu, bet blokā varat turpināt lai izmantotu jebkuru citu XHTML tagu. Tālāk aplūkosim piemēru


Apakšvirsraksts
tīmekļa logotips

Mēs redzam, ka ar slāņiem struktūra ir definēta, un galvenes galvenes iekšpusē ir definēta h grupa, lai grupētu nosaukumus, kā arī slānis, kurā ir logotips.
Tādējādi XHTML slāņi ļauj mums definēt tīmekļa lapas struktūru, lai programmētājam būtu labāka organizācija, tad XHTML palīdz mums definēt struktūrai nozīmīgus blokus, un HTML5 ļauj mums izveidot nozīmīgus blokus meklētājprogrammām un SEO. Kā sadaļas tags tiek izmantots HTML5 SEO.
Sadaļas taga izmantošana ir ļoti līdzīga div slāņa izmantošanai ar atšķirību, ka sadaļa nodrošina semantisko sajūtu, un visi sadaļā iekļautie elementi ir saistīti ar tīmekļa semantiku. Svarīgi neizmantot sadaļu elementu grupēšanai nevienā blokā, jo mums ir jābūt grupētiem bezjēdzīgiem elementiem, lai piešķirtu CSS stilus vai kādu programmēšanas efektu.
Ja bloka izveides iemesls ir CSS lietošana vai tā izmantošana no koda ar skriptu, tad labāk nebūtu izmantot HTML5, jo blokam nav semantiska satura. Šajā gadījumā mums ir jāizveido bloks ar xhtml div slāni. Kā redzams iepriekš minētajā piemērā, logotipam nav jēgas izmantot HTML5, jo attēla attēlošanai tiek izmantots CSS.
DIV slānis vai sadaļaViens veids, kā domāt par katra bloka atbilstību, lai noteiktu, vai tas ir divslānis vai sadaļa, vai es esmu tīmekļa lapas apmeklētājs. Vai šis bloks sniedz man noderīgu informāciju? Ja atbilde ir apstiprinoša, tā būs sadaļa, ja ne slānis.
Izmantojot raksta elementu, mēs definējam bloku ar semantisku jēgu un saturu, ko meklētājprogrammas var pārmeklēt. Raksta tags ne vienmēr attiecas uz teksta piezīmi, tas var būt produkts, attēli vai veidlapa.
Apskatīsim vienkāršu tīmekļa lapas un tās koda piemēru HTML5 formātā:

Honda Civic

Tā kā rakstā dažos gadījumos mēs varam ievietot slāņus vai rindkopas vai citus xhtml elementus, tīmekļa saturam varētu būt tikai viens raksts, un gadījumā, ja lapā ir saraksti vai katalogi, kā iepriekšējā Autos Online gadījumā, mums var būt rakstu par katru parādīto produktu un arī savu galveni, lai nosaukumi būtu vairāk saistīti.
Mēs varam arī piemērot css stilus HTML5 elementiem, apskatīsim vienkāršu piemēru tiešsaistes emuāram ar HTML5 un CSS3.

1. sadaļa

Ievietoja Sergio 2014. gada 6. decembrī - 3 komentāri

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus naids, ultricies eu pharetra dictum, laoreet id naids …

2. sadaļa

Ievietoja Sergio 2014. gada 1. decembrī - 20 komentāri

Tas parāda, ka tie ir ne tikai semantiski elementi, bet arī var būt daļa no tīmekļa lapas dizaina un struktūras.
Šis elements kalpo, lai definētu sekundāro bloku tīmekļa lapas struktūrā, tas ir saturs vai dati, kurus mēs vēlamies parādīt apmeklētājam, bet tas nav galvenais saturs.
Mēs varam saistīt rezerves tagu ar sānu kolonnām vai plaši pazīstamu kā sānu joslu, kurai būs sekundārais navigācijas izvēlnes saturs, saites uz citām tīmekļa lapām, pieteikšanās veidlapas. Mēs varam arī izveidot maliņu rakstā, tas nozīmē, ka malā esošais papildina raksta saturu, bet nav tieša šī satura daļa, piemēram, ja mums ir raksts par kādu pārdošanu un malā publicējam statistiku .
Visbeidzot, atcerieties izkārtojuma mērķi:
Kas ir tīmekļa lapas izkārtojums?Tīmekļa lapas izkārtojums ir panākt grafisko noformējumu html kodā, css atrodot katru atbilstošo elementu, izmantojot tīmekļa lapas kodu.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu