Fordel HTML5 mot XHTMLHtml5 gir en veldig viktig fordel i forhold til tradisjonell xhtml, og det er at den har tagger for å definere en semantisk struktur.
Vi kaller den html -koden for semantisk html der strukturen gir mening for søkemotorer og derfor tjener til SEO -posisjonering. Det handler om at hver søkemotor kan forstå hva hver del av en webside er, til og med fjerne alt innholdet.
XHTML har ikke koder som gjør det mulig å definere grupper eller blokker av elementer med semantisk sans.
HTML5 løser dette problemet ved å tilby elementer og tagger som lar oss definere semantikken på websiden, noen av dem er headerR, bunntekst, nav, hgroup, seksjon og artikkel, blant andre.
Deretter vil vi definere det viktigste i semantisk forstand:
- Overskrift: Definer toppblokken til nettsiden og vedlegg topptekstinnholdet.
- nav: definerer en blokk som representerer en meny, derfor vet søkemotorer når du finner denne taggen at det er navigasjonsstrukturen.
- gruppe: definere og gruppere titler og dermed gi hver tittel forskjellig betydning.
- seksjon og artikkel: De tidligere elementene som definerer div> lag og erstattes av seksjon- og artikkelmerker, som har en mer semantisk sans når du definerer seksjoner og artikler i seksjonene.
- til side: definerer og grupperer tangensielle elementer på websiden. Det vil si innhold som ikke er det viktigste, for eksempel sidekolonnene eller sidefeltet på nettet
- bunntekst: definerer og grupperer elementer i bunnteksten på nettsiden.
Bruken av HTML5 betyr ikke at XHTML ikke lenger brukes, de er fortsatt veldig gode til å organisere strukturen og gruppere elementene på websiden eller påkalle Jquery, husk at HTML5 tjener til å gi det semantisk sans, men innenfor blokken kan du fortsette å bruke en annen XHTML -tag. La oss se et eksempel nedenfor
Teksting
weblogo
Vi kan se at med lagene har strukturen blitt definert og inne i toppteksten og en hgroup er definert for å gruppere titlene, samt et lag som inneholder logoen.
Dermed lar XHTML -lagene oss definere nettsidestrukturen for å ha en bedre organisering for programmereren, så hjelper XHTML oss med å definere meningsfulle blokker for strukturen og HTML5 lar oss lage meningsfulle blokker for søkemotorer og SEO. Hvordan seksjonskoden brukes i HTML5 for SEO.
Å bruke seksjonstaggen ligner veldig på å bruke et div -lag, med den forskjellen at seksjonen gir semantisk sans og alle elementene som er omsluttet i seksjonen er relatert til semantikken på nettet. Det er viktig å ikke bruke seksjonen til å gruppere elementer i noen blokk, fordi vi må ha tullelementer gruppert for å tildele CSS -stiler eller en programmeringseffekt.
Hvis grunnen til å opprette en blokk er å bruke CSS eller bruke den fra kode med et skript, er det bedre å ikke bruke HTML5, siden blokken ikke har semantisk innhold. I dette tilfellet må vi opprette en blokk med div -laget med xhtml. Som vist i eksemplet ovenfor, gir logoen ingen mening å bruke HTML5 siden CSS brukes til å vise bildet.
DIV -lag eller seksjonEn måte å tenke på relevansen til hver blokk for å avgjøre om det er et div -lag eller en seksjon, om jeg er besøkende på nettsiden. Gir denne blokken meg nyttig informasjon? Hvis svaret er ja, vil det være en seksjon, om ikke et lag.
Når vi bruker artikkelelementet, definerer vi en blokk som har semantisk sans og innhold som søkemotorer kan gjennomsøke. Artikkeltaggen refererer ikke nødvendigvis til et tekstnotat, det kan være et produkt, bilder eller et skjema.
La oss se et enkelt eksempel på en webside og koden i HTML5:
Honda Civic
Som i artikkelen kan vi sette lag eller avsnitt eller andre xhtml -elementer i noen tilfeller kan innholdet på nettet bare ha en artikkel, og i tilfelle siden har lister eller kataloger, som i forrige tilfelle av Autos Online, kan vi ha en artikkel per hvert produkt som vises og også sin egen overskrift for å gi titlene mer relevans.
Vi kan også bruke css -stiler på HTML5 -elementer, la oss se et enkelt eksempel for en online blogg med HTML5 og CSS3.
Tittel 1
Skrevet 6. desember 2014 av Sergio - 3 kommentarer
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 hat, ultricies eu pharetra dictum, laoreet id hat …
Tittel 2
Lagt ut 1. desember 2014 av Sergio - 20 kommentarer
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 hat, ultricies eu pharetra dictum, laoreet id hat …
Dette viser at de ikke bare er semantiske elementer, men også kan være en del av utformingen og strukturen til nettsiden.
Dette elementet tjener til å definere en sekundær blokk i strukturen på nettsiden, det er innhold eller data som vi vil vise besøkende, men det er ikke et hovedinnhold.
Vi kan knytte side -taggen til sidekolonnene eller kjent som sidefeltet som vil ha sekundært navigasjonsmenyinnhold, lenker til andre nettsider, påloggingsskjemaer. Vi kan også lage en side i en artikkel, dette betyr at det som er innenfor side er et supplement til artikkelinnholdet, men ikke er en direkte del av det innholdet, for eksempel hvis vi har en artikkel om noe salg og i en side publiserer vi statistikk .
Husk til slutt målet med Layout:
Hva er oppsett av en webside?Oppsett av en webside er å bringe grafisk design til html -kode, css lokalisere hvert tilsvarende element gjennom kode på websiden.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
