Разное

Тег main html5: Тег | htmlbook.ru

18.04.2020

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.1+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

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

В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey
Активация ссылки с помощью комбинации клавиш.
coords
Устанавливает координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задает адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задает форму активной области ссылки для изображений.
tabindex
Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.
type
Указывает MIME-тип документа, на который ведёт ссылка.

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx. jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

Тег | htmlbook.ru

Internet ExplorerChromeOpera
Safari		FirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

Синтаксис

<b>Текст</b>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-weight

Пример. Использование тега <b>

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег B</title>
 </head>
 <body>
  <p><b>Lorem ipsum dolor sit amet</b></p>
  <p><b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
  volutpat. <b>Ut wisis</b> enim ad minim veniam, quis nostrud exerci 
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид жирного начертания шрифта в тексте

Примечание

Хотя использование тега <b> не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению жирностью текста. С другой стороны, поисковые системы «любят» слова, выделенные жирным начертанием, и повышают их рейтинг.

— HTML | MDN

HTML-элемент <main>

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

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

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

<main>

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



<main>
  <h2>Яблоки</h2>
  <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>

  <article>
    <h3>Сорт "Ред Делишес"</h3>
    <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.
 
 </p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h3>Сорт "Гренни Смит";/h3>
    <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

Результат

Ориентир

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

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

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

д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.

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

<body>
  <a href="#main-content">Перейти к основному контенту</a>

  <!-- навигация и заголовок контента -->

  <main>
    <!-- основной контент страницы -->
  </main>
</body>

Режим чтения

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

BCD tables only load in the browser

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

<main role="main">
  ...
</main>

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

HTML теги

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

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

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

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

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

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

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>

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

Пример разметки страницы с использованием элемента <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 теги

HTML Тег . Справочник тегов. W3Schools на русском


Пример


  Web Browsers
  Google Chrome, Firefox и Internet Explorer являются самыми популярными браузерами сегодня.

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome — это бесплатный веб-браузер с открытым исходным кодом, разработанный Google,
    выпущенный в 2008 году.</p>
  </article>

  <article>
    <h2>Internet Explorer</h2>
    <p>Internet Explorer — бесплатный веб-браузер от Microsoft, выпущенный в 1995 году.</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Firefox — это бесплатный веб-браузер с открытым исходным кодом от Mozilla, выпущенный в 2004 году. </p>
  </article>
</main>

Попробуйте сами »

Определение и использование

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

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

Примечание: В документе не должно быть более одного элемента <main>. Элемент <main> НЕ должен быть потомком элемента <article>, <aside>, <footer>, <header> или <nav>.

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

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

Элемент
<main> 6. 0 12.0 4.0 5.0 11.1

Различия между HTML 4.01 и HTML5

Тег <main> новый в HTML5.

Глобальные атрибуты

Тег <main> также поддерживает Глобальные атрибуты в HTML.

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

Тег <main> также поддерживает Атрибуты событий в HTML.

Тег main



Пример


  Web Browsers
  Google Chrome, Firefox, and Internet Explorer are the most used browsers today.

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser developed by Google,
    released in 2008.</p>
  </article>

  <article>
    <h2>Internet Explorer</h2>
    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004. </p>
  </article>
</main>

Определение и использование

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

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

Примечание: В документе не должно быть более одного элемента <main>. Элемент <main> не должен быть потомком элемента <article>, <aside>, <footer>, <header>, или <nav> элементов.

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

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

Элемент
<main>6.012. 04.05.011.1

Различия между HTML 4,01 и HTML5

Тег <main> является новым в HTML5.

Глобальные атрибуты

Тег <main> также поддерживает Глобальные атрибуты в HTML.

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

Тег <main> также поддерживает Атрибуты событий в HTML.


Семантические теги HTML5 на видеокурсе от Loftblog

Сегодня на повестке дня у нас семантика. На видеоуроке мы будем рассматривать новшества, которые принес в жизнь веб-разработчиков HTML5. Вы узнаете, какие новые теги html5 стоит использовать, чтобы улучшить семантичность вашего документа, применяя новые знания на учебном сайте-портфолио из предыдущих уроков.

Семантические теги HTML5

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

Тег <DOCTYPE>

Первым рассматриваемым элементом, который претерпел существенные изменения в HTML5, будет тег <DOCTYPE>. В HTML4 он имел крайне неудобную форму записи. С введением новых стандартов запись этого тега стала очень компактной и легкой для запоминания. А если вы используете в своей работе плагин Emmet, то и запоминать ничего не нужно. При определенной комбинации действий заготовка под новый сайт появляется в редакторе кода автоматически.

Теги <header> и <nav>

Для шапки сайта в HTML5 предусмотрен специальный тег <header>.
Еще одним новшеством HTML5 является тег <nav>, он используется как контейнер для основной навигации, меню, расположенного, как правило, в header.

Теги <main> и <aside>

Для основного содержимого сайта в HTML5 введен новый семантический тег <main>. Тег этот должен быть единственным на странице.

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

Теги <section> и <article>

На видеоуроке также будут рассмотрены такие новые семантические теги HTML5, как <section> и <article>.
Тег <section> используется для разделения логических блоков, а тег <article> — для выделения независимых блоков, т.е. новости, статьи, записи в блоге и т.п.

Тег <footer>

И, наконец, для выделения подвала сайта HTML5 ввел такое новшество, как тег <footer>.
Со всеми этими тегами вы познакомитесь на нашем занятии.

Это последний наш видеоурок курса по основам HTML. Вы молодцы! Вы прошли его вместе с нами до конца, заложив тем самым фундамент для строительства своего блестящего будущего в веб-разработке. Теперь можно смело переходить к изучению еще одного нашего видеокурса «Основы CSS»

Приятного всем просмотра! Учитесь с удовольствием!

Рекомендуемые курсы

— HTML: язык разметки гипертекста

Элемент HTML

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

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

В документе не должно быть более одного элемента

, для которого не указан атрибут hidden .

Содержимое элемента

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

не влияет на структуру документа; то есть, в отличие от таких элементов, как , такие заголовки, как

и т. д.,
не влияют на концепцию DOM структуры страницы. Это строго информативно.

 

<основной>
   
 Яблоки 
 
  
 Яблоко - это семечковые плоды яблони. 


  <статья>
     
 Ред Делишес 
 
    
 Эти ярко-красные яблоки чаще всего встречаются во многих
    супермаркеты.

    
 ... 

    
 ...
<статья>

Бабушка Смит

Эти сочные зеленые яблоки отлично подходят для яблочные пироги.

...

...