8. Додавання інших елементів html5 секціонування

Елементи в категорії секціонування <section>, <article> і <aside>. В першу чергу ви додасте елемент <section>. Офіційне визначення елемента є таким, що він:"являє собою загальний розділ документа або програми. Розділ, в цьому контексті, є тематичне груповання змісту, як правило, з заголовком". Це визначення також вказує, що" частина елементів не є загальним елементом контейнера. Коли елемент необхідний для визначення цілей або для зручності сценаріїв, авторами пропонується використовувати замість елемента DIV. Загальне правило полягає в тому, що частина елементів доцільна, тільки якщо вміст елемента буде перерахований явно в загальних рисах документа ".

Це означає, що ви можете використовувати <section>, коли потрібно, ділити важливий і пов'язаний контент, такий як текст і малюнки, в логічних областях. Наприклад, сторінка, над якою ви працювали являє собою домашню сторінку з контентом, який ділиться візуально: колонка зліва ширше і іншого кольору, ніж у другій колонці справа. Другий стовпець на бічній панелі і зміст не має відношення до основного змісту, і ви повернетеся до нього пізніше в цьому уроці.

1. В 04_index_work.html, знайдіть тег відкриття <div> для основних розділів:

<div id="main">

Locate the closing <div> tag further down the page; you will change this tag shortly. The commenting code will help you identify it.

  <p>The information on this site is provided to help you be a happier, more productive employee. If you have any questions about anything on the site or have other employee related questions, you can also call Jen Smith at extension 535! </p>

</div>

<!-- End of Main Div -->:

2. Поверніться до тегу <div> і замініть його на роздільний тег наступним чином:

<section id="main">

3. Тепер перейдіть до закриття тегу </div>, який є в кроці 1, і замініть його закриття в розділі:

<p>The information on this site is provided to help you be a happier, more productive employee. If you have any questions about anything on the site or have other employee related questions, you can also call Jen Smith at extension 535! </p>

</section>

<!-- End of Main Div -->:

Батьківським елементом цього нового розділу є <div id="innerwrap"> і використовується для презентаційних цілей, а не для змісту. Стиль пов'язаний з div змінює колір фону (білий), для div презентації ви можете залишити все як є.

Ви можете використовувати div елементи HTML5, але краще всього використовувати їх, коли немає відповідних в нових елементах HTML5.

4. Збережіть файл і перегляньте сторінку в браузері. Перед тим як продовжити вправу, ви повинні зрозуміти, модель структури документа, який використовується HTML5.

9. Визначення html5 документів

Недоліком нинішньої HTML і XHTML специфікації є відсутність хорошої моделі контуру документа. Контури ілюструють ступінь важливості для вашого змісту, а також зв’язки між цим змістом. HTML5 елементи секціонування призначені для створення структури зі структури веб-сторінок.

HTML і XHTML сторінок в даний час документ описує засновані тільки на тегах заголовків, тому вони дуже обмежені. Нова структура документа HTML5 забезпечує більш детальні і важливі обриси. Наприклад, необхідно враховувати наступне:

<body>

  <header>

    <h1>Welcome to our site</h1>

      <p>The best website in the world!</p>

  </header>

  <nav>

    <h1>Site Navigation</h1>

  </nav>

  <section>

    <h1>Breaking News</h1>

      <h2>Car overturns on highway</h2>

  </section>

</body>