HTML-теги и атрибуты, о которых вы, возможно, не знали01.05.2021 14:48

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

`abbr`

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.

HTML был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.

abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:

CSS - формальный язык описания внешнего вида документа (веб-страницы).

`address`

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


Автор статьи: Иван Иванов

Официальный сайт: Example.com

Адрес: некоторое царство, некоторое государство

`audio`

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

Для определения аудио-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type).

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

В настоящее время поддерживается три формата аудио: MP3, WAV и OGG.

Атрибуты:

autoplay — автовоспроизведение (блокируется большинством браузеров)
controls — панель управления (без этого атрибута элемент audio, скорее всего, не будет отображаться на странице)
loop — определяет, что воспроизведение, после завершения, начнется сначала
muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с аудио с помощью JavaScript
src — путь к аудиофайлу

  Ваш браузер не поддерживает элемент "audio".

`video`

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Для определения видео-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type).

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

В настоящее время поддерживается три формата видео: MP4, WebM и OGG.

Атрибуты:

autoplay — автовоспроизведение (блокируется большинством браузеров)
controls — панель управления
loop — определяет, что воспроизведение, после завершения, начнется сначала
muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с видео с помощью JavaScript
src — путь к видеофайлу
poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
width — ширина элемента в пикселях
height — высота элемента в пикселях

  Ваш браузер не поддерживает элемент "видео".

DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video.

`base`

Тег base определяет основной путь (URL) и/или цель (target) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

href — основной путь
target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank, _parent, _self и _top

`blockquote` и `cite`

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


JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

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

Для более глубокого изучения JavaScript советую взглянуть на "Вы не знаете JS" Кайла Симпсона.

`code`

Тег code используется для определения части компьютерного кода:

HTML-тег `button` определяет кликабельную кнопку.

CSS-свойство `background-color` определяет цвет фона элемента.

Для форматирования блока кода code часто используется совместно с тегом pre:

  `
    const name = prompt('Как Вас зовут?')
    if (name?.trim()) alert(`Привет, ${name}!`)
    else console.info('Пользователь пожелал остаться неизвестным')
  `

`datalist`

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input: при установке фокуса на такое поле пользователь видит выпадающий список.

Атрибут id тега datalist должен совпадать с атрибутом list тега input.


Выберите Ваш браузер из списка:

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

`dl`, `dt` и `dd`

Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt, определяющим понятие или термин, и dd, определяющим описание термина.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.


  Кофе
  Черный горячий напиток
  Молоко
  Белый холодный напиток

`details`

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

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Для отображения заголовка details используется тег summary.

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]')).


  Заголовок - видимая часть элемента "details"
  Скрытый контент - дополнительная информация

`dialog`

Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

Индикатором активного состояния dialog является атрибут open.

Открытое диалоговое окно

Для управления объектом Dialog с помощью JavaScript используются такие методы как show(), close() и showModal(), а также свойство open.

`figure`

Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

Для добавление подписи к figure используется тег figcaption.


  
  Рис. 1 - Процесс компиляции кода "движком" JavaScript V8.

`meter`

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Для обеспечения доступности совместно с meter рекомендуется использовать тег label.

Атрибуты:

value — текущее числовое значение между min и max
min — нижняя числовая граница диапазона
max — верхняя числовая граница диапазона
low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min, но меньше high и max
high — нижняя числовая граница верхнего предела диапазона
optimum — оптимальное числовое значение между min и max. Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low, значит, предпочтительным является нижний диапазон
form — определяет элемент form, с которым связан meter

Использование диска "D":
60%

Так можно записать уровень заряда батареи вашего устройства в значение meter:

// 
if ('getBattery' in navigator) {
  navigator.getBattery()
    .then(({ level }) => {
      meter.value = level * 100
    })
}

`progress`

Тег progress определяет процесс выполнения задачи.

Этот тег не должен использоваться для определения меры чего-либо.

Для обеспечения доступности совместно с progress рекомендуется использовать тег label.

Атрибуты:

max — максимальное значение. По умолчанию равняется 1
value — текущее значение

Процесс загрузки:
32%

Так можно реализовать десятисекундный таймер:

// 
const timerId = setInterval(() => {
  progress.value += 1
  if (progress.value === progress.max) {
    progress.remove()
    clearInterval(timerId)
  }
}, 1000)

`output`

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

Атрибуты:

for — определяет связь между результатом и элементами, используемыми для его выичсления
form — определяет элемент form, которому принадлежит output
name — название элемента output

`picture`

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент picture содержит два тега: один или более source и один img.

Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source.

Путь к изображению указывается в атрибуте srcset, а медиа-запрос — в атрибуте media.

`template`

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

Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).

Контент внутри template может быть отрендерен с помощью JavaScript.

((body, { content }) => {
  button.onclick = () => {
    body.append(content.cloneNode(true))
  }
})(document.body, document.querySelector('template'))

`time`

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

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

`noscript`

Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript. Он может использоваться как в теге head, так и в теге body. В первом случае noscript может содержать только такие теги как link, style и meta.

Другие теги в форме шпагралок

Семантическое «секционирование» страницы


  
    Page Title
    
      
        Link1
        Link2
      
    
    
  

  
    Aside Title
    Aside Content
  

  
    
      Atricle Title
      
        Section Title
        Section Content
      
    

    
      
        Section2 Title
        Section2 Content
      
      
        Section3 Content
      
    
  

  
    
      
        Link3
        Link4
      
    
    
      Block text & inline text

Стилизация текста


  Текст может быть
    полужирным,
    полужирным и "важным",
    "наклонным",
    наклонным и важным,
    маленьким,
    удаленным из документа,
    вставленным в документ,
    подчеркнутым
    неправильным.

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

  Текст может находиться
    ^{над строкой} и
    _{под ней}.

  Наконец, он может быть помеченным.

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

  Его можно переносить
на новую строку и разделять
горизонтальной чертой.

Форма

Символ / означает или.


  
    Title

    Имя:
    

    Фамилия:

Поля для ввода данных



















 (значение по умолчанию)

Атрибуты:

accept — MIME-тип принимаемых файлов (только для type="file"). Значения: расширение, например, .png, audio/*, video/*, image/*, медиа тип, например, json
alt — подпись
autocomplete — on / off
autofocus
checked — только для type="checked" или type="radio"
disabled
form
formaction — только для type="submit" или type="image"
formenctype — только для type="submit" или type="image". Значения: application/x-www-form-urlencoded, multipart/form-data, text/plain
formmethod — только для type="submit" или type="image" (get / post)
formnovalidate — отключает проверку элементов формы
formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type="submit" или type="image"). Значения: _blank, _self, _parent, _top, название фрейма
height — высота в пикселях (только для type="image")
list
max — максимальное значение (число или дата)
maxlength — максимальная длина строки (количество символов)
min — минимальное значение (число или дата)
minlength — минимальная длина строки (количество символов)
multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
name
pattern — регулярное выражение для проверки значения поля
placeholder
readonly
required
size — количество символов, определяющее ширину поля
src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type="image")
step — интервал (шаг) между min и max
type
value
width — ширина поля в пикселях (только для type="image")

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

Таблица


  
    Table Title
  
  
    
    
  
  
    
      
        Heading1
      
      Heading2
    
  
  
    
      1-1
      1-2
    
    
      2-1
      2-2
    
  
  
    
      3-1
      3-2

Table Title
Heading1	Heading2
1-1	1-2
2-1	2-2
3-1	3-2

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

Послесловие

Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area, но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas, предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).

Наши виртуалки можно использовать для разработки веб-сайтов.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

HTML-теги и атрибуты, о которых вы, возможно, не знали01.05.2021 14:48

abbr

address

audio

video

base

blockquote и cite

code

datalist

dl, dt и dd

details

dialog

figure

meter

progress

output

picture

template

Заголовок

time

noscript

Другие теги в форме шпагралок

Семантическое «секционирование» страницы

Atricle Title

Section Title

Section2 Title

Стилизация текста

Форма

Поля для ввода данных

Таблица

Послесловие

`abbr`

`address`

`audio`

`video`

`base`

`blockquote` и `cite`

`code`

`datalist`

`dl`, `dt` и `dd`

`details`

`dialog`

`figure`

`meter`

`progress`

`output`

`picture`

`template`

`time`

`noscript`