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

accesskey

Атрибут accesskey назначает клавиатурное сокращение для элемента HTML, позволяя пользователям быстро получить доступ или активировать элемент, нажав указанную клавишу в сочетании с клавишей Alt (или клавишей Ctrl на Mac).

autocapitalize

Атрибут autocapitalize управляет поведением автоматической капитализации для элементов ввода и элементов contenteditable. Он может быть установлен на on или off, или на более конкретные значения, такие как words, sentences или characters, чтобы определить желаемое поведение капитализации.

autofocus

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

contenteditable

Атрибут contenteditable определяет, может ли содержимое элемента редактироваться пользователем. При значении true элемент становится редактируемым, позволяя пользователям изменять его содержимое непосредственно в браузере.

dir

Атрибут dir определяет направление текста для содержимого элемента. Он может быть установлен в значение ltr (слева направо) или rtl (справа налево). Этот атрибут особенно важен для языков, которые пишут справа налево, таких как арабский и иврит.

dragggable

Атрибут draggable определяет, может ли пользователь перетаскивать элемент. Если установлено значение true, элемент становится перетаскиваемым, что позволяет пользователям перемещать его в пределах страницы или между различными страницами или приложениями.

enterkeyhint

Атрибут enterkeyhint предоставляет браузеру подсказку об ожидаемом действии, когда пользователь нажимает клавишу Enter при взаимодействии с элементом ввода. Возможные значения: enter, done, go, next, previous, search и send.

hidden

Атрибут hidden — это булев атрибут, который, когда присутствует, скрывает элемент от пользователя. Этот атрибут можно использовать для хранения информации, которая не должна отображаться, или для условного скрытия элементов на основе взаимодействия с пользователем.

inert

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

inputmode

Атрибут inputmode предоставляет браузеру подсказку о типе данных, которые, как ожидается, будут введены пользователем в элемент управления формой, влияя на раскладку виртуальной клавиатуры. Возможные значения: text, decimal, numeric, tel, email, url и search.

is

Атрибут is используется в сочетании с пользовательскими элементами, позволяя разработчикам создавать новые HTML-элементы с пользовательским поведением и свойствами. Он указывает имя определения пользовательского элемента, от которого элемент должен унаследовать свое поведение.

itemid

Атрибут itemid, используемый в сочетании с Microdata API, присваивает уникальный идентификатор элементу на странице, позволяя разработчикам создавать машиночитаемые структурированные данные.

itemprop

Атрибут itemprop используется с микроданными для определения свойства элемента, что позволяет поисковым системам и другим инструментам извлекать и обрабатывать структурированные данные с веб-страницы.

itemref

Атрибут itemref используется в микроданных для определения отношений между элементом с атрибутом itemscope и другими элементами, содержащими атрибуты itemprop, которые принадлежат к тому же элементу, но не являются потомками элемента с itemscope.

itemscope

Атрибут itemscope используется с микроданными для определения нового элемента, создавая область видимости для атрибутов itemprop, чтобы связать свойства с элементом.

itemtype

Атрибут itemtype используется в микроданных для определения словаря для элемента, обеспечивая контекст для свойств, определенных с помощью атрибутов itemprop.

lang

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

nonce

Атрибут nonce используется в политике безопасности контента (CSP), чтобы разрешить выполнение определенных встроенных скриптов или стилей, повышая безопасность путем предотвращения несанкционированного выполнения кода.

popover

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

spellcheck

Атрибут spellcheck определяет, должно ли содержимое элемента проверяться браузером на наличие орфографических и грамматических ошибок.

style

Атрибут style используется для применения встроенных стилей CSS непосредственно к элементу HTML, что позволяет быстро и точно изменять стиль без необходимости использования внешней таблицы стилей.

tabindex

Атрибут tabindex определяет порядок, в котором элемент получает фокус, когда пользователь перемещается по странице с помощью клавиши Tab.

title

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

translate

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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Контейнер для чего угодно. Тег <div>

Контейнер для чего угодно. Тег <div>

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

<div class="section">
  <h2>Заголовок секции</h2>
  <p>Какое-нибудь содержимое секции</p>
</div>
Читать дальше
  • 6 октября 2023
Как добавить подпись в HTML. Тег <figcaption>

Как добавить подпись в HTML. Тег <figcaption>

Тег <figcaption> используется для добавления подписи к элементу <figure>. Обычно он размещается после других медиа-элементов, например, после <img>, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>.

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.

Тег <figcaption> может использоваться только внутри элемента <figure>.

Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

Читать дальше
  • 6 октября 2023
Метаданные HTML-страницы. Тег <meta>

Метаданные HTML-страницы. Тег <meta>

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

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Это описание веб-страницы">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Иван Иванов">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Тег <meta> помещается в <head> HTML-документа.

Атрибуты тега <meta>:

  • charset — кодировка символов в документе.
  • name — имя метаданных.
  • content — значение метаданных.
  • http-equiv — HTTP-заголовок для значения атрибута content.

Атрибут charset должен быть первым атрибутом в теге <meta>, а name и http-equiv нельзя использовать вместе.

Читать дальше
  • 4 октября 2023
Просто кнопка. Тег <button>

Просто кнопка. Тег <button>

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

Атрибуты тега <button>:

  • name — имя кнопки.
  • type — тип кнопки, по умолчанию — submit. Атрибут type необходим, если указан атрибут value.
  • value — значение, которое будет отправлено на сервер при нажатии на кнопку.
  • disabled — указывает, что кнопка должна быть отключена.
  • form — одна или несколько форм, к которым принадлежит кнопка.
  • formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
  • formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
  • formmethod — метод HTTP, используемый при отправке данных формы.
  • formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
  • formtarget — указывает, где отображать ответ после отправки формы.
Читать дальше
  • 4 октября 2023
Независимый контент. Тег <article>

Независимый контент. Тег <article>

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

<article>
  <h2>Заголовок статьи</h2>
  <p>Текст статьи...</p>
</article>

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

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

Читать дальше
  • 3 октября 2023
Как встроить страницу через <iframe>

Как встроить страницу через <iframe>

Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования <iframe>:

<iframe src="https://example.com" width="600" height="400"></iframe>

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

Читать дальше
  • 3 октября 2023
Выпадающий список. Тег <select>

Выпадающий список. Тег <select>

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

Все опции списка должны быть обёрнуты в тег <option>.

Атрибуты тега <select>:

  • autocomplete — подсказка для функции автозаполнения формы;
  • disabled — делает элемент неактивным;
  • form — связывает список с формой;
  • multiple — позволяет выбрать несколько опций;
  • name — задает имя элемента, которое будет отправляться на сервер;
  • required — делает элемент обязательным для заполнения;
  • size — задает количество строк в списке.

Атрибуты value в тегах <option> могут быть использованы для отправки значений на сервер.

Читать дальше
  • 1 октября 2023
Встроенные CSS-стили для страницы с тегом <style>

Встроенные CSS-стили для страницы с тегом <style>

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

<!DOCTYPE html>
<html>
	<head>
    <style>
      body {
        background-color: #f2f2f2;
      }
    </style>
	</head>
	<body>
	  <h1>Добро пожаловать на мой сайт!</h1>
	</body>
</html>

Атрибуты тега <style>:

  • type — MIME-тип таблицы стилей.
  • media — типы носителей, для которы будет использоваться стиль.
Читать дальше
  • 29 сентября 2023
Изображение в HTML. Тег <img>

Изображение в HTML. Тег <img>

Элемент <img> используется для вставки изображений на веб-страницы.

У <img> нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

Существуют определенные правила или стандарты использования тега <img>, которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.

Читать дальше
  • 28 сентября 2023
Справочник по HTML

Справочник по HTML

Введение

Структура HTML-документа: <!DOCTYPE>, <html>, <head> и <body>.

Основные HTML-теги

Форматирование текста: <b>, <i>, <u>, <strong>, <em> и другие.

Заголовки: <h1> до <h6>

Абзацы и разрывы строк: <p>, <br>

Списки: <ul>, <ol>, <li>, <dl>, <dt>, <dd>

Ссылки: <a>

Картинки: <img>

Атрибуты и мета-теги

Глобальные атрибуты: class, id, style.

Атрибуты событий: onclick, onload.

Основные мета-теги: charset, viewport, description.

Формы

Формы: <form>

Поля ввода: <input>, <textarea>, <button>, <select>, <option>.

Валидация форм разными способами.

Таблицы

Основная структура таблицы: <table>, <tr>, <td>, <th>

Крутые таблицы: <caption>, <colgroup>, <col>, <thead>, <tfoot>, <tbody>

Аудио, видео, встроенные элементы

Аудио и видео: <audio>, <video>

Встроенные элементы: <embed>, <iframe>, <object>

Семантика, структура и доступность

Семантические теги: <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, <figcaption>

Цитаты и источники: <blockquote>, <q>, <cite>

Основы веб-доступности.

Дополнительные элементы

Интерактивные элементы: <details>, <summary>

Скрипты: <script>, <noscript>

Шаблоны: <template>

Проверка и тестирование документа

Валидатор W3C

💡 Авторы и редакторы — Евгений Шкляр, Лена Цимбалист, Настя Ткачёва, Саша Ермайкина.

Вёрстка, оформление — Саша Ермайкина.

  • 12 сентября 2023