Indholdsfortegnelse
Mange designere bruger html eller xhtml adskiller eller grupperer elementer i lag med div. Problemet er, at hvis vi har 50 div hver adskilt med sin klasse, der definerer strukturen på websiden, vil dette give mening for designeren eller programmøren, men ikke for søgemaskinerne, da de ikke kan skelne mellem, hvad hver klasse er, hvis det er et overskrift , sektion, artikel, sidefod osv.Fordel HTML5 mod XHTMLHtml5 tilbyder en meget vigtig fordel i forhold til traditionel xhtml, og det er, at den har tags til at definere en semantisk struktur.
Vi kalder den html -kode for semantisk html, hvor strukturen giver mening for søgemaskiner og derfor tjener til SEO -positionering. Det handler om, at hver søgemaskine kan forstå, hvad hver del af en webside er, selv fjerne alt indhold.
XHTML har ikke tags, der gør det muligt at definere grupper eller blokke af elementer med en semantisk forstand.
HTML5 løser dette problem ved at tilbyde elementer og tags, der giver os mulighed for at definere semantikken på websiden, nogle af dem er blandt andet headerR, sidefod, nav, hgroup, sektion og artikel.
Dernæst vil vi definere det vigtigste i semantisk forstand:
- header: Definer overskriftsblokken på websiden, og vedhæft overskriftens indhold.
- nav: definerer en blok, der repræsenterer en menu, derfor ved søgemaskiner, når de finder dette tag, at det er navigationsstrukturen.
- gruppe: definere og gruppere titler og dermed give forskellig betydning til hver titel.
- sektion og artikel: De tidligere elementer, der definerer div> lag og erstattes af sektions- og artikeltags, som har en mere semantisk sans, når der defineres sektioner og artikler inden for sektionerne.
- til side: definerer og grupperer tangentielle elementer på websiden. Det vil sige indhold, der ikke er det vigtigste, f.eks. Sidekolonnerne eller webbjælken
- sidefod: definerer og grupperer elementer i sidefoden af websiden.
Brugen af HTML5 betyder ikke, at XHTML ikke længere bruges, de er stadig meget gode til at organisere strukturen og gruppere elementer på websiden eller påberåbe Jquery, husk at HTML5 tjener til at give det semantisk mening, men inden for blokken kan du fortsætte at bruge et andet XHTML -tag. Lad os se et eksempel herunder
Undertekst
weblogo
Vi kan se, at med lagene er strukturen blevet defineret, og inde i overskriften er der defineret en hgroup til at gruppere titlerne samt et lag, der indeholder logoet.
Således tillader XHTML -lagene os at definere websidestrukturen for at have en bedre organisation for programmøren, så hjælper XHTML os med at definere meningsfulde blokke for strukturen, og HTML5 giver os mulighed for at oprette meningsfulde blokke til søgemaskiner og SEO. Hvordan sektionstagget bruges i HTML5 til SEO.
Brug af sektionstaggen ligner meget på at bruge et div -lag, med den forskel, at sektionen giver den semantiske sans, og alle elementerne i afsnittet er relateret til webens semantik. Det er vigtigt ikke at bruge sektionen til at gruppere elementer i en blok, fordi vi skal have nonsenselementer grupperet for at tildele CSS -stilarter eller en programmeringseffekt.
Hvis grunden til at oprette en blok er at anvende CSS eller bruge den fra kode med et script, så ville det være bedre ikke at bruge HTML5, da blokken ikke har semantisk indhold. I dette tilfælde skal vi oprette en blok med div -laget xhtml. Som det ses i eksemplet ovenfor, giver logoet ikke mening at bruge HTML5, da CSS bruges til at vise billedet.
DIV -lag eller sektionEn måde at tænke på relevansen af hver blok for at afgøre, om det er et div -lag eller et afsnit, hvis jeg er besøgende på websiden. Giver denne blok mig nyttige oplysninger? Hvis svaret er ja, vil det være et afsnit, hvis ikke et lag.
Når vi bruger artikelelementet, definerer vi en blok, der har semantisk sans og indhold, som søgemaskiner kan gennemgå. Artikeltagget refererer ikke nødvendigvis til en tekstnote, det kan være et produkt, billeder eller en formular.
Lad os se et enkelt eksempel på en webside og dens kode i HTML5:
Honda Civic
Som inden for artiklen kan vi lægge lag eller afsnit eller andre xhtml -elementer i nogle tilfælde kan webens indhold kun have en artikel, og i tilfælde af at siden har lister eller kataloger, som i det tidligere tilfælde af Autos Online, kan vi have en artikel for hvert vist produkt og også sit eget header for at give titlerne mere relevans.
Vi kan også anvende css -typografier på HTML5 -elementer, lad os se et enkelt eksempel på en online blog med HTML5 og CSS3.
Titel 1
Sendt 6. december 2014 af 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 had, ultricies eu pharetra dictum, laoreet id hat …
Afsnit 2
Sendt 1. december 2014 af 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 had, ultricies eu pharetra dictum, laoreet id hat …
Dette viser, at de ikke kun er semantiske elementer, men også kan være en del af websidens design og struktur.
Dette element tjener til at definere en sekundær blok i strukturen på websiden, det er indhold eller data, som vi ønsker at vise den besøgende, men det er ikke et hovedindhold.
Vi kan knytte tagget til side med sidekolonnerne eller almindeligt kendt som sidebjælke, der vil have sekundært navigationsmenuindhold, links til andre websider, loginformularer. Vi kan også oprette en side inden for en artikel, hvilket betyder, at det, der er inden for side, er et supplement til artiklens indhold, men ikke er en direkte del af dette indhold, for eksempel hvis vi har en artikel om noget salg, og i en side offentliggør vi statistik .
Husk endelig formålet med Layout:
Hvad er layout af en webside?Layout af en webside er at bringe det grafiske design til html -kode, css lokalisere hvert tilsvarende element gennem kode på websiden.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
