Proč používat sémantický HTML?

Důležitým principem pohybu webových standardů, který je zodpovědný za průmysl, který máme dnes, je myšlenka používání prvků HTML pro to, co jsou, spíše než jak se mohou ve výchozím nastavení zobrazovat v prohlížeči. Toto je známé jako použití sémantického HTML.

Co je sémantický HTML

Semantické HTML nebo sémantické značkování je HTML, který představuje význam pro webovou stránku spíše než pro prezentaci. Například značka

označuje, že přiložený text je odstavcem.

Toto je sémantické i prezentační, protože lidé vědí, jaké odstavce jsou a prohlížeče vědí, jak je zobrazovat.

Na druhé straně této rovnice tagy jako a nejsou sémantické, protože definují pouze to, jak by text měl vypadat (tučně nebo kurzíva) a neposkytovat znaménko k označení.

Příklady sémantických značek HTML zahrnují hlavičkové značky

až

,
, a . Existuje mnoho dalších sémantických tagů HTML, které lze použít při vytváření webových stránek kompatibilních s normami.

Proč byste se měli starat o sémantiku

Výhoda psaní sémantického HTML vyplývá z toho, jaký by měl být hnací cíl jakékoli webové stránky - touha komunikovat. Přidáním sémantických značek do dokumentu poskytnete další informace o tomto dokumentu, které pomáhají při komunikaci. Konkrétně sémantické tagy dávají prohlížeču přehled o významu stránky a jejího obsahu.

Tato srozumitelnost se také sděluje s vyhledávači, což zajistí, že správné stránky budou doručeny pro správné dotazy.

Sémantické značky HTML poskytují informace o obsahu těchto značek, které přesahují jen to, jak vypadají na stránce. Text, který je přiložen k tagu , je prohlížečem okamžitě rozpoznán jako určitý typ kódovacího jazyka.

Namísto pokusu o vykreslení tohoto kódu prohlížeč chápe, že používáte tento text jako příklad kódu pro účely nějakého článku nebo tutoriálu online.

Použití sémantických značek vám poskytne mnohem více háčků pro stylování vašeho obsahu. Možná dnes dáváte přednost tomu, aby se vaše ukázky kódu zobrazovaly ve výchozím stylu prohlížeče, ale zítra je chcete volat se šedou barvou pozadí a později chcete definovat přesný jednoznačný typ písma nebo zásobník písma, který chcete použít vaše vzorky. Všechny tyto věci můžete snadno provést s využitím sémantického značkování a inteligentně aplikovaného CSS.

Použijte sémantické značky správně

Pokud chcete sémantické značky používat spíše pro smysl než pro účely prezentace, je třeba dbát na to, abyste je nesprávně používali pouze pro své běžné vlastnosti zobrazení. Mezi nejčastěji používané sémantické značky patří:

  • blockquote - Někteří lidé používají značku
    pro odsazení textu, který není citací. Je to proto, že blokové bloky jsou ve výchozím odsazení odsazeny. Pokud chcete jednoduše profitovat z odsazení, ale text není bloková, použijte namísto toho okraje CSS.
  • p - Někteří weboví redaktoři používají

    & nbsp; (nerozbitný prostor obsažený v paragrafu), aby přidali další prostor mezi prvky stránky, než aby definovali skutečné odstavce textu textu. Stejně jako u dříve zmíněného příkladu odsazení byste měli použít prostor pro přidání mezery nebo vlastnosti výplně.