Семантичен HTML: смисълът на елемента преди външния вид

Полезно е да знаеш

Една страница може да изглежда добре и въпреки това да описва структурата си неясно. Семантиката в HTML е свързана със смисъла и ролята на елементите, а не само с тяхното оформление. Заглавният елемент обозначава заглавие, докато обикновен текст с голям шрифт само може да прилича на такова. Разликата е важна при изграждане на документ, който трябва да бъде разбираем и извън конкретната визуална подредба на един екран. [1]

Елементът main представя основното съдържание на документа: частта, пряко свързана с централната тема или функция на страницата. [2] Той не е просто универсална кутия, която се използва, защото лесно приема ширина. Когато авторът избира елемент според неговата роля, структурата започва да обяснява намерението на страницата. Така оформлението може да бъде променяно, без всяка промяна на размера на буквите да налага преосмисляне на смисъла на документа.

Да разгледаме измислена страница за изложба. Тя има име на събитието, кратко представяне, програма и общи връзки на музея. Преди избор на цветове можем да подредим тези части като съдържание: кое е главното заглавие, кои са подразделите и коя част се повтаря из целия сайт. Такъв опис помага дори на малък екип. Редакторът и разработчикът могат да обсъдят една и съща структура, без да спорят дали даден надпис визуално изглежда достатъчно важен.

Семантичният избор не премахва нуждата от CSS. Външният вид и значението са различни слоеве, които трябва да си съответстват. MDN дава именно разграничението между истински заглавен елемент и елемент, оформен да изглежда като заглавие. [1] За учебна проверка можем временно да пренебрегнем цветовете и да прочетем съдържанието по ред. Има ли разбираема последователност? Отговарят ли заглавията на следващите раздели? Тези въпроси проверяват редакторската логика на страницата.

Основната област може да бъде полезна и като ориентир за преминаване направо към съдържанието. MDN описва връзката между main и достъпността на документа. [2] Това не е причина да се добавят механично много еднакви области. По-полезно е да се знае коя част обслужва основната задача на конкретната страница. Например при каталог това може да бъде списъкът и неговите филтри, а при отделна статия — самият материал с неговото заглавие и свързана информация.

При преглед на готов документ е полезно да се съпоставят три неща: смисловият план, използваните елементи и видимата подредба. Ако те разказват различни истории, посетителят или поддържащият екип ще срещне ненужно затруднение. Семантичният HTML не изисква сложна украса. Той изисква точни имена за частите на документа и последователно използване на ролите им, така че страницата да остане разбираема при развитие на дизайна, съдържанието и начина на използване.