.jpg)
Какви са семантичните HTML тагове?
Семантичен HTML таг ясно описва какво представлява един елемент.
<!-- fs-richtext-ignore -->Елементи като <header>, <footer>, and <article> се смятат за семантични. Те описват предназначението на елемента и типа съдържание, което е вътре в елемента.
Семантичните тагове са създадени, за да помогнат на потребителите и машините по-добре да интерпретират нашето съдържание.
Защо искаме да използваме семантични HTML тагове?
- Да направим нашия сайт по-достъпен (По-добър потребителски опит).
- Да подобрявам начина, по който търсачките сканират нашия сайт (По-добро SEO и видимост в поиска).
Какво е достъпност?
Ако вземем определението на Уикипедия:
"Под достъпност се подразбира дизайна на продукти, устройства, услуги или среди за хора с увреждания"
Прилагайки това към нашата област на уеб разработката, го разбираме като:
"Уеб достъпността a11y означава, че всеки по всяко време може да използва вашия сайт"
<!-- fs-richtext-ignore -->Ако потребителят вижда сайта, му е лесно да разбере какво е страничен панел. Лесно е да разбере и какво е навигация. Лесно е да разбере какво е основно съдържание. На потребителят, който може да вижда, може да не се вълнува за разликата между обикновен <div> и таг <main> . За него тази разлика не съществува.
Въпреки това хората с четци на екрани и машинните уеб сканери използват тези описателни тагове, за да разберат съдържанието на страницата.
За да следваме най-добрите практики за уеб достъпност, трябва да използваме семантичните HTML-тагове при разработката на сайта.
Как да използваме семантични тагове във Webflow
Webflow направи добавянето на семантични HTML тагове изключително лесно.
За да промените тага на елемент, следвайте следните стъпки:
- Изберете елемента
- Отидете в панела за настройки (D)
- Изберете таг от падащото меню
Как да избера кой таг да използвам?
Тези кратки описания са взети директно от Webflow Designer:
- Горна част (Header) - определя горната част за документ или секция
- Долна част (Footer) - определя футъра на документ или секция
- Навигация (Nav) - определя навигационните линкове в страницата
- Основна част (Main) - определя основното съдържание на страницата
- Секция (Section) - определя секция на страницата
- Статия (Article) - определя статия в документа
- Част отстрана (Aside) - определя съдържание, различно от основното съдържание на страницата
- Адрес (Address) - определя контактна информация за автора/собственика на страницата или статията
- Медия-контент (Figure) - определя групирано съдържание като илюстрации, диаграми, снимки, кодови блокове и др.
- Заглавия (H1-H6) - тези елементи представляват нивата на заглавията на секциите от най-високото до най-ниското
Има много други семантични тагове, които са достъпни за нас като за уеб разработчици. Горепосочените тагове са най-важните при използването на Webflow.
Основна семантична структура
Първо, ще се съсредоточим върху Горна част (Header), Основна част (Main) и Долна част (Footer).
<!-- fs-richtext-ignore -->Горна част - <header>
Тагът header се използва най-често за обозначаване на навигационната лента на уебсайта. В Client-First, най-вероятно ще добавим този таг към нашия nav_component или нещо подобно.
Но, той може също да определи заглавието на секция или статия.
И двата подхода са правилни.
<!-- fs-richtext-ignore -->Според W3Schools, можем да имаме повече от един <header> тагове на страница. Обаче, <header> не може да бъде поставен вътре в <footer>, <address> или друг <header> елемент.
<!-- fs-richtext-ignore -->Използването на <header> е гъвкаво и се използва различно в различните части на уеба.
Ако проверим други уебсайтове, ще видим, че някои разработчици използват тага на заглавието само в навигационната лента, докато други използват тага на заглавието няколко пъти.
<!-- fs-richtext-ignore -->Например ако погледнем статия на уебсайта usa.gov, ще видим, че всяко Заглавие (<h1> - <h6>) е обгърнато с таг <header>.
Ако погледнем страниците на страници на европейски статии, ще видим, че заглавието се използва само за обозначаване на навигационната лента.
<!-- fs-richtext-ignore -->Основна част - <main>
<!-- fs-richtext-ignore -->Тагът main определя основното съдържание на страницата ни. В повечето страници, тагът <main> се използва за обозначаване на "основното" съдържание на страницата. Това обикновено е всичко между <header> и <footer>.
<!-- fs-richtext-ignore -->Съдържанието вътре в <main> елемента трябва да е уникално за страницата.
- <!-- fs-richtext-ignore --><header> и <footer> не трябва да бъдат включени в <main> таг.
- <!-- fs-richtext-ignore -->Тагът <main> не трябва да съдържа никакво съдържание, което се повтаря във всички страници, като странични ленти, навигационни връзки, информация за авторските права, логота на сайта, форми за търсене или съгласие за използване на персонални данни.
Най-често срещаните тагове, които ще видим в main, са секции и статии.
<!-- fs-richtext-ignore -->В Client-First, ние добавяме тага <main> към нашия main-wrapper клас.
<!-- fs-richtext-ignore -->Долна част - <footer>
<!-- fs-richtext-ignore -->Един <footer> елемент обикновено съдържа:
- Информация за автора
- Информация за авторските права
- Контактна информация
- Карта на сайта
- "Връщане нагоре" връзки
- Свързани документи
<!-- fs-richtext-ignore -->Тагът <footer> се отнася до най-близкия родителски елемент. Това може да бъде или секция, или цялата страница.
Например можем да имаме футър в долната част на статия, който се отнася до статията. Можем да имаме друг футър в долната част на страницата ни, който служи като футър на страницата.
Разделящи елементи
<!-- fs-richtext-ignore -->Секция - <section>
<!-- fs-richtext-ignore -->Тагът <section> се използва за разделяне на уеб страницата ни на части.
Секциите винаги трябва да имат заглавие, с много малко изключения.
<!-- fs-richtext-ignore -->В повечето случаи, ще имаме няколко секции <section> в нашия Основна част <main>.
Ето един лесен пример за уебсайт, разделен на секции.
Обърнете внимание, че можем да имаме секции и вътре в тага за статия, и обратното. Можем дори да имаме секции в секции.
<!-- fs-richtext-ignore -->Статия - <article>
<!-- fs-richtext-ignore -->Тагът <article> определя независимо, завършено съдържание.
Статията трябва да има смисъл сама по себе си и трябва да е възможно да се използва независимо от останалата част на сайта.
<!-- fs-richtext-ignore -->Често заблуждение е използването на тагове <article> само за блог постове.
<!-- fs-richtext-ignore -->Можем да използваме тага <article> във всеки от следните случаи:
- Съобщение във форум
- Списание
- Новинарска статия
- Запис в блог
- Картичка на продукт
- Потребителски коментар
- Интерактивна джаджа
- или всякакъв друг независим елемент на контента.
<!-- fs-richtext-ignore -->Част отстрани - <aside>
<!-- fs-richtext-ignore -->Тагът <aside> определя някакво съдържание "отвън" на основното съдържание.
Съдържанието вътре в тага aside трябва да бъде свързано с околното съдържание.
<!-- fs-richtext-ignore -->Използвайте тага <aside> за следващи елементи:
- Странични ленти, свързани със страницата
- Свързани връзки
- Свързано съдържание
- Реклами
- Съдържание
<!-- fs-richtext-ignore -->Елементът <aside> трябва да бъде вътре в свързания елемент на секция. Това означава, че ако нашият "aside" се отнася до някаква секция, той трябва да бъде в тази секция.
<!-- fs-richtext-ignore -->Ако нашият <aside> се отнася до цялата страница, тогава го поставете извън всички тагове за секции. Например можем да го поставим близо до <main>.
<!-- fs-richtext-ignore -->Навигация - <nav>
<!-- fs-richtext-ignore -->Елементът <nav> определя списък с навигационни връзки.
<!-- fs-richtext-ignore -->Ето някои общи места, където искаме да използваме тага <nav>:
- Връзки на менюто
- Връзки на страничната лента
- Съдържание
- Връзки във футъра
- Хлебни трохи
<!-- fs-richtext-ignore -->Заглавия - <h1>-<h6>
<!-- fs-richtext-ignore -->Елементите от h1 до h6 представляват шест нива на заглавия на секции. <h1> е най-високото ниво, а <h6> е най-ниското.
Използвайте само един h1 на страница
<!-- fs-richtext-ignore --><h1> трябва да е заглавието на нашата страница.
<!-- fs-richtext-ignore -->Когато потребителят идва на нашия сайт и чете заглавието <h1>, той трябва да разбере за какво е страницата. Нашето <h1> трябва да бъде описателно и ясно.
Йерархия заглавия
<!-- fs-richtext-ignore -->Използвайте тага <h2> за описания на темите вътре в <h1>.
<!-- fs-richtext-ignore -->Използвайте тага <h3> за описания на темите вътре в <h2> и така нататък.
Потребителите с четци на екрана често прескачат от заглавие на заглавие, за да прочетат съдържанието на нашата страница.
Поради това е важно да не пропускаме нивата на заглавията. Пропускането на ниво на заглавие може да създаде хаос. Човек или сканер може да изгуби логическата връзка между съдържанието, ако намери липсващото заглавие.
Медия-контент, адреси и други тагове
<!-- fs-richtext-ignore -->Адрес - <address>
<!-- fs-richtext-ignore -->Тагът <address> определя контактната информация за автора/собственика на страница или статия.
<!-- fs-richtext-ignore -->Можем да имаме повече от един таг <address> на страница.
<!-- fs-richtext-ignore -->Ако поставим <address> таг в <article>, той се отнася за статията.
<!-- fs-richtext-ignore -->Когато тагът <address> е поставен извън статия, тогава той се отнася за цялата страница.
<!-- fs-richtext-ignore -->Например, ако включим адреса на нашата компания в футъра, тагът <address> ще се отнася за цялата страница (документ).
<!-- fs-richtext-ignore -->Медия-контент - <figure>
<!-- fs-richtext-ignore -->Тагът <figure> определя групирано съдържание, като илюстрации, диаграми, снимки, списъци с кодове и т.н.
<!-- fs-richtext-ignore -->Докато съдържанието на елемента <figure> се отнася за основната част на страницата, то трябва да е независимо. Премахването на елемента <figure> не трябва да засяга структурата на страницата.
<!-- fs-richtext-ignore -->Може да сме забелязали, че тагът <figure> автоматично се добавя около всяко изображение или видео Rich Text, когато добавим описание.
Можем да използваме този таг за обозначаване на изображения, когато ни се струва нужно.
<!-- fs-richtext-ignore -->Обърнете внимание, че тагът <figure> не е толкова важен за достъпността и SEO, колкото добавянето на алтернативен текст към визуалното съдържание.
Клонируем проект със семантично маркиран HTML
Разработихме клонируем проект, който описва семантични HTML тагове в проект на Webflow. Клонируемият проект ни помага да визуализираме правилната употреба на семантични HTML тагове.
Можете да копирате Проекта със семантично маркиран HTML тук.