HTML & CSS за начинаещи (Част 19): Семантика за уеб (2)

В момента HTML документите се структурират главно посредством елементи div. След това форматирането и позиционирането на тези контейнери обикновено се извършва чрез CSS. За софтуер като Screenreader това е безполезно, тъй като те не могат да разпознаят какво представляват определени съдържания. Това трябва да се промени с новите елементи за структуриране.

Двата най-важни нови елемента са раздел и статия, които са фокус на този урок.

Означаване на статии

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

<article>
   <h1>Създаване на уеб приложения (Част 09): jQuery mobile (1)</h1>
   <p>jQuery е безспорно едно от най-известните JavaScript рамки. В "класически" уебсайтове jQuery вече се използва хиляди пъти...</p>
   ...
</article>

Благодарение на article елемента може да структурирате съдържанието си по семантичен начин.

Как може да изглежда нещо от това може да се види много хубаво чрез един блог.

<article>
  <header>
    <h1>Създаване на уеб приложения (Част 09): jQuery mobile (1)</h1>
    <p>Публикувано на: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery е безспорно едно от най-известните JavaScript рамки. В "класически" уебсайтове jQuery вече се използва хиляди пъти...</p>
  ...
  <footer>
    <p><small>Авторски права от PSD-Tutorials.de</small></p>
  </footer>
</article>

В този пример в рамките на article елемента се извършва доста типично разделяне на секциите глава, основа и край. И такова разделяне се среща много често в блоговете.

Създаване на секции

Следва section елемента. Елементът section разделя страницата на различни секции. Това може да бъде секции, глави, табове и т.н. Чрез section може да се разделят логически области като въведение и текущи съобщения.

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

Следващият пример показва типична структура на блог. Все пак, тази структура включва нещо, което всъщност е нужно в много блогове, а именно секция за коментари. Тази секция за коментари се дефинира в рамките на section елемента. Отделните коментари в рамките на секцията article отново са оградени отделно.

<article>
  <header>
    <h1>Създаване на уеб приложения (Част 09): jQuery mobile (1)</h1>
    <p>Публикувано на: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery е безспорно едно от най-известните JavaScript рамки. В "класически" уебсайтове jQuery вече се използва хиляди пъти...</p>
  ...

  <section>
    <h2>Коментари</h2>
    <article>
      <header>
      <h3>Коментирал от: ПриятелНаНовините</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Преди един час</time></p>
    </header>
    <p>Благодаря за урока!</p>
    </article>
    <article>
      <header>
      <h3>Коментирал от: Бекър</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Преди два часа</time></p>
    </header>
    <p>Страхотно! Това ми помага напред.</p>
    </article>
  </section>
</article>

Отново бих искал да отбележа, че ще говоря подробно за елементите, използвани също тук като header, footer и др. Не в този момент, но чрез тези елементи може да се разделят съдържанието в главата и края, следователно позволяват допълнително логическо структуриране на документите.

Друг пример за комбиниране на елементите article и section за по-добро разбиране. Фактически section елементът може да се използва за разделяне на статия на логически секции, които всяка има собствени заглавия.

<article> 
  <h1>Разработка на приложения</h1> 
  <p>Тук ще научите как да създадете уеб-приложения.</p>
  <section> 
     <h2>Създаване на уеб приложения (Част 09): jQuery mobile (1)</h2> 
     <p>jQuery е безспорно едно от най-известните JavaScript рамки.</p> 
   </section> 
  <section> 
     <h2>Създаване на уеб приложения (Част 08): Бързо включване в jQuery</h2> 
     <p>JavaScript е чудесна нещо за уебсайтовете, тъй като позволява много интересни неща.</p> 
   </section> 
 </article>

Също така е възможно в рамките на section елемента да дефинирате article елементи. Типичен пример за това може да бъде секция за коментари, както вече беше показано. Възможно е обаче и разделянето на секцията на тематични области, които се обсъждат в блога.

Също така е валиден следният пример:

<section> 
  <h1>Разработка на приложения</h1>
  <article> 
    <h2>Създаване на Уеб приложения (Част 09): jQuery mobile (1)</h2> 
    <p>jQuery определено е един от най-известните JavaScript фреймуърки.</p> 
  </article> 
  <article> 
    <h2>Създаване на Уеб приложения (Част 08): Бърз вход в jQuery</h2> 
    <p>JavaScript е страхотен инструмент за уебсайтовете, тъй като с него можете да правите различни интересни неща.</p> 
  </article>    
</section>

Също така в елемента section може да се съдържат други section елементи. Гнездените структури са разрешени. Ето един пример:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Добре дошли</h2>     
      <p>Радваме се...</p>
    </section>   
    <section>     
      <h2>Уроци</h2>
      <p>Тук са нашите най-нови уроци...</p> 
    </section>
    <aside>
      <p>Контакт</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Тази секционна вложеност води до следната структура:

1. PSD-Tutorials.de

1.1 Добре дошли

1.2 Уроци

1.3 Контакт

2. (c) 2014 PSD-Tutorials.de
   
   Такива структурирания са също възможни.
   
   

Разликата между div, article и section

Признаваме, че не е лесно да се разбере разграничението между div, article и section. Фактически, article елементът е дефиниран предимно за структуриране на блог публикации. section елементът е наистина на едно ниво под article. Вътре в section елемента винаги трябва да бъде дефинирано заглавие. Дори когато реално заглавие не е дефинирано, теоретично би трябвало в рамките на съответния елемент да бъде възможно да се посочи заглавие.

Разбира се, div елементите също не са забранени в HTML5, а по-скоро трябва да се използват и в бъдеще. Интересни са например в ситуации, когато трябва да съберете елементи.

Накрая, още веднъж забележката относно оптическите ефекти на досегашните представени елементи. Фактически, за да приложите съответно форматиране, ви е необходим CSS. Обикновеното използване на показаните елементи няма ефект в браузъра. Вие структурирате съдържание само със семантика. Всичко, което има отношение към визията, се контролира чрез стилове.