Глобальные атрибуты HTML
- 29 марта 2023
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Глобальные атрибуты — это атрибуты, которые могут быть применены к любому элементу 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 указывает, следует ли переводить содержимое элемента при локализации страницы, что позволяет лучше контролировать процесс перевода.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
details — раскрывающийся список
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
В современном веб-дизайне ключевую роль играет не только визуальная привлекательность, но и удобство использования. Одним из инструментов, значительно улучшающих пользовательский опыт на веб-страницах, являются теги <details> и <summary>. Эти элементы HTML позволяют создавать раскрывающиеся списки, что делает контент более структурированным и удобным для восприятия.
Что такое и ?
?
Тег <details> представляет собой элемент, который по умолчанию находится в закрытом состоянии и раскрывается при взаимодействии, обеспечивая дополнительную информацию пользователю по запросу.
В свою очередь, <summary> служит заголовком для контента, скрытого внутри <details>, и отображается независимо от состояния (открыт/закрыт) родительского тега.
Преимущества использования
Использование <details> и <summary> на веб-страницах имеет ряд преимуществ:
- Улучшение навигации: помогает организовать контент, делая его более доступным и понятным для пользователей.
- Экономия места: позволяет компактно разместить большой объем информации, предоставляя доступ к ней по мере необходимости.
- Увеличение взаимодействия: поощряет пользователей к активному взаимодействию с контентом, повышая общее вовлечение.
Как использовать?
Разметка с использованием <details> и <summary> достаточно проста:
<details>
<summary>Заголовок</summary>
Здесь располагается скрытый контент, который будет отображен после клика по заголовку.
</details>
Этот код создаст интерактивный элемент, который по умолчанию будет закрыт и откроется при клике на заголовок, раскрывая содержимое.
Заголовок
Здесь располагается скрытый контент, который будет отображен после клика по заголовку.SEO-оптимизация и доступность
С точки зрения SEO и доступности, использование <details> и <summary> также имеет свои преимущества.
Текст, скрытый внутри <details>, по-прежнему доступен для поисковых систем, что позволяет включать важные ключевые слова и фразы без перегрузки видимой части страницы избыточной информацией. Кроме того, правильное использование этих элементов способствует улучшению структуры контента и его индексации поисковыми системами.
Заключение
Теги <details> и <summary> — это мощные инструменты для создания интерактивных веб-страниц, способствующие улучшению пользовательского опыта и SEO-оптимизации. Их использование позволяет сделать контент более доступным и интересным, стимулируя пользователей к дальнейшему взаимодействию с вашим сайтом.
Используя эти элементы в своих проектах, вы не только облегчите навигацию по сайту для посетителей, но и улучшите его позиции в поисковой выдаче, благодаря более эффективной индексации контента.
- 24 марта 2024
body — тело страницы
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <body> используется для размещения всего содержимого, которое отображается на веб-странице.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок 1</h1>
<p>Это параграф.</p>
</body>
</html>
Атрибуты тега <body>:
onbeforeunload— сценарий, который выполнится, когда пользователь соберётся покинуть страницу.onhashchange— сценарий, который выполнится при изменении URL.onmessage— сценарий, который выполнится при получении сообщения от приложения.onoffline— сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.ononline— сценарий для запуска, когда браузер начинает работать в режиме онлайн.onpagehide— сценарий, который выполняется, когда пользователь переходит со страницы.onpageshow— сценарий, который выполняется, когда пользователь переходит на страницу.onunload— сценарий, который выполняется, когда пользователь покидает страницу.onafterprint— сценарий, который выполнится после печати веб-страницы.onbeforeprint— сценарий, который выполнится перед печатью веб-страницы.onlanguagechange— сценарий, который выполнится при изменении языка документа.onmessageerror— сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.onpopstate— сценарий, который выполнится при изменении состояния истории браузера.onrejectionhandled— сценарий, который выполнится при обработке отклоненного обещания в объектеPromise.onstorage— сценарий, который выполнится при изменении данных в объектеlocalStorageилиsessionStorage.onunhandledrejection— сценарий, который выполнится при возникновении отклоненного обещания в объектеPromiseбез обработки.
- 13 марта 2024
b — полужирный текст
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <b> используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSS.
<p>Сегодня мы <b>не</b> будем работать допоздна!</p>
Сегодня мы не будем работать допоздна!
- 2 марта 2024
html — главный элемент в HTML
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <html> является корневым элементом веб-страницы. Все содержимое документа, включая <head> и <body>, находится внутри этого тега. Тег <html> сообщает браузеру, что документ является HTML-документом.
💡 <html> — обязательный элемент структуры HTML-документа.
Пример использования
Убедитесь, что перед тегом <html> всегда указан корректный DOCTYPE (<!DOCTYPE html>), который сообщает браузеру о версии HTML-документа.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это демонстрационная страница.</p>
</body>
</html>
Добавьте атрибут lang в тег <html>, чтобы указать язык содержимого, например: <html lang="ru"> для русскоязычного контента.
Связанные теги
Больше о теге
- 1 марта 2024
div — универсальный контейнер
Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
<div class="section">
<h2>Заголовок секции</h2>
<p>Какое-нибудь содержимое секции</p>
</div>
- 6 октября 2023
figcaption — подпись к figure
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <figcaption> используется для добавления подписи к элементу <figure>. Обычно он размещается после других медиа-элементов, например, после <img>, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>.
<figure>
<img src="image.jpg" alt="Image">
<figcaption>Описание изображения</figcaption>
</figure>
Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.
Тег <figcaption> может использоваться только внутри элемента <figure>.
Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
- 6 октября 2023
meta — метаданные страницы
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <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>:
name— имя кнопки.type— тип кнопки, по умолчанию —submit. Атрибутtypeнеобходим, если указан атрибутvalue.value— значение, которое будет отправлено на сервер при нажатии на кнопку.disabled— указывает, что кнопка должна быть отключена.form— одна или несколько форм, к которым принадлежит кнопка.formaction— URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.formenctype— указывает, как данные формы должны быть закодированы при отправке на сервер.formmethod— метод HTTP, используемый при отправке данных формы.formnovalidate— устанавливает, что данные формы не должны проверяться при отправке на сервер.formtarget— указывает, где отображать ответ после отправки формы.
- 4 октября 2023
article — независимый контент
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи...</p>
</article>
Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
- 3 октября 2023
iframe — встроенная страница
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования <iframe>:
<iframe src="https://example.com" width="600" height="400"></iframe>
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
- 3 октября 2023