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="verweise1.html">Връзка 1</a></li>
      <li><a href="verweise2.html">Връзка 2</a></li>
      <li><a href="verweise3.html">Връзка 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Точки на статията ...</summary>
    <ul>
      <li><a href="quelle1.html">Връзка 4</a></li>
      <li><a href="quelle2.html">Връзка 5</a></li>
      <li><a href="quelle3.html"">Връзка 6</a></li>
    </ul>
  </details>
</article>

Съдържанието на details елемента се крие от посетителя, докато той не кликне на summary елемента, съдържащ се в details.

Това може да бъде интересно например в контекста на видео плейър. Тук има още един пример:

<video id="film" width="320" height="180" autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>
<details open>
  <summary>Показване/скриване на контролите на видео плейъра</summary>
  <p>
    <button id="start" onClick="start()">Старт/Пауза</button>
    <button id="stumm" onClick="stumm()">Изключване на звука</button>
    <button id="lauter" onClick="lauter()">По-силно звука </button>
    <button id="leiser" onClick="leiser()">По-тихо звука</button>
  </p>
</details>

Когато страницата се зареди, първо ще видите само прозореца на плейъра.

Но ако посетител кликне върху линка за показване и скриване, ще видите съдържанието, дефинирано в summary.

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

Интересно е също и атрибутът open за details.

<details open>
…
</details>

Когато този атрибут е зададен, съдържанието на summary елемента ще бъде видимо веднага при зареждането на страницата.

Резюмета

Сега отново кратък поглед върху summary елемента.

<article>
  <details>
    <summary>Връзки към статията...</summary>
    <ul>
      <li><a href="verweise1.html">Връзка 1</a></li>
      <li><a href="verweise2.html">Връзка 2</a></li>
      <li><a href="verweise3.html">Връзка 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Точки на статията ...</summary>
    <ul>
      <li><a href="quelle1.html">Връзка 4</a></li>
      <li><a href="quelle2.html">Връзка 5</a></li>
      <li><a href="quelle3.html"">Връзка 6</a></li>
    </ul>
  </details>
</article>

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

Признаваме, че на разсгъващи и сгъващи се области може също да бъдат реализирани много лесно чрез JavaScript. Въпреки това, ако JavaScript е деактивиран в браузъра, приложението няма да функционира. Затова е желателно детайлно да бъдат подкрепени details и summary.

Разширени области и ръкописи

Допълнителна информация, ръкописи, кръстосани справки и т.н. могат да бъдат отличени с aside елемента в HTML5. Съдържанието, отличено по този начин, се намира в контекста на целия документ, но не е директно свързано с него.

Моля, отбележете, че в спецификацията на HTML5 не е определено коя размерна единица да се използва за областта, означена с aside. Следователно съдържанието на aside може да бъде показано например като ръкопис, но също така и като странично меню.

Следния пример показва дефиницията на aside област.

<body>
  <header>
   <h1>PSD-Tutorials.de</h1>
  </header>
 <article>
  <h2>Web-Apps erstellen (Teil 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="#">Начална стр.</li>
       <li><a href="# ">Контакт</a></li>
     </ul>
     </nav>
   </aside>
  </body>

Добавяне на времеви обозначения

Времевите обозначения могат специално да се отличават чрез новият елемент time. Особеността на този елемент е, че времевите обозначения са четими както от хора, така и от машини.

Времевите обозначения се пишат в елемента time за хората. За да дадете възможност на браузърите също да четат информацията за времето, се използва атрибутът datetime на елемента time.

<p>Ще се срещнем на 
<time datetime="2014-04-15 19:00">15-ти април в 19:00 часа</time>.
</p>

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

Открояване на текстове

С елемента mark има възможност да бъдат изтъквани думи или цели текстови отсечки оптически. В спецификацията на HTML5 се подчертава, че елементът трябва да се използва само във връзка с текстово съдържание и трябва да бъде в определена връзка с контекста.

Пример:

<p>В този урок се създава първата истинска jQM страница. Необходимо е HTML-Grundgerüst, което вече сте научили.</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.