belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

§7. Подробнее о структуре html-документа

7.1. Основные элементы разметки html-документа.

Как мы уже знаем, любой html-документ содержит заголовок документа 'head', предназначенный для хранения служебной информации, и тело документа 'body', в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: 'header', 'footer', 'aside', 'nav', 'section', 'article' (см. пример. 7.1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.

<!DOCTYPE html>
<html>
<head>
	<!-- Служебная информация -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Главная страница</title>
	<link href="css/style_1.css" rel="stylesheet">
	<script src="js/script_1.js"></script>
</head>
<body>
	<!---------------- Шапка ------------------------->
	
	<!-- Организуем шапку сайта: меню, логотип и т.д. -->
	<header class="header_1">
		<!-- Организуем шапку сайта: меню, логотип и т.д. -->
		<nav class="nav_1"> 
			Ссылки на разделы сайта (панель навигации по сайту).
		</nav>
		Логотип, поисковая панель и др. информация
	</header> 
		
	<!------------------ 1-я секция --------------------------->
	
	<!-- Условно выделяем вводный раздел домашней страницы  -->
	<section class="section_1">
		Краткая информация по тематике сайта. 
		
		<!-- Здесь расположим боковую панель  -->
		<aside class="aside_1">
			Небольшой блок для сопутствующей рекламы.
		</aside>
	</section>
		
	<!----------------- 2-я секция ------------------------->
	
	<!-- Условно выделяем раздел новостей сайта -->
	<section class="section_2">
		<!-- Отрывки из новостей, включающие ссылки -->
		<!-- на страницы с полным текстом новости -->
		<article class="articles_1">1-я статья</article>
		<article class="articles_1">2-я статья</article>
		<article class="articles_1">и так делее</article>
	</section>
	
	<!------------ 'Подвал' сайта ------------------------->
	
	<footer class="footer_1">
		<address>Информация об авторе</address> 
		и другая информация 'подвала'.  
	</footer>
</body>
</html>

Пример 7.1. Использование элементов структурной разметки

7.2. 'Шапка' сайта. Тег <header>.

Элемент 'header' формируется парным тегом <header> и устанавливает заголовок ('шапку') веб-страницы или раздела. Если он выступает в роли 'шапки' сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример 7.1). Кроме того, он может формировать заголовки разделов (секций) html-страницы. Внутри данного элемента запрещается располагать элементы 'footer', 'address' или другие элементы 'header'.

7.3. 'Подвал' сайта. Тег <footer>.

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

7.4. Боковая панель сайта. Тег <aside>.

Элемент 'aside' формируется парным тегом <aside> и устанавливает боковую панель ('сайдбар') веб-страницы. Боковая панель предназначается для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым (см. пример 7.1). Например, боковая панель может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив или может содержать рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, повторимся, что удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым. При этом не рекомендуется, хоть и допускается, использовать элемент 'aside' в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент 'nav', который описывается в следующем пункте.

7.5. Создание блоков навигации. Тег <nav>.

Элемент (от англ. navigation) формируется парным тегом <nav> и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример 7.1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента 'address'. При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент 'nav' хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.

7.6. Создание тематических разделов. Тег <section>.

Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки 'section'. Формируется он соответствующим парным тегом <section>. Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример 7.1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы 'section' внутри других.

7.7. Выделение раздела для новости или статьи. Тег <article>.

Элемент 'article' выделяет часть веб-страницы, которую можно отнести к статье, новости, сообщению на форуме или записи комментария. Формируется элемент при помощи соответствующего парного тега <article>. При этом содержимое элемента должно быть связано с общим содержимым страницы, но иметь и свой собственный смысл. Разрешается использовать одни элементы 'article' внутри других (см. пример 7.1).

Контрольные вопросы и задания

  1. Перечислите основные элементы структурной разметки html-документа.
  2. Можно ли размещать элемент 'footer' внутри элемента 'header'?
  3. Какой раздел веб-страницы предназначен для хранения информации
    об авторских правах, контактной информации? Где он обычно расположен?
  4. Для чего используется элемент 'aside'?
  5. Какие ссылки рекомендуется размещать в элементе 'nav'?
  6. Разрешается ли размещать одни элементы 'section' внутри других?
  7. Для чего используется элемент 'article'?

Словарь новых английских слов

header [ˈhɛdə] – заголовок, верхний колонтитул.
footer [ˈfʊtə] – колонтитул внизу страницы.
aside [əˈsʌɪd] – нахождение в стороне.
news [njuːz] – новости.
navigation [navɪˈɡeɪʃ(ə)n] – навигация.
section [ˈsɛkʃ(ə)n] – секция, раздел.
article [ˈɑːtɪk(ə)l] – статья.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх