Main html5: Тег | htmlbook.ru

— HTML | MDN

HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент.

Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

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

• управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты crossorigin и referrerpolicy;
• настройка внутреннего размера (en-US) с использованием width и height, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
• адаптивные изображения рекомендуется использовать с атрибутами sizes и srcset (смотрите также элемент <picture> и наше руководство «Адаптивные изображения»).

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

Firefox

Форматы изображений, поддерживаемые Firefox:

• JPEG;
• GIF, включая анимированные GIF;
• PNG;
• APNG;
• SVG;
• BMP;
• BMP ICO;
• PNG ICO.

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror был настроен на обработку события error (en-US), тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

• атрибут src пустой или null;
• указанный URL в атрибуте src совпадает с URL страницы, на которой в данный момент находится пользователь;
• указанное изображение каким-то образом повреждено, что препятствует его загрузке;
• метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <img> не было указано никаких размеров;
• указанное изображение имеет формат, который не поддерживается пользовательским агентом.

К этому элементу применимы глобальные атрибуты.

alt

Этим атрибутом задаётся альтернативное текстовое описание изображения.> Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте

alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt.> Примечание: Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt="") указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).

crossorigin

Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе <canvas> не будучи «испорченными». Допустимые значения:* anonymous: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок

Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено;

• use-credentials: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено.
  Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка Origin), ограничивая его использование в элементе <canvas>. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

decoding

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:* sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;

• async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
• auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.

height

Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.

importance Экспериментальная возможность

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:* auto: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;

• high: Указывает браузеру, что изображение имеет высокий приоритет;
• low: Указывает браузеру, что изображение имеет низкий приоритет.

intrinsicsize Экспериментальная возможность

Этот атрибут говорит браузеру игнорировать действительный внутренний размер

(en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а narutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.

ismap

Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.> Примечание: Этот атрибут разрешён, только если элемент <img>

является потомком элемента <a> с валидным (соответствующий требованиям) атрибутом href.

loading Экспериментальная возможность

Указывает на то, как браузер должен загрузить изображение:* eager: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).

• lazy: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.>
  Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.

referrerpolicy Экспериментальная возможность

Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:* no-referrer: Заголовок Referer не будет отправлен;

• no-referrer-when-downgrade: Заголовок Referer не отправляется, когда происходит переход к источнику без TLS (HTTPS). Это поведение по умолчанию для пользовательских агентов, если не указано иное;
• origin: Заголовок Referer будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;
• origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;
• unsafe-url: Заголовок Referer будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.

sizes

Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset, если эти источники описываются с помощью дескриптора ширины ‘w‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором ‘w‘, то атрибут sizes не будет иметь никакого эффекта.

src

URL изображения. Этот атрибут является обязательным для элемента <img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы ‘w‘.

srcset

Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:1. URL изображения. 2. Необязательного, пробела, сопровождаемого:

*   дескриптором ширины или положительным целым числом, за которым сразу же следует '`w`'. Дескриптор ширины делится на размер источника, полученный из атрибута `sizes`, для расчёта эффективной плотности пикселей;
*   дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '`x`'.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: `1x`.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте `srcset`. Повторение дескрипторов (например, два источника в одном `srcset` с одинаковым дескриптором '`2x`') так же является недопустимым.Пользовательские агенты выбирают любой из доступных источников на своё усмотрение.  Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство "[Адаптивные изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" для примера.

width

Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.

usemap

Неполный URL (начиная с ‘#‘) карты-изображения, связанной с элементом.> Примечание: вы не можете использовать этот атрибут, если элемент <img> является потомком элемента <a> или <button>.

Устаревшие атрибуты

align Этот API вышел из употребления и его работа больше не гарантируется.

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства float и/или vertical-align. Вы можете так же использовать CSS-свойство object-position для позиционирования изображения внутри границ элемента <img>. Допустимые значения:* top: Аналог vertical-align: top или vertical-align: text-top;

• middle: Аналог vertical-align: -moz-middle-with-baseline;
• bottom: Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial;
• left: Аналог float: left;
• right: Аналог float: right.

border Этот API вышел из употребления и его работа больше не гарантируется.

Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство border вместо этого атрибута.

hspace Этот API вышел из употребления и его работа больше не гарантируется.

Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

longdesc Этот API вышел из употребления и его работа больше не гарантируется.

Ссылка на более подробное описание изображения. Возможными значениями являются URL или id элемента.> Примечание: Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.

name Этот API вышел из употребления и его работа больше не гарантируется.

Имя для элемента. Вы должны использовать атрибут id вместо этого атрибута.

vspace Этот API вышел из употребления и его работа больше не гарантируется.

Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

<img> является замещаемым элементом; по умолчанию он имеет значение свойства display равное inline, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border/border-radius, padding/margin, width/height и так далее.

Однако, часто бывает полезно установить для изображений свойство display в значение block, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).

У <img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе с vertical-align: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.

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

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg> не заданы width и height.

Альтернативный текст

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

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
     alt="Логотип MDN - изображение динозавра с текстом MDN web docs">

Изображение-ссылка

Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <img> внутрь элемента <a>. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
       alt="Посетить сайт MDN">
</a>

Использование атрибута srcset

В этом примере мы добавляем атрибут srcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src, считается 1x кандидатом в пользовательских агентах, которые поддерживают srcset.

 <img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">

Использование атрибутов srcset и sizes

Атрибут src игнорируется в пользовательских агентах, которые поддерживают srcset, когда добавлены дескрипторы ‘w‘. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.

 <img src="clock-demo-thumb-200.png"
      alt="Часы"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
     >

Хотя у элементов <img> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите «Заголовок Referer: проблемы приватности и безопасности (en-US)» для получения дополнительной информации.

Создание значимых альтернативных описаний

Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.

Плохо

<img alt="image" src="penguin.jpg">

Хорошо

<img alt="Пингвин на пляже." src="penguin.jpg">

Когда у изображения отсутствует атрибут alt, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.

• Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
• Альтернативные тексты: максимальное руководство — Axess Lab.
• Как создать отличный альтернативный текст: введение | Deque.
• MDN Понимание WCAG, Руководство 1.1. объяснения.
• Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.

Атрибут title

Атрибут title не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.

Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure> вместе с элементом <figcaption>.

• Использование HTML-атрибута title — обновлено | The Paciello Group.

Specification
HTML Standard # the-img-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

• Изображения в HTML.
• Адаптивные изображения.
• Элементы <picture>, <object> (en-US) и <embed>.
• Связанные с изображениями CSS-свойства: object-fit, object-position, image-orientation (en-US), image-rendering (en-US), и image-resolution (en-US).

Last modified: 14 авг. 2022 г., by MDN contributors

Тег | HTML справочник

HTML теги

Значение и применение

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

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

---

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

• Тег <nav> (навигация).
• Тег <header> (верхний колонтитул).
• Тег <footer> (нижний колонтитул).
• Тег <aside> (отступление).
• Тег <article> (статья).

---

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

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

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

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<main>	6.0	4.0	11.1	5.0	9.0	12.0

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример разметки страницы с использованием элемента <main></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.

<!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 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
• Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
• Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
• После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

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

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

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

HTML5 и CSS3 — семантические теги с нуля

Привет. Сегодня расскажу про семантические теги HTML5. Как и где их использовать, в какой последовательности. Кстати для seo они хорошо заходят, типа если их использовать, то поисковики будут любить ваш сайт лучше. Сам я не проверял, но так говорят! Понятное дело, что можно написать такой «классный» контент, что ни какие теги не помогут.

Contents

• Новые семантические элементы HTML5
• Тег — <article>
• Тег — <section>
• Тег — <aside>
• Тег <footer>
• Тег <address>
• Тег <figure>
• Тег<header>
• Тег <hgroup>
• Тег <nav>
• Тег <main>
• Тег <time>
• Тег <mark>
• Тег <bdi>
• Тег <wbr>
• Выводы

Новые семантические элементы HTML5

Семантические элементы для работы со структурой страниц. Секционные элементы	<article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav>, <section>, <details>, <summary>, <main>
Семантические элементы для работы с текстом	<mark>, <time>, <wbr> (поддерживался и ранее, но теперь официально является частью языка)
Элементы для работы с веб-формами и интерактивности	<input> (старый элемент, но со многими новыми подтипами), <datalist>, <keygen>, <meter>,<progress>, <command>, <menu>, <output>
Элементы для поддержки аудио, видео и подключаемых модулей	<audio>, <video>, <source>, <track>, <embed> (поддерживался и ранее, но теперь официально является частью языка)
Поддержка холста	<canvas>

Были удалены элементы оформления, такие как <big>, <center>, <font>, <tt> и <strike>.

Я раньше то об этих тегах и не слышал, встречал только разве, что <big> и <center>, но не использовал.

Тег — <article>

Используется для группировки записей – публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования. Как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые близки по содержанию к внешней статье. Если на странице только одна статья с заголовком и текстовым содержимым, её не нужно обертывать элементом <article>.

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

Скриншот главной страницы

Тег — <section>

Представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Один <section> не используется многократно. Не является блоком-оберткой: для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции – блок вводной информации, новости и контакты.

Представьте себе лендинг, вот там вся страница поделена на блоки. Вместо div можно использовать section.

Также article можно использовать внутри тега section.

Тег — <aside>

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

Использование элемента

Тег <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>. Более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

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

• Section.
• Заголовок — h3.
• Текст — p.
• Footer.
• Section.

Тег <address>

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

<address> не должен использоваться для разметки почтовых адресов в целом, только для контактной информации.

Используйте <address> в следующем контексте:

• если <address> располагается внутри <body>, то информация внутри <address> относится ко всему документу в целом;
• если <address> располагается внутри <article>, то информация внутри <address> относится к автору статьи.

Внутри <address> нельзя размещать заголовки <h2>,…<h6>, элементы <header>, <footer> и другой <address>.

По умолчанию текст внутри контейнера <address> отображается курсивным начертанием.

Тег <figure>

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

<figure>
	<img src="image.jpg" alt="Рисунок в тексте">
	<figcaption>Данный текст отображается под рисунком</figcaption>
</figure>

Тег<header>

Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотипы, группировать основной заголовок или группу заголовков, которые, в свою очередь, могут быть обернуты элементом <hgroup>. В HTML5-документе может содержаться одновременно несколько элементов <header>, и они могут располагаться в любой части страницы.

<header>
    <hgroup>
        <h2>...</h2>
        <h3>...</h3>
    </hgroup>
</header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

Тег <hgroup>

Используется для группировки элементов <h2> – <h6> в случае, когда заголовок имеет сложную структуру, например, если есть уточняющие подзаголовки, альтернативные заголовки и т. п.

Я даже не могу придумать где его можно использовать. Ведь так заголовки не используешь, один за другим, между ними всегда идет текст.

Тег <nav>

Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обернуты <nav>: этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

Тег <main>

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

Он всегда один на странице, как и h2.

Тег <time>

Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

Тег <mark>

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

Тег <bdi>

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

Тег <wbr>

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

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

<p>Интересный и полезный блог, Антона Боголепова=><wbr>yvka. ru</p>

Работа тега WBR

<p>Интересный и полезный блог, Антона Боголепова=>yvka.ru</p>

Без тега WBR

Выводы

Я для себя вынес из семантических тегов следующее:

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

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

Следующая

CSS3&HTML5Тег track — не работает

Секции для контента в HTML5 — div или section или article? – front-end.su

Данный материал является вольным переводом статьи:
Ire Aderinokun SECTIONING CONTENT IN HTML5 — DIV OR SECTION OR ARTICLE?

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

Помимо прочего, теги <section> и <article> были введены чтобы сделать области с контентом более значимыми, чем просто <div>. Но в каком случае мы должны использовать эти новые элементы и когда обычный <div> предпочтительнее?

##Обзор элементов

###DIV

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

Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.

Рекомендация W3C

Элемент <div> в основном используется для группировки контента и и позиционирования при помощи CSS. Например, как контейнер для других элементов.

<div>
<section>
<h2>Modal Title</h2>
<p>Text goes here</p>
</section>
</div>

###SECTION

Элемент <section> является немного более конкретным, чем элемент <div>. Он применяется к общему разделу контента, который может быть сгруппирован семантически.

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

Рекомендация W3C

Поскольку содержимое тега <section> имеет смысл только когда сгруппировано вместе, оно должно иметь «тему». «Тема» должна быть определена путем включения заголовка в содержимое, часто сразу после открывающего тега.

<section>
<h2>Subscribe to the Newsletter</h2>
<form> <!-- ... --> </form>
</section>

##ARTICLE

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

Цель тега <article> в маркировке контента, например, в разметке блога.

<article>
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam...</p>
</article>

##DIV или SECTION или ARTICLE?

###Так какой из тегов когда нужно использовать?

Если содержимое не является семантически связанным, стоит использовать <div>. Если семантически связанное содержимое может быть автономным, то используйте тег <article>. В противном случае используйте <section>.

##Комбинирование элементов

Попытаемся объединить различные элементы вместе.

Article в article

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

<article>
<h2>Article Title</h2>
<p>John Smith</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<article>
<h3>Another Article</h3>
<p>Jane Doe</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

###Article в section

Мы можем так же несколько тегов <article> разместить внутри <section>. Хорошим примером будет являться страница блога, на которой отображаются последние сообщения. Контейнером для всех последних постов будет тег <section>, в то время как каждый отдельный отрывок записи может быть размечен тегом <article>.

<section>
<h2>Latest Blog Posts</h2>
<article>
<h3>Blog Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<article>
<h3>Blog Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
</section>

###Section в article

Каждый индивидуальный тег <article> может содержать в себе раздел section. Например, данный пост мог бы быть размечен следующим образом

<article>
<h2>Sectioning Content in HTML5 - div or section or article?</h2>
<section>
<h3>Overview of the Elements</h3>
<section>
<h4>div</h4>
<p>The div element is the most general purpose element.</p>
</section>
<section>
<h4>section</h4>
<p>The section element is slightly more specific that a div</p>
</section>
<section>
<h4>article</h4>
<p>The article element is even more specific than a section</p>
</section>
</section>
<section>
<h3>div or section or article?</h3>
<!-- . .. -->
</section>
<section>
<h3>Combining the Elements</h3>
<!-- ... -->
</section>
</article>

Атрибут role в HTML5

С приходом HTML5, появилось множество семантических тегов предназначенных для «понимания» кода поисковиками и людьми ( чтобы было легче разобраться в назначении тех или иных блоков страницы ), так вот атрибут role, позволяет наиболее четко указать назначение блока/элемента страницы при взаимодействии пользователя с сайтом.

Излишне злоупотреблять, конечно, атрибутом не стоит, если разметка и так проста, и можно обойтись использованием элементов section, article, nav, aside и др. Но, допустим если сайт имеет множество таких блоков, то здесь стоит задуматься об использовании role.

<a href="/" role="banner"><img src="logo.png" alt="" />Блог Васи Пупкина</a>

<nav role="navigation">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/news">Новости</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

<main role="main">
  <h2>Самый обычный заголовок. </h2>
  <p>Привет мир!</p>
  <p>Очень хочу чтобы вы поделились со мной мыслями по этому поводу.</p>
  <p role="definition">*Гусь и утки - это птицы.</p>
  <p role="note">** с 2011 года.</p>
</main>

<aside role="complementary">
  <b>Голосование, чего не хватает на сайте</b>
  <ul>
    <li><a href="#">Медведей</a></li>
    <li><a href="#">Дельфинов</a></li>
    <li><a href="#">Детей</a></li>
  </ul>
        
</aside>

<aside role="search">
  <form>
    Найти гуся или утку: <input type="text" /> <input type="submit" value="Найти" />
  </form>
</aside>

<div role="contentinfo">
  <p>© 2012 Сайт непревзойденного Васи Пупкина.</p>
</div>

Как я уже говорил, при простой разметке атрибут role — смысла использовать нет, по сути вышеприведенный пример нисколько неоправдан, но ведь это пример :)

alert	Сообщение с важной и, как правило срочной, информация. Также см. alertdialog и status.
alertdialog	Сообщение, которое содержит важную информацию, и первоначальный акцент переходит элементу в диалоговом окне. Также см. alert и dialog.
application	Область объявленная как веб-приложение, в отличие от веб-документа.
article	Раздел состоящий из композиции, которая в свою очередь образует самостоятельную часть документа, страницы или сайта.
button	Кнопка, позволяющая пользователю вызвать какие-либо действия. Также см. link.
checkbox	Чекбокс, который имеет три возможных значения: истина, ложь, или смешанное.
columnheader	Ячейка таблицы, содержащая заголовок для столбца.
combobox	Вариация селекта; аналогично textbox, позволяющая пользователям печатать для выбора опции, или при печате добавить новую опцию к списку. Также см. listbox.
dialog	Сообщение, предназначенное для прерывания обработки текующего приложения, для ввода пользователем какой-либо информации или требующее от него какое-либо действие. Также см. alertdialog.
directory	Список ссылок на части группы, например содержание.
document	Область, содержащая информацию, которая объявлена ??как содержимое документа, в отличие от веб-приложений.
form	Ориентир области, которая содержит коллекцию элементов и объектов, которые, в целом, объединяются, чтобы создать форму. См. также search.
grid	Сетка интерактивного управления, которая содержит элементы сведенные в таблицу данных, в виде строк и столбцов, как таблица.
gridcell	Ячейки в сетке или древовидная сетка.
group	Набор объектов пользовательского интерфейса, которые не предназначены для включения в итоговую страницу или содержимое, вспомогательных технологий.
heading	Заголовок для раздела страницы.
img	Контейнер для набора элементов, которые формируют изображение.
link	Интерактивная ссылка на внутренний или внешний ресурс, который при активации заставляет браузер пользователя перейти к этому ресурсу. См. также button.
link	Интерактивная ссылка на внутренний или внешний ресурс, который при активации приводит к переходу браузера пользователя к этому ресурсу. См. также button.
list	Группа неинтерактивных элементов списка. Также см. listbox.
listbox	Виджет, который позволяет пользователю выбрать один или несколько элементов из списка вариантов. См. также combobox и list.
listitem	Один элемент в списоке или содержании.
log	Тип интерактивной области, где новая информация добавляется в осмысленном порядке, а старая может исчезнуть. См. также marquee.
marquee	Тип интерактивной области, где не существенная информация часто меняется. См. также log.
math	Контент, который представляет собой математическое выражение.
menu	Тип виджета, который предоставляет выбор списка вариантов для пользователя.
menubar	Представление menu, которое обычно остается видимым и, как правило, представлено горизонтально.
menuitem	Опции в группе выбора содержащиеся в menu или menubar.
menuitemcheckbox	Чекбокс пункта menu, который имеет три возможных значения: истина, ложь, или смешанное.
menuitemradio	Отмечаемый пункт меню в группе menuitemradio, из которых только один может быть выбран одновременно.
option	Выбираемый элемент в списке выбора.
presentation	Элемент чья семантически неявная роль не будет отображаться на доступности API.
progressbar	Элемент, который отображает ход статуса задач, занимающих много времени.
radio	Отмечаемый пункт в группе таких же пунктов, из которых только один может быть выбран одновременно.
radiogroup	Группа переключателей.
region	Большая область веб-страницы или документа, которую автор счел достаточно важной, чтобы включить в основную информацию страницы или оглавление, например, область страницы содержающая спортивную статистику событий онлайн.
row	Ряд ячеек в grid.
rowgroup	Группы, содержащие один или несколько элементов row в grid.
rowheader	Ячейка содержащая заголовок для row в grid.
scrollbar	Графический объект, который управляет прокруткой содержимого области просмотра, независимо от того, полностью ли содержание отображается в области просмотра.
separator	Разделитель, который разделяет и отличает разделы содержимого или группы пунктов menuitems.
slider	Интерфейс ввода для пользователя, когда пользователь выбирает значение из заданного диапазона.
spinbutton	Форма диапазона, где пользователь может выбрать из числа дискретных решений.
status	Контейнер, содержание которого носит рекомендательный характер для информирования пользователя, но не является достаточно важным. Также см. alert.
tab	Вкладка, представляющая из себя механизм для выбора вкладки необходимой пользователю.
tablist	Список элементов tab, которые являются ссылками на tabpanel элементы.
tabpanel	Контейнер для ресурсов связанных с tab, где каждый tab содержиться в tablist.
textbox	Поле ввода, которое предоставляет ввод в свободной форме текста.
timer	Тип интерактивной области, содержащую числовой счетчик, который указывает на количество затраченного времени от начальной точки, или время, оставшееся до конечной точки.
toolbar	Набор часто используемых функциональных кнопок, представленых в компактной визуальной форме.
tooltip	Контекстное всплывающее окно, которое отображает описание элемента.
tree	Тип списка, который может содержать подуровни вложенных групп, которые могут быть свернуты и расширены.
treegrid	Сетка, чьи строки могут быть свернуты и расширины так же как и в tree.
treeitem	Опция элемента tree. Этот элемент внутри tree, может быть свернут или расширен, если имеет вложенный подуровень.

Что такое main в html

HTML тег <main>

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

Элемент <main> не должен быть вложен в теги <article>, <aside>, <footer>, <header> или <nav>. В одном документе допускается использование одного тега <main>.

Синтаксис¶

Содержимое тега размещается между открывающим (<main>) и закрывающим (</main>) тегами.

HTML тег main

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

Содержимое внутри элемента <main> должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, информации об авторских правах, логотипов сайта, поисковых форм и т.п.

В документе может быть только один элемент <main>, и он не должен быть вложен в элементы <article>, <aside>, <footer>, <header> или <nav>.

Что такое main в html

HTML-элемент <main> предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам «pull request» (предложение изменения кода в чужом репозитории).

Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden .

Категории контента	Основной поток, явный контент.
Разрешённое содержимое	Основной поток.
Пропуск тега	Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешённые родительские элементы	Те, в которых разрешается контент основного потока в качестве содержимого, но только если это иерархически корректный main элемент.
Разрешённые ARIA роли	Роль main применяется к <main> по умолчанию, и роль presentation также разрешена.
DOM-интерфейс	HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body> , заголовков, таких как <h3> (en-US) и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

Пример

Результат

Проблемы доступности

Ориентир

Элемент <main> ведёт себя как роль-ориентир main . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role=»main» , если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.

Режим чтения

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

Спецификации

Specification
HTML Standard (HTML) # the-main-element

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

BCD tables only load in the browser

Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA «main» в элемент <main> , чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role ).

&двоеточие; Элемент общего раздела — HTML: Язык гипертекстовой разметки

HTML-элемент

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

Этот элемент включает только глобальные атрибуты.

Как упоминалось выше,

— это общий элемент секционирования, и его следует использовать только в том случае, если нет более конкретного элемента для его представления. Например, меню навигации должно быть заключено в <основная роль="главная"> <раздел роль="регион"> <заголовок>

Статьи

<статья> <заголовок>

Название статьи

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<нижний колонтитул> Прочитать это сообщение <нижний колонтитул> Читать эти статьи <роль нижнего колонтитула="информация о контенте">

Последнее обновление страницы 4 ноября 2009 г.

<адрес> Просто имя

Какое решение было бы лучшим и почему?

• html
• semantic-markup

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

Основной элемент представляет основной раздел содержимого тела документ или приложение. Раздел основного контента состоит из контента которая непосредственно связана или расширяет центральную тему документа или центральной функциональности приложения.

Примечание: основной элемент не разделяет содержимое и не влияет на план документа

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

Авторы НЕ ДОЛЖНЫ включать более одного основного элемента в документ.

Авторы НЕ ДОЛЖНЫ включать основной элемент в качестве дочернего элемента статьи , в сторону , нижний колонтитул , заголовок или навигация элемент.

0

Элемент

- используется для указания основного (основного) содержимого страницы. Если role="banner" имеет большое значение для контента, вы должны выбрать сценарий один , а в противном случае два.

Это довольно хорошо описывает/объясняет назначение

.

Первая и главная причина этих элементов (

,

,