Важан принцип у веб дизајну је идеја да се помоћу ХТМЛ елемената означи шта су заправо, а не како се подразумевано могу појавити у прегледачу. Ово је познато као коришћење семантичког ХТМЛ-а.

Шта је семантички ХТМЛ?

Семантички ХТМЛ или семантичка ознака је ХТМЛ који уводи значење у веб страницу, а не само у презентацију. На пример, а

 Ознака означава да је приложени текст пасус. Ово је и семантички и презентацијски, јер људи знају шта су пасуси, а прегледачи знају како да их прикажу.

На другој страни ове једначине, ознаке као што су  и  нису семантичка. Они дефинишу само како текст треба да изгледа (подебљано или курзив) и не дају никакво додатно значење маркирању.

Примери семантичких ХТМЛ ознака укључују:

• Ознаке заглавља

   кроз

Постоји много више семантичких ХТМЛ ознака које ћете користити приликом израде веб странице која је у складу са стандардима.

Зашто бисте требали бринути о семантици

Предност писања семантичког ХТМЛ-а произлази из онога што би требало да буде покретачки циљ сваке веб странице: жеље за комуникацијом. Додавањем семантичких ознака вашем документу пружате додатне информације о том документу, које помажу у комуникацији. Конкретно, семантичке ознаке јасно дају до знања прегледачу шта значи страница и њен садржај. Та се јасноћа преноси и са претраживачима, осигуравајући да се праве странице испоручују за праве упите.

Семантичке ХТМЛ ознаке пружају информације о садржају тих ознака које превазилазе само њихов изглед на страници. Текст који је приложен у  претраживач одмах препознаје ознаку као неку врсту кодирајућег језика. Уместо да покушава да прикаже тај код, прегледач схвата да тај текст користите као пример кода за потребе чланка или мрежног упутства.

Коришћење семантичких ознака даје вам и много више удица за обликовање вашег садржаја. Можда данас више волите да се узорци кода приказују у заданом стилу прегледача, али сутра ћете можда желети да их позовете сивом бојом позадине; касније, можда ћете желети да дефинишете прецизну породицу фонтова са једним размаком или фонт слога за употребу за ваше узорке. Све ове ствари можете лако учинити помоћу семантичког означавања и паметно примењеног ЦСС-а.

Правилна употреба семантичких ознака

Када користите семантичке ознаке за преношење значења, а не за презентацију, водите рачуна да их не користите погрешно само због њихових уобичајених својстава приказа. Неке од најчешће злоупотребљених семантичких ознака укључују:

• блоцккуоте - Неки људи користе ознака за увлачење текста који није навод. То је зато што су блок цитати подразумевано увучени. Ако једноставно желите да увучете текст који није блок цитат, користите ЦСС маргине.
• стр - Неки веб уредници користе (непрекидни размак садржан у пасусу) за додавање додатног размака између елемената странице, уместо дефинисања стварних пасуса за текст те странице. Као у претходном примеру, уместо тога бисте требали да користите својство маргине или стила за додавање да додате простор.
• ул - Као и са

  , прилажући текст унутар а

   ознака увлачи тај текст у већини прегледача. Ово је и семантички нетачан и неважећи ХТМЛ, јер само
  •  ознаке важе у оквиру
    ознака. Поново употребите маргину или стил додавања за увлачење текста.
  • х1, х2, х3, х4, х5 и х6 - Можете користити ознаке наслова да бисте фонтове учинили већим и смелијим, али ако текст није наслов, уместо тога користите ЦСС својства фонт-веигхт и фонт-сизе.

  Користећи ХТМЛ ознаке које имају значење, ви стварате странице које преносе више информација од оних које једноставно све окружују

   ознаке.

  Које ХТМЛ ознаке су семантичке?

  Иако готово свака ХТМЛ4 ознака и све ХТМЛ5 ознаке имају семантичка значења, неке ознаке јесу најпре семантички.

  На пример, ХТМЛ5 је редефинисао значење  и  ознаке да буду семантичке. Тхе  ознака не преноси додатну важност; него се означени текст обично приказује подебљано. Исто тако,  ознака не преноси додатну важност или нагласак; него дефинише текст који се обично приказује курзивом.

  Семантичке ХТМЛ ознаке

  Скраћеница
  Акроним
  Лонг куотатион
  Дефиниција
  Адреса за аутора (е) документа
  Цитирање
  Референца кода
  Текст телета
  Логичка подела
  Општи контејнер у линији
  Избрисан текст
  Уметнут текст
  Истицање
  Снажан нагласак
  Наслов првог нивоа
  Наслов другог нивоа
  Наслов трећег нивоа
  Наслов на четвртом нивоу
  Наслов на петом нивоу
  Наслов шестог нивоа
  	Тематска пауза
  Текст који корисник треба да унесе
  Претходно форматиран текст
  Кратки редовни цитат
  Излаз узорка
  Субсцрипт
  Суперсцрипт
  Променљиви или кориснички дефинисани текст