A szemantikus elrendezés alapjai a html5-ben

Hello mindenkinek! Így kezdődött a régóta várt Olimpia. Nagyon nagy sikereket és jó szerencsét kívánok minden résztvevőnek, és természetesen nagyon beteg vagyok Oroszországért, mert Én magam orosz vagyok. És most a böjt témájára. Ebben a cikkben beszéljünk a HTML5 modern elrendezéséről, annak előnyeiről és fontosságáról általában. Még mindig nem tudtam átállni a html5-re, azt gondoltam, hogy csak egyáltalán új, nem minden böngésző támogatja, különösen az IE 7-8-at. De nem így volt.

Tehát nézzük meg a html5 jelölést lépésekben, és kezdjük a dokumentum kezdetétől - Doctype. A Doctype a html5-ben sokkal egyszerűbb, így könnyedén megjegyezhető.

A kódolási jelölést a következőképpen írják le

Érzi a különbséget? A kód sokkal könnyebbé vált, és nagyon könnyen megjegyezhető. Szintén, amikor szkripteket és stílusokat csatlakoztat, akkor nem kell megadnia a típust.

Ezután meghatározzuk a nyelvet:

Ez a szkript letölthető a Google szerverről is.

Ezután felsoroljuk a fő szerkezeti elemeket:

Olvassa el: Font-Face: nem szabványos betűkészletek csatlakoztatása

Meg kell jegyezni, hogy az html5 új elemei inline jellegűek, azaz a helyes megjelenítéshez blokkolja őket.

A fentiek alapján rajzolhat egy kis oldal elrendezést a html5-ben

Ahogy láthatja, a html5-nek külön előnye van a html4-en szemben, mind a jelölés, mind a vezérigazgató szempontjából. Beszéljünk a vezérigazgatóról.

A fő címkék mellett a következő címkéket is gyakran használják:
helyőrző (placeholder = "Szöveg") - felirat jelenik meg a beviteli mezőben, és gépeléskor automatikusan eltűnik. Ez az attribútum megjelenik a html5-ben, most már nincs szükség további szkriptek megjelenítésére a mezőben, például a keresési mezőben.

- fontos szó vagy kifejezés kiválasztása. Figyeld meg a sárga háttérszínt.

- egy hangfelvételt jelenít meg a webhelyen egy standard böngésző lejátszóval

HTML5 és SEO

A HTML5 egyik legfontosabb jellemzője, és véleményem szerint a legfontosabb az, hogy az összes blokk kereső robotja szignifikánsan elkülöníti őket, azaz a weboldalak szegmentálása. A html4-ben lehetetlen ezt megcsinálni, mert A szabványos div tag nem ad semantikus jelentést az elemnek, amely e címke belsejében található. Új elemek használatával fejléc, cikk, félre, lábléc minden megváltozik. Ie Nagyjából elmondják, hogy "megmondják" a keresőrobotoknak azokat az elemeket, amelyek fontosságot tulajdonítanak, és melyeket hagynak ki. Például egy keresőmező könnyen meg tudja érteni a címkék közötti információt

szerzői jogi és hasonló információ a látogató számára.

Olvassa el: Firebug - nélkülözhetetlen eszköz minden webfejlesztő számára

A keresőmotorok indexelését befolyásoló elemek

A cikkcímke az egyik legfontosabb a webhelyoldalak szegmentálásakor. Ez a címke kifejezetten jelzi azokat a keresőmotorokat, amelyeken a webhely fő tartalma található. És mindannyian tudjuk, hogy a tartalom elsősorban a látogatók számára érkezik. Itt feltételezzük, hogy a PS maximális figyelmet fordít a címkék tartalmára

, eldobva vagy félretéve a többi elemet.

A szakaszelem a jelöléseket különböző szakaszokra osztja fel. Mit nyújt? A keresőrobotok jól tájékozott egy jól megtervezett weboldalon. Ha helyesen használja a címkét

, akkor könnyen elkészítheti a dokumentum információs hierarchiáját, ez pedig javítja a webhely egészének indexelését.

A fejléc tag segítségével a keresőrobotok könnyedén megtalálhatják az oldal logóját, webhelynevét, szlogenjét, fő navigációt (főmenü).

Ez a címke meghatározza a navigációs struktúrát a webhelyen.

A HTML5 HTML5-vel ellentétben a linkek több értelmes attribútummal rendelkeznek.

Itt találhatók a HTML5 hivatkozások főbb attribútumai:

külső linkek, amelyek a külső forrásokra utalnak

segítség - linkek az oldalak segítségére

A többi attribútum megtekinthető itt.

Itt van egy kis áttekintés a HTML5 jelölésről. Ami engem illet, már régóta kapcsolódtam a HTML5 jelölés használatához, és a sablonok legtöbbje már lefordítva a HTML5-be, így a kezek nem érik el ezt a blogot.

Ez minden. Mindez most. A következő hozzászólásokban látlak.

Már bekapcsolta a HTML5-öt?

Zaur Magomedov

Rám lehet:

Rendelés elrendezése Rendelje meg a webhelyet kulcsrakész alapon

Kapcsolódó cikkek