Новое в 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 документов. Понятной не только для людей, но также и для поисковых систем.

Изучаем HTML

Новое в HTML5

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

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

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