-пясък -Въпреки това, както не е нужно да ги изхвърляте напълно. Те все още са най-добрият избор за групиране на съдържание единствено за целите на стайлинг и в други случаи на последна инстанция.

Текстова семантика в HTML5

HTML5 въведе много нови семантични елементи, които правят възможно лесното организиране на съдържанието. Те не само ви помагат да организирате съдържанието на нивото на целия документ (вж. Подробности в следващия раздел), но също и в текстовите блокове, като вградени маркери.

Вероятно най-популярните текстови семантични маркери са и , но те съществуват и преди HTML5. Сред новите вградени семантични елементи можем да намерим например , за четливи за времето дати, и за маркиран текст.

Вижте този списък за всички семантични елементи на текстово ниво, които се използват в момента.

Очертание на документа в HTML5

Структурата на документа е структурата на HTML документ. Тя показва как елементите са свързани помежду си. Очертанието на документа е генерирано единствено чрез елементи на картографиране, като заглавия, заглавия на таблици, заглавия на форми и други в по-ранните версии на HTML, като HTML4.01 и XHTML.

В HTML5 алгоритъмът за очертаване е подобрен с нови елементи за разделяне, а именно:

• за раздели, групирани около определена тема
• за пълни или самостоятелни композиции като блог или джаджа
• за навигационни блокове
• за допълващо съдържание като странични ленти.

В HTML5 има пети елемент за разделяне, но той не е нов, той е маркер. Най-

и таговете също са нови, но те не генерират нови раздели в документ, те разделят съдържанието в секциите. Това означава, че всеки секционен елемент (тяло, статия, раздел, навигация и настрана) може да има свой собствен горен и долен колонтитул.

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

Ако искаме да създадем добре структуриран документ, трябва да обърнем внимание на следните правила:

1. Най-външният елемент за секциониране винаги е свободен край.

2. Секциите в HTML5 могат да бъдат вложени.

3. Всяка секция има своя собствена йерархия. Всеки от тях (дори най-вътрешната вложена секция) може да има h1 свободен край.

4. Докато очертанието на документа е основно дефинирано от 5-те елемента за секциониране, то също се нуждае от правилни заглавия за всеки раздел.

5. Винаги е първият елемент на заглавието (нека е h1 или по-нисък ранг), който определя заглавието на дадения раздел. Следващите заглавия в един и същ раздел трябва да бъдат относителни към това. (Ако първото заглавие е h3 вътре в секциониращия елемент, не поставяйте h3 след това.)

6. Разделите, определени от

, и Таговете не принадлежат към основния контур на HTML документа, те обикновено не се представят първоначално от помощни технологии.

7. Всеки раздел (тяло, раздел, статия, настрана, навигация) може да има свои собствени

и етикети, определящи заглавката (като лого, име на автора, дати, метаинформация и т.н.) и долния колонтитул (авторско право, бележки, връзки и т.н.) от този раздел.

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

Нека видим пример за очертание на семантичен документ, за да видим по-ясно как работи. Нашият примерен код ще доведе до следната структура на документа:

И тук е кодът с правилно семантично разделяне:

  
 
Добре дошли на нашия уебсайт!
 
Ето нашето лого и лозунг.
 
  
 
 
Заглавие на чл
 
Подзаглавие на чл
 
 
 
Първа логическа част (напр. "Теория")
 
Параграф 1 от първия раздел
 
Някои други подзаглавия в първи раздел
 
Параграф 2 в първия раздел
 
 
 
Втора логическа част (напр. „Практика“)
 
Параграф 1, втори раздел
 
Параграф 2, втори раздел
 
  
    

Ако погледнете кодовия фрагмент по-горе, ще видите, че заглавките и долните колонтитули са по избор, можем свободно да избираме дали искаме да ги използваме или не, но това е силно се препоръчва винаги да включва заглавие за всеки раздел, в противен случай разделът ще бъде “неозаглавен” в очертанията на документа.

За щастие има много чудесни инструменти по целия интернет, които ни позволяват да проверим очертанията на документа, този път ще използваме инструмента на html5.org на Outliner..

Ако вмъкнем кодовия си фрагмент във формуляра, предоставен от проекта, и кликнете върху него “Очертайте това!” ще видим следния резултат:

Това е очертайте документа на нашия примерен код, това е начинът, по който търсачките го виждат, а екранните четци го четат на своите потребители с увредено зрение. Той е семантичен, добре структуриран и няма гаден “неозаглавен” раздели в него.

Ако искате да видите как изглежда секцията Untitled в Outliner, просто изтрийте някои от заглавните тагове в примерния код.

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

Семантичните HTML тагове и очертанията на документи са само малка част от уеб семантиката. Съдържанието на дадена уеб страница може да бъде направено още по-смислено с помощта на протокола за достъпност WAI-ARIA и структурираните данни, които могат да се използват заедно с протокола RDFa, микроданните или маркировката JSON-LD.