Výhoda HTML5 vs. XHTMLHtml5 nabízí oproti tradičnímu xhtml velmi důležitou výhodu, a to, že má značky pro definování sémantické struktury.
Tomu html kódu říkáme sémantický html, kde má struktura smysl pro vyhledávače, a proto slouží k určování polohy SEO. Jde o to, aby každý vyhledávač porozuměl tomu, co je každá část webové stránky, a to i odebrání veškerého obsahu.
XHTML nemá značky, které umožňují definovat skupiny nebo bloky prvků se sémantickým smyslem.
HTML5 řeší tento problém tím, že nabízí prvky a značky, které nám umožňují definovat sémantiku webové stránky, některé z nich jsou mimo jiné headeR, footer, nav, hgroup, section a article.
Dále definujeme nejdůležitější v sémantickém smyslu:
- záhlaví: Definujte blok záhlaví webové stránky a uzavřete obsah záhlaví.
- nav: definuje blok, který představuje nabídku, proto vyhledávače při hledání této značky vědí, že se jedná o navigační strukturu.
- hgroup: definujte a seskupujte názvy a dávejte tak každému titulu jiný význam.
- sekce a článek: Předchozí prvky, které definují vrstvy div> a jsou nahrazeny značkami sekcí a článků, které mají při definování sekcí a článků v sekcích významovější význam.
- stranou: definuje a seskupuje tangenciální prvky webové stránky. To znamená, že obsah není hlavní, například boční sloupce nebo postranní panel webu
- zápatí: definuje a seskupuje prvky v zápatí webové stránky.
Použití HTML5 neznamená, že se XHTML již nepoužívá, jsou stále velmi dobří v organizaci struktury a seskupování prvků webové stránky nebo při vyvolávání Jquery. Pamatujte, že HTML5 slouží k tomu, aby měl sémantický smysl, ale v rámci bloku můžete pokračovat použít jakýkoli jiný XHTML tag. Podívejme se na příklad níže
Titulky
webové logo
Vidíme, že u vrstev byla definována struktura a uvnitř záhlaví záhlaví a skupiny hgroup byly definovány seskupení titulů a také vrstva obsahující logo.
Vrstvy XHTML nám tedy umožňují definovat strukturu webových stránek tak, aby měla programátor lepší organizaci, poté nám XHTML pomáhá definovat smysluplné bloky pro strukturu a HTML5 nám umožňuje vytvářet smysluplné bloky pro vyhledávače a SEO. Jak se značka oddílu používá v HTML5 pro SEO.
Použití značky oddílu je velmi podobné použití vrstvy div, s tím rozdílem, že část poskytuje sémantický smysl a všechny prvky uzavřené v sekci souvisejí se sémantikou webu. Je důležité nepoužívat sekci ke seskupování prvků v žádném bloku, protože pro přiřazení stylů CSS nebo nějakého efektu programování musíme mít seskupené nesmyslné prvky.
Pokud je důvodem pro vytvoření bloku použití CSS nebo jeho použití z kódu se skriptem, pak by bylo lepší nepoužívat HTML5, protože blok nemá sémantický obsah. V tomto případě musíme vytvořit blok s vrstvou div xhtml. Jak je vidět na výše uvedeném příkladu, logo nedává smysl používat HTML5, protože k zobrazení obrázku se používá CSS.
Vrstva nebo sekce DIVJeden způsob uvažování o relevanci každého bloku pro určení, zda se jedná o vrstvu div nebo sekci, pokud jsem návštěvníkem webové stránky. Poskytuje mi tento blok užitečné informace? Pokud odpovíte ano, bude to sekce, ne -li vrstva.
Když použijeme prvek článku, definujeme blok, který má sémantický smysl a obsah, který mohou vyhledávače procházet. Značka článku nemusí nutně odkazovat na textovou poznámku, může to být produkt, obrázky nebo formulář.
Podívejme se na jednoduchý příklad webové stránky a jejího kódu v HTML5:
Honda Civic
Protože do článku můžeme vkládat vrstvy nebo odstavce nebo jiné prvky xhtml, v některých případech může mít obsah webu pouze jeden článek a v případě, že stránka obsahuje seznamy nebo katalogy, jako v předchozím případě Autos Online, můžeme mít článek pro každý zobrazený produkt a také jeho vlastní záhlaví, které dává titulům větší relevanci.
Na prvky HTML5 můžeme také použít styly css, podívejme se na jednoduchý příklad online blogu s HTML5 a CSS3.
Název 1
Zveřejněno 06.12.2014 od Sergio - 3 komentáře
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus nenávist, ultimations eu pharetra dictum, laoreet id hatered …
Název 2
Publikováno 1. prosince 2014 od Sergia - 20 komentářů
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus nenávist, ultimations eu pharetra dictum, laoreet id hatered …
To ukazuje, že nejsou jen sémantickými prvky, ale mohou být také součástí designu a struktury webové stránky.
Tento prvek slouží k definování sekundárního bloku ve struktuře webové stránky, je to obsah nebo data, která chceme návštěvníkovi ukázat, ale nejedná se o hlavní obsah.
Značku stranou můžeme spojit s postranními sloupci nebo běžně známou jako postranní panel, který bude mít obsah sekundární navigační nabídky, odkazy na jiné webové stránky, přihlašovací formuláře. Můžeme také vytvořit stranou v článku, což znamená, že to, co je uvnitř stranou, je doplňkem obsahu článku, ale není přímou součástí tohoto obsahu, například pokud máme článek o nějakém prodeji a stranou zveřejňujeme statistiky .
Nakonec si pamatujte cíl Layout:
Co je rozložení webové stránky?Rozložení webové stránky je přenést grafický design na html kód, css lokalizovat každý odpovídající prvek prostřednictvím kódu na webové stránce.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
