Обзор HTML¶
Краткое введение в основные понятия HTML.
HyperText Markup Language, или HTML, — это стандартный язык разметки для описания структуры документов, отображаемых в Интернете. HTML состоит из ряда элементов и атрибутов, которые используются для разметки всех компонентов документа, чтобы структурировать его в осмысленном виде.
HTML-документы представляют собой дерево узлов, включающее HTML-элементы и текстовые узлы. HTML-элементы обеспечивают семантику и форматирование документов, включая создание абзацев, списков и таблиц, а также вставку изображений и элементов управления формами. У каждого элемента может быть задано несколько атрибутов. Многие элементы могут иметь содержимое, включая другие элементы и текст. Другие элементы являются пустыми, их назначение определяется тегом и атрибутами.
Существует несколько категорий элементов, в том числе метаданные, секционирование, текст, встроенная семантика, форма, интерактив, медиа, компонент и сценарий. Большинство из них мы рассмотрим в этой серии. Но прежде всего, что такое элемент?
Элементы¶
HTML состоит из ряда элементов, которые используются для окружения или обертывания различных частей содержимого, чтобы заставить его выглядеть или действовать определенным образом. Элементы HTML разграничиваются тегами, которые записываются с помощью угловых скобок (< и >).
Заголовок нашей страницы — это заголовок первого уровня, для которого мы используем тег <h1>. Собственно заголовок — "Machine Learning Workshop" — является содержимым нашего элемента. Содержимое находится между открывающим и закрывающим тегами. Все вместе — открывающий тег, закрывающий тег и содержимое — и есть элемент.
Закрывающий тег — это тот же тег, что и открывающий, перед которым ставится косая черта.
Элементы и теги — это не совсем одно и то же, хотя многие используют эти термины как взаимозаменяемые. Имя тега — это содержимое, заключенное в скобки. Тег включает в себя скобки. В данном случае это <h1>. Элемент — это открывающий и закрывающий теги, а также все содержимое между этими тегами, включая вложенные элементы.
1 2 3 4 5 | |
Этот элемент абзаца имеет другие элементы, вложенные в него. При вложении элементов важно, чтобы они были правильно вложены. Закрывать HTML-теги следует в порядке, обратном порядку их открытия. В приведенном примере обратите внимание на то, как <em> открывается и закрывается внутри открывающего и закрывающего тегов <strong>, а <strong> открывается и закрывается внутри тегов <p>.
Браузеры не отображают теги. Теги используются для интерпретации содержимого страницы.
Язык HTML очень и очень снисходителен. Например, если мы опустим закрывающие теги </li>, то закрывающие теги будут подразумеваться.
1 2 3 4 5 | |
Хотя не закрывать <li> вполне допустимо, это не является хорошей практикой. Закрывающий тег </ul> является обязательным. Если закрывающий тег неупорядоченного списка опущен, браузер попытается определить, где заканчивается ваш список и его элементы, но вы можете не согласиться с этим решением.
В спецификации каждого элемента указывается, является ли закрывающий тег обязательным или нет. "Neither tag is omissible" в спецификации означает, что и открывающий, и закрывающий теги обязательны. В спецификации приведен список всех необходимых закрывающих тегов.
Если в приведенном ранее примере <em> или <strong> не были закрыты, браузер может закрыть или не закрыть этот элемент за вас. Не закрытие <em> приводит к тому, что содержимое может быть отображено не так, как вы задумали. Если </ul> опущен и следующий тег является закрывающим тегом для родительского контейнера списка, то вам повезло. Если же это открывающий тег <h1>, то браузер будет считать, что заголовок является частью списка, включая наследование стилей. Некоторые пропущенные закрывающие теги приводят к более серьезным проблемам: незакрытие некоторых тегов, таких как <script>, <style>, <template>, <textarea> и <title>, приводит к разрыву последующего содержимого, как показано в следующем примере.
Если часть контента будет непреднамеренно выделена курсивом или отступом от заголовка, это не уничтожит ваш бизнес. А вот если большая часть контента отображается в текстовой области размером 200x300 без стиля, потому что вы забыли добавить </textarea>, или вообще не отображается, потому что вы забыли закрыть </style>, это делает сайт непригодным для использования.
В некоторых случаях браузеры включают элементы, даже если теги не присутствуют в разметке. Поскольку элементы могут подразумеваться, элемент может существовать даже тогда, когда теги отсутствуют. Браузер добавит <body></body> вокруг вашего содержимого и <tbody></tbody> вокруг строк таблицы, даже если вы этого не сделаете. Учитывая это, можно опустить теги, но не стоит. Кроме того, как уже говорилось, убедитесь, что они правильно вложены. Ваш будущий специалист по сопровождению разметки и все остальные, работающие с вашей кодовой базой, будут вам благодарны.
Существует два типа элементов: заменяемые и незаменяемые.
Незаменяемые элементы¶
Абзац, заголовок и списки, отмеченные в предыдущем разделе, являются неезаменяемыми элементами. Незаменяемые элементы имеют открывающие и (иногда необязательные) закрывающие теги, которые окружают их и могут включать текст и другие теги в качестве вложенных элементов. Эти теги могут превратить фразу или изображение в гиперссылку, предложение в заголовок, выделить слова и т. д.
Заменяемые и пустые элементы¶
Заменяемые элементы заменяются объектами, будь то виджет графического интерфейса пользователя (UI) в случае большинства элементов управления формами или растровый или масштабируемый файл изображения в случае большинства изображений. Каждый объект, заменяемый объектами, имеет внешний вид по умолчанию. В зависимости от типа объекта и браузера применимые стили могут быть ограничены. Например, большинство браузеров позволяют ограничить стилизацию виджетов пользовательского интерфейса и связанных с ними псевдоэлементов. В случае растровых изображений высота, ширина, обрезка и фильтрация легко выполняются с помощью CSS, но не более того. С другой стороны, масштабируемая векторная графика, использующая язык разметки XML, аналогичный HTML, полностью масштабируема (если только она не содержит растровых изображений). Кроме того, они полностью поддаются стилизации. Обратите внимание, что возможность стилизации встроенного SVG из CSS, связанного с HTML-файлом, в который он встроен, зависит от того, как настроен SVG.
В данном примере два заменяемых элемента <img> и <input> заменены нетекстовым содержимым: изображением и графическим объектом пользовательского интерфейса соответственно.
1 2 | |
Вывод приведенного выше HTML:
Часто путают заменяемые элементы и пустые элементы. Все пустые элементы являются самозакрывающимися элементами и представлены одним тегом. Это означает, что закрывающего тега для пустого элемента не существует. По желанию в конце тега можно поставить косую черту, что, по мнению многих, облегчает чтение разметки. Продолжая этот пример, мы самостоятельно закрываем тег косой чертой:
1 2 | |
Косая черта в конце — старая школа: это способ указать на то, что элемент является самозакрывающимся и для него не будет сопоставлен завершающий или закрывающий тег.
Пустые элементы не могут содержать текстовое содержимое или вложенные элементы. К пустым элементам относятся <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> и <wbr>, а также другие.
Большинство заменяемых элементов являются пустыми элементами, но не все. Элементы <video>, <picture>, <object> и <iframe> заменяются, но не являются пустыми элементами. Все они могут содержать другие элементы или текст, поэтому все они имеют закрывающий тег.
Большинство пустых элементов заменяются, но, опять же, не все, как мы видели в случае с <base>, <link>, <param> и <meta>. Зачем нужен пустой элемент, который не может иметь никакого содержимого, который не заменяется и тем самым ничего не выводит на экран? Для того чтобы предоставить информацию о содержимом! Информацию предоставляют атрибуты элементов.
Атрибуты¶
Возможно, вы заметили, что в примерах <img> и <input> в открывающем теге содержится не только тип элемента. Эти дополнительные биты, состоящие из разделенных пробелами пар имя/значение (хотя иногда включение значения необязательно), называются атрибутами. Именно атрибуты делают HTML таким невероятно мощным. В этой серии мы рассмотрим сотни атрибутов и значений атрибутов, но здесь мы просто обсудим, что это такое в целом и как их включать.
Атрибуты предоставляют информацию об элементе. Атрибуты, как и остальная часть открывающего тега, не будут отображаться в содержимом, но они помогают определить, как содержимое будет выглядеть для ваших зрячих и незрячих (вспомогательные технологии и поисковые системы) пользователей.
Атрибуты появляются только в открывающем теге. Открывающий тег всегда начинается с типа элемента. За типом может следовать ноль или более атрибутов, разделенных одним или несколькими пробелами. За именами большинства атрибутов следует знак равенства, приравнивающий его к значению атрибута, заключенный в открывающие и закрывающие кавычки.
В данном примере мы имеем якорную ссылку с двумя атрибутами. Эти два атрибута преобразовали содержимое "Регистрация" во внутреннюю якорную ссылку, которая прокручивается к атрибуту id="register" в текущей вкладке браузера при щелчке, касании или активации ссылки с помощью клавиатуры или другого устройства.
Атрибуты определяют поведение, связи и функциональность элементов. Подробнее об атрибутах мы поговорим в разделе Атрибуты этой серии статей. Пока же отметим, что некоторые атрибуты являются глобальными, т.е. они могут появляться в открывающем теге любого элемента. Некоторые из них применимы только к нескольким элементам, но не ко всем, а другие специфичны для конкретного элемента и относятся только к нему.
Большинство атрибутов представляют собой пары имя/значение. Булевы атрибуты, значение которых равно true, false или совпадает с именем атрибута, могут быть включены только как атрибут: значение не обязательно.
1 | |
Этот образ имеет три атрибута: src, alt и ismap. Атрибут src используется для указания местоположения актива SVG-изображения. Атрибут alt содержит альтернативный текст, описывающий содержимое изображения. Атрибут ismap является булевым и не требует значения. Это лишь пояснение того, что такое атрибуты. Более подробно мы рассмотрим эти атрибуты в разделе Изображения.
Хотя цитирование атрибутов требуется не всегда, иногда это необходимо. Если значение содержит пробел или специальные символы, то кавычки необходимы. По этой причине кавычки всегда рекомендуются. Один или несколько пробелов между атрибутами, если значение атрибута взято в кавычки, на самом деле не обязательны, но для надежности и для удобочитаемости кавычки и пробелы рекомендуются и приветствуются.
HTML не чувствителен к регистру, но некоторые значения атрибутов чувствительны. Значения, определенные в спецификации, не чувствительны к регистру. Строки, которые не определены как ключевые слова, обычно чувствительны к регистру, включая значения id и class.
Обратите внимание, что если значение атрибута чувствительно к регистру в HTML, то оно чувствительно к регистру и при использовании в качестве части селектора атрибутов в CSS и JavaScript.
Для облегчения чтения разметки рекомендуется, но не обязательно, использовать в HTML строчные буквы для всех имен элементов и атрибутов в тегах, а также заключать в кавычки все значения атрибутов. Если вы когда-нибудь услышите термин "разметка в стиле XHTML", то именно это, а также самозакрывающиеся пустые элементы со слешем в конце, и имеется в виду.
Внешний вид элементов¶
Внешний вид семантических элементов по умолчанию задается таблицами стилей пользовательского агента. Большинство браузеров используют для этого реальные таблицы стилей, другие моделируют их в коде. Конечный результат одинаков. Хотя некоторые ограничения на пользовательские таблицы стилей задаются спецификацией HTML, браузеры имеют большую свободу действий, поэтому между ними существуют некоторые различия.
Выбранный элемент, а следовательно, и используемые теги должны соответствовать отображаемому содержимому, поскольку теги имеют семантическое значение. Семантика, или role, элемента важна для вспомогательных технологий и, в некоторых случаях, для поисковых систем. Язык HTML должен использоваться для структурирования содержимого, а не для определения его внешнего вида. Внешний вид — это сфера CSS. Хотя многие элементы, изменяющие внешний вид содержимого, такие как <h1>, <strong> и <em>, имеют семантическое значение, внешний вид может быть и, как правило, будет изменен с помощью авторских стилей.
1 2 3 4 | |
Элемент, атрибуты и JavaScript¶
Объектная модель документа (DOM) — это представление данных о структуре и содержимом HTML-документа. При разборе HTML браузер создает объект JavaScript для каждого встреченного элемента и участка текста. Эти объекты называются узлами — узлами элементов и узлами текста, соответственно.
Для определения функциональности каждого элемента HTML существует интерфейс. HTML DOM API обеспечивает доступ и управление каждым элементом HTML через DOM, предоставляя интерфейсы для элемента HTML и всех классов HTML, которые наследуются от него. Интерфейс HTMLElement представляет HTML-элемент и все его узлы-потомки. Каждый другой элемент реализует его через интерфейс, который от него наследуется. Каждый наследуемый интерфейс имеет конструктор, методы и свойства. Через унаследованные свойства HTMLElement можно получить доступ ко всем глобальным атрибутам, а также к событиям input, pointer, transition и animation. Через подтипы отдельных элементов, такие как HTMLAnchorElement и HTMLImageElement, можно получить доступ к значениям и методам атрибутов, специфичных для данного элемента.