✅ Lay-out met HTML5 voor SEO met semantische zin

Inhoudsopgave

Ondertitel
Titel 1
Titel 2

Veel ontwerpers gebruiken html of xhtml om elementen in lagen te scheiden of te groeperen met div. Het probleem is dat als we 50 div hebben, elk gescheiden met zijn klasse die de structuur van de webpagina definieert, dit logisch is voor de ontwerper of programmeur, maar niet voor de zoekmachines, omdat ze niet kunnen onderscheiden wat elke klasse is als het een koptekst is , sectie , artikel, voettekst, enz.
Voordeel HTML5 versus XHTMLHtml5 biedt een heel belangrijk voordeel ten opzichte van traditionele xhtml en dat is dat het tags heeft om een semantische structuur te definiëren.
We noemen die html-code semantische html waarbij de structuur logisch is voor zoekmachines en dus dient voor SEO-positionering. Het gaat erom dat elke zoekmachine kan begrijpen wat elk onderdeel van een webpagina is, en zelfs alle inhoud kan verwijderen.
XHTML heeft geen tags die het mogelijk maken om groepen of blokken van elementen te definiëren met een semantische betekenis.
HTML5 lost dit probleem op door elementen en tags aan te bieden waarmee we de semantiek van de webpagina kunnen definiëren, sommige zijn onder andere koptekst, voettekst, nav, hgroup, sectie en artikel.
Vervolgens zullen we de belangrijkste in semantische zin definiëren:

kop: Definieer het kopblok van de webpagina en sluit de koptekstinhoud in.
navigatie: definieert een blok dat een menu vertegenwoordigt, daarom weten zoekmachines bij het vinden van deze tag dat het de navigatiestructuur is.
hgroep: titels definiëren en groeperen en zo aan elke titel een ander belang toekennen.
sectie en artikel: De vorige elementen die div> lagen definiëren en worden vervangen door de sectie- en artikeltags, die een meer semantische betekenis hebben bij het definiëren van secties en artikelen binnen de secties.
terzijde: definieert en groepeert tangentiële elementen van de webpagina. Dat wil zeggen, inhoud die niet de belangrijkste is, zoals de zijkolommen of de zijbalk van het web
voettekst: definieert en groepeert elementen in de voettekst van de webpagina.

Het gebruik van HTML5 betekent niet dat XHTML niet meer wordt gebruikt, ze zijn nog steeds erg goed in het organiseren van de structuur en het groeperen van elementen van de webpagina of het aanroepen van JQuery, onthoud dat HTML5 dient om het semantische betekenis te geven, maar binnen het blok kun je doorgaan om een andere XHTML-tag te gebruiken. Laten we een voorbeeld hieronder bekijken


Ondertitel
weblogo

We kunnen zien dat met de lagen de structuur is gedefinieerd en binnen de koptekst en een hgroup zijn gedefinieerd om de titels te groeperen, evenals een laag die het logo bevat.
Zo stellen de XHTML-lagen ons in staat om de webpaginastructuur te definiëren om een betere organisatie voor de programmeur te hebben, dan helpt XHTML ons om zinvolle blokken voor de structuur te definiëren en HTML5 stelt ons in staat om zinvolle blokken te maken voor zoekmachines en SEO. Hoe de sectietag wordt gebruikt in HTML5 voor SEO.
Het gebruik van de sectie-tag lijkt erg op het gebruik van een div-laag, met het verschil dat de sectie de semantische betekenis geeft en dat alle elementen die in de sectie zijn ingesloten, verband houden met de semantiek van het web. Het is belangrijk om geen sectie te gebruiken om elementen in een blok te groeperen, omdat we onzinnige elementen moeten groeperen om CSS-stijlen of een programmeereffect toe te wijzen.
Als de reden voor het maken van een blok is om CSS toe te passen of het te gebruiken vanuit code met een script, dan is het beter om geen HTML5 te gebruiken, omdat het blok geen semantische inhoud heeft. In dit geval moeten we een blok maken met de div-laag van xhtml. Zoals te zien is in het bovenstaande voorbeeld, heeft het logo geen zin om HTML5 te gebruiken, aangezien CSS wordt gebruikt om de afbeelding weer te geven.
DIV-laag of sectieEen manier om na te denken over de relevantie van elk blok om te bepalen of het een div-laag of een sectie is, als ik de bezoeker van de webpagina ben.Geeft dit blok me nuttige informatie? Als het antwoord ja is, is het een sectie, zo niet een laag.
Wanneer we het artikelelement gebruiken, definiëren we een blok met semantische betekenis en inhoud die zoekmachines kunnen doorzoeken. De artikeltag verwijst niet noodzakelijk naar een tekstnotitie, het kan een product, afbeeldingen of een formulier zijn.
Laten we een eenvoudig voorbeeld van een webpagina en zijn code in HTML5 bekijken:

Honda Civic

Omdat we in het artikel lagen of alinea's of andere xhtml-elementen kunnen plaatsen, kan de inhoud van het web slechts één artikel bevatten en in het geval dat de pagina lijsten of catalogi heeft, zoals in het vorige geval van Autos Online, kunnen we een artikel per elk getoond product en ook een eigen kop om meer relevantie aan de titels te geven.
We kunnen ook css-stijlen toepassen op HTML5-elementen, laten we een eenvoudig voorbeeld bekijken voor een online blog met HTML5 en CSS3.

Titel 1

Geplaatst op 06 december 2014 door Sergio - 3 reacties

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 haat, ultricies eu pharetra dictum, laoreet id haat …

Titel 2

Geplaatst op 1 december 2014 door Sergio - 20 reacties

Dit laat zien dat het niet alleen semantische elementen zijn, maar ook deel kunnen uitmaken van het ontwerp en de structuur van de webpagina.
Dit element dient om een secundair blok binnen de structuur van de webpagina te definiëren, het is inhoud of gegevens die we de bezoeker willen laten zien, maar het is geen hoofdinhoud.
We kunnen de opzij-tag associëren met de zijkolommen of algemeen bekend als zijbalk die secundaire inhoud van het navigatiemenu, links naar andere webpagina's en inlogformulieren zal hebben. We kunnen ook een terzijde maken binnen een artikel. Dit betekent dat wat er in terzijde staat een aanvulling is op de inhoud van het artikel, maar geen direct onderdeel is van die inhoud, bijvoorbeeld als we een artikel hebben over bepaalde verkopen en in een terzijde publiceren we statistieken .
Onthoud ten slotte het doel van Layout:
Wat is een webpagina opmaken?Lay-out van een webpagina is om het grafische ontwerp naar html-code te brengen, waarbij css elk corresponderend element lokaliseert via code op de webpagina.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven