Справочник HTML на M, N

теги, атрибуты и их значения

☚ В начало | Справочник HTML

Теги на буквы M, N:
<main>

Тег <main>


Тег <main> предназначен для основного содержимого страницы. На странице может быть только один <main> и он не должен располагаться внутри элементов <header>, <nav>, <article>, <aside>, <section> или <footer>.

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


Атрибуты

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


Синтаксис

<body>
  <header>
      <!-- Шапка -->  
  </header>
      
  <main>
      <!-- Основное содержимое -->
      <article>..</article>
  </main>
  
  <footer>
      <!-- Подвал -->  
  </footer>
</body>


<map>

Тег <map>


Тег <map> служит контейнером для элементов <area>, которые размечают области-ссылки для карт-изображений.

Элемент <map> связывает активные области с изображением <img> посредством единого идентификатора.


Атрибуты

АтрибутФункцияЗначение
nameИмя карты-изображения.Идентично значению атрибута usemap тега <img> (начинается с символа решётки).

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


Синтаксис

<img src="treasure-island.jpg" usemap="#map" alt="Карта острова сокровищ">
<map name="map">
  <area coords="7, 25, 42, 72" shape="rect" href="island.html" alt="Остров">
  <area coords="4, 14, 12, 20" shape="rect" href="mount.html" alt="Гора">
  <area coords="2, 5, 7, 12" shape="rect" href="bay.html" alt="Бухта">
</map>


<mark>

Тег <mark>


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


Атрибуты

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


Пример

<p>Прохожие заметили <mark>зелёного человечка</mark> около пешеходного перехода.</p>

Результат

Прохожие заметили зелёного человечка около пешеходного перехода.



<menu>

Тег <menu>


Тег <menu> используют как семантическую альтернативу элемента <ul> для создания панели инструментов со списком команд, которые пользователь может выполнить или активировать.

Список в контейнере <menu> формируется, как и в <ul>, из элементов <li>.


Атрибуты

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


Синтаксис

<menu>
  <li><button onclick="copy()"><img src="copy.svg" alt="Скопировать"></button></li>
  <li><button onclick="paste()"><img src="paste.svg" alt="Вставить"></button></li>
</menu>


<meta>

Тег <meta>


Тег <meta> содержит метаданные, которые предоставляют поисковым системам и браузерам информацию о её содержимом, и влияют на загрузку страницы.

Все метатеги размещаются внутри «служебного отсека» — в контейнере <head> и не отображаются на странице.


Атрибуты

АтрибутФункцияЗначение
charsetКодировка документа.utf-8
contentЗначение атрибута, заданного с помощью name или http-equiv.*Для примера:
Значения для <meta name="viewport">

width — device-width (масштабирует ширину страницы под размер экрана) или целое положительное число (ширина области просмотра в пикселях).
initial-scale — Число от 0.0 до 10.0 (коэффициент масштабирования страницы).
http-equivУправление поведением страницы без сервера, как заголовок HTTP.*Для примера:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> — обеспечивает работу браузера Internet Explorer в режиме отображения страниц, соответствующем последним стандартам.
nameИмя метатега, также косвенно устанавливает его предназначение.*Основные:
author — Имя автора документа.
description — Краткое описание страницы, которое поисковые системы используют для описания страницы в поисковой выдаче.
keywords — Список ключевых слов.
viewport — Указывает исходный размер области просмотра.

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


Синтаксис

<head>
  <title>..</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Как используют метатеги в HTML">
</head>


<meter>

Тег <meter>


Тег <meter> — это индикатор числового значения в заданном диапазоне. Браузеры отображают его в виде прогресс-бара.

Для индикатора загрузки нужно использовать элемент <progress>.


Атрибуты

АтрибутФункцияЗначение
highОпределяет предел высшего значения. Должно быть меньше или равно значению max и выше low и min. По умолчанию равно значению max.Целое или дробное число.
lowОпределяет предел нижнего значения. Должно быть выше или равно значению min и меньше high и max. По умолчанию равно значению min.Целое или дробное число.
maxВерхняя граница диапазона. Должно быть выше значения min. По умолчанию 1.Целое или дробное число.
minНижняя граница диапазона. Должно быть ниже значения max. По умолчанию 0.Целое или дробное число.
optimumОптимальное значение. Должно быть в диапазоне между значениями min и max.Целое или дробное число.
valueТекущее значение. Должно быть в диапазоне между значениями min и max. По умолчанию 0. (Обязательный)Целое или дробное число.

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


Пример

<p>Лесорубы выполнили план только на 40%, обвиняя в срыве работ диких пчёл:
<meter min="0" max="100" value="40"></meter>
</p>

Результат

Лесорубы выполнили план только на 40%, обвиняя в срыве работ диких пчёл:



<nav>

Тег <nav>


Тег <nav> объединяет элементы навигации по сайту. В него помещают основные ссылки, по которым пользователи смогут быстро найти нужный раздел сайта.

На странице может быть несколько элементов <nav>.


Атрибуты

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


Пример

<nav>
  <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Личный кабинет</a></li>
      <li><a href="#">Оставить отзыв</a></li>
  </ul>
</nav>

Результат



<noscript>

Тег <noscript>


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


Атрибуты

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


Синтаксис

<script>
  document.write... а чё to write further(?
</script>
<noscript>Ваш браузер не поддерживает JavaScript!</noscript>


Популярное

Полезное

Получить книгу

Мы здесь

Поделиться материалом с друзьями:

Вверх