Элемент 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">; or in a CSS declaration: ul { list-style-type: foo; } – replacing foo with one of the following (the same values are used in HTML and CSS): disc (the default), square, or circle. Only the CSS method is supported in HTML5; the attribute is deprecated in HTML 3.2 and 4.01. CSS also provides none, and the ability to replace these bullets with custom images.UL existed in HTML Tags, and was standardized in HTML 2.0; still current.<li>...</li>ol) or unordered (ul) lists.LI existed in HTML Tags, and was standardized in HTML 2.0; still current.<dir>...</dir> (deprecated)<ul>.DIR existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict.<address>...</address>ADDRESS existed in HTML Tags, and was standardized in HTML 2.0; still current.<article>...</article><aside>...</aside><blockquote>...</blockquote>A block level quotation, for when the quotation includes block level elements, e.g. paragraphs. The cite attribute (not to be confused with the <cite> element) may give the source, and must be a fully qualified Uniform Resource Identifier.
BLOCKQUOTE existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current. See blockquote element for more information.<center>...</center> (deprecated)<del>...</del><div>...</div><figure>...</figure><figcaption>.<figcaption>...</figcaption><figure> element.<header>...</header><hr /><ins>...</ins><main>...</main><ul> list.MENU existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict; then redefined in HTML5, removed in HTML 5.2, but is included in the HTML Living Standard in 2019. <noscript>...</noscript><pre>...</pre><pre>...</pre>, white-space should be rendered as authored. (With the CSS properties: { white-space: pre; font-family: monospace; }, other elements can be presented in the same way.) This element can contain any inline element except: <image>, <object>, <big>, <small>, <sup>, and <sub>...</sub>.PRE existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<section>...</section><script>...</script><script /> with a src attribute to supply a URL from which to load the script, or used as <script>...</script> around embedded script content.Note: <script> is not itself either a block or inline element; by itself it should not display at all, but it can contain instructions to dynamically generate either both block or inline content.Inline elements cannot be placed directly inside the <body> element; they must be wholly nested within block-level elements.[24]
<a>...</a>An anchor element is called an anchor because web designers can use it to "anchor" a URL to some text on a web page. When users view the web page in a browser, they can click the text to activate the link and visit the page whose URL is in the link.[25]
In HTML, an anchor can be either the origin (the anchor text) or the target (destination) end of a hyperlink.
With the attribute href,[26] the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external URL. Alternatively (and sometimes concurrently), with the name or id HTML attributes set, the element becomes a link target. A Uniform Resource Locator (URL) can link to this target via a fragment identifier. In HTML5, any element can now be made into a target by using the id attribute,[27] so using <a name="foo">...</a> is not necessary, although this way of adding anchors continues to work.
To illustrate: the header of a table of contents section on example.com's homepage could be turned into a target by writing: <h2><a name="contents">Table of contents</a></h2>.
Continuing with this example, now that the section has been marked up as a target, it can be referred to from external sites with a link like: <a href="http://example.com#contents">see contents</a>;
or with a link on the same page like: <a href="#contents">contents, above</a>.
The attribute title may be set to give brief information about the link: <a href="URL" title="additional information">link text</a>.
In most graphical browsers, when the cursor hovers over a link, the cursor changes into a hand with an extended index finger and the title value is displayed in a tooltip or in some other manner. Some browsers render alt text the same way, although this is not what the specification calls for.
A existed in HTML Tags, and was standardized in HTML 2.0;Phrase elements are used for marking up phrases and adding structure or semantic meaning to text fragments. For example, the <em> and <strong> tags can be used for adding emphasis to text.
<abbr>...</abbr><abbr title="abbreviation">abbr.</abbr><acronym>...</acronym> (deprecated)<abbr> element, but marks an acronym: <acronym title="Hyper-Text Mark-up Language">HTML</acronym>abbr tag.[28]<dfn>...</dfn>DFN existed in HTML Internet Draft 1.2, and was fully standardized in HTML 3.2; still current.<em>...</em>EM existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<strong>...</strong>STRONG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current, redefined in HTML5.These elements are useful primarily for documenting computer code development and user interaction through differentiation of source code (<code>), variables (<var>), user input (<kbd>), and terminal or other output (<samp>).
<code>...</code>code example). Conventionally rendered in a mono-space font.CODE existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<kbd>...</kbd>KBD existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<samp>...</samp>SAMP existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<var>...</var>VAR existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.As visual presentational markup only applies directly to visual browsers, its use is discouraged. Style sheets should be used instead. Several of these elements are deprecated or invalid in HTML 4 / XHTML 1.0, and the remainder are invalid in the current draft of XHTML 2.0. The current draft of HTML5, however, re-includes <s>, <u>, and <small>, assigning new semantic meaning to each. In an HTML5 document, the use of these elements is no longer discouraged, provided that it is semantically correct.
<b>...</b>{ font-weight: bold; }. The <strong> element usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01.
In HTML5, however, <b> has its own meaning, distinct from that of <strong>. It denotes "text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood."[29]B existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current, redefined in HTML5.<i>...</i>{ font-style: italic; }. Using <em>...</em> has the same visual effect in most browsers, as well as having a semantic meaning as emphasis, under HTML 4.01. (Purely typographic italics have many non-emphasis purposes, as HTML 5 more explicitly recognized.)
In HTML5, however, <i> has its own semantic meaning, distinct from that of <em>. It denotes "a different quality of text" or "an alternate voice or mood" e.g., a thought, a ship name, a binary species name, a foreign-language phrase, etc.[30]I existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current, redefined in HTML5.<u>...</u>{ text-decoration: underline; }. Deprecated in HTML 4.01. Restored in HTML5.
In HTML5, the <u> element denotes "a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labelling the text as being a proper name in Chinese text (a Chinese proper name mark), or labelling the text as being misspelt." The HTML5 specification reminds developers that other elements are almost always more appropriate than <u> and admonishes designers not to use underlined text where it could be confused for a hyper-link.[31]U existed in HTML Internet Draft 1.2, was standardized in HTML 3.2 but was deprecated in HTML 4.0 Transitional and was invalid in HTML 4.0 Strict. Reintroduced in HTML5.<small>...</small>{ font-size: smaller; }In HTML5, the <small> element denotes "side comments such as small print."[32] This has caused some confusion with the <aside>...</aside> element.<s>...</s><strike>.
In HTML5, the <s> element denotes information that is "no longer accurate or no longer relevant", and is not to be confused with <del>, which indicates removal/deletion.[33]S was deprecated in HTML 4.0 Transitional (having not appeared in any previous standard), and was invalid in HTML 4.0 Strict. Reintroduced in HTML5, which instead deprecated <strike>.<big>...</big> (deprecated){ font-size: larger; }<strike>...</strike> (deprecated){ text-decoration: line-through; })STRIKE was standardized in HTML 3.2; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict.<tt>...</tt> (deprecated){ font-family: monospace; })TT existed in HTML Internet Draft 1.2, and was Standardized in HTML 2.0; not supported[34] in HTML5. Possible replacements: <kbd> for marking user input, <var> for variables (usually rendered italic, and not with a change to monospace), <code> for source code, <samp> for output.[34]<font>...</font> (deprecated)<font [color=<var>color</var>] [size=<var>size</var>] [face=<var>face</var>]>...</font>Can specify the font color with the color attribute (note the American spelling), typeface with the face attribute, and absolute or relative size with the size attribute.
Examples (all uses are deprecated, use CSS equivalents if possible):<font color="green">text</font> creates green text.<font color="#114499">text</font> creates text with hexadecimal color #114499.<font size="4">text</font> creates text with size 4. Sizes are from 1 to 7. The standard size is 3, unless otherwise specified in the <body> or other tags.<font size="+1">text</font> creates text with size 1 bigger than the standard. <font size="-1">text</font> is opposite.<font face="Courier">text</font> makes text with Courier font.<font size="N"> corresponds to {font-size: Yunits} (the HTML specification does not define the relationship between size N and unit-size Y, nor does it define a unit).<font color="red"> corresponds to { color: red; }<font face="Times New Roman"> corresponds to { font-family: 'Times New Roman', Times, serif; } – CSS supports a font stack, of two or more alternative fonts.<span>...</span><br /><bdi>...</bdi><bdo>...</bdo><cite>...</cite><cite> was for "a citation or a reference to other sources" without any particular limitations or requirements.[36] The W3C HTML 5 spec uses a refinement of this idea, reflecting how the element has historically been used, but now requiring that it contain (but not be limited to) at least one of "the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata."[37] But the WHATWG spec only permits the element to be used around the title of a work.[38] The W3C specs began with the broader definition, then switched to the very narrow one after WHATWG made this change. However, W3C reverted their own change in 2012, in response to negative developer-community feedback; the element was in broadly-deployed use with the broader scope, e.g., various blog and forum platforms wrap commenters' IDs and e-mail addresses in <cite>...</cite>, and people using the element for bibliographic citations were (and still are) routinely wrapping each entire citation in this element.
Another problem with the element is that WHATWG recommends that it be italicized by default (thus almost all browsers do so), because it (in their view) is only for publication titles. By convention, however, only certain kinds of titles actually take italics, while others are expected to be put in quotation marks, and standards may actually vary by publishing context and language. Consequently, many website authors and admins use a site-wide stylesheet to undo this element's auto-italics.<data>...</data><del>...</del><ins>...</ins><del> or <s>. Typically rendered underlined: Inserted text.<ins> and <del> elements may also be used as block elements: containing other block and inline elements. However, these elements must still remain wholly within their parent element to maintain a well-formed HTML document. For example, deleting text from the middle of one paragraph across several other paragraphs and ending in a final paragraph would need to use three separate <del> elements. Two <del> elements would be required as inline elements to indicate the deletion of text in the first and last paragraphs, and a third, used as a block element, to indicate the deletion in the intervening paragraphs.<mark>...</mark><q>...</q><blockquote>). Quote elements may be nested.<q> should automatically generate quotation marks in conjunction with style sheets. Practical concerns due to browser non-compliance may force authors to find workarounds.
The cite attribute gives the source, and must be a fully qualified URI.block-quote) using style sheets. For example, with a suitable CSS rule associated with q.lengthy: <q class="lengthy">Lengthy quote here.</q><rb>...</rb><rp>...</rp><rt>...</rt><rtc>...</rtc><ruby>...</ruby><script>...</script><script> is not itself either a block or inline element; by itself it should not display at all, but it can contain instructions to dynamically generate either both block or inline content.<sub>...</sub><sup>...</sup>{ vertical-align: sub; } and { vertical-align: super; }, respectively.)<template>...</template><time>...</time><wbr /><applet>...</applet> (deprecated)<object>, as it could only be used with Java applets, and had accessibility limitations.<object> are not consistent between different browsers.<area /><map>.<audio>...</audio>src attribute. Supported audio formats vary from browser to browser.<canvas>...</canvas><embed>...</embed><object>, but then was added back into the HTML5 specification[48][49]<img />src attribute specifies the image URL. The required alt attribute provides alternative text in case the image cannot be displayed.[50] (Though alt is intended as alternative text, Microsoft Internet Explorer 7 and below render it as a tooltip if no title attribute is given.[51] Safari and Google Chrome, on the other hand, do not display the alt attribute at all.)[52] The <img /> element was first proposed by Marc Andreessen and implemented in the NCSA Mosaic web browser.[53]IMG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.<map>...</map><object>...</object>type attribute. This may be in any MIME-type the user agent understands, such as an embedded HTML page, a file to be handled by a plug-in such as Flash, a Java applet, a sound file, etc.<param /><applet>, this element is now used with <object>, and should only occur as a child of <object>. It uses HTML attributes to set a parameter for the object, e.g. width, height, font, background color, etc., depending on the type of object. An object can have multiple <param /> elements.<source>...</source>src attribute in a way similar to the <video> and <audio> elements.<track>...</track><video>...</video>src attribute. Supported video formats vary from browser to browser.These elements can be combined into a form or in some instances used separately as user-interface controls; in the document, they can be simple HTML or used in conjunction with Scripts. HTML markup specifies the elements that make up a form, and the method by which it will be submitted. However, some form of scripts (server-side, client-side, or both) must be used to process the user's input once it is submitted.
(These elements are either block or inline elements, but are collected here as their use is more restricted than other inline or block elements.)
<form action="url">...</form><form> element specifies and operates the overall action of a form area, using the required action attribute.<datalist>...</datalist>options for use in form elements.<fieldset>...</fieldset><fieldset>, which can then have a <legend> added in order to identify their function.<input /><input> elements allow a variety of standard form controls to be implemented.<button> is preferred if possible (i.e., if the client supports it) as it provides richer possibilities.src attribute.size attribute specifies the default width of the input in character-widths. max-length sets the maximum number of characters the user can enter (which may be greater than size).text which produces a search bar.text. The difference is that text typed in this field is masked – characters are displayed as an asterisk, a dot, or another replacement. The password is still submitted to the server as plaintext, so an underlying secure communication protocol like HTTPS is needed if confidentiality is a concern.text for telephone numbers.text for email addresses.text for URLs.text for numbers.hidden inputs are not visible in the rendered page, but allow a designer to maintain a copy of data that needs to be submitted to the server as part of the form. This may, for example, be data that this web user entered or selected on a previous form that needs to be processed in conjunction with the current form. Not displayed to the user but data can still be altered client-side by editing the HTML source.<isindex /> (deprecated)<isindex /> could either appear in the document head or in the body, but only once in a document.<isindex /> operated as a primitive HTML search form; but was de facto obsoleted by more advanced HTML forms introduced in the early to mid-1990s. Represents a set of hyperlinks composed of a base URI, an ampersand and percent-encoded keywords separated by plus signs.ISINDEX existed in HTML Tags; standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict.<keygen>...</keygen> (deprecated)<label for="id">...</label>radio. Clicking on the label fires a click on the matching input.<legend>...</legend><fieldset>.<meter>...</meter>value attribute. Can also have: min, low, high, and max.<option value="x">...</option><select> list.<optgroup>...</optgroup><option> elements in a <select> list.<output>...</output><progress>...</progress><select name="xyz">...</select><textarea rows="8">...</textarea>cols (where a column is a one-character width of text) and rows HTML attributes. The content of this element is restricted to plain text, which appears in the text area as default text when the page is loaded.The format of HTML Tables was proposed in the HTML 3.0 Drafts and the later RFC 1942 HTML Tables. They were inspired by the CALS Table Model. Some elements in these proposals were included in HTML 3.2; the present form of HTML Tables was standardized in HTML 4. (Many of the elements used within tables are neither block nor inline elements.)
<table>...</table>summary attribute is informally required for accessibility purposes, though its usage is not simple.<tr>...</tr><table>.<th>...</th><table> header cell; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.<td>...</td><table> data cell.<colgroup>...</colgroup><table>.<col>...</col><table>.<caption>...</caption><table>.<thead>...</thead><table>. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).<tbody>...</tbody><table>.<tfoot>...</tfoot><table>. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media).Frames allow a visual HTML browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another. This may come at a certain usability cost, especially in non-visual user agents,[54] due to separate and independent documents (or websites) being displayed adjacent to each other and being allowed to interact with the same parent window. Because of this cost, frames (excluding the <iframe> element) are only allowed in HTML 4.01 Frame-set. Iframes can also hold documents on different servers. In this case the interaction between windows is blocked by the browser. Sites like Facebook and Twitter use iframes to display content (plugins) on third party websites. Google AdSense uses iframes to display banners on third party websites.
In HTML 4.01, a document may contain a <head> and a <body> or a <head> and a <frameset>, but not both a <body> and a <frameset>. However, <iframe> can be used in a normal document body.
<frameset>...</frameset> (deprecated)<frame /> elements for a document. The layout of frames is given by comma separated lists in the rows and cols HTML attributes.<frame /> (deprecated)<frameset>. A separate document is linked to a frame using the src attribute inside the <frame /> element.<noframes>...</noframes> (deprecated)<frame /> elements.<iframe>...</iframe><object /> element, an <iframe> can be the "target" frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on.
The content of the element is used as alternative text to be displayed if the browser does not support inline frames.
A separate document is linked to a frame using the src attribute inside the <iframe />, an inline HTML code is embedded to a frame using the srcdoc attribute inside the <iframe /> element.In HTML, longdesc is an attribute used within the <img />, <frame />, or <iframe> elements. It is supposed to be a URL[note 5] to a document that provides a long description for the image, frame, or iframe in question.[55] This attribute should contain a URL, not – as is commonly mistaken – the text of the description itself.
longdesc was designed to be used by screen readers to display image information for computer users with accessibility issues, such as the blind or visually impaired, and is widely implemented by both web browsers and screen readers.[56] Some developers object that[57] it is actually seldom used for this purpose because there are relatively few authors who use the attribute and most of those authors use it incorrectly; thus, they recommend deprecating longdesc.[58] The publishing industry has responded, advocating the retention of longdesc.[59]
<img src="Hello.jpg" longdesc="description.html">
Content of description.html:
<br /><p>This is an image of a two-layered birthday cake.</p>...Since very few graphical browsers support making the link available natively (Opera and iCab being the exceptions), it is useful to include a link to the description page near the <img /> element whenever possible, as this can also aid sighted users.
<img src="Hello.jpg" longdesc="description.html" /> [<a href="description.html" title="long description of the image">D</a>]The following elements were part of the early HTML developed by Tim Berners-Lee from 1989 to 1991; they are mentioned in HTML Tags, but deprecated in HTML 2.0 and were never part of HTML standards.
<listing>...</listing> (deprecated)<plaintext> (deprecated)<plaintext> does not have an end tag as it terminates the markup and causes the rest of the document to be parsed as if it were plaintext.<plaintext> existed in HTML Tags; deprecated in HTML 2.0; invalid in HTML 4.0.<xmp>...</xmp> (deprecated)<nextid> (deprecated)<nextid> existed in HTML Tags (described as obsolete); deprecated in HTML 2.0; invalid in HTML 3.2 and later.This section lists some widely used obsolete elements, which means they are not used in valid code. They may not be supported in all user agents.
<blink>...</blink> (deprecated){text-decoration: blink} (This effect may have negative consequences for people with photosensitive epilepsy;[62] its use on the public Internet should follow the appropriate guidelines.)<blink> originated in Netscape Navigator and is mostly recognized by its descendants, including Firefox; deprecated or invalid in HTML 2.0 and later. The replacement CSS tag, while standard, is not required to be supported.<layer>...</layer> (deprecated)<layer> originated in Netscape 4; deprecated or invalid in HTML 4.01 and later.<marquee>...</marquee> (deprecated)<marquee> originated in Microsoft Internet Explorer; deprecated or invalid in HTML 4.01 and later.<nobr>...</nobr> (deprecated){white-space: nowrap;}<nobr> is a proprietary element which is recognized by most browsers for compatibility reasons; deprecated or invalid in HTML 2.0 and later.<noembed>...</noembed> (deprecated)<embed> or <object> element.<!-- A Comment -->A comment in HTML (and related XML, SGML and SHTML) uses the same syntax as the SGML comment or XML comment, depending on the doctype.
Unlike most HTML tags, comments do not nest. More generally, there are some strings that are not allowed to appear in the comment text. Those are <!--(the beginning of a comment),-->(this ends the comment so it trivially follows it can not appear inside it) and --!>. Additionally, the strings > and -> cannot appear at the beginning of a comment and <!- cannot appear at the end.[63]
As a result, the markup <!--Xbegin<!--Y-->Xend--> is ill-formed and will yield the comment Xbegin<!--Y and the text Xend--> after it, or sometimes just Xend-->, depending on browser.
Comments can appear anywhere in a document, as the HTML parser is supposed to ignore them no matter where they appear so long as they are not inside other HTML tag structures (i.e., they cannot be used next to attributes and values; this is invalid markup: <span id="x1"<!--for "extension one"--> style="...">).
Comments can even appear before the doctype declaration; no other tags are permitted to do this.
However, not all browsers and HTML editors are fully compliant with the HTML syntax framework and may do unpredictable things under some syntax conditions. Defective handling of comments only affects about 5% of all browsers and HTML editors in use, and even then only certain versions are affected by comment mishandling issues (Internet Explorer 6 accounts for most of this high percentage).
There are a few compatibility quirks involving comments:
doctype will cause Internet Explorer 6 to use quirks mode for the HTML page. None of the doctype information will be processed.<style> and <script> elements are still sometimes surrounded by comment delimiters, and CSS- and script-capable browsers are written to specifically ignore that comment markup as not actually a comment. This means that attempts to actually comment out CSS and script markup by change the elements inside the comment to not be recognized, e.g. <-- [script]...[/script] -->.<style> ... {comment tags} ...</style> will show up on-screen. Other HTML editors may have this same defect.<object> for the inevitable exception.<embed><embed>...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.
