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

Какво е семантичен HTML?

Семантичен HTML или семантична маркировка е HTML, който въвежда значение на уеб страницата, а не просто презентация. Например, a

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

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

Примери за семантични HTML тагове включват:

• Заглавни маркери

   през

Има много повече семантични HTML тагове, които да използвате, когато създавате уебсайт, отговарящ на стандартите.

Защо трябва да се грижите за семантика

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

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

Използването на семантични тагове ви дава много повече куки за оформяне и на вашето съдържание. Може би днес предпочитате вашите кодови образци да се показват в стила на браузъра по подразбиране, но утре може да искате да ги извикате със сив цвят на фона; все пак по-късно може да искате да дефинирате точното семейство шрифтове с моно интервал или стек шрифтове да използвате за вашите проби. Можете да направите всички тези неща лесно, като използвате семантична маркировка и интелигентно приложен CSS.

Правилно използване на семантични тагове

Когато използвате семантични тагове за предаване на смисъл, а не за целите на презентацията, внимавайте да не ги използвате неправилно само за техните общи свойства на дисплея. Някои от най-често използваните семантични тагове включват:

• блок цитат - Някои хора използват таг за отстъп на текст, който не е цитат. Това е така, защото блок-кавичките са отстъпени по подразбиране. Ако просто искате да отстъпите текст, който не е блокче, използвайте CSS полета вместо това.
• стр - Някои уеб редактори използват (неразбиващо се пространство, съдържащо се в абзац), за да се добави допълнително пространство между елементите на страницата, вместо да се дефинират действителните параграфи за текста на тази страница. Както в предишния пример, вместо това трябва да използвате свойството margin или style padding, за да добавите пространство.
• ул - Като с

  , затварящ текст в

   маркира отстъпите на този текст в повечето браузъри. Това е едновременно семантично неправилен и невалиден HTML, защото само
  •  таговете са валидни в рамките на
    етикет. Отново използвайте стила на поле или подложка, за да отстъпите текста.
  • h1, h2, h3, h4, h5 и h6 - Можете да използвате маркери на заглавията, за да направите шрифтовете по-големи и по-смели, но ако текстът не е заглавие, вместо това използвайте CSS свойствата font-weight и font-size.

  Използвайки HTML тагове, които имат значение, вие създавате страници, които дават повече информация от тези, които просто обграждат всичко

   етикети.

  Кои HTML тагове са семантични?

  Въпреки че почти всеки HTML4 таг и всички HTML5 таговете имат семантични значения, някои тагове са преди всичко семантичен.

  Например HTML5 е предефинирал значението на  и  таговете да бъдат семантични. The  тагът не предава допълнителна важност; по-скоро маркираният текст обикновено се изобразява удебелено. По същия начин  тагът не изразява допълнителна важност или акцент; по-скоро определя текста, който обикновено се изобразява в курсив.

  Семантични HTML тагове

  Съкращение
  Съкращение
  Дълга оферта
  Определение
  Адрес за автор (и) на документа
  Цитат
  Препратка към кода
  Текст на телетайпа
  Логическо разделение
  Общ контейнер с вграден стил
  Изтрит текст
  Вмъкнат текст
  Акцент
  Силен акцент
  Заглавие от първо ниво
  Заглавие от второ ниво
  Заглавие от трето ниво
  Заглавие на четвърто ниво
  Заглавие на пето ниво
  Заглавие от шесто ниво
  	Тематична пауза
  Текст, който трябва да бъде въведен от потребителя
  Предварително форматиран текст
  Кратко вътрешно цитиране
  Примерен изход
  Индекс
  Горен индекс
  Променлив или дефиниран от потребителя текст