Содержание

Разметка HTML5

Стандартная разметка страницы HTML5

<!DOCTYPE HTML>
<html lang="ru">
  <head>
  <!-- Подключаемые файлы, метатеги, название страницы -->

  <!-- Кодировка страницы-->
  <meta charset="utf-8"/> 
  <title>Название страницы</title>
</head>
<body>
  <!-- Тело сайта, отвечает за вывод на страницу-->
  <header>
  <!-- Шапка сайта-->
  </header>
  <nav>
  <!-- Навигация -->
  </nav>
  <footer>
  <!-- Подвал сайта-->
  </footer>
</body>
</html>

header,nav,footer — новые теги HTML5, очень полезно их использовать, чтобы добиться лучшей SEO оптимизации сайта, они показывают поисковому роботу, где находится шапка,меню и подвал сайта.

SEO теги HTML5:

headerШапка сайта
navМеню сайта
footerПодвал сайта
sectionРазделы документа
asideБлок для сайдбара(размещения рубрик, ссылок, различных меток и любой информации)

Читайте — Таблица шрифтов html

Учебник HTML 5. Статья «Теги разметки страницы»

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

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

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

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

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

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

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

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

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

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

Тег <header>

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


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

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


Тег <nav>

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


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

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


Тег <aside>

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


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

Тег <article>

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

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


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

Тег <section>

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

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


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


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


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

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

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

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

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

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

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


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

Тег <footer>

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

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


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

Тег <main>

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

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

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


Разметка для сайта на 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">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<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.

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

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

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

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

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

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

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

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


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

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

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

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


<!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>

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

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

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

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

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


<!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>, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>.

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

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

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

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

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

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

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

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

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

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


Секреты использования семантической верстки в HTML5 | by Stas Bagretsov

В этой статье вы узнаете как пользоваться семантической разметкой в HTML5 и как это делать правильно.

Что такое семантический HTML5?

Если вы более менее знакомы с HTML, то вы должны знать про HTML теги, которые в большинстве своём используются для форматирования контента — они говорят браузеру как показывать контент на странице. Они не дают определение типу содержащегося контента или какую роль играет контент на странице.

Перевод статьи How to Use Semantic HTML5 for Document Structure — a guide.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Семантический HTML5 устраняет этот недостаток, определяя точные теги для пояснения четкой роли контента на странице. Эта дополнительная информация помогает роботам/индексаторам, таким как Google и Bing лучше понять какой контент важен, какой является второстепенным, какой используется для навигации и так далее. Добавляя семантические HTML теги на ваши страницы, вы даете дополнительную информацию, которая помогает поисковикам понимать роли и относительную важность разных частей ваших страниц.

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

А это семантические элементы. Они ясно определяют роль содержимого контента.

Почему надо это использовать?

Для внимательного пользователя обычно легко определить различные части веб-страницы с первого взгляда. Заголовки, меню и основной контент — все мгновенно, визуально очевидно. А теперь представьте, что вы слепы.

Google и Bing боты, если и не слепы, то имеют серьёзное ослабление со зрением. Для них визуальные пояснения феноменально сложно увидеть и понять.

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

Most important content — самый важный контент

Само по себе, использование HTML5 не произведет революции в работе вашего SEO. Как вы знаете, успешное SEO это совокупность многих и многих мелких деталей. И это одна из таких малых деталей, которая улучшит понимание контента вашего сайта со стороны любого поисковика, что заметно внесет вклад в ваши SEO усилия.

Смотря наперед, учитывая как будет развиваться поисковая оптимизация в предстоящие года, расширенный и связная коммуникация с этими системами будет одним из двух краеугольных камней вашей SEO/AEO стратегии.

Как всё это выглядит?

Примеры семантических HTML тегов включают в себя <nav>, <footer> и <section>. Так же есть гораздо больше примеров семантических HTML5 тегов, которые могут быть использованы, для примера <blockquote> и <em>, но в этой статье мы разберем только те семантические HTML теги, которые вам понадобятся для простого разделения контента страницы на разные части.

Следующие HTML5 теги могут использоваться вместо <div> тегов, чтобы разделить контент вашей страницы на определяемые части, каждая из которых будет выполнять конкретную роль. Как вы уже поняли, такие системы как Google и Bing любят это.

Ясная установка границ и подробная расстановка атрибутов ролей для каждой части контента, делает страницу горазду понятнее и легче для правильно индексации для Google и Bing.

Обратите внимание, что эти теги ведут себя как <div> теги, что говорит о том, что они могут заменить существующие <div> без влияния на общий макет. В большинстве случаев применение семантического HTML5 может быть легко применено нахождением подходящей пары <div> и </div> и её заменой.

Примеры семантического HTML5

Супер простой семантический HTML5 пример:

Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать — header, nav, main, footer.

Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.

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

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

Более сложные примеры

Использование секций и <article>:

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

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

В реальном же мире, семантическая разметка часто следует за основной разметкой более явно, чем в этом примере. Запомните главное правило: Секция формирует часть чего-то ещё, а <article> это что-то, что само по себе. Так же примите во внимание, что тут мы добавили секцию навигации в подвал. Логически, как и в шапке, подвал содержит элементы навигации.

Связанный Aside

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

Косвенно связанный aside

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

Тут мы определили несколько косвенно связанного контента на странице, за пределами основного <article> для контента. Тут мы определяем, что контент сбоку не напрямую связан с главной <article>. И этого вполне достаточно в большинстве случаев.

Наша финальная версия

Полезные советы

<section> vs. <article>

Это очень обсуждаемая тема. И нет четких правил о <sections> и <articles>, а их применение довольно гибкое само по себе. Они более менее похожи и могут быть использованы взаимозаменяемым способом в большинстве случаев. Только будьте уверены в том, что их использование логично и последовательно.

Личный совет. Я заметил, что вложенные секции внутри <article> контента, логичнее как для поисковика, так и для человека. Так HTML код легче читать для разработчика.

Вложенные элементы

Элементы могут вкладывать в себя другие элементы. Для примера, <article> может иметь свой собственный <header>, <footer>, <h3> и даже <nav> (анкоры как хороший пример). Я не дал иллюстрацию для этого «супер вложения» и этому есть своя причина. С точки зрения SEO нет реальной пользы уходить так глубоко в семантический HTML5.

Как упоминалось выше, для SEO целей, вам нужно сконцентрироваться на создании четкого и простой структуры.

Чего НЕ ДЕЛАТЬ

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

Этот необычайно простой пример просто дублирует визуализацию шаблона. Более чем бессмысленно, он определяет то, что страница состоит из 4 разных тем, вместо одной главной темы и 3-х подтем. Явно давая вводящую в заблуждение информацию для поисковиков, такая схема будет иметь негативное влияния для своего понимания в целом.

Следующие шаги?

Применение семантического HTML5 на ваших страницах значительно улучшит передачу информации для поисковиков. Так как они хотят то, о чем вообще ваш сайт. Они хотят чтобы вы ясно говорили им на понятном им языке и они хотят, чтобы вы обучали их. По-этому делайте это.

Общение

Общение с поисковиками (HTML5 имеет важную роль) это одна из двух колон долгосрочной SEO стратегии, которая приведет к успеху в мире где нам нужно будет оптимизироваться для поисковых систем. Есть много отличных вещей, которые вы можете сделать для улучшения подобного общения. И семантический HTML5 тому пример. Schema разметка это ещё один пример.

Надежность

Вторая колонна это надежность. Есть также клевые вещи, делая которые вы усилите доверие к себе. Все SEO и AEO сходятся к общению и надежности.

В завершение: памятка для хорошей HTML5 SEO разметки

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

HTML5 Семантическая вёрстка

Всю жизнь человек старается делать все согласно здравой логики. Если он видит красную стену, он так и скажет: “я вижу красную стену”. Никто не будет говорить вместо этого о “розовом потолке”, если его там тоже не будет. Видишь что-то и называешь это своим именем, — это семантика. Существует даже целая наука в лингвистике, которая это изучает.

Но не только подобное есть в языковедении. В веб-разработке тоже присутствует понятие “семантической верстки”. И вот с теперь, мы поговорим об этом более подробно.

Для начала правильно будет ответить на вопрос:

«Зачем нужна семантическая разметка страниц?»

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

HTML5 и семантика. Что нового?

Даже сегодня еще можно встретить множество страниц с таким HTML-кодом:

<div id = «nav»> <div class = «header»> <div id = «footer»>”. Он используется для обозначения навигации хедера и футера.

<html>

<html>

  <head>

      <title>…</title>

  </head>

 <body>

   <div>… </div>

   <div> …</div>

   <div> … </div>

 </body>

</html>

HTML5 для тех же целей предлагает нам новые семантические элементы: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.

И даже сегодня при, уже казалось бы, “развязанных руках”  у разработчиков, SEO специалисты не могут получить 100% семантически валидной верстки. В основном правильно используют <footer>, <header>, <nav>, реже или неправильно используют  <aside> <main>  <section>. Остальные элементы если не совсем редко, то вообще не используют.

Пример правильной семантической разметки HTML5:

<html>

    <head>

      <title>…</title>

 </head>

 <body>

      <header>…</header>

      <nav>…</nav>

      <main>…</main>

      <footer> … </footer>

 </body>

</html>


Тег

<nav>

      <nav>
 <a href=»#»>…</a>
 <a href=»#»>…</a>
 <a href=»#»>…</a>

      </nav>

Используется для уточнения набора ссылок навигации по сайту.

ВАЖНО! Не все наборы ссылок нужно оборачивать тегом <nav>. Если такие элементы как, к примеру <footer> и <header> справляются с положенными на них задачами в единичном экземпляре, то <nav> можно использовать больше одного раза на страницу. Можно размещать в <header>, но зачастую выносят после него.

<body>

        <article>
   <header>…</header>
   <nav>…</nav>

         <aside>…</aside>
   <main>…</main>
   <footer> … </footer>

        </article>
</body>


Основной контент

     <main>
   <h2>…</h2> 
   <p>…</p> 
   <section> 
     <h3>…</h3> 
     <p>…</p>    

         </section>

         <section>

         <h3>…</h3>

         <p>…</p>

        </section>

        <section>

        <h3>…</h3>

        <p>…</p>

   </section>

</main>

Элемент <article> представляет из себя независимую или самостоятельную контентную композицию многоразового использования. Он может быть, к примеру, постом на форуме, записью в блоге, газетной статьей, отзывом пользователя или отдельным виджетом. Разрешается делать вложения один <article> в другой. Однако, в таком случае нужно, чтобы дочерние  элементы несли в себе контент, который семантически связан с родителем. Например, цепочка комментариев.

Когда основное наполнение страницы является самостоятельным элементом (например виджет), то его можно “обернуть” в  <article>. Но в большинстве случаев это будет технически лишним.

Элемент <section> является ничем иным  как блоком страницы или тематической группой контента обычно с заголовком <h> группы.

Когда вам нужен элемент только для стилизации или сценария скрипта, то рекомендуется использовать <div>  вместо <section>.

Элемент <aide> является дополнительным не самостоятельным  разделом страницы который по смыслу привязан к основному контенту. К примеру можно использовать как выносную цитату, боковые панели для рекламы, фильтров и сортировок товаров или организации навигации.  Нецелесообразно использовать элемент как основной контент. Элемент <main> можно использовать как основной контейнер для контента страницы. Хотя ограничений, что касаются количества даных элементов на странице нет, разработчики рекомендуют использовать его в одиночном количестве.

<details> — выпадающее меню или  дополнительные детали которые юзер может скрыть или показать.

<summary> используется как видимый заголовок элемента <details> по клику на который можно показать/спрятать его.

<details>
       <summary>Copyright 1999-2014.</summary>
         <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>


 

<figure> и <figcaption>

<figure>
       <img src=»pic.jpg» alt=»<span>The Picture»>
       <figcaption>The Picture 2009</figcaption>
</figure>

Таким образом, элементы могут использоваться для подписи картинок, диаграмм,  таблиц итд.

<mark> используется для выделения важного текста.

Тег <time> выделяет дату / время читаемую человеком. Также может использоваться с атрибутом datetime для уточнения времени машинно-читабельным способом. Например, клиент-программа сможет добавить напоминание или записать дату рождения в календарь пользователя автоматически. А поисковые системы смогут выдавать более глубокие результаты поиска.

<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime=»2008-02-14 20:00″>Valentines day</time>.</p>

Подводя итог под написанным выше, можно констатировать, что все элементы важны по-своему. Их нужно знать и использовать в соответствии с предназначением. Огромное количество умов по всему миру специально придумывают новые теги и варианты их использования, чтоб и разработчики и пользователи получили более качественный продукт. Однако, в погоне за новыми технологиями, не стоит забывать о своеобразности браузеров! Некоторые из них “не знают” новых (а иногда — и старых) тегов и выводят информацию не корректно.

HTML5 Формы: разметка

От автора: Это первая часть серии из трех частей о веб-формах на HTML5. Мы раскроем основы разметки в этой статье, прежде чем перейти к стилизации и API JavaScript валидации на клиенте. Я рекомендую прочесть эту статью даже если вы уже знакомы с формами – там много атрибутов и приемов.

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

HTML формы могут быть распространены, но они являются неотъемлемой частью большинства сайтов и приложений. В четвертой версии HTML поля ввода были ограничены списком ниже:

input type=»text»

input type=»checkbox»

input type=»radio»

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

input type=»password»

input type=»hidden» — для данных, которые пользователь не может видеть

input type=»file» — для загрузок

textarea — для текста большего размера

select — для выпадающих списков

button — в основном используется для отправки формы, хотя input type=»submit» и input type=»image» также могут использоваться.

Также:

возможности стилей CSS были ограничены,

настраиваемые элементы управления и цветовые селекторы, должны были задаваться в коде, и

валидация на стороне клиента требовала JavaScript.

Дополнительные типы полей ввода в HTML5

Было представлено множество новых типов input. Они предоставляют нативную помощь при вводе и валидацию без использования кода на JavaScript:

email: ввод email-адреса

tel: ввод номера телефона – строгих ограничений по синтаксису нет, но разрывы строк будут удалены

url: ввод ссылки

search: поле поиска с удалением разрывов строк

number: число со знаками после запятой

range: элемент управления для ввода приблизительной величины, обычно выглядит как слайдер

date: ввод числа, месяца и года

datetime: ввод числа, месяца, года, часа, минуты, секунды и микросекунды в зависимости от выставленного часового пояса

datetime-local: ввод даты и времени без часового пояса

month: ввод месяца и года без часового пояса

week: ввод номера недели без часового пояса

time: ввод времени без часового пояса

color: позволяет выбрать цвет

Атрибуты полей ввода

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

<input type=»email» name=»email» required />

<input type=»email» name=»email» required />

Хотя вы можете добавлять их, если вы предпочитаете более строгий синтаксис, похожий на XHTML

<input type=»email» name=»email» required=»required» />

<input type=»email» name=»email» required=»required» />

name: поле ввода имени

value: начальное значение

checked: ставит флажок или включает переключатель

maxlength: максимальная длина введенной строки. Также может применяться к элементам textarea в HTML5

minlength: минимальная длина введенной строки. Это задокументировано, но на момент написания, поддержка браузеров плохая и этот атрибут вызывает ошибку валидаторов. Альтернативное решение – это pattern=».{3,}», что заставит поле ввода иметь хотя бы три символа

placeholder: текст подсказки, показываемый в поле ввода

autofocus: фокус будет на этом (неспрятанном) поле при загрузке страницы

required: обозначает, что значение должно быть введено

pattern: удостоверяет, что введенное значение соответствует образцу

min: минимальное допустимое значение (числа и дата)

max: максимальное допустимое значение (числа и дата)

step: шаг значения. Например, input type=»number» min=»10″ max=»19″ step=»2″ разрешит только значения 0, 12, 14, 16 или 18.

autocomplete: предоставляет браузеру подсказку для автозаполнения, например, «расчетный имейл» или может быть включено и выключено

inputmode: определяет механизм ввода. Самые полезные настройки:

verbatim — дословный ввод, такой как имена пользователей, latin — латинское написание, такое как поля ввода, latin-name — имена, начинающиеся с, latin-prose — строчное содержимое, такое как сообщения, твиты, и т.д., numeric — числовое значение, где не подходят значение number или range, например номер кредитной карты

size: размер в символах для полей ввода text или password или в пискелях для полей ввода типов email, tel, url или

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

rows: количество текстовых рядов (только для textarea)

cols: количество текста в колонках (только для textarea)

list: указывает на набор вариантов из datalist

spellcheck: принимает значение true и false для включения/выключения проверки правописания

form: ID формы, которой принадлежит это поле ввода. В целом, поля ввода должны быть вложены в форму, но этот атрибут позволяет полям ввода находиться в любом месте страницы

formaction: указывает ссылку для переопределения действия формы при отправке (только для кнопок отправки/изображений)

formmethod: указывает GET или POST для переопределения метода формы (только для кнопок отправки/изображений)

formenctype: определяет тип контента при отправке (text/plain, multipart/form-data илиapplication/x-www-form-urlencoded только для кнопок отправки/изображений)

formtarget: определяет целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки/изображений)

readonly: значение поля ввода не может быть изменено, хотя оно будет валидировано и отправлено

disabled: отключает поле ввода – не будет ни валидации ни отправки

Обратите внимание, поля date всегда должны использовать формат YYYY-MM-DD (год-месяц-день) для атрибутов value, min и max. Следующий пример делает обязательным ввод имейла, который заканчивается на @mysite.com и имеет фокус при загрузке страницы:

<input type=»email» name=»login» pattern=»@mysite\.com$» autocomplete=»email» autofocus required />

<input

  type=»email»

  name=»login»

  pattern=»@mysite\.com$»

  autocomplete=»email»

  autofocus

  required />

Списки данных

Список данных содержит набор подходящих значений для любого поля ввода, например:

<input type=»text» name=»browser» list=»browsers» /> <datalist> <option value=»Chrome» /> <option value=»Firefox» /> <option value=»Internet Explorer» /> <option value=»Safari» /> <option value=»Opera» /> </datalist>

<input type=»text» name=»browser» list=»browsers» />

<datalist>

  <option value=»Chrome» />

  <option value=»Firefox» />

  <option value=»Internet Explorer» />

  <option value=»Safari» />

  <option value=»Opera» />

</datalist>

Когда атрибут datalist поддерживается, браузер предоставляет варианты автозаполнения, когда вы начинаете печатать. Полный список обычно показывается при двойном клике на элементе управления или при клике на стрелку вниз (если она показывается). В отличие от стандартного выпадающего элемента select, у пользователя есть возможность переопределить предоставленные значения и записать свое собственное.

Есть возможность задать значения и текст в качестве стандартных вариантов для элемента select, например:

<option value=»IE»>Internet Explorer</option>

<option value=»IE»>Internet Explorer</option>

Но имейте ввиду, что реализация отличается. Например, Firefox автоматически заполняет сам текст (Internet Explorer) в то время как Хром предпочитает значение (IE) и показывает текст серым:

Списки данных могут вызываться с помощью JavaScript если вы хотите подставлять данные AJAXом.

Отключение валидации

Валидация всей формы может быть отключена с помощью атрибута novalidate для элемента form. Или же, вы можете добавить атрибут formnovalidate к кнопке отправки/изображению. Помните, что атрибут disabled отключает валидацию для поля ввода.

Поля вывода

Хотя мы обсуждаем в первую очередь поля ввода, HTML5 также предоставляет поля вывода только для чтения:

output — результат вычисления или действия пользователя

progress — полоза загрузки (атрибуты value и max определяют статус)

meter — шкала, которая может изменяться от красного, желтого до в зависимости от значения, заданного атрибутам value, min, max, low, high и optimum

Разделение и маркирование полей ввода

Спецификация форм whatwg.org утверждает:

Каждый участок формы считается параграфом, и обычно отделяется от других элементов с помощью элементов p

Интересно, я обычно использую div, хотя и сомневаюсь, что это имеет большое значение с точки зрения семантики. Хотя тэг p короче, хотя возможно вам понадобится класс для изменения внешних отступов. Что более важно, вам следует использовать элементы label или вокруг или за самим полем ввода, применяя атрибут for с идентификатором поля ввода, например:

<p> <p> <label for=»firstname»>First name</label> <input type=»text» name=»firstname» placeholder=»first name» required maxlength=»20″ /> </p> <p> <label for=»lastname»>Last name</label> <input type=»text» name=»lastname» placeholder=»last name» required maxlength=»20″ /> </p> <p> <label for=»email»>Email address</label> <input type=»email» name=»email» placeholder=»[email protected]» required maxlength=»50″ /> </p> <p> <label> <input type=»checkbox» name=»newsletter» /> Sign up for our newsletter </label> </p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<p>

  <p>

  <label for=»firstname»>First name</label>

  <input type=»text» name=»firstname» placeholder=»first name» required maxlength=»20″ />

</p>

  

<p>

  <label for=»lastname»>Last name</label>

  <input type=»text» name=»lastname» placeholder=»last name» required maxlength=»20″ />

</p>

  

<p>

  <label for=»email»>Email address</label>

  <input type=»email» name=»email» placeholder=»[email protected]» required maxlength=»50″ />

</p>

  

<p>

  <label>

    <input type=»checkbox» name=»newsletter» />

    Sign up for our newsletter

  </label>

</p>

Отсутствие стандартов для элементов управления

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

Поддержка браузерами

Не каждый тип поля ввода или атрибут поддерживается браузерами. В целом, большинство современных браузеров, начиная с IE10, поддерживают такие типы, как email и number. Однако, поля ввода, работающие с датой, на момент написания поддерживаются только браузерами на основе движков Blink и Webkit. Браузеры отобразят их как обычные текстовые поля и проигнорируют атрибуты, если их значения не поддерживаются.

Всегда используйте правильный тип!

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

Стандартный тип поля ввода date всегда возвращает значение в формате YYYY-MM-DD (год-месяц-день), независимо от того, как поле выбора даты выглядит в вашем местоположении.

IE и Firefox будут отображать стандартное поле ввода text, но ваши пользователи должны будут вводить данные в формате MM-DD-YYYY для США и DD-MM-YYYY для Европы.

Поле выбора даты на JavaScript, такое как предоставленное jQuery UI позволяет задавать собственный формат или даже YYYY-MM-DD для последовательности – но вы не можете быть уверены в том, что JavaScript включен.

Простое решение – это отказаться от использования поля ввода date и вернуться к типу text и реализовать свой собственный выбор даты. Не делайте этого. Вы никогда не создадите свое собственное поле ввода данных, которое будет работать на всех устройствах и для любых разрешений экрана, поддерживает клавиатуру, мышь и сенсорную панель и продолжает работать с отключенным JavaScript. В частности, мобильные браузеры часто находятся впереди своих настольных собратьев и реализуют хорошие сенсорные элементы управления.

Будущее за типами полей ввода HTML5. Используйте их и, если необходимо, добавляйте полизаполнение в JavaScript в тех случаях, когда необходима кросс-браузерность. Но помните о…

Валидация на стороне сервера

Валидация браузерами не гарантирована. Если даже вы заставите всех использовать последнюю версию Chrome, вы никогда не сможете предотвратить нижеследующее:

баги браузера или ошибки JavaScript, пропускающие невалидные данные

пользователь может изменить ваш HTML код и скрипты, используя инструменты браузера

отправку из систем за пределами вашего контроля,

или подмену данных между браузером и вашим сервером (однозначно через HTTP).

Валидация на клиенте никогда не была и не будет заменой для серверной валидации. Валидации данных на стороне сервера необходима. На клиенте ее неплохо иметь.

Наконец, помните, что дату можно получать в формате YYYY-MM-DD или любом другом, который вы зададите MM-DD-YYYY, DD-MM-YYYY, и т.д.). Проверяйте четыре первые символа или используйте родные методы парсинга в языке/фреймворке при необходимости.

Мы рассмотрели многое в этой статье, в следующей – мы обратимся к свойствам CSS, относящимся к формам.

Автор: Craig Buckler

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Семантическая разметка и структура документа

Семантическая разметка – создание осмысленной и логически связанной информационной структуры содержимого (контента) html-документа в соответствии с семантикой (предназначением) html-элементов, их тегов и атрибутов.

Информационно-осознанная структурная семантическая разметка html-документа легко и просто сменила классическую косметическую информационно-безликую блочную div-верстку, придав осмысленность структуре подаваемой информации. Простота семантической разметки html-документа объясняется фактом появления в спецификации HTML5 ряда целевых и наполненных смыслом тегов для оборачивания важных элементов по информационному содержимому (контенту), а не по визуальному представлению страницы в браузере.

  1. Назначение семантической разметки
  2. Пользователи семантики – пауки и ридеры
  3. Структура HTML-документа
  4. Семантическая структура HTML-документа
  5. Вёрстка семантического шаблона (макета)
  6. Реклама в семантике страницы
Назначение семантической разметки

Семантическая разметка несет поисковым роботам, браузерам и программам-ридерам (чтецам) информацию о типе, важности и акцентировании контентного содержания html-документа для облегчения его машинной обработки.

Семантическая разметка не имеет отношения к внешнему виду (представлению) страницы на экране, для визуализации html-элементов подключаются стилевые правила.

Пользователи семантики – пауки, обозреватели, ридеры

Поисковые пауки особенно «полюбляют» семантическую структуру веб-документа, помогающую определиться с индексацией контента (содержащегося материала). Не отстают от поисковиков в любви к html-семантике браузеры и ридеры (обозреватели и чтецы), часто скрывающие в режиме чтения колонтитулы страницы (header и footer), навигационные (nav) и связанные (aside) элементы.

Структура HTML-документа

Традиционно, код веб-страницы в HTML5 начинается элементом <!DOCTYPE html>, определяющим тип документа. Единственный и неповторимый тег html с атрибутом указания языка содержащегося контента lang=»ru» обрамляет два основных элемента html-документа: <head> – блок неотображаемой на экране служебной информации и <body> – видимая в браузере часть веб-страницы. Между тегами <body></body> находится тема семантической разметки.

1.<!DOCTYPE html>
2. <html lang="ru">
3.  <head>
4.   Служебная информация
5.  </head>
6.  <body>
7.   Семантическая разметка контента
8.  </body>
9. </html>
Семантическая структура документа

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

<header>
Вводная информация документа. Сквозной элемент, отображающийся на всех сайто-страницах возглавляемого домена. Хедер (header) – визитная карточка документа, его «шапка», верхний колонтитул. Служит идентификатором контента в области принадлежности сайту, разделу, категории, домену. Обязательно содержит логотип сайта и заголовок страницы h2. Допускается размещение в хедере элементов сайтовой навигации.
<main>
Контейнер в <body> основного уникального содержимого, не допускающего дублирование на сайте. Текст, рисунки, видео, аудио и т.п., в <main> – исключительно в единственном и неповторимом экземпляре в пределах сайта (блога, домена).
Скромно умалчиваемый в практических руководствах, чисто! семантический элемент <main> – главное действующее лицо семантической разметки. <main> не содержит сквозные типовые повторяющиеся блоки страниц: шапку сайта (хедер), подвал (футер), сайтовую навигацию (нав), боковые панели (<div>), формы для поиска, регистрации, входа и т.д. Содержимое <main> индексируется поисковыми системами в первую очередь. В документе (на странице) – исключительно один элемент <main>. <main> не вкладывается в другие семантические элементы: <article>, <aside>, <footer>, <header>, <nav> …
Боковая панель (sidebar) в <main>
Возлелеянная яростной div-ной версткой, сквозная боковая панель навигации не входит в элемент <main> ни в каком виде. Горячо любимый рунетом сквозной боковой, повторяющийся на всех страницах, блок не получил собственного семантического тега HTML5, не предусмотрен семантической разметкой и служит исключительно удобству (юзабилити) юзера, отвлекая его от настоящих семантических элементов навигации. С большой нужды, боковая панель веб-страницы верстается div-ом, расположенным за пределами структуры вложений элемента <main> и визуально выравнивается стилями.
Контентные html-элементы внутри <main> обрамляются тегами соответствующего назначения:
картинки – <img>, <picture>, <figure> …;
заголовки, тексты, списки и цитаты – <h3 … h6>, <р>, <ul>, <ol>, <strong> и <em> вместо <b> и <i>, <blockquote> …;
видео – <video> …;
аудио – <audio> и т.д.
Безликий элемент <div> в <main> – крупная дичь исключительно визуального назначения!
<footer>
Нижний колонтитул веб-документа, «подвал» статьи (сайта, раздела), содержит дополнительную информацию технического или правового характера: автор, контакт, копирайт, ссылки доп.меню, кнопка «Вверх» и т.д
<nav>
Блок основных приоритетных ссылок навигации, обычно расположен в колонтитуле страницы (хедере или футере) или между ними.
Семантическая структура html-документа
1. <header>
2.  <h2>Заголовок сайта</h2>
3.  <nav>
4.   Ссылки (сайто- навигация)
5.  </nav>
6. </header>
7. <main>
8.  Контент (неповторимый)
9. </main>
10. <footer>
11.  Копирайт, контакт, «про автора»
12. </footer>
Вёрстка семантического шаблона (макета)

Семантический шаблон (макет) веб-страницы – минимализм, лаконичность и логика, позволяющая избежать дублирования материала. Первым делом отказался от многочисленных раскрашенных менюшек и тупого поиска. CSS-трюки (закруглюшки, тенюшки, плюшки и финтиклюшки) – в прошлом, блок основной сайтовой навигации (<nav>) – одинокий воин в хедере семантической страницы.

Абзацы-черновики:

 
Семантические теги
<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Реклама в семантике страницы

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

Сердца почтенных юзеров наполнились теплотой термина «семантическая разметка», подаваемого под соусом некоего магического продукта, способного вознести поисковую индексацию сайта (блога) до невиданных высот. Трепетное отношение к новорождённым html-тегам сменилось легким недоумением, переросшим в банальный профессионализм контентных интернет-авторов и верстальщиков шаблонов веб-страниц.

Семантическая разметка HTML – не панацея, свод соблюдаемых правил оформления интернет-документа, не больше и не меньше. Хорошим тоном современности считается обозначение соответствующими html-тегами вида и степени важности подаваемой информации.

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

Элемент <р> (абзац) – чисто «литературный герой». Не правильное трактование перевода с инглиш – параграф. Не используемый верстальщиками в сайтовых шаблонах тег, предназначенный исключительно для отображения структуры контентного текстового содержания.

Игнорирование использования семантических HTML-тегов непременно приводит к падению общего рейтинга веб-страницы в глазах поисковиков, уделяющих пристальное внимание качеству индексируемого материала. Использование семантических HTML-тегов в соответствии с их семантикой (назначением) – обязательное условие повышения конкурентоспособности веб-документа.

Источник: HTML5 Semantic Tags: What Are They and How To Use Them!
Перевод источника: Секреты использования семантической вёрстки в HTML5

Теги html5 и основные структурные элементы разметки: header, nav, aside

Тег header

Тег header в html5 является первым элементом на странице. Он должен включать в себя логотип со ссылкой на главную страницу, а также название сайта или основной заголовок. К примеру:


<header>
    <a href="/"><img src=site-logo.png alt="My site">
    <h2>Here is my site's best slogan</h2>
    </a>
</header>

Элемент разметки nav в html5

Тег разметки nav используется в html5 для обозначения панели навигации по сайту. Зачастую в него заключают основное меню сайта и боковые навигационные панели, а также блок ссылок в футере сайта. Внутри элемента nav часто ставят список ul или ol с набором ссылок. Тег nav не заменяет собой элементы ol или ul, а обрамляет их. Поэтому устаревшие браузеры, не поддерживающие этот элемент, просто отобразят панель навигации как обычный список. Например так:


<nav> <ul>
        <li>Menu</li>
        <li><a href="/html5-courses.html">HTML5 courses</a></li>
        <li><a href="/css3-courses.html">CSS3 courses</a></li>
        <li><a href="/contacts.html">Contacts</a></li>
</ul> </nav>

Тег main в html5

Для разметки основной части контента страницы в html5 используют тег main:


<main role="main">
  <article>
    <h2>Title article 1</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
  <article>
    <h2>Title article 2</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</main>

Тег article

Тег article в html5 может применяться для обозначения статьи, новости, заметки в блоге, руководства или даже видеозаписи с текстовой расшифровкой. Также этот тег применяют для карт и веб-виджетов многократного использования (Google Maps, Яндекс Карты и т.д.). Простой пример использования элемента article:


<article>
    <h2>My article</h2>
    <p>Lorem ipsum dolor sit amet.</p>
</article>

html5 элемент aside

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


<aside>
  <nav>
    <h3>Pages</h3>
    <ul>
      <li><a href="/about.html">About this site</a></li>
      <li><a href="/contact-us.html">Contact us</a></li>
    </ul>
    <h3>Categories</h3>
    <ul>
      <li><a href="/html5.html">HTML5 tags</a></li>
      <li><a href="/css3.html">CSS3 features</a></li>
    </ul>
    <h3>Recent comments</h3>
    <ul>
      <li>...</li>
    </ul>
  </nav>
</aside>

Тег footer в разметке html5

С тегом footer обычно все просто – он размещается в самом низу страницы. В футер выносятся ссылки на политику конфиденциальности, правила пользования сайтом, авторские права, копирайт, контакты и прочие подобные ссылки. Для правильного оформления всей этой информации рекомендуется внутри элемента footer использовать элемент nav. К примеру так:


<footer>
  <nav>
    <a href="/contact-us.html">Contact us</a>.
    <a href="/terms.html">Terms of service</a>
  </nav>
  <p>Copyright © by me</p>
</footer>

Применяя теги html5 для структурной разметки сайта помните, что они поддерживаются не во всех версиях IE. Тем не менее, есть способ эмулировать поддержку элементов html5 в старых версиях Internet Explorer.

Справочник по элементам HTML — HTML: язык разметки гипертекста

HTML-элемент (или элемент привязки ) с его атрибутом href создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес.
HTML-элемент представляет собой аббревиатуру или акроним; необязательный заголовок атрибут может предоставить расширение или описание для сокращения.
HTML-элемент используется для привлечения внимания читателя к содержимому элемента, которому в противном случае не придается особого значения. Ранее это называлось элементом Boldface, и большинство браузеров по-прежнему выделяют текст жирным шрифтом. Однако не следует использовать для стилизации текста; вместо этого вы должны использовать свойство CSS font-weight для создания полужирного текста или элемент strong , чтобы указать, что текст имеет особое значение.
HTML-элемент сообщает двунаправленному алгоритму браузера обрабатывать содержащийся в нем текст отдельно от окружающего его текста. Это особенно полезно, когда веб-сайт динамически вставляет некоторый текст и не знает направленность вставляемого текста.
HTML-элемент переопределяет текущую направленность текста, поэтому текст внутри отображается в другом направлении.

HTML-элемент
создает разрыв строки в тексте (возврат каретки). Это полезно для написания стихотворения или обращения, где разделение строк имеет большое значение.
<город> HTML-элемент используется для описания ссылки на цитируемое творческое произведение и должен включать название этого произведения. Ссылка может быть в сокращенной форме в соответствии с соответствующими контексту соглашениями, относящимися к метаданным цитирования.
<код> HTML-элемент отображает свое содержимое в стиле, предназначенном для обозначения того, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием моноширинного шрифта пользовательского агента по умолчанию.
<данные> HTML-элемент связывает заданный фрагмент контента с машиночитаемым переводом.Если содержимое связано со временем или датой, необходимо использовать элемент time .
HTML-элемент используется для обозначения термина, определяемого в контексте фразы или предложения определения. Элемент p , пара dt / dd или элемент section , который является ближайшим предком , считается определением термина.
HTML-элемент отмечает текст с ударением. Элемент может быть вложенным, причем каждый уровень вложенности указывает на большую степень выделения.
HTML-элемент представляет собой диапазон текста, который по какой-то причине отличается от обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и другие.Исторически они были представлены с использованием курсивного шрифта, который является исходным источником наименования этого элемента.
<КБД> HTML-элемент представляет собой диапазон встроенного текста, обозначающего текстовый ввод пользователя с клавиатуры, голосового ввода или любого другого устройства ввода текста. По соглашению пользовательский агент по умолчанию отображает содержимое элемента с использованием моноширинного шрифта по умолчанию, хотя это не предусмотрено стандартом HTML.
<марка> HTML-элемент представляет текст, который обозначен , помеченным как , или , выделенным как для справок или обозначений, из-за релевантности или важности отмеченного отрывка во включающем контексте.
HTML-элемент указывает, что заключенный текст представляет собой короткую встроенную цитату.Большинство современных браузеров реализуют это, заключая текст в кавычки. Этот элемент предназначен для коротких цитат, не требующих разрывов абзаца; для длинных цитат используйте элемент blockquote .
HTML-элемент используется для предоставления резервных скобок для браузеров, которые не поддерживают отображение рубиновых аннотаций с использованием элемента ruby ​​. Один элемент должен заключать каждую из открывающих и закрывающих круглых скобок, которые заключают элемент rt , содержащий текст аннотации.
HTML-элемент определяет рубиновый текстовый компонент рубиновой аннотации, который используется для предоставления информации о произношении, переводе или транслитерации для восточноазиатской типографии. Элемент всегда должен содержаться в элементе ruby ​​.
<рубин> HTML-элемент представляет небольшие аннотации, которые отображаются выше, ниже или рядом с основным текстом, обычно используются для отображения произношения восточноазиатских символов.Его также можно использовать для аннотирования других типов текста, но это менее распространено.
HTML-элемент отображает текст с зачеркиванием или сквозной линией. Используйте элемент для представления вещей, которые больше не актуальны или не точны. Однако не подходит для обозначения редактирования документа; для этого используйте соответственно элементы del и ins .
HTML-элемент используется для включения встроенного текста, который представляет собой образец (или цитируемый) вывод компьютерной программы. Его содержимое обычно отображается с использованием моноширинного шрифта браузера по умолчанию (например, Courier или Lucida Console).
<маленький> HTML-элемент представляет собой боковые комментарии и мелкий шрифт, например текст об авторском праве и юридический текст, независимо от его стилизованного представления.По умолчанию текст внутри него отображается на один размер меньше, например, от small до x-small .
HTML-элемент - это общий встроенный контейнер для фразового содержания, который по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id ) или потому, что они имеют общие значения атрибутов, например lang .Его следует использовать только тогда, когда никакой другой семантический элемент не подходит. очень похож на элемент div , но div является элементом уровня блока, тогда как является встроенным элементом.
HTML-элемент указывает на то, что его содержимое имеет большую важность, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.
HTML-элемент определяет встроенный текст, который должен отображаться как нижний индекс исключительно по типографским причинам. Подстрочные индексы обычно отображаются с пониженной базовой линией с использованием более мелкого текста.
HTML-элемент определяет встроенный текст, который должен отображаться как надстрочный индекс исключительно по типографским причинам.Верхние индексы обычно отображаются с приподнятой базовой линией с использованием более мелкого текста.
<время> HTML-элемент представляет определенный период времени. Он может включать в себя атрибут datetime для перевода дат в машиночитаемый формат, что позволяет улучшить результаты поисковой системы или настраиваемые функции, такие как напоминания.
HTML-элемент представляет собой диапазон встроенного текста, который должен отображаться таким образом, чтобы указывать на то, что он имеет нетекстовую аннотацию.По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.
HTML-элемент представляет имя переменной в математическом выражении или контексте программирования. Обычно он отображается с использованием курсивной версии текущего шрифта, хотя это поведение зависит от браузера.
HTML-элемент представляет возможность разрыва слова - позицию в тексте, где браузер может по желанию разорвать строку, хотя в противном случае его правила разрыва строки не создавали бы разрыв в этом месте.

Что это такое и как ими пользоваться!

Что такое семантический HTML5?

Если вы немного разбираетесь в HTML, вы знаете, что теги HTML (в основном) используются для форматирования содержимого - эти теги сообщают браузеру, как отображать содержимое на странице. Они не указывают, какой тип контента они содержат или какую роль играет на странице.

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

Добавляя семантические HTML-теги на свои страницы, вы предоставляете дополнительную информацию, которая помогает Google и Bing понять роли и относительную важность различных частей вашей страницы.

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

Примеры:

теги div и span. Несемантический / общий.

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

Примеры семантических тегов.

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

Для зрячих пользователей, когда страница хорошо оформлена визуально, легко идентифицировать различные части веб-страницы с первого взгляда. Заголовки, меню и (надеюсь) основное содержимое сразу визуально видны. А теперь представьте, что вы слепы.

Боты (пауки) Google и Bing если не слепые, то серьезно ослабляют зрение. Им феноменально трудно увидеть и понять визуальные подсказки - им нужна ваша помощь.

Если вы сможете успешно сообщить Google и Bing, какая часть страницы является верхним колонтитулом, а какая нижним колонтитулом, а какая предназначена для навигации, они будут вам благодарны.Что наиболее важно, говоря им, какой контент является наиболее важным, вы даете им четкую инструкцию по определению приоритетов этого контента.

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

Вот наша страничка.

Семантический HTML5 - одна из тех, казалось бы, мелких деталей, которая затрагивает самую суть индексации, которую часто недооценивают. Точно реализованный семантический HTML5 дает большую помощь алгоритмам индексации, используемым роботами Googlebot и Bingbot. Это дает им лучшее понимание (и уверенность в их понимании) вашего контента, что помогает им лучше индексировать ваш контент, что, в свою очередь, помогает вашим усилиям по SEO.

Ввод для поисковых систем

Фабрис Канель из Bing в своем выступлении в моем подкасте заявил, что это так - страницы с правильно реализованным семантическим HTML5 имеют преимущество в SEO перед теми, у которых его нет.Мартин Сплитт из Google подтвердил это во время саммита SEJ в июне 2020 года.

Когда Googlebot и Bingbot сохраняют просканированные страницы в своем индексе, они добавляют обширный уровень аннотаций. Это тот аннотативный слой, который используют алгоритмы ранжирования для поиска и извлечения контента с отдельных веб-страниц. Более подробные и точные аннотации улучшают поиск и увеличивают шансы того, что любой конкретный фрагмент контента будет рассмотрен алгоритмами для ранжирования.

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

Некоторые из семантических тем HTML5, которые мы рассмотрим

Примеры семантических тегов HTML включают