✅ Layout med HTML5 för SEO med semantiskt sinne

Innehållsförteckning

Texta
Avdelning 1
Avdelning 2

Många designers använder html eller xhtml separera eller gruppera element i lager med div. Problemet är att om vi har 50 div vardera separerade med sin klass som definierar webbsidans struktur, kommer detta att vara meningsfullt för designern eller programmeraren men inte för sökmotorerna eftersom de inte kan skilja vad varje klass är om det är ett rubrik , sektion, artikel, sidfot etc.
Fördel HTML5 mot XHTMLHtml5 erbjuder en mycket viktig fördel jämfört med traditionell xhtml och det är att den har taggar för att definiera en semantisk struktur.
Vi kallar den html -koden för semantisk html där strukturen är vettig för sökmotorer och därför fungerar för SEO -positionering. Det handlar om att varje sökmotor kan förstå vad varje del av en webbsida är, till och med ta bort allt innehåll.
XHTML har inte taggar som gör det möjligt att definiera grupper eller block av element med en semantisk känsla.
HTML5 löser detta problem genom att erbjuda element och taggar som gör att vi kan definiera webbsidans semantik, några av dem är bland annat headerR, sidfot, nav, hgroup, avsnitt och artikel.
Därefter definierar vi det viktigaste i semantisk mening:

rubrik: Definiera webbläsarens rubrikblock och bifoga rubrikinnehållet.
nav: definierar ett block som representerar en meny, därför vet sökmotorer när de hittar den här taggen att det är navigeringsstrukturen.
hgroup: definiera och gruppera titlar och därmed ge varje titel olika betydelse.
avsnitt och artikel: De tidigare elementen som definierar div> lager och ersätts av sektions- och artikeltaggarna, som har en mer semantisk känsla när sektioner och artiklar definieras inom sektionerna.
åt sidan: definierar och grupperar tangentiella element på webbsidan. Det vill säga innehåll som inte är det huvudsakliga, till exempel sidkolumnerna eller sidofältet på webben
sidfot: definierar och grupperar element i sidfoten på webbsidan.

Användningen av HTML5 innebär inte att XHTML inte längre används, de är fortfarande mycket bra på att organisera strukturen och gruppera element på webbsidan eller åberopa Jquery, kom ihåg att HTML5 tjänar till att ge det semantisk känsla men inom blocket kan du fortsätta att använda någon annan XHTML -tagg. Låt oss se ett exempel nedan


Texta
webblogotyp

Vi kan se att med lagren har strukturen definierats och inuti rubrikhuvudet och en hgroup har definierats för att gruppera titlarna, liksom ett lager som innehåller logotypen.
Således tillåter XHTML -lagren oss att definiera webbsidans struktur för att få en bättre organisation för programmeraren, sedan hjälper XHTML oss att definiera meningsfulla block för strukturen och HTML5 låter oss skapa meningsfulla block för sökmotorer och SEO. Hur avsnittstaggen används i HTML5 för SEO.
Att använda sektionstaggen är väldigt likt att använda ett div -lager, med skillnaden att avsnittet ger semantisk känsla och alla element som ingår i avsnittet är relaterade till semantiken på webben. Det är viktigt att inte använda avsnitt för att gruppera element i något block eftersom vi måste ha nonsenselement grupperade för att tilldela CSS -stilar eller någon programmeringseffekt.
Om anledningen till att skapa ett block är att tillämpa CSS eller använda det från kod med ett skript, är det bättre att inte använda HTML5, eftersom blocket inte har semantiskt innehåll. I det här fallet måste vi skapa ett block med div -lagret av xhtml. Som framgår av exemplet ovan är det inte logiskt att använda HTML5 eftersom CSS används för att visa bilden.
DIV -lager eller sektionEtt sätt att tänka på relevansen av varje block för att avgöra om det är ett div -lager eller ett avsnitt, om jag är besökare på webbsidan. Ger detta block mig användbar information? Om svaret är ja blir det ett avsnitt, om inte ett lager.
När vi använder artikelelementet definierar vi ett block som har semantiskt sinne och innehåll som sökmotorer kan genomsöka. Artikeltaggen hänvisar inte nödvändigtvis till en textanteckning, det kan vara en produkt, bilder eller ett formulär.
Låt oss se ett enkelt exempel på en webbsida och dess kod i HTML5:

Honda Civic

Precis som i artikeln kan vi lägga lager eller stycken eller andra xhtml -element i vissa fall kan innehållet på webben bara ha en artikel och i det fall att sidan har listor eller kataloger som i föregående fall av Autos Online kan vi ha en artikel för varje visad produkt och även sin egen rubrik för att ge mer relevans till titlarna.
Vi kan också tillämpa css -stilar på HTML5 -element, låt oss se ett enkelt exempel för en online -blogg med HTML5 och CSS3.

Avdelning 1

Inlagd 06 december 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 …

Avdelning 2

Inlagd 1 december 2014 av Sergio - 20 kommentarer

Detta visar att de inte bara är semantiska element utan också kan vara en del av webbsidans design och struktur.
Detta element tjänar till att definiera ett sekundärt block inom webbsidans struktur, det är innehåll eller data som vi vill visa besökaren men det är inte ett huvudinnehåll.
Vi kan associera taggen åt sidan med sidkolumnerna eller allmänt kända som sidofältet som kommer att ha sekundärt navigeringsmenyinnehåll, länkar till andra webbsidor, inloggningsformulär. Vi kan också skapa en sida i en artikel, detta betyder att det som är inuti är ett komplement till artikelinnehållet men inte är en direkt del av innehållet, till exempel om vi har en artikel om viss försäljning och i en sido publicerar vi statistik .
Slutligen, kom ihåg målet med Layout:
Vad är layout för en webbsida?Layout en webbsida är att föra den grafiska designen till html -kod, css lokalisera varje motsvarande element genom kod på webbsidan.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng