HTML & CSS для початківців (Частина 19): Семантика для вебу (2)

На даний момент HTML-документи, як правило, структуруються за допомогою елементів div. Форматування та позиціонування цих контейнерів зазвичай виконується з використанням CSS. Для програмного забезпечення, такого як екранный читач, цей підхід, звичайно, є безглуздим, оскільки вони не можуть визначити, яке значення мають певні вміст. Це повинно змінитися завдяки новим елементам структурування.

Два з ключових нових елементів це section та article, які були в центрі уваги в цьому покроковому посібнику.

Позначення статей

Через елемент 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. Окремі коментарі всередині області section знову обгорнуті в article.

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

  <section>
    <h2>Коментарі</h2>
    <article>
      <header>
      <h3>Коментатор: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Годину тому</time></p>
    </header>
    <p>Дякую за посібник!</p>
    </article>
    <article>
      <header>
      <h3>Коментатор: Becker</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>

Також можливо розміщувати елементи article всередині елементу section. Так, наприклад, область коментарів може бути таким прикладом, як це вже було показано. Але можлива також розбиття розділу на тематичні області, які обробляються в блозі.

Також тут наведений відповідний приклад:

<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>(с) 2014 PSD-Tutorials.de</p>
  </footer>

Це вкладення section дає наступну структуру:

1. PSD-Tutorials.de

1.1 Ласкаво просимо

1.2 Навчальні посібники

1.3 Контакт

2. (с) 2014 PSD-Tutorials.de
   
   Такі структурування також можливі.
   
   

Відмінність між div, article та section

Признати, що не дуже просто розмежувати між div, article та section. Фактично елемент article був визначений зокрема для структурування постів у блозі. Елемент section фактично знаходиться на одному рівні з елементом article. Крім того, всередині елемента section завжди має бути визначений заголовок. Навіть якщо заголовок фактично не визначений, теоретично в середині відповідного елемента має бути можливість вказати заголовок.

Звичайно, елементи div також не вважаються поганими в HTML5, але все ще повинні використовуватися. Вони є цікавими, наприклад, коли потрібно об'єднати елементи.

Залишаючи це на останок, хочу звернути увагу щодо візуальних наслідків до цих пір представлених елементів. Фактично, для відповідного форматування вам потрібно CSS. Зазначені елементи майже не впливають на вигляд у браузері. Ви структуруєте тут виключно зміст семантично. Все, що стосується зовнішнього вигляду, ви налаштовуєте через таблиці стилів.