Новое в HTML5

Структурные теги

   Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
   Теперь нам доступны следующие структурные теги:
<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.
<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.
<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.

<html>
<body>
<header>
<h1> Заголовок </h1>
</header>
<section>
<article> <h2> Заголовок 1 </h2> <p> Некоторый текст... </p> </article>
<article> <h2> Заголовок 2 </h2> <p> Некоторый текст.. </p> </article>
<nav>
<a href="/someURL"> Ссылка 1 </a>
<a href="/someURL"> Ссылка 2 </a>
</nav>
</section>
<footer>
<p>Copyright 2010 My Company</p>
</footer>
</body>
</html>

   Как вы видите, мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.
   Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг <div>. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.

Комментариев нет:

Отправка комментария