Защо да използвате семантичен HTML?

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

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

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

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

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

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

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

до

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

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

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

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

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

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

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

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

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

  • blockquote - Някои хора използват маркера
    за вмъкване на текст, който не е котировка. Това е така, защото блоковите кавички са подразделени по подразбиране. Ако просто искате да се възползвате от вдлъбнатината, но текстът не е блокова буква, вместо това използвайте маркери CSS.
  • p - Някои уеб редактори използват

    & nbsp; (без прекъсване пространството, съдържащо се в параграфа), за да добавят допълнително пространство между елементите на страницата, вместо да дефинират действителни абзаци за текста на тази страница. Както и при гореспоменатия пример за вмъкване, трябва да използвате свойството на маркер или стил на запълване, за да добавите интервал.