Základy sémantiky aneb jaký význam mají HTML tagy
Tak jako má každý jazyk určitá pravidla, stejně je tomu i u HTML. Gramatická pravidla, kterými bychom mohli rozumět například validitu, ale také stylistická pravidla nebo-li sémantiku.
Sémantika správně vyznačuje jednotlivé úseky zdrojového kódu každé webové stránky. HTML má mnoho značek určitého významu, který je vhodné dodržovat. Jestliže tedy chceme psát odstavec, měli bychom použít značku <p>, jejíž sémantický význam je … ano, správně, odstavec. Přestože je to prosté, spousta webů toto pravidlo nedodržuje. A to je chyba.
Jedním dechem je ale nutné dodat, že sémantika je sice důležitá, ale ne nepostradatelná. Může omezovat, zdržovat a někdy je téměř nemožné jí dodržet na sto procent. Sémanticky správně napsaný web má ale zkrátka své výhody. Pokud jsou například u webu vypnuté CSS styly, zobrazí se i tak korektně a lze jej normálně používat – je tedy lépe přístupný. Bez základní sémantiky s vámi budou mít problém i vyhledávače. Váš web sice zaindexují, ale nebudou správně interpretovat obsah či jeho význam a to je snad to nejhorší, co se může stát.
Základní HTML tagy
Někteří tvůrci webu o sémantice třeba ještě ani neslyšeli. Jak tedy vypadá několik základních HTML tagů, pokud jsou sémanticky správně zapsány?
Hlavní nadpis webu, značka <h1> by měl být ideálně na začátku obsahové části. Za ním již může následovat další obsah, vč. dalších podnadpisů nižších úrovní.
<h1>Hlavní nadpis stránky</h1>
...
<h2>První nadpis druhé úrovně</h2>
...
<h2>Druhý nadpis druhé úrovně</h2>
...
<h3>První nadpis třetí úrovně</h23Obsah webu by měl být rozdělen pomocí odstavců.
<p>První odstavec</p>
...
<p>X-tý odstavec</p>Pro zvýraznění části textu v odstavci můžeme využít tučné písmo či kurzívu. Pro obě dvě možnosti existují dvě HTML značky. Tučné písmo – <b> a <strong>, kurzíva – <i> a <em>. Jaký je tedy mezi nimi rozdíl? Sémantický význam přeci.
<p>Text odstavce <b>zvýrazněný tučný text<b> pokračování klasického textu.</p>
<p>Text odstavce <strong>sémanticky významný text v daném kontextu</strong> pokračování klasického textu.</p>Každá HTML značka by jednoduše měla být používána na to, k čemu byla určena dle specifikace. Nesémantické tagy bez hlubšího významu <div> či <span> by pak měly být používány pouze k definici vzhledu stránky.
Jak již bylo řečeno, sémanticky správně zapsané stránky jsou pro vyhledávače lépe viditelné a čitelné, sémantický kód se lépe spravuje a sémanticky správný web lépe přečtou i postižení uživatelé. Go go sémantiko.
Tvoříme úspěšná webová řešení na míru, která jsou na internetu opravdu vidět. Projekt podpoříme kvalitním SEO a PPC kampaněmi s promyšleným konceptem. Sídlíme v Plzni, ale působíme po celé České republice.