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

Семантика текста у ХТМЛ5

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

Вероватно су најпопуларнији семантички тагови на нивоу текста и , али су постојали и пре ХТМЛ5. Међу новим инлине семантичким елементима можемо наћи нпр , таг фор датум-време које је могуће читати, и за истакнутог текста.

Погледајте ову листу за све семантичке елементе на нивоу текста који се тренутно користе.

Скица документа у ХТМЛ5

Скица документа је структура ХТМЛ документа. Она показује како су елементи међусобно повезани. Нацрт документа је генерисан искључиво елементима мапирања, као што су наслови, наслови табела, наслови образаца и други у ранијим верзијама ХТМЛ-а, као што су ХТМЛ4.01 и КСХТМЛ.

У ХТМЛ5, алгоритам који је описао је побољшан новим елементима секције, наиме:

• за секције груписане око одређене теме
• за комплетне или самосталне композиције као што је блог пост или видгет
• за навигациони блокови
• за комплементарног садржаја као што су бочне траке.

У ХТМЛ5 постоји пети елемент секције, али није нови, то је таг. Тхе

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

Савјети за семантички структурирани садржај

Ако желимо да направимо добро структуриране документе, морамо обратити пажњу на следећа правила:

1. Крајњи елемент секције је увек таг.

2. Секције у ХТМЛ5 могу бити угнијежђене.

3. Сваки одељак има сопствену хијерархију наслова. Свака од њих (чак и најскривенија угнежђена секција) може имати х1 таг.

4. Док је скица документа првенствено дефинисана са 5 елемената пресека, она такође захтева одговарајуће наслове за сваки одељак.

5. Увек је први елемент заглавља (нека је х1 или ознака заглавља нижег ранга) који дефинише наслов датог одељка. Следеће ознаке наслова унутар истог одељка морају бити у односу на ово. (Ако је први наслов х3 унутар елемента секције, не стављајте х3 након тога.)

6. Секције дефинисане

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

7. Сваки одељак (тело, одељак, чланак, на страну, нав) може имати своје

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

Пример: Семантички преглед

Погледајмо примјер за нацрт семантичког документа како би се видјело како то функционира. Наш пример кода резултираће у следећој структури документа:

И овде је код са правилним семантичким секцијама:

  
 
Добродошли на наш сајт!
 
Овде је наш лого и слоган.
 
  
 
 
Титле оф Артицле
 
Поднаслов чланка
 
 
 
Први логички део (нпр. "Теорија")
 
Параграф 1 у првом дијелу
 
Неки други поднаслови у првој секцији
 
Став 2 у првом одељку
 
 
 
Други логички део (нпр. "Пракса")
 
Параграф 1 у другом дијелу
 
Став 2 у другом делу
 
  
    

Ако погледате горњи исјечак кода, видећете да су заглавља и подножја опционални, можемо слободно да изаберемо ако их желимо користити или не, али препоручује се да увек укључите наслов за сваки одељак, иначе ће секција бити “Унтитлед” у нацрту документа.

Срећом, на интернету постоји много одличних алата који нам омогућавају да проверимо нацрт документа, овај пут ћемо користити Оутлинер алат хтмл5.орг.

Ако убацимо наш кодни код у форму коју је дао оутлинер, и кликните на “Објасните ово!” дугме, видећемо следећи резултат:

Ово је документирајте наш узорак кода, на тај начин претраживачи то виде, а читачи екрана га читају својим слабовидним корисницима. Семантички је, добро структуриран и нема гадног “Унтитлед” секције у њему.

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

Други аспекти Веб Семантике

Семантичке ХТМЛ ознаке и контуре документа само су мали дио семантике веба. Садржај веб странице се може учинити још значајнијим уз помоћ ВАИ-АРИА протокола приступачности и структурираних података који се могу користити заједно с РДФа протоколом, микроподацима или ЈСОН-ЛД ознаком.