worldwide open-source software - software:development:web:docs:web:html

attributes

anonymous@undisclosed.example.com (Anonymous) — Sun, 17 Mar 2024 11:45:06 +0000

Справочник по атрибутам HTML

Элементы в HTML имеют атрибуты; это дополнительные значения, которые настраивают элементы или корректируют их поведение различными способами в соответствии с критериями, которые нужны пользователям.

Список атрибутов

Имя атрибута	Элементы	Описание
accept (принять)	<form>,<input>	Список типов, которые принимает сервер, обычно это тип файла.
accept-charset	<form>	Список поддерживаемых кодировок.
accesskey (ключ доступа)	Глобальный атрибут	Сочетание клавиш для активации или добавления фокуса к элементу.
action	<form>	URI программы, которая обрабатывает информацию, отправленную через форму.
align	<caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>,<tr>	Задает горизонтальное выравнивание элемента.
allow	<iframe>	Определяет политику функций для iframe.
alt	<area>, <img>,<input>	Альтернативный текст на случай, если изображение не может быть отображено.
async	<script>	Выполняет скрипт асинхронно.
autocapitalize (авто замена прописных букв)	Глобальный атрибут	Устанавливает, будет ли ввод автоматически капитализироваться при вводе пользователем.
autocomplete (автозаполнение)	<form>, <input>, <select>, <textarea>	Указывает, могут ли элементы управления в этой форме по умолчанию автоматически дополнять свои значения браузером.
autoplay	<audio>, <video>	Аудио или видео должно воспроизводиться как можно скорее.
background	<body>, <table>, <td>,<th>	Указывает URL-адрес файла изображения. Примечание. Хотя браузеры и почтовые клиенты все еще могут поддерживать этот атрибут, он устарел. Вместо этого используйте CSS background-image.
bgcolor	<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>,<tr>	Цвет фона элемента. Примечание. Это устаревший атрибут. Вместо этого используйте background-colorсвойство CSS.
border	img\|<img>, <object>, <table>	Ширина границы. Примечание. Это устаревший атрибут. Вместо этого используйте borderсвойство CSS.
buffered	<audio>, <video>	Содержит временной диапазон уже буферизованных медиафайлов.
capture (захват)	<input>	Из спецификации Media Capture указывает, что новый файл может быть захвачен.
charset	<meta>	Объявляет кодировку символов страницы или скрипта.
checked	<input>	Указывает, следует ли проверять элемент при загрузке страницы.
cite	<blockquote>, <del>, <ins>, <q>	Содержит URI, указывающий на источник цитаты или изменения.
class (класс)	Глобальный атрибут	Часто используется с CSS для стилизации элементов с общими свойствами.
color	<font>,<hr>	Этот атрибут задает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB. Примечание. Это устаревший атрибут. Вместо этого используйте colorсвойство CSS.
cols	<textarea>	Определяет количество столбцов в текстовой области.
colspan	<td>,<th>	Атрибут colspan определяет количество столбцов, которые должна занимать ячейка.
content	<meta>	Значение, связанное с контекстом http-equivили зависящее от него.
contenteditable (редактируемый контент)	Глобальный атрибут	Указывает, доступно ли редактирование содержимого элемента.
contextmenu	Глобальный атрибут	Определяет идентификатор элемента <menu>, который будет служить контекстным меню элемента.
controls	<audio>, <video>	Указывает, должен ли браузер показывать пользователю элементы управления воспроизведением.
coords	<area>	Набор значений, определяющих координаты активной области.
crossorigin (перекрестное происхождение)	<audio>, <img>, <link>, <script>, <video>	Как элемент обрабатывает запросы между источниками.
csp	<iframe>	Указывает политику безопасности содержимого, которую встроенный документ должен применять к себе.
data	<object>	Указывает URL-адрес ресурса.
data-* (данные-*)	Глобальный атрибут	Позволяет прикреплять пользовательские атрибуты к элементу HTML.
datetime	<del>, <ins>, <time>	Указывает дату и время, связанные с элементом.
decoding	<img>	Указывает предпочтительный метод декодирования изображения.
default	<track>	Указывает, что отслеживание должно быть включено, если в настройках пользователя не указано иное.
defer	<script>	Указывает, что сценарий должен быть выполнен после анализа страницы.
dir	Глобальный атрибут	Определяет направление текста. Допустимые значения: ltr (слева направо) или rtl (справа налево).
dirname	<input>, <textarea>
disabled	<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>	Указывает, может ли пользователь взаимодействовать с элементом.
download	<a>,<area>	Указывает, что гиперссылка должна использоваться для загрузки ресурса.
draggable	Глобальный атрибут	Определяет, можно ли перетаскивать элемент.
enctype	<form>	Определяет тип содержимого данных формы, когда используется methodPOST.
enterkeyhint	<textarea>, <contenteditable>	Определяет enterkeyhint , какую метку действия (или значок) отображать для клавиши ввода на виртуальных клавиатурах. Атрибут можно использовать с элементами управления формой (например, значениями textareaэлементов) или в элементах узла редактирования (например, с помощью <contenteditable>атрибута).
for	<label>, <output>	Описывает элементы, которые принадлежат этому.
form	<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>	Указывает форму, которая является владельцем элемента.
formaction	<input>, <button>	Указывает действие элемента, переопределяя действие, определенное в файле <form>.
formenctype	<button>, <input>	Если кнопка/ввод является кнопкой отправки (например type=«submit», ), этот атрибут устанавливает тип кодировки, который будет использоваться при отправке формы. Если этот атрибут указан, он переопределяет атрибут владельца формыenctype кнопки .
formmethod	<button>, <input>	Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот атрибут устанавливает метод отправки, который будет использоваться при отправке формы (GET, POST, и т.д.). Если этот атрибут указан, он переопределяет атрибут владельца формыmethod кнопки .
formnovalidate	<button>, <input>	Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот логический атрибут указывает, что форма не подлежит проверке при ее отправке. Если этот атрибут указан, он переопределяет атрибут владельца формыnovalidate кнопки .
formtarget	<button>, <input>	Если кнопка/ввод является кнопкой отправки (например, type=«submit»), этот атрибут определяет контекст просмотра (например, вкладка, окно или встроенный фрейм), в котором отображается ответ, полученный после отправки формы. Если этот атрибут указан, он переопределяет атрибут владельца формыtarget кнопки .
headers	<td>,<th>	Идентификаторы элементов <th>, которые применяются к этому элементу.
height	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Определяет высоту перечисленных здесь элементов. Для всех остальных элементов используйте свойство CSS height. Примечание. В некоторых случаях, например <div>, это устаревший атрибут, и в этом случае height вместо него следует использовать свойство CSS.
hidden	Глобальный атрибут	Предотвращает рендеринг данного элемента, сохраняя при этом дочерние элементы, например элементы сценария, активными.
high	<meter>	Указывает нижнюю границу верхнего диапазона.
href	<a>, <area>, <base>,<link>	URL связанного ресурса.
hreflang	<a>,<link>	Указывает язык связанного ресурса.
http-equiv	<meta>	Определяет директиву прагмы.
id	Глобальный атрибут	Часто используется с CSS для стилизации определенного элемента. Значение этого атрибута должно быть уникальным.
integrity	<link>,<script>	Указывает значение целостности подресурса , которое позволяет браузерам проверять то, что они извлекают.
intrinsicsize	<img>	Этот атрибут сообщает браузеру игнорировать фактический внутренний размер изображения и притворяться, что это размер, указанный в атрибуте.
inputmode	<textarea>, <contenteditable>	Предоставляет подсказку относительно типа данных, которые могут быть введены пользователем при редактировании элемента или его содержимого. Атрибут можно использовать с элементами управления формой (например, значениями textareaэлементов) или в элементах узла редактирования (например, с помощью contenteditableатрибута).
ismap	<img>	Указывает, что изображение является частью карты изображений на стороне сервера.
itemprop	Глобальный атрибут
kind	<track>	Указывает тип текстовой дорожки.
label	<optgroup>, <option>, <track>	Указывает читаемый пользователем заголовок элемента.
lang	Глобальный атрибут	Определяет язык, используемый в элементе.
language	<script>	Определяет язык сценария, используемый в элементе.
loading	<img>,<iframe>	Указывает, следует ли загружать элемент лениво ( loading=«lazy») или сразу ( loading=«eager»).
list	<input>	Определяет список предопределенных параметров, предлагаемых пользователю.
loop	<audio>, <marquee>, <video>	Указывает, следует ли начинать воспроизведение мультимедиа с самого начала после его завершения.
low	<meter>	Указывает верхнюю границу нижнего диапазона.
manifest	<html>	Указывает URL-адрес манифеста кэша документа. Примечание. Этот атрибут устарел, используйте <link rel="manifest"> вместо него.
max	<input>, <meter>, <progress>	Указывает максимально допустимое значение.
maxlength	<input>, <textarea>	Определяет максимальное количество символов, разрешенное в элементе.
minlength	<input>, <textarea>	Определяет минимальное количество символов, разрешенное в элементе.
media	<a>, <area>, <link>, <source>, <style>	Указывает подсказку о носителе, для которого был разработан связанный ресурс.
method	<form>	Определяет, какой метод HTTP использовать при отправке формы. Может быть GET(по умолчанию) или POST.
min	<input>, <meter>	Указывает минимально допустимое значение.
multiple	<input>, <select>	Указывает, можно ли ввести несколько значений во входные данные типа emailили file.
muted	<audio>, <video>	Указывает, будет ли звук изначально отключен при загрузке страницы.
name	<button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>	Имя элемента. Например, используется сервером для идентификации полей при отправке формы.
novalidate	<form>	Этот атрибут указывает, что форма не должна проверяться при отправке.
open	<details>, <dialog>	Указывает, видимо ли в данный момент содержимое (в случае элемента <details>) или диалоговое окно активно и с ним можно взаимодействовать (в случае элемента <dialog>).
optimum	<meter>	Указывает оптимальное числовое значение.
pattern	<input>	Определяет регулярное выражение, по которому будет проверяться значение элемента.
ping	<a>,<area>	Атрибут pingуказывает разделенный пробелами список URL-адресов, которые будут уведомлены, если пользователь перейдет по гиперссылке.
placeholder	<input>, <textarea>	Предоставляет пользователю подсказку о том, что можно ввести в поле.
playsinline	<video>	Логический атрибут, указывающий, что видео должно воспроизводиться «встроенно»; то есть в области воспроизведения элемента. Обратите внимание: отсутствие этого атрибута не означает, что видео всегда будет воспроизводиться в полноэкранном режиме.
poster	<video>	URL-адрес, указывающий фрейм плаката, который будет отображаться, пока пользователь не начнет играть или искать.
preload	<audio>, <video>	Указывает, следует ли предварительно загружать весь ресурс, его части или ничего.
readonly	<input>, <textarea>	Указывает, можно ли редактировать элемент.
referrerpolicy	<a>, <area>, <iframe>, <img>, <link>,<script>	Указывает, какой реферер отправляется при получении ресурса.
rel	<a>, <area>, <link>	Указывает связь целевого объекта с объектом ссылки.
required	<input>, <select>, <textarea>	Указывает, является ли данный элемент обязательным для заполнения или нет.
reversed	<ol>	Указывает, должен ли список отображаться в порядке убывания, а не в порядке возрастания.
role	Глобальный атрибут	Определяет явную роль элемента для использования вспомогательными технологиями.
rows	<textarea>	Определяет количество строк в текстовой области.
rowspan	<td>,<th>	Определяет количество строк, которые должна охватывать ячейка таблицы.
sandbox	<iframe>	Запрещает документу, загруженному в iframe, использовать определенные функции (например, отправку форм или открытие новых окон).
scope	<th>	Определяет ячейки, thк которым относится тест заголовка (определенный в элементе).
scoped	<style>
selected	<option>	Определяет значение, которое будет выбрано при загрузке страницы.
shape	<a>,<area>
size	<input>, <select>	Определяет ширину элемента (в пикселях). Если атрибут элемента typeравен textили, passwordто это количество символов.
sizes	<link>, <img>, <source>
slot	Глобальный атрибут	Назначает элементу слот в теневом дереве теневого DOM.
span	<col>, <colgroup>
spellcheck	Глобальный атрибут	Указывает, разрешена ли для элемента проверка орфографии.
src	<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>	URL-адрес встраиваемого контента.
srcdoc	<iframe>
srclang	<track>
srcset	<img>,<source>	Один или несколько вариантов адаптивного изображения.
start	<ol>	Определяет первое число, если оно отлично от 1.
step	<input>
style	Глобальный атрибут	Определяет стили CSS, которые будут переопределять ранее установленные стили.
summary	<table>
tabindex	Глобальный атрибут	Переопределяет порядок табуляции браузера по умолчанию и следует указанному вместо него.
target	<a>, <area>, <base>,<form>	Указывает, где открыть связанный документ (в случае элемента <a>) или где отобразить полученный ответ (в случае элемента <form>).
title	Глобальный атрибут	Текст, который будет отображаться во всплывающей подсказке при наведении курсора на элемент.
translate	Глобальный атрибут	Укажите , следует ли переводить значения атрибутов элемента и значения его дочерних узлов при локализации страницы или оставить их без изменений.
type	<button>, <input>, <embed>, <object>, <ol>, <script>, <source>, <style>, <menu>, <link>	Определяет тип элемента.
usemap	<img>, <input>, <object>
value	<button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param>	Определяет значение по умолчанию, которое будет отображаться в элементе при загрузке страницы.
width	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Для перечисленных здесь элементов это устанавливает ширину элемента. Примечание. Для всех других экземпляров, таких как <div>, это устаревший атрибут, и в этом случае widthвместо него следует использовать свойство CSS.
wrap	<textarea>	Указывает, следует ли переносить текст.

Содержимое и атрибуты IDL

В HTML большинство атрибутов имеют две стороны: атрибут содержимого и атрибут IDL (язык определения интерфейса) .

Атрибут содержимого — это атрибут, установленный вами из содержимого (HTML-кода), и вы можете установить его или получить с помощью element. setAttribute() или element. getAttribute(). Атрибут содержимого всегда является строкой, даже если ожидаемое значение должно быть целым числом. Например, чтобы установить <input>для элемента maxlength значение 42 с помощью атрибута содержимого, вы должны вызвать setAttribute(«maxlength», «42») этот элемент.

Атрибут IDL также известен как свойство JavaScript. Это атрибуты, которые вы можете прочитать или установить с помощью свойств JavaScript, таких как element.foo. Атрибут IDL всегда будет использовать (но может преобразовывать) базовый атрибут контента, чтобы вернуть значение, когда вы его получите, и сохранит что-то в атрибуте контента, когда вы его установите. Другими словами, атрибуты IDL, по сути, отражают атрибуты контента.

В большинстве случаев атрибуты IDL возвращают свои значения в том виде, в котором они действительно используются. Например, по умолчанию typeдля <input>элементов используется «текст», поэтому, если вы установите input. type=«foobar», <input> элемент будет иметь тип текста (по внешнему виду и поведению), но значение атрибута содержимого «type» будет «foobar». Однако typeатрибут IDL вернет строку «текст».

Атрибуты IDL не всегда являются строками; например, input. maxlength число (длинное со знаком). При использовании атрибутов IDL вы читаете или устанавливаете значения желаемого типа, поэтому input. maxlength он всегда будет возвращать число, а когда вы устанавливаете input. maxlength, ему требуется число. Если вы передаете другой тип, он автоматически преобразуется в число, как указано стандартными правилами JavaScript для преобразования типов.

Атрибуты IDL могут отражать другие типы , такие как unsigned long, URL-адреса, логические значения и т. д. К сожалению, нет четких правил, и то, как атрибуты IDL ведут себя в сочетании с соответствующими атрибутами содержимого, зависит от атрибута. В большинстве случаев он будет следовать правилам, изложенным в спецификации , но иногда это не так. Спецификации HTML стараются сделать это как можно более удобным для разработчиков, но по разным причинам (в основном историческим) некоторые атрибуты ведут себя странно (select. size например, ), и вам следует прочитать спецификации, чтобы понять, как именно они ведут себя.

Логические атрибуты

Некоторые атрибуты контента (например required, readonly, disabled) называются логическими атрибутами . Если логический атрибут присутствует, его значение равно true , а если он отсутствует, его значение равно false .

HTML определяет ограничения на допустимые значения логических атрибутов: если атрибут присутствует, его значение должно быть либо пустой строкой (эквивалентно, атрибут может иметь неназначенное значение), либо значением, которое представляет собой соответствие ASCII без учета регистра для каноническое имя атрибута без начальных и конечных пробелов. Следующие примеры являются допустимыми способами разметки логического атрибута:

HTML

<div itemscope>This is valid HTML but invalid XML. </div>
<div itemscope=itemscope>This is also valid HTML but invalid XML. </div>
<div itemscope="">This is valid HTML and also valid XML. </div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose. 
</div>

Чтобы внести ясность, значения « true» и « false» не допускаются в логических атрибутах. Чтобы представить ложное значение, атрибут должен быть полностью опущен. Это ограничение проясняет некоторые распространенные недоразумения: например checked=«false», атрибут элемента checked будет интерпретироваться как истинный , поскольку атрибут присутствует.

Атрибуты обработчика событий

Предупреждение. Использование атрибутов содержимого обработчика событий не рекомендуется. Сочетание HTML и JavaScript часто приводит к созданию неподдерживаемого кода, а выполнение атрибутов обработчика событий также может быть заблокировано политиками безопасности контента.

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

Все атрибуты обработчика событий принимают строку. Строка будет использоваться для синтеза функции JavaScript , например function name(/*args*/) {body}, где name— имя атрибута, а body— значение атрибута. Обработчик получает те же параметры, что и его аналог обработчика событий JavaScript — большинство обработчиков получают только один eventпараметр, а onerrorполучают пять: event, source, lineno, colno, error. Это означает, что вы, как правило, можете использовать eventпеременную внутри атрибута.

HTML

<div onclick="console. log(event)">Click me![[software:development:web:docs:web:html:element:</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console. log(onclick)">Click me!</div>

Примечание

- Устаревший. Не для использования на новых web-сайтах.
- Экспериментальный. Возможно изменение в будущем.
- Нестандартный. Проверьте поддержку браузером.

Смотрите также HTML-элементы

element

anonymous@undisclosed.example.com (Anonymous) — Mon, 29 Jan 2024 16:18:47 +0000

Элемент

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

Основные элементы

Основные элементы являются основой любого HTML документа. Вы увидите эти элементы в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом <HTML> и закрывающим </ HTML>. Элемент <html> называется корневым элементом.

Элемент	Описание
<html>	Представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).

Метаданные документа

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

global_attributes

anonymous@undisclosed.example.com (Anonymous) — Sat, 01 Feb 2025 06:41:49 +0000

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

Глобальные атрибуты — это атрибуты общие для всех HTML-элементов; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.
Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте. Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые браузеры скрывают содержимое, помеченное как <foo hidden>…<foo> , хотя <foo> не является верным HTML-элементом.
В дополнение к основным для HTML глобальным атрибутам, также существуют следующие глобальные атрибуты:

xml:lang и xml:base — унаследованы от спецификации XHTML, и хотя являются устаревшими, сохранены в целях совместимости.
Многочисленные aria-* атрибуты, используемые для улучшения доступности.
Атрибуты обработчиков событий: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

Описание

accesskey

Даёт подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделённых пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.

class

Это список разделённых пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод Document.getElementsByClassName().

contenteditable

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

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

contextmenu

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

data-*

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

dir

Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений:

ltr, что расшифровывается как left to right (слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);
rtl, что расшифровывается как right to left (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);
auto — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдёт символ со строгим направлением, а затем применяет это направление ко всему элементу.

draggable ¹⁾

Это перечислимый атрибут, указывающий, можно ли перетаскивать элемент с помощью Drag and Drop API. Он может принимать одно из следующих значений:

true, указывающее, что элемент можно перетаскивать;
false, указывающее, что элемент нельзя перетаскивать.

dropzone ²⁾

Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с помощью Drag and Drop API. Он может принимать одно из следующих значений:

copy, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;
move, указывающее, что перетаскиваемый элемент будет перемещён в новое расположение;
link — создаст ссылку на перетаскиваемые данные.

hidden

Это логический атрибут, указывающий, что элемент уже (или ещё) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.

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

itemid, ³⁾

itemprop, ⁴⁾

itemref, ⁵⁾

itemscope, ⁶⁾

itemtype, ⁷⁾

Эти атрибуты относятся к определению микроданных.

lang

Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определённом в документе IETF BCP47. xml:lang имеет приоритет над ним.

spellcheck ⁸⁾

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

true, указывающее, что элемент должен, по возможности, проверяться на наличие орфографических ошибок;
false, указывающее, что элемент не должен проверяться на наличие орфографических ошибок.

style

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

tabindex

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

отрицательное число означает, что элемент фокусируемый, но он не может получить фокус посредством последовательной навигации с клавиатуры;
0 означает, что элемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры, но порядок его следования определяется платформой;
положительное значение означает, что элемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры. Порядок его следования определяется значением атрибута — последовательно возрастающего числа tabindex. В случае, когда несколько элементов имеют одинаковое значение атрибута tabindex, порядок их следования при навигации определяется их местом в документе.

title

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

translate

Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла Text) при локализации страницы. Этот атрибут может принимать следующие значения:

пустая строка или "yes" указывает, что элемент должен быть переведён;
"no" указывает, что элемент не должен быть переведён.

¹⁾ , ²⁾ , ³⁾ , ⁴⁾ , ⁵⁾ , ⁶⁾ , ⁷⁾ , ⁸⁾

Экспериментальная возможность, в будущем может измениться!

links_absolute

anonymous@undisclosed.example.com (Anonymous) — Sat, 06 Dec 2025 16:50:40 +0000

Абсолютные и относительные ссылки

Абсолютные ссылки (absolute)

Абсолютная ссылка — это адрес веб-ресурса целиком. Как правило такие ссылки ставят на сторонние ресурсы.

href="https://wwoss.ru" — ссылка на главную страницу сайта
href="https://wwoss.ru/doku.php?id=start" — cсылка на страницу с материалом внутри сайта

Относительные ссылки (relative)

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

href="t-shirts/t-shirt-life-is-good/" — ссылка с главной страницы на страницу товара
href="../../" — ссылка со страницы товара на главную страницу

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

Промежуточные варианты

Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно …», хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто «абсолютными» и «относительными».

Адрес относительно протокола (protocol-relative)

href=«sites.ru/shop/» — главная страница магазина href=«sites.ru/shop/t-shirts/t-shirt-life-is-good/» — страница товара

Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http: и https: — это разные сайты

Адрес относительно корневой папки домена (root-relative)

href=«/shop/» — главная страница магазина href=«/shop/t-shirts/t-shirt-life-is-good/» — страница товара

Это хороший выбор, если все страницы сайта находятся в пределах одного домена. При переносе сайта на другой домен, вам не придется делать массовую замену домена в ссылках.

1.Файлы располагаются в одной папке

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2.Файлы размещаются в разных папках

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3.Файлы размещаются в разных папках

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4.Файлы размещаются в разных папках

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

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>

5.Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем (/) вначале. Так, запись

<a href="/course/">Курсы</a>

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

Адрес относительно главной страницы сайта (base-relative)

В HTML есть тег <base>. Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе <head>. В качестве базового адреса мы укажем URL главной страницы:

<base href=«http://sites.ru/shop/»> href=«» — главная страница магазина href=«t-shirts/t-shirt-life-is-good/» — страница товара

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

Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href=«#comments» теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments».

Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.

Заключение

Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).

sidebar

anonymous@undisclosed.example.com (Anonymous) — Sun, 17 Mar 2024 11:04:07 +0000

HTML

Уроки

Основы HTML

Введение в HTML

Введение в HTML
Начало работы с HTML
Что внутри «head»? Метаданные в HTML
Основы редактирования текста в HTML
Создание гиперссылок
Продвинутое форматирование текста
Структура документа и веб-сайта
Отладка HTML
Задание: Выделение символа
Задание: Структура страницы

Мультимедиа и встраивание

Мультимедиа и встраивание
Изображения в HTML
Видео и аудио контент
От object до iframe — другие технологии встраивания
Добавление векторный графики в Веб
Отзывчивые изображения
Задание: Страница о Mozilla

HTML таблицы

HTML таблицы
HTML таблицы основы
HTML таблицы продвинутые возможности и доступность
Задание: Структурирование данных о планетах

Справочники

HTML элементы

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

Aтрибуты

Типы <input>

Путеводитель

Категории контента
Блочные элементы
Строчные элементы
Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)
Date and time formats used in HTML
Валидация ограничений
Microdata
Microformats
Viewport meta tag
Разрешение использования изображений из разных источников и canvas