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

Також тут, на початку навчального посібника, слід відразу відзначити, що від цих елементів не варто очікувати чудес. Вони оптично дійсно ще не дуже приваблюючі. Але вони цікаві в тому плані, що ви зможете структурувати свої документи логічно та семантично.

Навігаційні області

За допомогою елемента nav можна семантично виділити навігаційні панелі або інші області для додаткових елементів. Основна мета цього елемента - позначати гіперпосилання на інші сторінки або на додаткову інформацію.

Приклад:

<nav>
   <a href="index.html">Головна</a>
   <a href="html5.html">Вивчення HTML5</a>
   <a href="css.html">CSS</a>
   <a href="cms.html">Joomla!</a>
   <a href="wordpress.html">Wordpress</a>
</nav>

В межах елемента nav можна використовувати будь-які елементи. Таким чином, ви все ще можете визначити навігацію за допомогою списків. Але також можна без проблем використовувати інші елементи всередині елемента nav. Елемент nav також може з'явитися в документі кілька разів.

Вказання деталей

Ще одним цікавим елементом є details. Цей елемент дозволяє - і це вже підказує саме ім'я елемента - надати додаткову інформацію про вміст. Пам'ятайте, що елементу details дійсно цікава взаємодія з елементом summary. Більше про цей елемент буде наведено нижче.

Спершу приклад використання details:

<article>
  <details>
    <summary>Посилання на статтю...</summary>
    <ul>
      <li><a href="посилання1.html">Посилання 1</a></li>
      <li><a href="посилання2.html">Посилання 2</a></li>
      <li><a href="посилання3.html">Посилання 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Джерела для статті ...</summary>
    <ul>
      <li><a href="джерело1.html">Посилання 4</a></li>
      <li><a href="джерело2.html">Посилання 5</a></li>
      <li><a href="джерело3.html"">Посилання 6</a></li>
    </ul>
  </details>
</article>

Зміст елемента details буде прихований перед відвідувачем, допоки той не натисне на елемент summary, що міститься всередині details.

Це може бути цікаво, наприклад, у контексті відеоплеєра. Також для цього вказаний приклад:

<відео id="фільм" width="320" height="180" autoplay>
  <source src="відео.mp4" type="відео/mp4">
  <source src="відео.webm" type="відео/webm">
  <source src="відео.ogv" type="відео/ogg">
</відео>
<details open>
  <summary>Включення/виключення керування відеоплеєром</summary>
  <p>
    <button id="початок" onClick="старт()">Початок/Пауза</button>
    <button id="гучність" onClick="гучність()">Вимкнути звук</button>
    <button id="гучніше" onClick="гучніше()">Гучніше</button>
    <button id="тихіше" onClick="тихіше()">Тихіше</button>
  </р>
</details>

При перегляді сторінки спочатку буде видно тільки вікно плеєра.

Але якщо відвідувач клацне по посиланню показати/приховати, буде показано вміст, визначений всередині summary.

Згідно специфікації, якщо елемент summary не буде знайдено, браузери покажуть стандартний вміст.

Цікаво, що є також атрибут open для details.

<details open>
…
</details>

Якщо цей атрибут встановлено, вміст елемента summary буде видно безпосередньо при завантаженні сторінки.

Підсумки

Отже, ще раз докладний огляд елемента summary.

<article>
  <details>
    <summary>Посилання на статтю...</summary>
    <ul>
      <li><a href="посилання1.html">Посилання 1</a></li>
      <li><a href="посилання2.html">Посилання 2</a></li>
      <li><a href="посилання3.html">Посилання 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Джерела для статті ...</summary>
    <ul>
      <li><a href="джерело1.html">Посилання 4</a></li>
      <li><a href="джерело2.html">Посилання 5</a></li>
      <li><a href="джерело3.html"">Посилання 6</a></li>
    </ul>
  </details>
</article>

У summary визначається контент, що ще не відкритий у зв'язку з details. Завдяки summary можна вбудувати додаткову інформацію, яка буде відкриватися за потреби.

Можна, звісно, реалізувати розділи, які можна об'єднувати та розгортати, з мінімальними зусиллями за допомогою JavaScript. Однак, якщо JavaScript вимкнено в браузері, додаток не буде працювати. Тому широке поширення підтримки details і summary бажане.

Бічні області та маргіналії

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

Зверніть увагу, що в специфікації HTML5 не визначено, які розміри повинні використовуватися для області, відзначеної через aside. Таким чином, вміст aside, наприклад, може відображатися як маргіналія, але може бути також відображений у боці.

Наступний приклад показує визначення області aside.

<body>
  <header>
   <h1>PSD-Tutorials.de</h1>
  </header>
 <article>
  <h2>Створення веб-додатків (Частина 10): jQuery mobile (2)</h2>
    <p>У цьому навчальному посібнику створюється перша справжня сторінка jQM. Для цього необхідно мати основний HTML-каркас, з яким ви вже ознайомились.</p>
    <aside>
     <h3>Додаткова інформація</h3>
      <ul>
       <li><a href="#/fn1">Існують додаткові відомості…</a></li>
      </ul>
     </aside>
    </article>
    <aside>
     <nav>
      <h2>Навігація</h2>
      <ul>
       <li><a href="#">Головна сторінка</a></li>
       <li><a href="# ">Контакти</a></li>
     </ul>
     </nav>
   </aside>
  </body>

Додавання часових позначок

Часові позначки можна спеціально відзначити за допомогою нового елемента time. Особливість цього елемента полягає в тому, що часові позначки можна читати як людям, так і машинам.

Для людей часові позначки записуються у елемент . Для забезпечення браузерам можливості витягти часову інформацію також використовується атрибут datetime елемента time.

<p>Ми зустрінемося 
<time datetime="2014-04-15 19:00">15 квітня о 19:00</time>.
</p>

На цьому етапі ще раз зазначується, що на даному етапі немає жодного візуального впливу в актуальних браузерах, але лише для забезпечення читання часових позначок машинами.

Виділення тексту

За допомогою елемента mark є можливість відзначати слова або цілі тексти. У специфікації HTML5 чітко зазначається, що елемент має використовуватися лише у зв'язку з тексовими вмістом. Крім того, він повинен мати певне відношення до контексту.

Приклад:

<p>У цьому навчальному посібнику створюється перша справжня сторінка jQM. Для цього необхідно мати <mark>HTML-Грунт</mark>, з яким ви вже ознайомилися.</p>

Те, як браузери реалізують виділення, не є визначеним.





Google Chrome і Firefox обидва використовують жовтий фон.

Відзначення діалогів

Також в HTML5 передбачено окреме відзначення діалогів. Для цього є елемент dialog. На даний момент елемент dialog підтримують виключно Safari та Google Canary, тобто версія браузера для розробників.

Тут також є приклад:

<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Це вміст коробки.</p>
<button id="hide">Закрити</button>
</dialog>
<button id="show">Показати вміст</button>
</div>
<script type="text/JavaScript">
(function() {  
    var dialog = document.getElementById('dialog');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog.close();  
    };  
})(); 
</script>

Після натискання кнопки діалогове вікно стає видимим. Для цього застосовується комбінація HTML5, CSS та JavaScript.