worldwide open-source software - software:development:ps_pycharm:html5:element

a

anonymous@undisclosed.example.com (Anonymous) — Thu, 17 Aug 2023 21:43:01 +0000

<a> : элемент привязки

Элемент HTML (или элемент привязки ) со своим атрибутом создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, к чему может обращаться URL-адрес.<a> href

Содержимое каждого из них <a> должно указывать на назначение ссылки. Если hrefатрибут присутствует, нажатие клавиши ввода при фокусировке на <a> элементе активирует его.

Попробуй

Категории контента	Отсутствуют.
Допустимое содержимое	Отсутствует. Это пустой элемент.
Пропуск тегов	Без закрывающего тега.
Допустимые родители	<head>, <body>
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLBaseElement

Атрибуты

К этому элементу применимы .глобальные атрибуты

href
Базовый адрес (URL) для указания полного пути (основной, главный адрес). Если указан данный атрибут, значит этот элемент должен находиться до других элементов с атрибутами URLs. Разрешены абсолютные (внешние) и относительные (внутренние) адреса (URLs).

target
Значение атрибута определяет имя контекста, которое применяется для ссылок (<a>) и форм (<form>). Они нужны для отображения контекста (пример: вкладка, окно или встроенный фрейм). Следующие ключевые слова имеют специальные значения:

_self: загружает результат в текущем окне или вкладке. Если атрибут не указан, является значением по умолчанию.
_blank: загружает результат в новом окне или бланке.
_parent: загружает данные в родительском окне. Если значение _parent не указано, используется значение _self.
_top: загружает данные в контексте верхнего уровня (то есть, отображает полученный контекст без обратного перехода, если не имеет родительского значения). Если нет родительских данных используется как _self.

Пример

MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0

base

anonymous@undisclosed.example.com (Anonymous) — Sun, 20 Aug 2023 17:23:13 +0000

<base>

HTML-элемент <base> определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <base> элемент в одном документе. Основной адрес (URL) документа можно запросить скриптом используя document.baseURI (en-US).

Категории контента	Отсутствуют.
Допустимое содержимое	Отсутствует. Это пустой элемент.
Пропуск тегов	Без закрывающего тега.
Допустимые родители	<head>, <body>
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLBaseElement

Атрибуты

К этому элементу применимы .глобальные атрибуты

_self: загружает результат в текущем окне или вкладке. Если атрибут не указан, является значением по умолчанию.
_blank: загружает результат в новом окне или бланке.
_parent: загружает данные в родительском окне. Если значение _parent не указано, используется значение _self.
_top: загружает данные в контексте верхнего уровня (то есть, отображает полученный контекст без обратного перехода, если не имеет родительского значения). Если нет родительских данных используется как _self.

Примечание: если указано несколько элементов <base> , будут использованы только первые href и target; все последующие значения проигнорируются.

Пример

<base href="http://www.example.com/page.html" />
<base target="_blank" href="http://www.example.com/page.html" />

MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0

head

anonymous@undisclosed.example.com (Anonymous) — Sun, 20 Aug 2023 17:33:14 +0000

<head>: элемент метаданных документа

HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

Примечание: <head> в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе <header>.

Категории контента	Отсутствуют.
Допустимое содержимое	Если документ является документом <iframe> с атрибутом srcdoc, или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные. Иначе, один или более элементов содержащих метаданные, один из которых является элементом <title>.
Пропуск тегов	Открывающий тег может быть пропущен, если первым, что находится внутри элемента <head> является другой элемент. Закрывающий тег может быть пропущен, если первое, что следует за элементом <head> не является пробелом или комментарием.
Допустимые родители	Элемент <html> (<head> является его первым дочерним элементом).
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLHeadElement

Атрибуты

К этому элементу применимы .глобальные атрибуты

profile
URI одного или более профилей метаданных, разделённых пробелами.

Пример

<!doctype html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>

Примечание

HTML5-совместимые браузеры автоматически создают элемент <head>, если его теги пропущены в разметке

MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0

html

anonymous@undisclosed.example.com (Anonymous) — Sun, 20 Aug 2023 17:18:33 +0000

<html>

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

Категории контента	Отсутствуют.
Допустимое содержимое	Один элемент <head>, за которым следует один элемент <body>.
Пропуск тегов	Открывающий тег может быть пропущен, если первое, что находится внутри элемента <html>, не является комментарием. В HTML5 закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <html> следует комментарий (при наличии элемента <body>), то закрывающий тег пропускать нельзя.
Допустимые родители	Отсутствуют. Это корневой элемент документа.
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLHtmlElement

Атрибуты

К этому элементу применимы .глобальные атрибуты

manifest
Определяет URI файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кеше. Смотрите Использование кеша приложений.

version
Определяет версию HTML DTD (Document Type Definition, больше известное как Doctype), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.

xmlns
Определяет пространство имён XHTML-документа. Значение по умолчанию «http://www.w3.org/1999/xhtml». Это требуется при парсинге документов с помощью парсера XML и необязательно для документов text/html.

Пример

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Проблемы доступности

Добавление атрибута <lang> с допустимым (валидным) идентификатором языка (определены в документе IETF BCP47) в элемент <html> поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения.

Добавление валидного атрибута <lang> в элемент <html> также гарантирует, что важные метаданные, содержащиеся в элементе <head>, например заголовок страницы <title>, также будут объявлены правильно.

MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0

link

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

<link>

Элемент HTML - Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Категории контента	Контент метаданных. Если есть itemprop : потоковый контент и фразовый контент.
Допустимое содержимое	Нет, это пустой элемент.
Пропуск тегов	Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.
Допустимые родители	Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент.
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLLinkElement

Пример

myexample.html

<link href="/media/examples/link-element-example.css" rel="stylesheet" />
<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">The <code>style</code> attribute can override it, though.</p>

Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:

<link href="main.css" rel="stylesheet" />

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента <link> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

<link rel="icon" href="favicon.ico" />

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

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

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

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=«preload» (en-US) для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:

Элемент <link> может присутствовать в элементах <head> или <body>, в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, <link rel=«stylesheet»> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head>.
При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy не препятствует доступу к ней.
Спецификации HTML и XHTML определяют обработчики событий для элемента <link>, но не указывают как они будут использоваться.
В XHTML 1.0, пустые элементы, такие как <link>, требуют слеш: <link />.
WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Атрибуты

К этому элементу применимы .глобальные атрибуты

profile
URI одного или более профилей метаданных, разделённых пробелами.

Пример

<!doctype html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>

Примечание

HTML5-совместимые браузеры автоматически создают элемент <head>, если его теги пропущены в разметке

MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0