Важен принцип на движението за уеб стандартите, който е отговорен за индустрията, който имаме днес, е идеята да се използват HTML елементи за това, което са, а не как могат те да се показват в браузъра по подразбиране. Това е известно като използването на семантичен HTML.
Какво е семантичен HTML
Семантичният HTML или семантичен маркер е HTML, който въвежда смисъла на уеб страницата, а не само презентацията. Например маркерът
показва, че приложеният текст е параграф.
Това е както семантично, така и презентационно, защото хората знаят какви параграфи са и браузърите знаят как да ги показват.
На обратната страна на това уравнение етикети като и не са семантични, защото те определят само как трябва да изглежда текстът (получер или курсив) и не дават никакво допълнително значение на маркирането.
Примерите за семантични HTML тагове включват заглавните етикети
до , , и . Има много повече семантични HTML тагове, които могат да се използват, когато създавате уеб сайт, съвместим със стандартите.
Защо трябва да се грижите за семантиката
Ползата от писането на семантичен HTML произтича от това, което трябва да бъде движещата цел на всяка уеб страница - желанието да комуникирате. Чрез добавяне на семантични маркери към документа ви предоставяте допълнителна информация за този документ, която спомага за комуникацията. По-конкретно семантичните маркери показват на браузъра какво означава значението на страницата и нейното съдържание.
Тази яснота се съобщава и с търсачките, като се гарантира, че правилните страници се доставят за правилните заявки.
Семантичните HTML маркери дават информация за съдържанието на тези маркери, която надхвърля начина, по който изглеждат на страницата. Текстът, който е приложен в маркера , веднага се разпознава от браузъра като вид кодиращ език.
Вместо да се опитва да даде този код, браузърът разбира, че използвате този текст като пример за кода за целите на някаква статия или онлайн настойнически.
Използването на семантични маркери ви дава много повече куки за оформяне на съдържанието ви. Вероятно днес предпочитате да показвате кодовите си мостри в стила на браузъра по подразбиране, но утре искате да ги извикате със сив цвят на фона, а по-късно искате да определите точното семейство шрифтове или стека на шрифтовете, които да използвате за вашите проби. Можете лесно да направите всички тези неща, като използвате семантичен маркер и сложен CSS.
Използвайте семантичните етикети правилно
Когато искате да използвате семантични тагове, за да предадете смисъла, а не за целите на представянето, трябва да внимавате да не ги използвате неправилно просто заради обичайните свойства на дисплея. Някои от най-често използваните семантични маркери включват:
- blockquote - Някои хора използват маркера за вмъкване на текст, който не е котировка. Това е така, защото блоковите кавички са подразделени по подразбиране. Ако просто искате да се възползвате от вдлъбнатината, но текстът не е блокова буква, вместо това използвайте маркери CSS.
- p - Някои уеб редактори използват
& nbsp; p> (без прекъсване пространството, съдържащо се в параграфа), за да добавят допълнително пространство между елементите на страницата, вместо да дефинират действителни абзаци за текста на тази страница. Както и при гореспоменатия пример за вмъкване, трябва да използвате свойството на маркер или стил на запълване, за да добавите интервал.
- ul - Подобно блокова буква, приложението на текст в
таг разделя този текст в повечето браузъри. Това е както семантично неправилно, така и невалидно HTML, тъй като само маркерите - са валидни в
маркер. Отново използвайте маркера или стила на подложката, за да подрежете текста.
- h1-h6 - Маркерите на заглавията могат да се използват, за да се направят шрифтове по-големи и по-смели, но ако текстът не е заглавие, то не трябва да е вътре в етикета на заглавието. По-скоро използвайте CSS свойствата на шрифт и размер на шрифта, ако искате да промените размера или теглото на конкретен текст на страницата си.
Чрез използването на HTML тагове, които имат смисъл, създавате страници, които дават повече информация, отколкото просто ограждате всичко с маркерите
.
Кои HTML етикети са семантични?
Докато почти всеки HTML4 маркер и всички HTML5 тагове имат семантично значение, някои етикети са предимно семантични.
Например, HTML5 предефинира значението на маркерите и , за да бъде семантично. Маркерът не показва допълнително значение, а по-скоро текст, който обикновено се изобразява с удебелен шрифт. Маркерът също не изразява допълнително значение или акцент, а по-скоро дефинира текст, който обикновено се изобразява в курсив.
Семантични HTML тагове
<Съкр> съкращение <Акроним> акроним <Блоков цитат> Дълго цитиране дефиниция <Адрес> Адрес за автор (и) на документа <Цитират> Цитат <Код> Позоваване на кода <ТТ> Текст на теле типа Логическо разделение <Педя> Генеричен контейнер с вграден стил <Дел> Изтрит текст <Добавки> Вмъкнат текст <Ги> ударение <Силно> Силен акцент
Заглавие на първо ниво
Заглавие от второ ниво
Заглавие на трето ниво
Заглавие на четвърто ниво
Заглавие на пето ниво
Шест ниво заглавие <Ч> Тематична почивка Текст, който трябва да бъде въведен от потребителя <Предварително> Предварително форматиран текст <Р> Кратка инлайн котировка Изходен изход <Под> Долен Горен индекс Променлив или дефиниран от потребителя текст
, и . Има много повече семантични HTML тагове, които могат да се използват, когато създавате уеб сайт, съвместим със стандартите.
Защо трябва да се грижите за семантиката
Ползата от писането на семантичен HTML произтича от това, което трябва да бъде движещата цел на всяка уеб страница - желанието да комуникирате. Чрез добавяне на семантични маркери към документа ви предоставяте допълнителна информация за този документ, която спомага за комуникацията. По-конкретно семантичните маркери показват на браузъра какво означава значението на страницата и нейното съдържание.
Тази яснота се съобщава и с търсачките, като се гарантира, че правилните страници се доставят за правилните заявки.
Семантичните HTML маркери дават информация за съдържанието на тези маркери, която надхвърля начина, по който изглеждат на страницата. Текстът, който е приложен в маркера , веднага се разпознава от браузъра като вид кодиращ език.
Вместо да се опитва да даде този код, браузърът разбира, че използвате този текст като пример за кода за целите на някаква статия или онлайн настойнически.
Използването на семантични маркери ви дава много повече куки за оформяне на съдържанието ви. Вероятно днес предпочитате да показвате кодовите си мостри в стила на браузъра по подразбиране, но утре искате да ги извикате със сив цвят на фона, а по-късно искате да определите точното семейство шрифтове или стека на шрифтовете, които да използвате за вашите проби. Можете лесно да направите всички тези неща, като използвате семантичен маркер и сложен CSS.
Използвайте семантичните етикети правилно
Когато искате да използвате семантични тагове, за да предадете смисъла, а не за целите на представянето, трябва да внимавате да не ги използвате неправилно просто заради обичайните свойства на дисплея. Някои от най-често използваните семантични маркери включват:
- blockquote - Някои хора използват маркера за вмъкване на текст, който не е котировка. Това е така, защото блоковите кавички са подразделени по подразбиране. Ако просто искате да се възползвате от вдлъбнатината, но текстът не е блокова буква, вместо това използвайте маркери CSS.
- p - Някои уеб редактори използват
& nbsp; p> (без прекъсване пространството, съдържащо се в параграфа), за да добавят допълнително пространство между елементите на страницата, вместо да дефинират действителни абзаци за текста на тази страница. Както и при гореспоменатия пример за вмъкване, трябва да използвате свойството на маркер или стил на запълване, за да добавите интервал.
- ul - Подобно блокова буква, приложението на текст в
таг разделя този текст в повечето браузъри. Това е както семантично неправилно, така и невалидно HTML, тъй като само маркерите - са валидни в
маркер. Отново използвайте маркера или стила на подложката, за да подрежете текста.
- h1-h6 - Маркерите на заглавията могат да се използват, за да се направят шрифтове по-големи и по-смели, но ако текстът не е заглавие, то не трябва да е вътре в етикета на заглавието. По-скоро използвайте CSS свойствата на шрифт и размер на шрифта, ако искате да промените размера или теглото на конкретен текст на страницата си.
Чрез използването на HTML тагове, които имат смисъл, създавате страници, които дават повече информация, отколкото просто ограждате всичко с маркерите
.
Кои HTML етикети са семантични?
Докато почти всеки HTML4 маркер и всички HTML5 тагове имат семантично значение, някои етикети са предимно семантични.
Например, HTML5 предефинира значението на маркерите и , за да бъде семантично. Маркерът не показва допълнително значение, а по-скоро текст, който обикновено се изобразява с удебелен шрифт. Маркерът също не изразява допълнително значение или акцент, а по-скоро дефинира текст, който обикновено се изобразява в курсив.
Семантични HTML тагове
<Съкр> съкращение <Акроним> акроним <Блоков цитат> Дълго цитиране дефиниция <Адрес> Адрес за автор (и) на документа <Цитират> Цитат <Код> Позоваване на кода <ТТ> Текст на теле типа Логическо разделение <Педя> Генеричен контейнер с вграден стил <Дел> Изтрит текст <Добавки> Вмъкнат текст <Ги> ударение <Силно> Силен акцент
Заглавие на първо ниво
Заглавие от второ ниво
Заглавие на трето ниво
Заглавие на четвърто ниво
Заглавие на пето ниво
Шест ниво заглавие <Ч> Тематична почивка Текст, който трябва да бъде въведен от потребителя <Предварително> Предварително форматиран текст <Р> Кратка инлайн котировка Изходен изход <Под> Долен Горен индекс Променлив или дефиниран от потребителя текст