Знакомимся с HTML 5. Наиболее часто используемые элементы

HTML 5 является развитием предыдущих версий языка HTML, в частности наиболее часто используемой сейчас HTML 4.01.

Давайте сравним структуру страницы HTML 4.01 и HTML 5.

Код HTML 4.01:

<!DOCYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Создай сайт для бизнеса</title>
     <style></style>
</head>
	<body>
		<div id="header">
			<h1>Главная страница</h1>
		</div>
		<div id="main"></div>
		<div id="sidebar"></div>
		<div id="footer"></div>
		<script type="text/javascript" charset="utf-8"></script>
	</body>
</html>

Код HTML 5:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Создай сайт для бизнеса </title>
	<style></style>
</head>
<body>
	<header>
		<h1>Главная страница</h1>
	</header>
	<section></section>
	<aside></aside>
	<footer></footer>
	<script></script>
</body>
</html>

Элементы HTML5 имеют простую структуру и семантику, используют новые теги, такие как верхняя и нижняя часть страницы (хедер, футер) и другие элементы.

Рассмотрим какие элементы (теги) HTML5 наиболее часто используются.

<header>

Он задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

Может внутри содержать другие теги: <hgroup>, <h1> … <h6>, <nav>, metadata.

Пример кода:

<header>
  <meta charset="utf-8"> 
  <h1>Создай сайт для бизнеса</h1>
  <p>Узнайте как создать сайт для бизнеса в Интернет </p>
  <p>Сергей, <time datetime="2013-09-20">20 Сентября 2013</time></p>
</header>

<hgroup>

Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.

Данный тег исключён из версии HTML от W3C, но остался в версии WHATWG, будущее элемента пока не определено.

Пример кода:

<header>
	<hgroup>
		<h1>Создай сайт для бизнеса</h1>
		<h2>Узнайте как создать сайт для бизнеса в Интернет</h2>
	</hgroup>
	<p><time datetime="2013-09-20">20 Сентября 2013</time> написано Угольников Сергей</p>
</header>

<nav>

Он задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Пример кода:

 <nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">Статьи</a></li>
		<li><a href="#">Примеры</a></li>
		<li><a href="#">Контакты</a></li>
	</ul>
</nav>

<section>

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого.

Пример кода:

<section>
   <h1>Регистрируем домен в зонах RU и РФ за 99 рублей</h1>
   <p>Первое, что необходимо сделать для размещения Вашего сайта в сети Интернет, зарегистрировать имя для него — домен. По нему на Ваш сайт будут заходить посетители. </p>
  </section>

<article>

Тег задает содержание сайта вроде новости, статьи, записи блога, форума или др.

Пример кода:

<section>
	<h1>Чем отличается блог от сайта?</h1>
	<article>
		<h2>Автор: Грегг Холл</h2>		
		<p>Всем и каждому уже давно очевидно, что блоги становятся в последнее время все более и более популярными. Отрицать этот факт бессмысленно, и любой здравомыслящий «сетянин» со мной согласится. Но рост популярности и распространенности блогов породил комплекс своих собственных вопросов и проблем, которыми отныне терзаются практически все новички блоггинга. </p>
		<p>И один из этих вопросов аналогичен заголовку нашей сегодняшней статьи. </p>
	</article>
	<article>
		.. другая запись ..
	</article>
	<article>
		.. другая запись ..
	</article>
	<article>
		.. другая запись ..
	</article>
</section>

<footer>

Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагается имя автора, дата документа, контактная и правовая информация.

Пример кода:

<footer>
	Copyright © 2013 Создай сайт для бизнеса 
</footer>

<figure> и <figcaption>

Используется для группирования любых элементов, например, изображений и подписей к ним.

Пример кода:

<article>
   <figure>
    <p><img src="images/thumb1.jpg" alt="" /></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb2.jpg" alt="" /></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>

В HTML5 помимо упомянутых есть еще много тегов, но представленные элементы являются наиболее часто используемыми.

P.S. — Коммерческий сайт своими руками от и до — это просто! Не верите? Щелкайте здесь — перейти

Читайте ранее:
Размещаем Яндекс.Карту на Вашем блоге на WordPress

Иногда, возникает необходимость добавить карту с указанием местоположения или маршрута проезда на Ваш блог на системе Wordpress. Сделать это очень...

Закрыть