HTML5 pranašumai prieš XHTML„Html5“ siūlo labai svarbų pranašumą prieš tradicinį „xhtml“ ir yra tas, kad jis turi žymas semantinei struktūrai apibrėžti.
Mes vadiname tą html kodą semantiniu html, kur struktūra yra prasminga paieškos sistemoms ir todėl naudojama SEO pozicionavimui. Tai reiškia, kad kiekviena paieškos sistema gali suprasti, kas yra kiekviena tinklalapio dalis, net pašalindama visą turinį.
XHTML neturi žymų, leidžiančių apibrėžti grupes ar elementų blokus semantiniu požiūriu.
HTML5 išsprendžia šią problemą, siūlydamas elementus ir žymas, leidžiančias apibrėžti tinklalapio semantiką, kai kurie iš jų yra headeR, poraštė, navigacija, hgroup, skyrius ir straipsnis.
Toliau semantine prasme apibrėšime svarbiausią:
- antraštė: Apibrėžkite tinklalapio antraštės bloką ir pridėkite antraštės turinį.
- nav: apibrėžia bloką, vaizduojantį meniu, todėl paieškos varikliai, radę šią žymą, žino, kad tai yra navigacijos struktūra.
- hgroup: apibrėžti ir grupuoti pavadinimus ir taip kiekvienam pavadinimui suteikti skirtingą reikšmę.
- skyrius ir straipsnis: Ankstesni elementai, kurie apibrėžia div> sluoksnius ir yra pakeičiami skyrių ir straipsnių žymomis, kurios prasmingesnės, kai apibrėžiamos skiltys ir straipsniai.
- nuošalyje: apibrėžia ir grupuoja liestinius tinklalapio elementus. Tai yra turinys, kuris nėra pagrindinis, pvz., Žiniatinklio šoniniai stulpeliai ar šoninė juosta
- poraštė: apibrėžia ir grupuoja elementus tinklalapio poraštėje.
HTML5 naudojimas nereiškia, kad XHTML nebenaudojamas, jie vis dar puikiai moka organizuoti tinklalapio struktūrą ir grupuoti elementus arba iškviesti „Jquery“, atminkite, kad HTML5 suteikia jam semantinę prasmę, tačiau galite tęsti bloką naudoti bet kokią kitą XHTML žymą. Žemiau pamatysime pavyzdį
Subtitrai
žiniatinklio logotipas
Matome, kad su sluoksniais buvo apibrėžta struktūra, o antraštės viduje ir h grupė buvo apibrėžta pavadinimams grupuoti, taip pat sluoksniui, kuriame yra logotipas.
Taigi XHTML sluoksniai leidžia mums apibrėžti tinklalapio struktūrą, kad programuotojas būtų geriau organizuotas, tada XHTML padeda mums apibrėžti prasmingus struktūros blokus, o HTML5 leidžia sukurti prasmingus blokus paieškos sistemoms ir SEO. Kaip sekcijos žyma naudojama HTML5 SEO.
Skilties žymos naudojimas yra labai panašus į „div“ sluoksnio naudojimą, tuo skirtumu, kad skyrius suteikia semantinę prasmę, o visi skyriuje esantys elementai yra susiję su žiniatinklio semantika. Svarbu nenaudoti skyriaus, kad grupuotumėte elementus bet kuriame bloke, nes mums reikia sugrupuoti nesąmoningus elementus, kad priskirtume CSS stilius ar tam tikrą programavimo efektą.
Jei bloko kūrimo priežastis yra taikyti CSS arba naudoti jį iš kodo su scenarijumi, tada geriau nenaudoti HTML5, nes blokas neturi semantinio turinio. Šiuo atveju turime sukurti bloką su div sluoksniu xhtml. Kaip matyti iš aukščiau pateikto pavyzdžio, logotipas neturi prasmės naudoti HTML5, nes vaizdui pateikti naudojamas CSS.
DIV sluoksnis arba skyriusVienas iš būdų galvoti apie kiekvieno bloko svarbą, norint nustatyti, ar jis yra div sluoksnis, ar skyrius, ar aš esu tinklalapio lankytojas. Ar šis blokas suteikia man naudingos informacijos? Jei atsakymas yra teigiamas, tai bus skyrius, jei ne sluoksnis.
Kai naudojame straipsnio elementą, mes apibrėžiame bloką, turintį semantinę prasmę ir turinį, kurį paieškos varikliai gali tikrinti. Straipsnio žyma nebūtinai nurodo tekstinę pastabą, tai gali būti produktas, vaizdai ar forma.
Pažiūrėkime paprastą tinklalapio ir jo kodo HTML5 pavyzdį:
„Honda Civic“
Kadangi straipsnyje galime įdėti sluoksnius ar pastraipas ar kitus „xhtml“ elementus, kai kuriais atvejais žiniatinklio turinys gali turėti tik vieną straipsnį, o jei puslapyje yra sąrašų ar katalogų, kaip ir ankstesniame „Autos Online“ atveju, straipsnį kiekvienam parodytam produktui ir savo antraštę, kad pavadinimai būtų labiau susiję.
Mes taip pat galime pritaikyti css stilius HTML5 elementams, pažiūrėkime paprastą internetinio tinklaraščio su HTML5 ir CSS3 pavyzdį.
1 antraštinė dalis
Paskelbė Sergio 2014 m. Gruodžio 06 d. - 3 komentarai
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 neapykanta, ultricies eu pharetra dictum, laoreet id neapykanta …
2 antraštinė dalis
Paskelbė Sergio 2014 m. Gruodžio 1 d. - 20 komentarų
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 neapykanta, ultricies eu pharetra dictum, laoreet id neapykanta …
Tai rodo, kad jie yra ne tik semantiniai elementai, bet ir gali būti tinklalapio dizaino ir struktūros dalis.
Šis elementas skirtas apibrėžti antrinį bloką tinklalapio struktūroje, tai yra turinys ar duomenys, kuriuos norime parodyti lankytojui, tačiau tai nėra pagrindinis turinys.
Galime susieti pašalinę žymą su šoniniais stulpeliais arba paprastai žinoma kaip šoninė juosta, kurioje bus antrinis naršymo meniu turinys, nuorodos į kitus tinklalapius, prisijungimo formos. Mes taip pat galime sukurti straipsnį nuošalyje, o tai reiškia, kad tai, kas yra nuošalėje, papildo straipsnio turinį, bet nėra tiesioginė to turinio dalis, pavyzdžiui, jei turime straipsnį apie kai kuriuos pardavimus ir, be to, skelbiame statistiką .
Galiausiai prisiminkite išdėstymo tikslą:
Kas yra tinklalapio išdėstymas?Tinklalapio maketas skirtas grafiniam dizainui pritaikyti prie html kodo, css surandant kiekvieną atitinkamą elementą per tinklalapio kodą.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
