Элемент HTML — это тип компонента документа HTML (язык гипертекстовой разметки), один из нескольких типов узлов HTML (есть также текстовые узлы, узлы комментариев и другие). [ неопределенно ] Первая использованная версия HTML была написана Тимом Бернерсом-Ли в 1993 году, и с тех пор появилось множество версий HTML. Текущий стандарт де-факто регулируется отраслевой группой WHATWG и известен как «Живой стандарт HTML».
Документ HTML состоит из дерева простых узлов HTML , таких как текстовые узлы, и элементов HTML, которые добавляют семантику и форматирование к частям документа (например, выделяют текст жирным шрифтом, организуют его в абзацы, списки и таблицы или встраивают гиперссылки) . и изображения). Для каждого элемента могут быть указаны атрибуты HTML . Элементы также могут иметь контент, включая другие элементы и текст.
Как обычно понимается, позиция элемента указывается как простирающаяся от начального тега и завершается конечным тегом. [1] Это относится ко многим, но не ко всем элементам HTML-документа. Это различие явно подчеркнуто в спецификации HTML 4.01 :
Элементы не являются тегами. Некоторые люди называют элементы тегами (например, «тег P»). Помните, что элемент — это одно, а тег (будь то начальный или конечный тег) — другое. Например, элемент HEAD присутствует всегда, хотя в разметке могут отсутствовать как начальный, так и конечный теги HEAD. [1]
Аналогичным образом, в Рекомендации W3C HTML 5.1 2nd Edition прямо говорится:
Теги используются для разграничения начала и конца элементов в разметке. (...) Начальный и конечный теги некоторых обычных элементов могут быть опущены, (...)
Содержимое элемента должно быть помещено сразу после начального тега (который в некоторых случаях может подразумеваться ) и непосредственно перед ним. конечный тег (который, опять же , в некоторых случаях может подразумеваться ).— HTML 5.1, 2-е издание, § 8.1.2. Элементы § Теги
и:
Некоторые теги могут быть опущены .
ПРИМЕЧАНИЕ.
Отсутствие начального тега элемента (...) не означает, что элемент отсутствует; это подразумевается, но оно все еще существует. Например, документ HTML всегда имеет корневой <html>элемент, даже если строка <html>не встречается нигде в разметке.— HTML 5.1, 2-е издание, § 8.1.2.4. Дополнительные теги
Поскольку HTML (до HTML5) основан на SGML , [2] его анализ также зависит от определения типа документа (DTD) , в частности от HTML DTD (например, HTML 4.01 [3] [примечание 1] ). DTD определяет, какие типы элементов возможны (т. е. определяет набор типов элементов), а также допустимые комбинации, в которых они могут появляться в документе. Частью общего поведения SGML является то, что там, где возможна только одна допустимая структура (согласно DTD), ее явное указание в любом документе обычно не требуется. В качестве простого примера: тег, указывающий начало элемента абзаца, должен быть дополнен тегом, указывающим его конец. Но поскольку в DTD указано, что элементы абзаца не могут быть вложенными, фрагмент HTML-документа считается эквивалентным . (Если один элемент абзаца не может содержать другой, любой открытый в данный момент абзац должен быть закрыт перед началом другого.) Поскольку этот вывод основан на сочетании DTD и отдельного документа, обычно невозможно вывести элементы только из тегов документа , но только с помощью синтаксического анализатора, поддерживающего SGML или HTML, со знанием DTD. HTML5 создает аналогичный результат, определяя, какие теги можно опустить. [4]<p></p><p>Para 1 <p>Para 2 <p>Para 3<p>Para 1 </p><p>Para 2 </p><p>Para 3
SGML сложен, что ограничивает его широкое понимание и внедрение. XML был разработан как более простая альтернатива. Хотя оба могут использовать DTD для указания поддерживаемых элементов и их разрешенных комбинаций в качестве структуры документа, анализ XML проще. Связь между тегами и элементами всегда заключается в анализе фактических тегов, включенных в документ, без подразумеваемых замыканий, которые являются частью SGML. [заметка 2]
HTML, используемый в текущей сети, скорее всего, будет рассматриваться либо как XML, будучи XHTML , либо как HTML5 ; в любом случае анализ тегов документа в элементы объектной модели документа (DOM) упрощается по сравнению с устаревшими системами HTML. После получения DOM элементов поведение на более высоких уровнях интерфейса (пример: рендеринг экрана) идентично или почти идентично. [заметка 3]
Частью поведения представления CSS является понятие « блочной модели ». Это применяется к тем элементам, которые CSS считает «блочными» элементами, заданными посредством объявления CSS.display: block;
HTML также имеет похожую концепцию, хотя и разную, и их очень часто путают. %block;и %inline;представляют собой группы в HTML DTD, которые группируют элементы как «блочные» или «встроенные». [6] Это используется для определения их поведения вложенности: элементы уровня блока не могут быть помещены во встроенный контекст. [примечание 4] Это поведение нельзя изменить; это исправлено в DTD. Блочные и встроенные элементы по умолчанию имеют соответствующее и различное поведение CSS , [6] включая актуальность блочной модели для определенных типов элементов.
Однако обратите внимание, что это поведение CSS может быть изменено (и часто так и происходит) по сравнению с поведением по умолчанию. Списки содержат элементы и по умолчанию представлены как блочные элементы. Однако довольно часто их можно настроить с помощью CSS для отображения в виде встроенного списка. [7]<ul><li> ...%block;
В синтаксисе HTML большинство элементов записываются с начальным и конечным тегом, между которыми находится содержимое. HTML -тег состоит из имени элемента, заключенного в угловые скобки . Конечный тег также имеет косую черту после открывающей угловой скобки, чтобы отличить его от начального тега. Например, абзац, представленный элементом <p>, будет записан так:
<p> В синтаксисе HTML большинство элементов записываются ... </p>Однако не для всех этих элементов требуется наличие конечного или даже начального тега. [4] Некоторые элементы, так называемые пустые элементы , не имеют закрывающего тега. Типичным примером является <br>элемент (жесткий перенос строки). Поведение элемента void предопределено, и он не может содержать никакого содержимого или других элементов. Например, адрес будет записан так:
<p> П. Шерман <br /> Уоллаби - Уэй , 42 <br /> Сидней < / p > При использовании XHTML необходимо открывать и закрывать все элементы, включая элементы void. Это можно сделать, поместив конечный тег сразу после начального тега, но в HTML 5 это запрещено и приведет к созданию двух элементов. Альтернативный способ указать, что это элемент void, который совместим как с XHTML, так и с HTML 5, — поставить /в конце тега (не путать с /в начале закрывающего тега).
<p> П. Шерман <br /> Уоллаби - Уэй , 42 <br /> Сидней < / p > Атрибуты HTML указываются внутри начального тега. Например, <abbr>элемент, представляющий аббревиатуру , ожидает titleатрибут в открывающем теге. Это будет записано как:
< аббр заголовок = "аббревиатура" > сокр. </ сокр .>Неофициально элементы HTML иногда называют «тегами» (пример синекдохи ), хотя многие предпочитают термин «тег» исключительно в отношении разметки, разграничивающей начало и конец элемента.
Имена элементов (и атрибутов) могут быть написаны в любой комбинации верхнего или нижнего регистра в HTML, но должны быть в нижнем регистре в XHTML. [8] Каноническая форма была прописной до HTML 4 и использовалась в спецификациях HTML, но в последние годы строчные буквы стали более распространенными.
Существует три типа элементов HTML : обычные элементы, необработанные текстовые элементы и пустые элементы.
Обычные элементы обычно имеют как начальный, так и конечный тег, хотя для некоторых элементов конечный тег или оба тега могут быть опущены. Он строится аналогичным образом:
<tag></tag>Необработанные текстовые элементы (также известные как текстовые или только текстовые элементы) создаются с помощью:
<tag></tag>Примером может служить <title>элемент, который не должен содержать других элементов (в том числе текстовой разметки), только простой текст.
Пустые элементы (также иногда называемые пустыми элементами, отдельными элементами или автономными элементами) имеют только начальный тег (в форме), который содержит любые атрибуты HTML. Они не могут содержать дочерних элементов, таких как текст или другие элементы. Для совместимости сXHTMLспецификация HTML[ который? ]допускает необязательный пробел и косую черту[ нужна ссылка ](допустимо). Косая черта необходима вXHTMLи другихXML-приложениях. Двумя распространенными пустыми элементами являются(дляжесткого разрыва строки, например, в стихотворении или адресе) и(для тематического разрыва). Другие подобные элементы часто являются заполнителями, которые ссылаются на внешние файлы, напримерэлемент изображения ( ). Атрибуты, включенные в элемент, будут указывать на соответствующий внешний файл. Другой пример элемента void —, синтаксис которого следующий:<tag><tag /><br /><hr /><img /><link />
< ссылка rel = «таблица стилей» href = «fancy.css» type = «text/css» >Этот <link />элемент указывает браузеру на таблицу стилей , которую следует использовать при представлении HTML-документа пользователю. В атрибутах синтаксиса HTML не обязательно заключать кавычки, если они состоят только из определенных символов: букв, цифр, дефиса-минус и точки. С другой стороны, при использовании синтаксиса XML (XHTML) все атрибуты должны быть заключены в кавычки, а перед последней угловой скобкой требуется конечная косая черта :
<link rel= "таблица стилей" href= "fancy.css" type= "text/css" /> Атрибуты HTML определяют желаемое поведение или указывают дополнительные свойства элемента. Для большинства атрибутов требуется значение . В HTML значение можно оставить без кавычек, если оно не содержит пробелов (), или его можно заключить в одинарные или двойные кавычки (или). В XML эти кавычки обязательны.attribute=valueattribute='value'attribute="value"
С другой стороны, логические атрибуты не требуют указания значения. Примером являются checkedфлажки for:
< тип ввода = флажок установлен > Однако в синтаксисе XML (и, следовательно , XHTML ) требуется значение, и имя должно повторяться как значение:
< тип ввода = "флажок" отмечен = "отмечено" /> Элементы HTML определены в серии свободно доступных открытых стандартов, выпущенных с 1995 года сначала IETF, а затем W3C .
Во время браузерных войн 1990-х годов разработчики пользовательских агентов (например, веб-браузеров ) часто разрабатывали свои собственные элементы, некоторые из которых были приняты в более поздних стандартах. Другие пользовательские агенты могут не распознавать нестандартные элементы и будут игнорироваться, что может привести к неправильному отображению страницы.
В 1998 году XML (упрощенная форма SGML) представил механизмы, позволяющие любому разрабатывать свои собственные элементы и включать их в документы XHTML для использования с пользовательскими агентами, поддерживающими XML. [9]
Впоследствии HTML 4.01 был переписан в XML -совместимой форме XHTML 1.0 ( расширяемый HTML ). Элементы в каждом из них идентичны, и в большинстве случаев действительные документы XHTML 1.0 будут действительными или почти действительными документами HTML 4.01. Эта статья в основном посвящена реальному HTML, если не указано иное; однако он остается применимым к XHTML. См. HTML для обсуждения незначительных различий между ними.
Со времени появления первой версии HTML некоторые элементы устарели и считаются устаревшими в более поздних стандартах или вообще не отображаются, и в этом случае они недействительны (и будут признаны недействительными и, возможно, не отображаются при проверке пользовательских агентов). . [10]
В HTML 4.01 / XHTML 1.0 статус элементов осложняется существованием трёх типов DTD :
Вместо этого HTML5 предоставляет список устаревших функций в дополнение к стандартизированному нормативному содержанию. Они разбиты на «устаревшие, но соответствующие», для которых существуют инструкции по реализации, и «несоответствующие», которые следует заменить. [11]
Первый стандарт ( HTML 2.0 ) содержал четыре устаревших элемента, один из которых был недействителен в HTML 3.2 . Все четыре недействительны в HTML 4.01 Transitional , в котором также объявлены устаревшими еще десять элементов. Все они, а также два других, недействительны в HTML 4.01 Strict . Хотя элементы фреймов все еще актуальны в том смысле, что они присутствуют в DTD Transitional и Frameset, нет планов сохранять их в будущих стандартах, поскольку их функции были в значительной степени заменены, и они весьма проблематичны для доступности пользователя.
(Строго говоря, самый последний стандарт XHTML , XHTML 1.1 (2001 г.), вообще не включает фреймы; он примерно эквивалентен XHTML 1.0 Strict , но также включает модуль разметки Ruby .) [12]
Распространенным источником путаницы является свободное использование слова «устаревший» для обозначения как устаревшего, так и недействительного статуса, а также элементов, которые, как ожидается, будут официально признаны устаревшими в будущем.
Начиная с HTML 4, HTML все больше фокусируется на отделении контента (видимого текста и изображений) от представления (например, цвета, размера шрифта и макета). [13] Это часто называют разделением ответственности . HTML используется для представления структуры или содержимого документа, ответственность за его представление остается исключительно за таблицами стилей CSS . Таблица стилей по умолчанию предлагается как часть стандарта CSS и обеспечивает рендеринг HTML по умолчанию. [14]
Поведение (интерактивность) также отделено от контента и обрабатывается скриптами . Изображения содержатся в отдельных графических файлах, отдельно от текста, хотя их также можно считать частью содержимого страницы.
Разделение задач позволяет представлять документ различным пользовательским агентам в соответствии с их целями и возможностями. Например, пользовательский агент может выбрать подходящую таблицу стилей для представления документа путем отображения на мониторе, печати на бумаге или для определения речевых характеристик в пользовательском агенте, работающем только с аудио. Структурные и семантические функции разметки в каждом случае остаются идентичными.
Исторически сложилось так, что пользовательские агенты не всегда поддерживали эти функции. В 1990-х годах в качестве временной меры в HTML были добавлены презентационные элементы (такие как <b>и <i>), но это привело к созданию проблем с совместимостью и доступностью для пользователей. Сейчас это считается устаревшим и заменено дизайном на основе таблиц стилей; большинство презентационных элементов теперь устарели. [15]
Внешние файлы изображений включаются в элементы <img />или <object />. (С помощью XHTML язык SVG также можно использовать для написания графики внутри документа, хотя связывание с внешними файлами SVG, как правило, проще.) [16] Если изображение не является чисто декоративным, HTML позволяет заменять контент с аналогичным семантическим значением. предусмотрен для невизуальных пользовательских агентов.
HTML-документ также можно расширить за счет использования сценариев, чтобы обеспечить дополнительные возможности, выходящие за рамки возможностей гиперссылок и форм HTML.
Элементы <style>и <script>со связанными атрибутами HTML предоставляют таблицы стилей и сценарии.
<style />и <script />может ссылаться на общие внешние документы или <style>...</style>может <script>...</script>содержать встроенные инструкции. ( <link>Элемент также можно использовать для связи таблиц стилей.)<script />или <script>...</script>может произойти в любой точке документа (заголовок или тело).styleдействителен в большинстве элементов тела документа (например, <div style="...">) для включения инструкций встроенного стиля .<noscript>...</noscript>элемент предоставляет встроенный альтернативный контент, где это необходимо; однако его можно использовать только в заголовке и теле документа как элемент уровня блока.<html>...</html><head>...</head>Контейнер для обработки информации и метаданных HTML-документа.
<body></body>Контейнер для отображаемого содержимого HTML-документа.
<base />hrefи других ссылок в документе. Должен стоять перед любым элементом, ссылающимся на внешний ресурс. HTML допускает только один <base>элемент для каждого документа. У этого элемента есть атрибуты HTML , но нет содержимого.BASE) упоминается в HTML-тегах ; стандартизирован в HTML 2.0; все еще актуален.<basefont /> (deprecated)<font>элементами. Устарело в пользу таблиц стилей .<isindex /> (deprecated)<isindex>может появляться либо в заголовке документа, либо в теле документа, но только один раз в документе. См. Формы .<link /><link rel="stylesheet" type="text/css" href="url" title="description_of_style"><link rel="next" href="url"><head><link />LINKсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<meta />Может использоваться для указания дополнительных метаданных о документе, таких как его автор, дата публикации, срок действия, язык, заголовок страницы, описание страницы, ключевые слова или другая информация, не предоставляемая через другие элементы заголовка и атрибуты HTML . Из-за своей общей природы <meta />элементы определяют ассоциативные пары ключ-значение . В общем, метаэлемент передает скрытую информацию о документе. Можно использовать несколько метатегов, все из которых должны быть вложены в элемент head. Конкретное назначение каждого <meta />элемента определяется его атрибутами. За пределами XHTML он часто указывается без косой черты ( <meta>), несмотря на то, что он является пустым элементом.
В одной форме <meta />элементы могут указывать HTTP- заголовки, которые должны быть отправлены веб-сервером перед фактическим содержимым. Например, указывает, что страница должна обслуживаться с HTTP-заголовком, имеющим значение .<meta http-equiv="foo" content="bar" />foobar
<meta />элемент определяет nameи связанные с ним contentатрибуты HTML, описывающие аспекты HTML-страницы. Чтобы предотвратить возможную двусмысленность, можно указать необязательный третий атрибут , schemeчтобы указать семантическую структуру, которая определяет значение ключа и его значение. Например, элемент in идентифицирует себя как содержащий элемент со значением из структуры описания ресурсов DC или Dublin Core .<meta name="foo" content="bar" scheme="DC" /><meta />foobar <object>...</object><head>элемента, его потенциально можно использовать для извлечения внешних данных и связывания их с текущим документом.<script>...</script>srcатрибутом. [19] Также можно использовать в теле документа для динамического создания как блочного, так и встроенного содержимого.<style>...</style><style type="text/css"> ... </style>@import <style> @import url; </style><title>...</title><title>не должен содержать других элементов, только текст. <title>В документе допускается только один элемент.В визуальных браузерах отображаемые элементы могут отображаться как блочные , так и встроенные . Хотя все элементы являются частью последовательности документов, блочные элементы появляются внутри своих родительских элементов:
И наоборот, строчные элементы рассматриваются как часть текста документа; им не могут быть заданы поля, ширина или высота, и они разрываются на строки.
Блочные элементы или элементы уровня блока имеют прямоугольную структуру. По умолчанию эти элементы будут занимать всю ширину родительского элемента и, таким образом, не позволят любому другому элементу занимать то же горизонтальное пространство, на котором он размещен.
Прямоугольную структуру блочного элемента часто называют коробчатой моделью , и она состоит из нескольких частей. Каждый элемент содержит следующее:
Приведенный выше раздел относится только к подробной реализации рендеринга CSS и не имеет отношения к самим элементам HTML.
<p>...</p>Pсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<h1>...</h1> <h2>...</h2><h3>...</h3><h4>...</h4><h5>...</h5><h6>...</h6>h1ограничивает заголовок самого высокого уровня, h2следующий уровень ниже (подраздел), h3уровень ниже этого и т. д. до h6. Иногда их называют тегами , где n означает любой из доступных уровней заголовков. Большинство визуальных браузеров по умолчанию отображают заголовки как большой жирный текст, хотя это можно переопределить с помощью CSS . Элементы заголовка предназначены не только для создания большого или жирного текста — на самом деле их не следует использовать для явного стилизации текста. Скорее, они описывают структуру и организацию документа. Некоторые программы используют их для создания схем и оглавлений.hn<dl>...</dl>DLсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<dt>...</dt>DTсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<dd>...</dd>DDсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<ol>...</ol>typeможно использовать для указания типа маркера, который будет использоваться в списке, но таблицы стилей предоставляют больше контроля. По умолчанию используется арабская нумерация. В атрибуте HTML: ; или в объявлении CSS: – заменить одним из следующих:<ol type="foo">ol { list-style-type: foo; }fooA; Значение CSS:upper-alphaa; Значение CSS:lower-alphaI; Значение CSS:upper-romani; Значение CSS:lower-roman1;decimalnoneпараметры CJK , иврита, грузинского и армянского алфавита. Атрибут устарел в HTML 3.2 и 4.01, но не в HTML 5.OLсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<ul>...</ul><ul type="foo">ul { list-style-type: foo; }foodiscsquarecirclenoneULсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<li>...</li>ol) или неупорядоченном ( ul) списках.LIсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<dir>...</dir> (deprecated)<ul>DIRсуществовал в тегах HTML и был стандартизирован в HTML 2.0; устарел в HTML 4.0 Transitional; недопустимо в HTML 4.0 Strict.<address>...</address>ADDRESSсуществовал в тегах HTML и был стандартизирован в HTML 2.0; все еще актуален.<article>...</article><aside>...</aside><blockquote>...</blockquote>Цитата уровня блока , когда цитата включает элементы уровня блока, например абзацы. Атрибут cite(не путать с элементом <cite>) может указывать источник и должен быть полностью квалифицированным унифицированным идентификатором ресурса .
BLOCKQUOTEсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален. Дополнительную информацию см. в разделе «Элемент блочной цитаты» .<center>...</center> (deprecated)<del>...</del><div>...</div><figure>...</figure><figcaption>.<figcaption>...</figcaption><figure>элемента.<header>...</header><hr /><ins>...</ins><main>...</main><ul>список.MENUсуществовал в тегах HTML и был стандартизирован в HTML 2.0; устарел в HTML 4.0 Transitional; недопустимо в HTML 4.0 Strict; затем переопределен в HTML5, удален в HTML 5.2, но включен в HTML Living Standard в 2019 году.<noscript>...</noscript><pre>...</pre><pre>...</pre>, пробелы должны отображаться как созданные. (С помощью свойств CSS: другие элементы могут быть представлены таким же образом.) Этот элемент может содержать любой встроенный элемент, кроме: <image>, <object>, <big>, <small>, <sup> и <sub. >...</sub>.{ white-space: pre; font-family: monospace; }PREсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<section>...</section><script>...</script><script />атрибут srcдля предоставления URL-адреса, с которого можно загрузить сценарий, или использовать для <script>...</script>встроенного содержимого сценария. Примечание: <script> сам по себе не является ни блочным, ни встроенным элементом; сам по себе он вообще не должен отображаться, но может содержать инструкции для динамического создания как блочного, так и встроенного содержимого.Встроенные элементы не могут быть размещены непосредственно внутри элемента; они должны быть полностью вложены в элементы уровня блока. [24]<body>
<a>...</a>Элемент привязки называется якорем, потому что веб-дизайнеры могут использовать его для «привязки» URL-адреса к некоторому тексту на веб-странице. Когда пользователи просматривают веб-страницу в браузере, они могут щелкнуть текст, чтобы активировать ссылку, и посетить страницу, URL-адрес которой указан в ссылке. [25]
В HTML привязка может быть либо исходным ( текст привязки ), либо целевым (назначающим) концом гиперссылки .
hrefС атрибутом [26] якорь становится гиперссылкой либо на другую часть документа, либо на другой ресурс (например, веб-страницу) с использованием внешнего URL-адреса . Альтернативно (а иногда и одновременно), если установлены атрибуты HTMLname или , элемент становится целью ссылки. Унифицированный указатель ресурсов (URL) может ссылаться на эту цель через идентификатор фрагмента . В HTML5 любой элемент теперь можно превратить в цель с помощью атрибута , [27] поэтому в его использовании нет необходимости, хотя этот способ добавления привязок продолжает работать.id id<a name="foo">...</a>
Для иллюстрации: заголовок раздела оглавления наexample.comДомашнюю страницу пользователя можно превратить в цель, написав: .<h2><a name="contents">Table of contents</a></h2>
Продолжая этот пример, теперь, когда раздел помечен как целевой, на него можно ссылаться с внешних сайтов с помощью ссылки типа: ;<a href="http://example.com#contents">see contents</a>
или со ссылкой на той же странице, например: .<a href="#contents">contents, above</a>
Атрибут titleможет быть установлен для предоставления краткой информации о ссылке: .<a href="URL" title="additional information">link text</a>
В большинстве графических браузеров при наведении курсора на ссылку курсор меняется на руку с вытянутым указательным пальцем, а значение titleотображается во всплывающей подсказке или каким-либо другим способом. Некоторые браузеры отображают замещающий текст таким же образом, хотя это не то, чего требует спецификация.
Aсуществовал в тегах HTML и был стандартизирован в HTML 2.0;Фразовые элементы используются для разметки фраз и придания структуры или смыслового значения фрагментам текста. Например, теги <em>и <strong>можно использовать для выделения текста.
<abbr>...</abbr><abbr title="abbreviation">abbr.</abbr><acronym>...</acronym> (deprecated)<abbr><acronym title="Hyper-Text Mark-up Language">HTML</acronym>abbrбирка. [28]<dfn>...</dfn>DFNсуществовал в HTML Internet Draft 1.2 и был полностью стандартизирован в HTML 3.2; все еще актуален.<em>...</em>EMсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<strong>...</strong>STRONGсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален, переопределен в HTML5.Эти элементы полезны в первую очередь для документирования разработки компьютерного кода и взаимодействия с пользователем посредством дифференциации исходного кода ( ), переменных ( ), пользовательского ввода ( ) и терминала или другого вывода ( ).<code><var><kbd><samp>
<code>...</code>code example). Традиционно отображается моноширинным шрифтом.CODEсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<kbd>...</kbd>KBDсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<samp>...</samp>SAMPсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<var>...</var>VARсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.Поскольку разметка визуального представления применима только непосредственно к визуальным браузерам, ее использование не рекомендуется. Вместо этого следует использовать таблицы стилей. Некоторые из этих элементов устарели или недействительны в HTML 4/XHTML 1.0, а остальные недействительны в текущей версии XHTML 2.0. Однако текущий проект HTML5 повторно включает <s>, <u>и <small>, придавая каждому новое семантическое значение. В документе HTML5 использование этих элементов больше не рекомендуется, при условии, что оно семантически корректно.
<b>...</b>{ font-weight: bold; }<strong><b><strong>Bсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален, переопределен в HTML5.<i>...</i>{ font-style: italic; }<em>...</em><i><em>Iсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален, переопределен в HTML5.<u>...</u>{ text-decoration: underline; }<u><u>Uсуществовал в HTML Internet Draft 1.2 , был стандартизирован в HTML 3.2, но устарел в HTML 4.0 Transitional и был недействителен в HTML 4.0 Strict. Вновь представлен в HTML5.<small>...</small>{ font-size: smaller; }<small><aside>...</aside><s>...</s><strike>. В HTML5 этот <s>элемент обозначает информацию, которая «уже не точна или неактуальна», и его не следует путать с <del>, который указывает на удаление/удаление. [33]Sбыл объявлен устаревшим в HTML 4.0 Transitional (не появлялся ни в одном из предыдущих стандартов) и был недействителен в HTML 4.0 Strict. Вновь представлен в HTML5, где вместо этого объявлен устаревшим <strike>.<big>...</big> (deprecated){ font-size: larger; }<strike>...</strike> (deprecated){ text-decoration: line-through; }STRIKEбыл стандартизирован в HTML 3.2; устарел в HTML 4.0 Transitional; недопустимо в HTML 4.0 Strict.<tt>...</tt> (deprecated){ font-family: monospace; }TTсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; не поддерживается [34] в HTML5. Возможные замены: <kbd> для маркировки пользовательского ввода, <var> для переменных (обычно отображается курсивом, а не с изменением на моноширинный), <code> для исходного кода, <samp> для вывода. [34]<font>...</font> (deprecated)<font [color=<var>color</var>] [size=<var>size</var>] [face=<var>face</var>]>...</font>С помощью атрибута можно указать цвет шрифта color(обратите внимание на американское написание), гарнитуру шрифта с помощью faceатрибута, а также абсолютный или относительный размер с помощью sizeатрибута. Примеры (все виды использования устарели, по возможности используйте эквиваленты CSS):<font color="green">text</font>создает зеленый текст .<font color="#114499">text</font>создает текст шестнадцатеричного цвета #114499 .<font size="4">text</font>создает текст размером 4. Размеры — от 1 до 7. Стандартный размер — 3, если иное не указано в <body> или других тегах.<font size="+1">text</font>создает текст размером на 1 больше стандартного. противоположно.<font size="-1">text</font><font face="Courier">text</font>делает текст шрифтом Courier.<font size="N">соответствует (спецификация HTML не определяет связь между размером N и размером единицы Y и не определяет единицу измерения).{font-size: Yunits}<font color="red">соответствует{ color: red; }<font face="Times New Roman">соответствует – CSS поддерживает стек шрифтов из двух или более альтернативных шрифтов.{ font-family: 'Times New Roman', Times, serif; }<span>...</span><br /><bdi>...</bdi><bdo>...</bdo><cite>...</cite><cite>это означало «цитирование или ссылку на другие источники» без каких-либо особых ограничений или требований. [36] Спецификация W3C HTML 5 использует уточнение этой идеи, отражая то, как этот элемент использовался исторически, но теперь требует, чтобы он содержал (но не ограничивался) хотя бы одно из «названия работы или имени автора (человека, людей или организации) или URL-ссылку, или ссылку в сокращенной форме в соответствии с соглашениями, используемыми для добавления метаданных цитирования». [37] Но спецификация WHATWG разрешает использовать этот элемент только вокруг названия произведения. [38] Спецификации W3C начались с более широкого определения, затем перешли на очень узкое после того, как WHATWG внесла это изменение. Однако W3C отменил собственное изменение в 2012 году в ответ на негативные отзывы сообщества разработчиков; элемент широко использовался и в более широком масштабе, например, различные платформы блогов и форумов оборачивают идентификаторы комментаторов и адреса электронной почты в <cite>...</cite>, а люди, использующие этот элемент для библиографических цитат, обычно оборачивают каждую цитату целиком. в этом элементе. Другая проблема с этим элементом заключается в том, что WHATWG рекомендует по умолчанию выделять его курсивом (поэтому почти все браузеры делают это), поскольку он (по их мнению) предназначен только для заголовков публикаций. Однако по соглашению только некоторые виды заголовков на самом деле выделяются курсивом, в то время как другие должны быть заключены в кавычки, а стандарты могут фактически различаться в зависимости от контекста публикации и языка. Следовательно, многие авторы и администраторы веб-сайтов используют общесайтовую таблицу стилей, чтобы отменить автоматический курсив этого элемента.<data>...</data><del>...</del><ins>...</ins><del>или <s>. Обычно отображается подчеркнутым :Вставленный текст.<ins>и <del>также могут использоваться как блочные элементы: содержащие другие блочные и строчные элементы. Однако эти элементы по-прежнему должны полностью оставаться внутри своего родительского элемента, чтобы документ HTML был правильно сформирован. Например, для удаления текста из середины одного абзаца в нескольких других абзацах и завершения последнего абзаца потребуется использовать три отдельных <del>элемента. Два <del>элемента потребуются в качестве встроенных элементов для обозначения удаления текста в первом и последнем абзацах, а третий, используемый в качестве блочного элемента, для обозначения удаления в промежуточных абзацах.<mark>...</mark><q>...</q><blockquote>). Элементы цитат могут быть вложенными. <q> должен автоматически генерировать кавычки вместе с таблицами стилей. Практические проблемы, связанные с несоответствием браузеров, могут заставить авторов искать обходные пути. Атрибут citeуказывает источник и должен быть полным URI .block-quote) с использованием таблиц стилей. Например, с подходящим правилом CSS, связанным с q.lengthy:<q class="lengthy">Lengthy quote here.</q><rb>...</rb><rp>...</rp><rt>...</rt><rtc>...</rtc><ruby>...</ruby><script>...</script><script> сам по себе не является ни блочным, ни встроенным элементом; сам по себе он вообще не должен отображаться, но может содержать инструкции для динамического создания как блочного, так и встроенного содержимого.<sub>...</sub><sup>...</sup>{ vertical-align: sub; }{ vertical-align: super; }<template>...</template><time>...</time><wbr /><applet>...</applet> (deprecated)<object>, так как его можно было использовать только с Java-апплетами, и он имел ограничения доступности.<object>несовместимы между разными браузерами.<area /><map>.<audio>...</audio>srcатрибута. Поддерживаемые аудиоформаты различаются в зависимости от браузера.<canvas>...</canvas><embed>...</embed><object>, но затем было снова добавлено в спецификацию HTML5 [48] [49]<img />srcуказывает URL-адрес изображения. Обязательный altатрибут предоставляет альтернативный текст на случай, если изображение невозможно отобразить. [50] (Хотя altон задуман как альтернативный текст, Microsoft Internet Explorer 7 и ниже отображает его как всплывающую подсказку , если titleатрибут не указан. [51] Safari и Google Chrome , с другой стороны, вообще не отображают атрибут alt. ) [52] Этот <img />элемент был впервые предложен Марком Андриссеном и реализован в веб-браузере NCSA Mosaic . [53]IMGсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален.<map>...</map><object>...</object>type. Это может быть любой MIME -тип, который понимает пользовательский агент, например встроенная HTML-страница, файл, обрабатываемый плагином, например Flash , Java -апплетом , звуковым файлом и т. д.<param /><applet>, этот элемент теперь используется с <object>и должен встречаться только как дочерний элемент <object>. Он использует атрибуты HTML для установки параметров объекта, например ширины, высоты, шрифта, цвета фона и т. д., в зависимости от типа объекта. Объект может иметь несколько <param />элементов.<source>...</source>srcаналогично элементам <video>and <audio>.<track>...</track><video>...</video>srcатрибута. Поддерживаемые форматы видео варьируются от браузера к браузеру.Эти элементы можно объединить в форму или, в некоторых случаях, использовать отдельно в качестве элементов управления пользовательского интерфейса; в документе они могут быть простыми HTML или использоваться вместе со сценариями. Разметка HTML определяет элементы, составляющие форму, и метод ее отправки. Однако для обработки ввода пользователя после его отправки необходимо использовать некоторые формы сценариев ( серверные , клиентские или оба).
(Эти элементы являются либо блочными, либо встроенными элементами, но собраны здесь, поскольку их использование более ограничено, чем использование других встроенных или блочных элементов.)
<form action="url">...</form><form>определяет и управляет общим действием области формы, используя обязательный actionатрибут.<button>...</button><datalist>...</datalist>options для использования в элементах формы.<fieldset>...</fieldset><fieldset>, к которому затем можно добавить значок <legend>для обозначения их функции.<input /><input>Элементы позволяют реализовать различные стандартные элементы управления формой.<button>предпочтителен, если он возможен (т. е. если клиент его поддерживает), поскольку он предоставляет более широкие возможности.srcатрибута.sizeопределяет ширину ввода по умолчанию в ширине символов. max-lengthустанавливает максимальное количество символов, которое может ввести пользователь (которое может превышать размер).textсоздает панель поиска.text. Отличие состоит в том, что текст, вводимый в это поле, маскируется — символы отображаются в виде звездочки, точки или другой замены. Пароль по-прежнему передается на сервер в виде открытого текста , поэтому , если конфиденциальность вызывает беспокойство, необходим базовый протокол безопасной связи , такой как HTTPS .textтелефонных номеров .textдля адресов электронной почты .textдля URL-адресов .textчисел.hiddenвходные данные не видны на отображаемой странице, но позволяют дизайнеру сохранять копию данных, которые необходимо отправить на сервер как часть формы. Например, это могут быть данные, которые этот веб-пользователь ввел или выбрал в предыдущей форме и которые необходимо обработать вместе с текущей формой. Не отображается пользователю, но данные все равно можно изменить на стороне клиента путем редактирования источника HTML.<isindex /> (deprecated)<isindex />может появляться либо в заголовке документа, либо в теле документа, но только один раз в документе. <isindex />работал как примитивная форма поиска HTML; но де-факто устарел из-за более продвинутых форм HTML, представленных в начале-середине 1990-х годов. Представляет набор гиперссылок, состоящий из базового URI, амперсанда и ключевых слов в процентном кодировании , разделенных знаками плюса .ISINDEXсуществовал в HTML-тегах ; стандартизирован в HTML 2.0; устарел в HTML 4.0 Transitional; недопустимо в HTML 4.0 Strict.<keygen>...</keygen> (deprecated)<label for="id">...</label>radio. Нажатие на метку запускает щелчок по соответствующему вводу.<legend>...</legend><fieldset>.<meter>...</meter>valueатрибут. Также может иметь: min, low, high, и max.<option value="x">...</option><select>списке.<optgroup>...</optgroup><option>элементов в <select>списке.<output>...</output><progress>...</progress><select name="xyz">...</select><textarea rows="8">...</textarea>cols(где столбец представляет собой ширину текста в один символ) и rows атрибутами HTML . Содержимое этого элемента ограничено обычным текстом, который появляется в текстовой области как текст по умолчанию при загрузке страницы.Формат HTML-таблиц был предложен в HTML 3.0 Drafts и более позднем HTML-таблицах RFC 1942 . Их вдохновила табличная модель CALS . Некоторые элементы этих предложений были включены в HTML 3.2; нынешняя форма HTML-таблиц была стандартизирована в HTML 4. (Многие элементы, используемые в таблицах, не являются ни блочными , ни встроенными элементами.)
<table>...</table>summaryнеофициально необходим для обеспечения доступности, хотя его использование не является простым.<tr>...</tr><table>.<th>...</th><table>заголовка; содержимое обычно отображается жирным шрифтом и по центру. Звуковой пользовательский агент может использовать для этих элементов более громкий голос.<td>...</td><table>данных.<colgroup>...</colgroup><table>.<col>...</col><table>.<caption>...</caption><table>.<thead>...</thead><table>. Этот раздел может быть повторен пользовательским агентом, если таблица разбита на несколько страниц (при печати или другом постраничном носителе).<tbody>...</tbody><table>.<tfoot>...</tfoot><table>. Подобно этому <thead>, этот раздел может быть повторен пользовательским агентом, если таблица разбита на несколько страниц (при печати или другом постраничном носителе).Фреймы позволяют разделить визуальное окно HTML-браузера на сегменты, каждый из которых может отображать отдельный документ. Это может снизить использование полосы пропускания, поскольку повторяющиеся части макета могут использоваться в одном кадре, а переменное содержимое отображается в другом. Это может потребовать определенных затрат на удобство использования, особенно в невизуальных пользовательских агентах [54] из-за того, что отдельные и независимые документы (или веб-сайты) отображаются рядом друг с другом и им разрешено взаимодействовать с одним и тем же родительским окном. Из-за этой стоимости фреймы (за исключением <iframe>элемента) разрешены только в HTML 4.01 Frame-set. Iframes также может хранить документы на разных серверах. В этом случае взаимодействие между окнами блокируется браузером. Такие сайты, как Facebook и Twitter, используют iframe для отображения контента ( плагинов ) на сторонних веб-сайтах. Google AdSense использует iframe для отображения баннеров на сторонних веб-сайтах.
В HTML 4.01 документ может содержать a <head>и a <body> или a <head>и a <frameset>, но не одновременно a <body>и a <frameset>. Однако <iframe>его можно использовать в обычном теле документа.
<frameset>...</frameset> (deprecated)<frame />элементов документа. Расположение фреймов задается списками, разделенными запятыми, в атрибутах HTMLrows и .cols <frame /> (deprecated)<frameset>. Отдельный документ привязывается к фрейму с помощью srcатрибута внутри <frame />элемента.<noframes>...</noframes> (deprecated)<frame />элементы.<iframe>...</iframe><object />элемента, an <iframe>может быть «целевым» фреймом для ссылок, определенных другими элементами, и может быть выбран пользовательским агентом в качестве фокуса для печати, просмотра его источника и т. д. Содержимое элемента используется в качестве альтернативного текста, который будет отображаться, если браузер не поддерживает встроенные фреймы. Отдельный документ привязывается к фрейму с помощью атрибута srcвнутри элемента <iframe />, встроенный HTML-код встраивается в фрейм с помощью srcdocатрибута внутри <iframe />элемента.В HTML — longdescэто атрибут, используемый внутри элементов <img />, <frame />или <iframe>. Предполагается, что это URL-адрес [примечание 5] документа, который содержит подробное описание рассматриваемого изображения, фрейма или iframe. [55] Этот атрибут должен содержать URL-адрес, а не – как часто ошибочно – текст самого описания.
longdescбыл разработан для использования программами чтения с экрана для отображения информации об изображениях для пользователей компьютеров с проблемами доступности , таких как слепые или слабовидящие, и широко реализуется как веб-браузерами, так и программами чтения с экрана. [56] Некоторые разработчики возражают, что [57] на самом деле он редко используется для этой цели, поскольку относительно мало авторов используют этот атрибут, и большинство из этих авторов используют его неправильно; таким образом, они рекомендуют отказаться от поддержки longdesc. [58] Издательская индустрия отреагировала, выступая за сохранение файлов longdesc. [59]
< img src = "Hello.jpg" longdesc = "description.html" >
Содержание description.html:
<br /> <p> Это изображение двухслойного праздничного торта. </ р >...Поскольку очень немногие графические браузеры поддерживают создание ссылки в исходном виде (исключением являются Opera и iCab), полезно <img />по возможности включать ссылку на страницу описания рядом с элементом, поскольку это также может помочь зрячим пользователям.
< img src = "Hello.jpg" longdesc = "description.html" /> [ < a href = "description.html" title = "длинное описание изображения" > D </ a > ]Следующие элементы были частью раннего HTML, разработанного Тимом Бернерсом-Ли с 1989 по 1991 год; они упоминаются в тегах HTML , но устарели в HTML 2.0 и никогда не были частью стандартов HTML.
<listing>...</listing> (deprecated)<plaintext> (deprecated)<plaintext>не имеет закрывающего тега, поскольку он завершает разметку и заставляет остальную часть документа анализироваться, как если бы это был обычный текст .<plaintext>существовал в HTML-тегах ; устарел в HTML 2.0; недействителен в HTML 4.0.<xmp>...</xmp> (deprecated)<nextid> (deprecated)<nextid>существовал в тегах HTML (описан как устаревший); устарел в HTML 2.0; недействителен в HTML 3.2 и более поздних версиях.В этом разделе перечислены некоторые широко используемые устаревшие элементы, что означает, что они не используются в допустимом коде. Они могут поддерживаться не всеми пользовательскими агентами.
<blink>...</blink> (deprecated){text-decoration: blink}<blink>возник в Netscape Navigator и в основном известен его потомками, включая Firefox ; устарел или недействителен в HTML 2.0 и более поздних версиях. Заменяющий тег CSS, хотя и является стандартным, не требуется поддерживать.<layer>...</layer> (deprecated)<layer>возник в Netscape 4 ; устарел или недействителен в HTML 4.01 и более поздних версиях.<marquee>...</marquee> (deprecated)<marquee>возник в Microsoft Internet Explorer ; устарел или недействителен в HTML 4.01 и более поздних версиях.<nobr>...</nobr> (deprecated){white-space: nowrap;}<nobr>является запатентованным элементом, который распознается большинством браузеров по соображениям совместимости; устарел или недействителен в HTML 2.0 и более поздних версиях.<noembed>...</noembed> (deprecated)<embed><object><!-- A Comment -->Комментарий в HTML (и связанных с ним XML, SGML и SHTML) использует тот же синтаксис, что и комментарий SGML или комментарий XML , в зависимости от типа документа.
В отличие от большинства тегов HTML, комментарии не вложены. В более общем смысле, есть некоторые строки, которые не могут появляться в тексте комментария. Это <!--(начало комментария), -->(это завершает комментарий, поэтому он не может появиться внутри него) и --!>. Кроме того, строки >и ->не могут появляться в начале комментария и <!-не могут появляться в конце. [63]
В результате разметка <!--Xbegin<!--Y-->Xend-->имеет неверный формат и приведет к появлению комментария.Xbegin<!--Yи текстКсенд -->после этого, а иногда и простоКсенд -->, в зависимости от браузера.
Комментарии могут появляться в любом месте документа, поскольку анализатор HTML должен игнорировать их независимо от того, где они появляются, если только они не находятся внутри других структур тегов HTML (т. е. их нельзя использовать рядом с атрибутами и значениями; это недопустимая разметка). : ).<span id="x1"<!--for "extension one"--> style="...">
Комментарии могут появляться даже перед объявлением типа документа; никаким другим тегам это не разрешено.
Однако не все браузеры и редакторы HTML полностью совместимы с синтаксической структурой HTML и могут совершать непредсказуемые действия при некоторых синтаксических условиях. Неправильная обработка комментариев затрагивает только около 5% всех используемых браузеров и HTML-редакторов, и даже тогда только определенные версии подвержены проблемам с неправильной обработкой комментариев (на долю Internet Explorer 6 приходится большая часть этого высокого процента).
Есть несколько особенностей совместимости, связанных с комментариями:
doctypeInternet Explorer 6 использовать режим совместимости для HTML-страницы. Никакая doctypeинформация не будет обработана.<style>и <script>элементы по-прежнему иногда окружены разделителями комментариев, а браузеры с поддержкой CSS и сценариев написаны таким образом, чтобы специально игнорировать эту разметку комментариев, поскольку они на самом деле не являются комментариями. Это означает, что попытки фактически закомментировать разметку CSS и скрипта путем изменения элементов внутри комментария, чтобы они не распознавались, например .<-- [script]...[/script] --><style> ... {comment tags} ...</style><object><embed><embed>...фреймы действительно создают дополнительные проблемы с удобством использования, уникальные для пользователей с ограниченными возможностями, особенно для тех, кто использует программы чтения с экрана.
