Теги разметки страницы

Данная статья учебника посвящена такой теме как разметка страницы, рекомендую Вам максимально внимательно, а лучше несколько раз перечетать ее. Это связано с тем, что если вы поймете эту тему, то вы сможете без проблем создать каркас будущего сайта, что по большому счету и является главной целью этого учебника и языка гипертекстовой разметки.

Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.


Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.


Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.

Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный, но об этом чуть позднее.

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Теги <div> и <span></title>
	</head>
	<body>
		<div style = "color:green">
			<p>Абзацы мы объединили тегом &lt;div&gt;, а это <span style = "color:red">слово</span> мы заключили тегом &lt;span&gt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &lt;div&gt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &lt;span&gt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

Результат нашего примера:

Рис. 42 Использование тегов разметки в HTML.
Рис. 42 Использование тегов разметки в HTML.

Теги разметки страницы в HTML 5

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, давайте их детально рассмотрим.

Тег <header>html5

Тег <header>html5 (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header>html5 в одном документе.

<header>
		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом -->
		<h1>Заголовок первого уровня</h1> <!-- заголовок первого уровня -->
</header>
Рис. 43а Пример размещения тега <header> на странице.
Рис. 43а Пример размещения тега <header> на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header>html5 внутрь таких элементов, как <footer>html5 (нижний колонтитул), <address>html5 (определяет контактную информацию) или внутрь другого элемента <header>html5.


Тег <nav>html5

Тег <nav>html5 (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>html5, например, один для навигации по сайту, а второй для навигации по странице.

<nav> <!-- начало навигации -->
	<ul> <!-- маркированный список -->
		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->
	</ul> <!--конец списка-->
</nav> <!-- конец навигации -->
Рис. 43б Пример размещения тега <nav> на странице.
Рис. 43б Пример размещения тега <nav> на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>html5, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav>html5 внутри тега <footer>html5 (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.


Тег <aside>html5

Тег <aside>html5 (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому. Элемент <aside>html5 представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.

<article> <!-- начало статьи -->
	<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p>
		<aside> <!-- отступление (выносим информацию, например, на поля) -->
			<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p>
		</aside> 
</article> <!-- конец статьи -->
Рис. 43в Пример размещения тега <aside> на странице.
Рис. 43в Пример размещения тега <aside> на странице.

Тег <article>html5

Тег <article>html5 (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение). Внутри тега <article>html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

<article> <!-- начало основной статьи -->
	<h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) -->
	<p>Вводная информация о птицах...</p>
	<article> <!-- начало первой вложенной статьи -->
		<h2>Статья о воробье</h2> 
		<p>Информация про воробьев...</p>
	</article> <!-- конец первой вложенной статьи -->
	<article> <!-- начало второй вложенной статьи -->
		<h2>Статья о синице</h2>
		<p>Информация про синиц...</p>
	</article><!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->
Рис. 43г Пример размещения тега <article> на странице.
Рис. 43г Пример размещения тега <article> на странице.

Тег <section>html5

Тег <section>html5 (раздел) служит для группировки взаимосвязанного содержимого.

Не используйте элемент <section>html5 в качестве универсального контейнера, для этих целей подходит элемент <div>. Раздел должен логически отображать структуру документа, например, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.


Данный тег часто используется при верстке целевых страниц (англ. landing page, "посадочная страница") для логического разделения страницы на разделы.


Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение).

<section> <!-- начало первой вложенной статьи -->
	<h2>Первый раздел</h2> 
	<p>Информация внутри раздела</p>
</section> <!-- конец первой вложенной статьи -->
<section> <!-- начало второй вложенной статьи -->
	<h2>Второй раздел</h2>
	<p>Информация внутри раздела</p>
</section><!-- конец второй вложенной статьи -->
Рис. 43д Пример размещения тега <section> на странице.
Рис. 43д Пример размещения тега <section> на странице.

Совместное использование тегов <section>html5 и <article>html5

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article>html5 использовать тег <section>html5 (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article>html5 и вложенные элементы <section>html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article>html5).

Рис. 43е Пример размещения тега <section> внутри <article>.
Рис. 43е Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article>html5 внутрь элементов <section>html5, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Рис. 43ж Пример размещения тега <article> внутри <section>.
Рис. 43ж Пример размещения тега <article> внутри <section>.

Допускается помещать элементы <section>html5 (раздел) в другие элементы <section>html5, но при этом рекомендуется учитывать следующую структуру документа:

<body>
	<h1>Заголовок первого уровня</h1>
	<section>
		<h2>Заголовок второго уровня</h2>
		<section>
			<h3>Заголовок третьего уровня</h3> 
		</section>
	</section>

Тег <footer>html5

Тег <footer>html5 (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

Обращаю Ваше внимание, что на количество тегов <footer>html5 на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article>html5, чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.

<body>
	<h1>Важный заголовок</h1> 
	<article> <!-- начало первой статьи -->
		<h2>Статья о бытие</h2> 
		<p>Информация про бытие...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article><!-- конец первой статьи -->
	<article> <!-- начало второй статьи -->
		<h2>Статья о бытие 2</h2> 
		<p>Информация про бытие 2...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article> <!-- конец второй статьи -->
	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->
		<address>Контактные данные автора сайта</address>
	</footer>
</body>
Рис. 43з Пример размещения тега <footer> на странице.
Рис. 43з Пример размещения тега <footer> на странице.

Тег <main>html5

Тег <main>html5 предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.

Рис. 43и Пример размещения тега <main> на странице.
Рис. 43и Пример размещения тега <main> на странице.

Обращаю Ваше внимание, что тег <main>html5 не должен быть потомком таких блоков как (не должен быть вложен в них):


Разметка для сайта на HTML 5

Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.

Хочу сразу оговориться, что в этом примере будет использовано CSS свойство, которое позволяет сделать элемент плавающим - содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать этот плавающий элемент. Не переживайте если вы сейчас не поймете работу этого свойства, так как нас сейчас больше интересует правильная разметка документа, а подробное изучение плавающих элементов будет рассмотрено в учебнике CSS в статье "Плавающие элементы".

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h1>Главный заголовок сайта</h1>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5

Рис. 44 Разметка страницы на HTML 5.

Разметка иллюстраций в HTML 5

Тег <figure>html5 применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure>html5 может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption>html5 вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>html5. Тег <figcaption>html5 должен размещаться как первый, или последний элемент внутри тега <figure>html5.

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figure></title>
	</head>
	<body>
		<main>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 1</figcaption>
			</figure>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 2</figcaption>
			</figure>
		</main>
	</body>
</html>

В этом примере основное содержимое документа поместили внутри тега <main>html5, в который мы поместили два элемента <figure>html5, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption>html5 мы вывели текстовое пояснение к содержимому каждого элемента <figure>html5. Элемент <figcaption>html5 мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Рис. 45 Разметка изображений в HTML 5.
Рис. 45 Разметка изображений в HTML 5.

Обратите внимание, что если вы разместите элемент <figcaption>html5 первым вложенным элементом тега <figure>html5, то пояснение будет отображаться сверху изображения:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figcaption></title>
	</head>
	<body>
		<main>
			<figure>
				<figcaption>Ничоси 1</figcaption>			
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
			<figure>
				<figcaption>Ничоси 2</figcaption>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
		</main>
	</body>
</html>

Результат нашего примера:

Рис. 46 Пример использования тега <figcaption>.
Рис. 46 Пример использования тега <figcaption>

Скрытие содержимого в HTML 5

В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.

Тег <details>html5 определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details>html5 отображается для пользователя только если логический атрибут openhtml5 установлен.

Тег <summary>html5 определяет видимый заголовок для тега <details>html5. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <details> и <summary></title>
	</head>
	<body>
		<details>
			<summary>Показать ? </summary>
			Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			<details>
				<summary>Ещё? </summary>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</details>
		</details>
	</body>
</html>

В этом примере мы использовали два элемента <details>html5, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>html5.

Результат нашего примера:

Рис. 46 Использование тега <details>.
Рис. 47 Пример использование тегов <details> и <summary>.


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий одностраничный сайт посвященный енотам:

Практическое задание № 25.

Практическое задание № 25.

Перед тем как приступать, внимательно изучите страницу, которую Вам необходимо будет повторить, открыв пример в отдельном окне.

Подсказка: в примере используются цвета coral и aliceblue.

После того как вы выполните упражнение пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.