Важным прынцыпам руху Web Standards, які адказвае за галіны, мы маем сёння з'яўляецца ідэя выкарыстання HTML-элементаў для таго, што яны замест таго, якім чынам яны могуць з'яўляцца ў браўзэры па змаўчанні. Гэта вядома, як з дапамогай семантычнага HTML.
Што такое Семантычны HTML
Семантычны HTML або семантычнай разметкі HTML, які ўводзіць сэнс вэб-старонкі, а не толькі прэзентацыі. Напрыклад, тэг <р> паказвае на тое, што зняволены ў тэкст абзаца.
Гэта як сэнсавае і прэзентацыйнае, таму што людзі ведаюць, што абзацы і браўзэры ўмеюць адлюстроўваць іх.
На адваротным баку гэтага ўраўненні, тэгі, як і <я> ня сэнсавыя, так як яны вызначаюць толькі як тэкст павінен выглядаць (тоўсты шрыфт або курсіў) і не дае ніякага дадатковага сэнсу для разметкі.
Прыклады семантычнага HTML тэгаў ўключаюць загаловак тэг
праз , , <код> і . Ёсць яшчэ шмат семантычнага HTML-тэгаў, якія могуць быць выкарыстаны, як вы будуеце адпаведныя стандарты вэб-сайт.
Чаму Вы павінны клапаціцца аб семантыцы
Перавага напісання семантычны HTML выцякае з таго, што павінна быць рухаючай мэтай любога вэб-PAGE- жаданне мець зносіны. Дадаючы семантычныя тэгі ў дакуменце, прадаставіць дадатковую інфармацыю пра гэты дакумент, які дапамагае ў зносінах. У прыватнасці, семантычныя тэгі даць зразумець браўзэру, які сэнс старонкі і яго змест.
Гэтая яснасць таксама гутарылі з пошукавымі сістэмамі, гарантуючы, што правільныя старонкі пастаўляюцца для правільных запытаў.
Семантычны HTML-тэгі падаюць інфармацыю пра змесціва гэтых тэгаў, выходзіць за рамкі толькі, як яны выглядаюць на старонцы. Тэкст, зняволены ў тэг <код> неадкладна распазнаецца браўзэрам як некаторы тып кадавання мовы.
Замест таго, каб спрабаваць аказваць гэты код, браўзэр разумее, што вы выкарыстоўваеце гэты тэкст у якасці прыкладу кода для мэт артыкула або анлайн падручнік нейкі.
Выкарыстанне семантычных тэгаў дае значна больш гаплікаў для кладкі змесціва. Магчыма , сёння вы аддаеце перавагу , каб вашыя ўзоры кода адлюстроўваюцца ў стылі браўзэра па змаўчанні, але заўтра, вы хочаце назваць іх з шэрым колерам фону, а затым вы хочаце , каб вызначыць дакладную мона разнесеныя сямейства шрыфтоў ці шрыфты стэкі выкарыстоўваць для вашыя ўзоры. Вы можаце лёгка зрабіць усе гэтыя рэчы з дапамогай семантычнай разметкі і бойка ўжываецца CSS.
Выкарыстанне семантычных тэгаў Правільна
Калі вы хочаце выкарыстоўваць семантычныя тэг, каб перадаць сэнс, а не для мэт прадстаўлення, вам трэба быць асцярожнымі, каб не выкарыстоўваць іх няправільна, проста для іх агульных уласцівасцяў дысплея. Некаторыя з найбольш часта няправільна семантычных тэгаў ўключаюць у сябе:
- BLOCKQUOTE - Некаторыя людзі выкарыстоўваюць тэг для водступаў тэксту , які не цытата. Гэта адбываецца таму, што Цытаты з водступам па змаўчанні. Калі вы проста хочаце перавага водступу, але тэкст не цытата, выкарыстанне CSS поля замест.
- р - Некаторыя вэб-рэдактары выкарыстоўваць
& NBSP; p> (непарыўны прастору змяшчаецца ў paragraoph), каб дадаць дадатковую прастору паміж элементамі старонкі, а не вызначаць фактычныя пункты для тэксту гэтай старонкі. Як згадвалася раней водступаў, напрыклад, вы павінны выкарыстоўваць маржу або стыль набіванне ўласцівасць, каб дадаць прастору.
- уль - Як BLOCKQUOTE, які змяшчае тэкст ўнутры тэга
абзацаў што тэкст у большасці браўзэраў. Гэта і семантычны няправільна і несапраўдны HTML, так як толькі - тэгі сапраўдныя ўнутры тэга
. Зноў жа, выкарыстоўваць маржынальнасць або абіўка стыль водступаў тэксту.
- h1-h6 - тэгі загалоўкаў могуць быць выкарыстаны, каб зрабіць шрыфт больш і смялей, але калі тэкст ня загаловак, ён не павінен быць унутры загалоўка тэга. Выкарыстоўвайце напісанне шрыфта і памеру шрыфта ўласцівасці CSS замест гэтага, калі вы хочаце змяніць памер або вага пэўнага тэксту на старонцы ..
Пры выкарыстанні HTML-тэгаў, якія маюць сэнс, вы ствараеце старонкі, якія надаюць больш інфармацыі, чым проста ад навакольнага усё з тэгамі
.
Якія HTML-тэгі Семантычны?
Хоць амаль кожны HTML4 тэгаў і ўсе тэгі HTML5 маюць сэнсавае значэнне, некаторыя тэгі галоўным чынам сэмантычны характар.
Напрыклад, HTML5 перавызначаць значэнне тэгаў і , каб быць семантычным. <Б> тэг ня перадае дадатковае значэнне, а хутчэй тэкст, які, як правіла, выдзелены паўтлустым шрыфтам. <Я> тэг таксама ня перадае дадатковае значэнне або акцэнт, а вызначае тэкст, які, як правіла, вынесенае курсівам.
Семантычныя HTML тэгі
<Схаваў> скарачэнне <Акронім> акронім
доўгая цытата вызначэнне <Адрас> Адрас для аўтара (ов) дакумента <Працытаваць> цытаванне <Код> спасылка Код <Тт> тэлетайп тэкст лагічнае дзяленне Кантэйнер універсальны ўнутраны стыль выдалены тэкст пастаўлены тэкст акцэнт <Моцны> моцны акцэнт
Першы ўзровень загалоўка
Другі ўзровень загалоўка
Трэці ўзровень загалоўка
Чацвёрты ўзровень загалоўка
Па-пятае, ўзровень загалоўка
Шосты ўзровень загалоўка <Ч> тэматычны перапынак Тэкст будзе ўводзіцца карыстальнікам <Папярэдне> Папярэдне адфарматаваны тэкст <Д> Кароткія радныя цытаты прыклад высновы <Суб> індэкс верхні індэкс <Пераменная> Пераменны ці пэўны карыстальнікам тэкст
, <код> і . Ёсць яшчэ шмат семантычнага HTML-тэгаў, якія могуць быць выкарыстаны, як вы будуеце адпаведныя стандарты вэб-сайт.Чаму Вы павінны клапаціцца аб семантыцы
Перавага напісання семантычны HTML выцякае з таго, што павінна быць рухаючай мэтай любога вэб-PAGE- жаданне мець зносіны. Дадаючы семантычныя тэгі ў дакуменце, прадаставіць дадатковую інфармацыю пра гэты дакумент, які дапамагае ў зносінах. У прыватнасці, семантычныя тэгі даць зразумець браўзэру, які сэнс старонкі і яго змест.
Гэтая яснасць таксама гутарылі з пошукавымі сістэмамі, гарантуючы, што правільныя старонкі пастаўляюцца для правільных запытаў.
Семантычны HTML-тэгі падаюць інфармацыю пра змесціва гэтых тэгаў, выходзіць за рамкі толькі, як яны выглядаюць на старонцы. Тэкст, зняволены ў тэг <код> неадкладна распазнаецца браўзэрам як некаторы тып кадавання мовы.
Замест таго, каб спрабаваць аказваць гэты код, браўзэр разумее, што вы выкарыстоўваеце гэты тэкст у якасці прыкладу кода для мэт артыкула або анлайн падручнік нейкі.
Выкарыстанне семантычных тэгаў дае значна больш гаплікаў для кладкі змесціва. Магчыма , сёння вы аддаеце перавагу , каб вашыя ўзоры кода адлюстроўваюцца ў стылі браўзэра па змаўчанні, але заўтра, вы хочаце назваць іх з шэрым колерам фону, а затым вы хочаце , каб вызначыць дакладную мона разнесеныя сямейства шрыфтоў ці шрыфты стэкі выкарыстоўваць для вашыя ўзоры. Вы можаце лёгка зрабіць усе гэтыя рэчы з дапамогай семантычнай разметкі і бойка ўжываецца CSS.
Выкарыстанне семантычных тэгаў Правільна
Калі вы хочаце выкарыстоўваць семантычныя тэг, каб перадаць сэнс, а не для мэт прадстаўлення, вам трэба быць асцярожнымі, каб не выкарыстоўваць іх няправільна, проста для іх агульных уласцівасцяў дысплея. Некаторыя з найбольш часта няправільна семантычных тэгаў ўключаюць у сябе:
- BLOCKQUOTE - Некаторыя людзі выкарыстоўваюць тэг для водступаў тэксту , які не цытата. Гэта адбываецца таму, што Цытаты з водступам па змаўчанні. Калі вы проста хочаце перавага водступу, але тэкст не цытата, выкарыстанне CSS поля замест.
- р - Некаторыя вэб-рэдактары выкарыстоўваць
& NBSP; p> (непарыўны прастору змяшчаецца ў paragraoph), каб дадаць дадатковую прастору паміж элементамі старонкі, а не вызначаць фактычныя пункты для тэксту гэтай старонкі. Як згадвалася раней водступаў, напрыклад, вы павінны выкарыстоўваць маржу або стыль набіванне ўласцівасць, каб дадаць прастору.
- уль - Як BLOCKQUOTE, які змяшчае тэкст ўнутры тэга
абзацаў што тэкст у большасці браўзэраў. Гэта і семантычны няправільна і несапраўдны HTML, так як толькі
- тэгі сапраўдныя ўнутры тэга
. Зноў жа, выкарыстоўваць маржынальнасць або абіўка стыль водступаў тэксту.
- h1-h6 - тэгі загалоўкаў могуць быць выкарыстаны, каб зрабіць шрыфт больш і смялей, але калі тэкст ня загаловак, ён не павінен быць унутры загалоўка тэга. Выкарыстоўвайце напісанне шрыфта і памеру шрыфта ўласцівасці CSS замест гэтага, калі вы хочаце змяніць памер або вага пэўнага тэксту на старонцы ..
Пры выкарыстанні HTML-тэгаў, якія маюць сэнс, вы ствараеце старонкі, якія надаюць больш інфармацыі, чым проста ад навакольнага усё з тэгамі
.Якія HTML-тэгі Семантычны?
Хоць амаль кожны HTML4 тэгаў і ўсе тэгі HTML5 маюць сэнсавае значэнне, некаторыя тэгі галоўным чынам сэмантычны характар.
Напрыклад, HTML5 перавызначаць значэнне тэгаў і , каб быць семантычным. <Б> тэг ня перадае дадатковае значэнне, а хутчэй тэкст, які, як правіла, выдзелены паўтлустым шрыфтам. <Я> тэг таксама ня перадае дадатковае значэнне або акцэнт, а вызначае тэкст, які, як правіла, вынесенае курсівам.
Семантычныя HTML тэгі
<Схаваў> скарачэнне <Акронім> акронім доўгая цытата вызначэнне <Адрас> Адрас для аўтара (ов) дакумента <Працытаваць> цытаванне <Код> спасылка Код <Тт> тэлетайп тэкст лагічнае дзяленне Кантэйнер універсальны ўнутраны стыль выдалены тэкст пастаўлены тэкст акцэнт <Моцны> моцны акцэнт
Першы ўзровень загалоўка
Другі ўзровень загалоўка
Трэці ўзровень загалоўка
Чацвёрты ўзровень загалоўка
Па-пятае, ўзровень загалоўка
Шосты ўзровень загалоўка <Ч> тэматычны перапынак Тэкст будзе ўводзіцца карыстальнікам <Папярэдне> Папярэдне адфарматаваны тэкст <Д> Кароткія радныя цытаты прыклад высновы <Суб> індэкс верхні індэкс <Пераменная> Пераменны ці пэўны карыстальнікам тэкст