Какво е семантичен HTML и защо трябва да го използвате

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

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

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

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

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

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

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

през

,

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

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

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

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

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

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

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

Използвайте семантичните етикети правилно

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

• blockquote - Някои хора използват

  маркер за вмъкване на текст, който не е котировка. Това е така, защото блоковите кавички са подразделени по подразбиране. Ако просто искате да се възползвате от вдлъбнатината, но текстът не е блокова буква, вместо това използвайте маркери CSS.

• p - Някои уеб редактори използват (неразрешимо пространство, съдържащо се в параграфа), за да добавите допълнително пространство между елементите на страницата, вместо да дефинирате действителни параграфи за текста на тази страница. Както и при гореспоменатия пример за вмъкване, трябва да използвате свойството на маркер или стил на запълване, за да добавите интервал.
• ul - като blockquote, ограждащ текст в a
  маркер вмъква този текст в повечето браузъри. Това е семантично неправилен и невалиден HTML, само като
  • маркерите са валидни в рамките на
    маркер. Отново използвайте маркера или стила на подложката, за да подрежете текста.
  • h1-h6 - Маркерите на заглавията могат да се използват, за да се направят шрифтове по-големи и по-смели, но ако текстът не е заглавие, то не трябва да е вътре в етикета на заглавието. По-скоро използвайте CSS свойствата на шрифт и размер на шрифта, ако искате да промените размера или теглото на конкретен текст на страницата си.

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

  тагове.

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

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

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

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

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