Semantic HTML5

Категория: Дизайн

Какво е Semantic HTML5?

Semantic HTML5 се отнася до използването на HTML елементи, които носят значение и описват точното предназначение на съдържанието, вместо само да го оформят визуално. Тези елементи ясно описват тяхната роля както на браузърите и търсачките, така и на разработчиците.

Семантичният HTML помага да се създаде по-добре структурирано, достъпно и SEO-оптимизирано уеб съдържание.

Semantic срещу Non-Semantic HTML

Semantic HTML

Елементите имат значение
По-добра четливост на кода
Подобрена SEO оптимизация
По-добра достъпност
По-лесно поддържане
Пример: <header>, <nav>, <article>

Non-Semantic HTML

Елементите нямат значение
По-трудна четливост на кода
По-слаба SEO оптимизация
По-лоша достъпност
По-трудно поддържане
Пример: <div>, <span>

Основни Semantic HTML5 елементи

<header>

Представлява заглавна част на документ или раздел. Обикновено съдържа заглавия, лого и навигация.

<nav>

Дефинира секция с навигационни връзки. Използва се за основното меню на сайта.

<main>

Означава основното съдържание на документа. Трябва да бъде уникално за страницата.

<article>

Представлява независимо, самозадоволяващо се съдържание като статия, блог пост или новина.

<section>

Дефинира тематична група от съдържание, обикновено с заглавие.

<aside>

Представлява съдържание, което е косвено свързано с основното съдържание (странична лента).

<footer>

Представлява долен колонтитул за документ или раздел. Съдържа информация за автора, copyright и др.

<figure> и <figcaption>

Използват се за групиране на изображения, диаграми или код с техния заглавен текст.

<time>

Представлява времева дата или час. Може да включва атрибут datetime за машиночетим формат.

<mark>

Представлява текст, маркиран или подчертан за референтни или означителни цели.

Структура на Semantic HTML5 документ

Типична структура на Semantic HTML5 страница

<header> - Заглавна част
<nav> - Навигация
<main> - Основно съдържание
<main> - Основно съдържание
<section> - Секция
<article> - Статия
<aside> - Странична лента
<footer> - Долен колонтитул

Предимства от използването на Semantic HTML5

Подобрена SEO: Търсачките разбират по-добре структурата и съдържанието на вашия сайт
По-добра достъпност: Помощните технологии (екранни четци) могат по-лесно да навигират и разбират съдържанието
По-лесно поддържане: Кодът е по-четлив и по-лесен за разбиране от други разработчици
По-добра съвместимост: Семантичните елементи са стандартизирани и работят добре във всички модерни браузъри
По-добра структура: Уебсайтът има ясна, логична структура, която е лесна за разбиране
Бъдещо-устойчивост: Семантичният код е по-устойчив на промени в технологиите

Често срещани грешки и добри практики

Грешка	Добра практика	Обяснение
Използване на <div> за всичко	Използване на подходящи семантични елементи	Семантичните елементи дават значение на съдържанието
Множество <header> и <footer> в <body>	Един <header> и <footer> в <body>, но могат в други семантични елементи	<header> и <footer> могат да се използват и в <article> и <section>
Объркване на <section> и <article>	<article> за независимо съдържание, <section> за тематични групи	<article> трябва да има смисъл сам по себе си
Използване на <section> вместо <div> за стилизиране	<section> само когато има семантично значение	<div> е за групиране без семантика, <section> има значение
Пропускане на <main> елемента	Винаги използвайте <main> за основното съдържание	<main> помага на помощните технологии да идентифицират основното съдържание