Тег | HTML справочник
Значение и применение
Обращаю Ваше внимание, что тег не должен быть потомком таких блоков как (не должен быть вложен в них):
-
Тег <nav> (навигация).
- Тег <header> (верхний колонтитул).
- Тег <footer> (нижний колонтитул).
- Тег <aside> (отступление).
- Тег <article> (статья).
Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».
Пример использования
<!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>
Результат нашего примера:
Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки 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.
HTML References
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document was published by the HTML Working Group as a Working Group Notes. If you are not a HTML working group member and wish to make comments regarding this document please send them to [email protected] (subscribe, archives). If you are a HTML working group member and wish to make comments regarding this document, please send them to [email protected] (subscribe, archives). All feedback is welcome.
Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains must disclose the information in accordance with .
— HTML: язык гипертекстовой разметки
HTML-элемент представляет доминирующее содержимое документа. Область основного содержимого состоит из содержимого, которое непосредственно связано с центральной темой документа или центральной функциональностью приложения или расширяет ее.
В документе не должно быть более одного элемента , для которого не указан атрибут .
| Категории контента | Вытекающее содержимое, пальпируемое содержимое. |
|---|---|
| Разрешенный контент | Текущее содержимое. |
| Отсутствие тега | Нет; как начальный, так и конечный теги являются обязательными. |
| Разрешенные родители | Где содержание потока ожидается, но только если иерархически правильный . |
| Неявная роль ARIA | |
| Разрешенные роли ARIA | Нет разрешено |
| Интерфейс DOM |
Этот элемент включает только глобальные атрибуты.
Содержимое элемента должно быть уникальным для документа. Контент, который повторяется в наборе документов или разделах документа, таких как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов и формы поиска, не должен включаться, если форма поиска не является основной функцией страницы.
не влияет на структуру документа; то есть, в отличие от таких элементов, как , таких заголовков, как h3 и т.
Яблоки
Яблоко — это семечковый плод яблони.
Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.
…
…
Гренни Смит
Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.
…
…
Landmark
Элемент ведет себя как роль ориентира. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации больших разделов документа и перехода к ним. Предпочитайте использовать элемент вместо объявления , если нет проблем с поддержкой устаревших браузеров.
Пропустить навигацию
Пропустить навигацию, также известную как «skipnav», — это метод, который позволяет пользователю вспомогательных технологий быстро обходить большие разделы повторяющегося контента (основная навигация, информационные баннеры и т.
Добавление атрибута к элементу позволяет использовать его в качестве цели пропуска навигационной ссылки.
WebAIM: ссылки «Пропустить навигацию»
Режим чтения
Функция режима чтения через браузер ищет наличие элемент, а также элементы заголовков и разделов содержимого при преобразовании содержимого в специализированное представление для чтения.
Создание веб-сайтов для Safari Reader Mode и других приложений для чтения.
| Спецификация |
|---|
| HTML Standard # the-main-element |
таблицы загружаются только в браузере с поддержкой JavaScript.
- Основные элементы конструкции: , ,
- Элементы, относящиеся к разделу: , , , или
- АРИЯ: Главная роль
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Просмотрите исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена 12 марта 2023 г. участниками MDN.
Тег HTML
❮ Пред. Следующий ❯
Тег — это новый элемент блочного уровня в спецификации HTML5. Тег определяет доминирующее содержимое документа.
Содержимое тега должно быть уникальным и не дублировать однотипные блоки, которые повторяются в других документах, например, шапка сайта, шапка, футер, меню, поиск, информация об авторских правах и т. д.
Элемент нельзя помещать в теги,
Этот элемент не влияет на DOM-концепцию структуры страницы, в отличие от таких элементов, как
и других.
Вспомогательная технология может использовать ориентиры для быстрой идентификации и навигации по большим разделам документа. Рекомендуется использовать элемент и не объявлять role=»main».
Пользователь вспомогательных технологий может пропускать большие разделы повторяющегося контента, используя технику «skipnav». Это позволяет пользователю легко получить доступ к основному содержанию страницы. Если вы добавите атрибут id к элементу, он станет целью пропуска навигационной ссылки.
Тег идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.
More Examples
Example
Use CSS to style the <main> element:
<html><head><style>main { margin: 0;
padding: 5px; background-color: lightgray;}main
> h1, p, .browser { margin: 10px; padding: 5px;}
.browser { background: white;}.browser > h2,
p { margin: 4px; font-size: 90%;}</style>
</head><body><main> <h1>Most
Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the
most used browsers today.</p> <article class=»browser»>
<h2>Google Chrome</h2> <p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world’s most popular web
browser today!</p> </article> <article class=»browser»>
<h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p> </article>
<article class=»browser»> <h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p> </article>
</main></body></html>
❮ Previous
Complete HTML Reference
Next ❯
Тег HTML
meta http-equiv=»Content-Type» content=»text/html;charset=UTF-8″> ÃÂÃÂõô. áûõôÃÂÃÂÃÂøù â¯
âõó â ÃÂÃÂþ ýþòÃÂù ÃÂûõüõýàñûþÃÂýþóþ ÃÂÃÂþòýàò ÃÂÿõÃÂøÃÂøúðÃÂøø HTML5. âõó þÿÃÂõôõûÃÂõàôþüøýøÃÂÃÂÃÂÃÂõõ ÃÂþôõÃÂöøüþõ ôþúÃÂüõýÃÂð. áþôõÃÂöøüþõ ÃÂõóð ôþûöýþ ñÃÂÃÂàÃÂýøúðûÃÂýÃÂü ø ýõ ôÃÂñûøÃÂþòðÃÂàþôýþÃÂøÿýÃÂõ ñûþúø, úþÃÂþÃÂÃÂõ ÿþòÃÂþÃÂÃÂÃÂÃÂÃÂàò ôÃÂÃÂóøàôþúÃÂüõýÃÂðÃÂ, ýðÿÃÂøüõÃÂ, ÃÂðÿúð ÃÂðùÃÂð, ÃÂðÿúð, ÃÂÃÂÃÂõÃÂ, üõýÃÂ, ÿþøÃÂú, øýÃÂþÃÂüðÃÂøàþñ ðòÃÂþÃÂÃÂúøàÿÃÂðòðàø ÃÂ. ô.
ÃÂûõüõýàýõûÃÂ÷àÿþüõÃÂðÃÂàò ÃÂõóø,
ÃÂÃÂþàÃÂûõüõýàýõ òûøÃÂõàýð DOM-úþýÃÂõÿÃÂøàÃÂÃÂÃÂÃÂúÃÂÃÂÃÂàÃÂÃÂÃÂðýøÃÂÃÂ, ò þÃÂûøÃÂøõ þàÃÂðúøàÃÂûõüõýÃÂþò, úðú
ø ôÃÂÃÂóøÃÂ.
ÃÂÃÂÿþüþóðÃÂõûÃÂýðàÃÂõÃÂýþûþóøàüþöõàøÃÂÿþûÃÂ÷þòðÃÂàþÃÂøõýÃÂøÃÂàôûàñÃÂÃÂÃÂÃÂþù øôõýÃÂøÃÂøúðÃÂøø ø ýðòøóðÃÂøø ÿþ ñþûÃÂÃÂøü ÃÂð÷ôõûðü ôþúÃÂüõýÃÂð. àõúþüõýôÃÂõÃÂÃÂàøÃÂÿþûÃÂ÷þòðÃÂàÃÂûõüõýàø ýõ þñÃÂÃÂòûÃÂÃÂàrole=ûmainû.
ÃÂþûÃÂ÷þòðÃÂõûàòÃÂÿþüþóðÃÂõûÃÂýÃÂàÃÂõÃÂýþûþóøù üþöõàÿÃÂþÿÃÂÃÂúðÃÂàñþûÃÂÃÂøõ ÃÂð÷ôõûàÿþòÃÂþÃÂÃÂÃÂÃÂõóþÃÂàúþýÃÂõýÃÂð, øÃÂÿþûÃÂ÷ÃÂàÃÂõÃÂýøúàëskipnavû. ÃÂÃÂþ ÿþ÷òþûÃÂõàÿþûÃÂ÷þòðÃÂõûàûõóúþ ÿþûÃÂÃÂøÃÂàôþÃÂÃÂÃÂÿ ú þÃÂýþòýþüàÃÂþôõÃÂöðýøàÃÂÃÂÃÂðýøÃÂÃÂ. ÃÂÃÂûø òàôþñðòøÃÂõ ðÃÂÃÂøñÃÂàid ú ÃÂûõüõýÃÂÃÂ, þý ÃÂÃÂðýõàÃÂõûÃÂàÿÃÂþÿÃÂÃÂúð ýðòøóðÃÂøþýýþù ÃÂÃÂÃÂûúø.
âõó øôõàÿðÃÂðüø. áþôõÃÂöøüþõ ÷ðÿøÃÂÃÂòðõÃÂÃÂàüõöôàþÃÂúÃÂÃÂòðÃÂÃÂøü () ø ÷ðúÃÂÃÂòðÃÂÃÂøü () ÃÂõóðüø.
Abstract
This specification has been integrated into the HTML
specification and is no longer developed separately. This document is only made available for
historical purposes.
This specification is an extension to the HTML5 specification []. It defines an element to be used for the identification of the main content area of a document. All normative content in the HTML5 specification, unless specifically overridden by this specification, is intended to be the basis for this specification.
The element formalises the of identification of the main content section of a document using the values such as ‘content’ and ‘main’. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark .
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>