Важан принцип покрета Веб стандарда који је одговоран за индустрију коју имамо данас је идеја кориштења ХТМЛ елемената за оно што су, умјесто како се по дефаулту приказују у претраживачу. Ово је познато као коришћење семантичког ХТМЛ-а.
Шта је Семантички ХТМЛ
Семантички ХТМЛ или семантички означавање је ХТМЛ који уводи значење на веб страницу, а не само презентацију. На пример, ознака <п> означава да је приложени текст параграф.
Ово је и семантично и презентацијско, јер људи знају који су ставови и претраживачи знају како их приказати.
На другој страни ове једначине, ознаке као што су <б> и <и> нису семантичне, јер дефинишу само како би изгледао текст (болд или курзив) и не дају никакво додатно значење маркацији.
Примери семантичких ХТМЛ ознака укључују ознаке заглавља <х1> кроз <х6>, <блоцккуоте>, <цоде> и <ем>. Постоји много више семантичких ХТМЛ ознака које се могу користити док креирате веб локацију која одговара стандарду.
Зашто би требало да се брине о семантици
Корист од писања семантичког ХТМЛ-а произлази из онога што би требало да буде циљ свих веб страница - жеља за комуникацијом. Додавањем семантичких ознака у ваш документ, пружите додатне информације о том документу, што помаже у комуникацији. Конкретно, семантичке ознаке јасно показују претраживачу шта је значење странице и њеног садржаја.
Та јасноћа се такође преноси са претраживачима, осигуравајући да се праве странице испоручују за праве упите.
Семантички ХТМЛ тагови пружају информације о садржају тих ознака који превазилазе само како изгледају на страници. Текст који је затворен у ознаку <цоде> одмах препознаје претраживач као нека врста језика кодирања.
Уместо покушаја да направи тај код, претраживач разуме да тај текст користите као пример кода у сврху неког чланка или онлине туториала неке врсте.
Коришћење семантичких ознака вам даје много више кукица за стајање вашег садржаја. Можда бисте данас желели да ваши узорци кодова буду приказани у подразумеваном стилу претраживача, али сутра желите да их позовете сивом бојом позадине, а касније желите дефинисати прецизну моно размакнуте породице фонтова или фонтове за фонтове за кориштење ваше узорке. Све те ствари можете једноставно урадити користећи семантичку ознаку и паметно примењену ЦСС.
Користите семантичке ознаке исправно
Када желите да користите семантичке ознаке да бисте пренели значење уместо у сврхе презентације, морате бити пажљиви да их не користите погрешно једноставно због њихових заједничких особина приказа. Неке од најчешће злоупотребљених семантичких ознака укључују:
- блоцккуоте - Неки људи користе ознаку <блоцккуоте> за унос текста који није цитат. То је због тога што су блокотови подразумевани. Ако једноставно желите да користите од уласка, али текст није блокада, уместо тога користите ЦСС маргине.
- п - Неки веб уредници користе <п> & нбсп; п> (непропадајући простор садржан у параграфу) да додају додатни размак између елемената странице, уместо да дефинишу стварне параграфе за текст те странице. Као и претходно поменути примјер, требали бисте користити својство маргине или облагања за додавање простора.
- ул-Лике блоцккуоте, затворити текст унутар ознаке <ул> таг који је текст у већини претраживача. Ово је и семантички нетачан и неважећи ХТМЛ, јер само ознаке <ли> важе унутар ознаке <ул>. Опет, користите стил маргине или паддинга до текста.
- х1-х6 - Ознаке наслова се могу користити да би фонтови били већи и смелији, али ако текст није наслов, не би требало да буде унутар ознаке наслова. Уместо тога користите фонт-веигхт и фонт-сизе ЦСС особине ако желите да промените величину или тежину одређеног текста на вашој страници.
Коришћењем ХТМЛ тагова који имају значење, креирате странице које преносе више информација него што се све окружује са <див> ознакама.
Које ХТМЛ ознаке су семантичке?
Док скоро свака ознака ХТМЛ4 и све ознаке ХТМЛ5 имају семантичко значење, неке ознаке су првенствено семантичке по природи.
На пример, ХТМЛ5 је редефинисао значење ознака <б> и <и> да буде семантичан. Ознака <б> не даје посебну важност, већ текст који је обично приказан масним словима. Ознака <и> такође не даје додатни значај или нагласак, већ дефинише текст који се обично прави курзивом.
Семантички ХТМЛ тагови
<аббр> | Скраћеница |
<акроним> | Акроним |
<блоцккуоте> | Дугачак цитат |
<дфн> | Дефиниција |
<адреса> | Адреса за аутора (е) документа |
<ците> | Цитатион |
<цоде> | Ознака кода |
<тт> | Текст телетипа |
<див> | Логичка подела |
<спан> | Генерички контејнер са инлине стилом |
<дел> | Избрисан текст |
<инс> | Уметнути текст |
<ем> | Истицање |
<стронг> | Снажан нагласак |
<х1> | Наслов првог нивоа |
<х2> | Наслови другог нивоа |
<х3> | Наслов трећег нивоа |
<х4> | Наслов четвртог нивоа |
<х5> | Наслов на петом нивоу |
<х6> | Наслов у шестом нивоу |
<хр> | Тематски прекид |
<кбд> | Текст који унесе корисник |
<пре> | Пред-форматирани текст |
<к> | Кратка инлајн цитат |
<самп> | Излаз узорка |
<суб> | Субсцрипт |
<суп> | Суперсцрипт |
<вар> | Променљив или кориснички дефинисан текст |