Элемент HTML — это тип компонента документа HTML (язык гипертекстовой разметки), один из нескольких типов узлов HTML (также существуют текстовые узлы, узлы комментариев и другие). [ неопределенно ] Первая использованная версия HTML была написана Тимом Бернерсом-Ли в 1993 году, и с тех пор существовало много версий HTML. Текущий стандарт де-факто регулируется отраслевой группой WHATWG и известен как HTML Living Standard.
HTML-документ состоит из дерева простых HTML- узлов , таких как текстовые узлы и HTML-элементы, которые добавляют семантику и форматирование к частям документа (например, делают текст жирным, организуют его в абзацы, списки и таблицы или встраивают гиперссылки и изображения). Каждый элемент может иметь указанные HTML-атрибуты . Элементы также могут иметь содержимое, включая другие элементы и текст.
Как обычно понимается, положение элемента указывается как охватывающее начальный тег и завершается конечным тегом. [1] Это касается многих, но не всех, элементов в HTML-документе. Различие явно подчеркивается в спецификации HTML 4.01 :
Элементы не являются тегами. Некоторые называют элементы тегами (например, «тег P»). Помните, что элемент — это одно, а тег (будь то начальный или конечный тег) — это другое. Например, элемент HEAD всегда присутствует, даже если начальный и конечный теги HEAD могут отсутствовать в разметке. [1]
Аналогично в Рекомендации W3C HTML 5.1 2-го издания прямо говорится:
Теги используются для разграничения начала и конца элементов в разметке. (...) Начальные и конечные теги некоторых обычных элементов могут быть опущены, (...)
Содержимое элемента должно быть размещено между тегом сразу после начального тега (что может подразумеваться в некоторых случаях) и тегом сразу перед конечным тегом (что, опять же, может подразумеваться в некоторых случаях).— 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 ; в любом случае разбор тегов документа в элементы Document Object Model (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] Некоторые элементы, так называемые элементы void , не имеют конечного тега. Типичным примером является <br>элемент (hard line-break). Поведение элемента void предопределено, и он не может содержать никакого контента или других элементов. Например, адрес будет записан как:
< p > П. Шерман < br > 42 Уоллаби Уэй < br > Сидней </ p >При использовании XHTML требуется открывать и закрывать все элементы, включая элементы void. Это можно сделать, поместив закрывающий тег сразу после открывающего тега, но это недопустимо в HTML 5 и приведет к созданию двух элементов. Альтернативный способ указать, что это элемент void, совместимый как с XHTML, так и с HTML 5, — поместить a /в конце тега (не путать с the /в начале закрывающего тега).
< p > П. Шерман < br /> 42 Уоллаби Уэй < br /> Сидней </ p >Атрибуты HTML указываются внутри начального тега. Например, <abbr>элемент, представляющий аббревиатуру , ожидает titleатрибут внутри своего открывающего тега. Это будет записано как:
< abbr title = "abbrviation" > сокр. </ abbr >Неформально элементы HTML иногда называют «тегами» (пример синекдохи ), хотя многие предпочитают термин «тег» строго по отношению к разметке, разграничивающей начало и конец элемента.
Имена элементов (и атрибутов) могут быть написаны в любой комбинации верхнего и нижнего регистра в HTML, но должны быть написаны в нижнем регистре в XHTML. [8] Канонической формой был верхний регистр до HTML 4 , и он использовался в спецификациях HTML, но в последние годы нижний регистр стал более распространенным.
Существует три типа элементов HTML : обычные элементы, необработанные текстовые элементы и пустые элементы.
Обычные элементы обычно имеют как начальный, так и конечный тег, хотя для некоторых элементов конечный тег или оба тега могут быть опущены. Он строится похожим образом:
<tag></tag>Необработанные текстовые элементы (также известные как текстовые или текстовые элементы) создаются с помощью:
<tag></tag>Примером может служить <title>элемент, который не должен содержать других элементов (включая разметку текста), только простой текст.
Элементы Void (иногда называемые также пустыми элементами, одиночными элементами или автономными элементами) имеют только начальный тег (в форме), который содержит любые атрибуты HTML. Они не могут содержать никаких дочерних элементов, таких как текст или другие элементы. Для совместимости сXHTMLспецификация HTML[ which? ]допускает необязательный пробел и косую черту[ необходима цитата ](допустимо). Косая черта обязательна вXHTMLи другихXML. Два распространенных элемента void — это(дляжесткого переноса строки, например, в стихотворении или адресе) и(для тематического разрыва). Другие такие элементы часто являются заполнителями, которые ссылаются на внешние файлы, например,элемент image ( ). Атрибуты, включенные в элемент, будут затем указывать на рассматриваемый внешний файл. Другим примером элемента void является, для которого синтаксис следующий:<tag><tag /><br /><hr /><img /><link />
< ссылка rel = "stylesheet" href = "fancy.css" тип = "text/css" >Этот <link />элемент указывает браузеру на таблицу стилей, которую следует использовать при представлении HTML-документа пользователю. В синтаксисе HTML атрибуты не должны заключаться в кавычки, если они состоят только из определенных символов: букв, цифр, дефиса-минуса и точки. С другой стороны, при использовании синтаксиса XML (XHTML) все атрибуты должны заключаться в кавычки, а перед последней угловой скобкой требуется пробельная косая черта :
<link rel= "stylesheet" href= "fancy.css" type= "text/css" /> Атрибуты HTML определяют желаемое поведение или указывают дополнительные свойства элемента. Большинству атрибутов требуется значение . В HTML значение может быть оставлено без кавычек, если оно не содержит пробелов (), или оно может быть заключено в одинарные или двойные кавычки (или). В XML эти кавычки обязательны.attribute=valueattribute='value'attribute="value"
Булевы атрибуты, с другой стороны, не требуют указания значения. Примером может служить checkedдля флажков:
< тип ввода = флажок отмечен > Однако в синтаксисе XML (и, следовательно, XHTML ) значение является обязательным, и имя должно быть повторено в качестве значения:
<input type= "checkbox" tested= "отмечено" /> Элементы HTML определены в серии свободно доступных открытых стандартов, выпущенных с 1995 года первоначально IETF , а затем W3C .
Во время браузерных войн 1990-х годов разработчики пользовательских агентов (например, веб-браузеров ) часто разрабатывали свои собственные элементы, некоторые из которых были приняты в более поздних стандартах. Другие пользовательские агенты могут не распознавать нестандартные элементы, и они будут игнорироваться, что может привести к неправильному отображению страницы.
В 1998 году XML (упрощенная форма SGML) представил механизмы, позволяющие любому человеку разрабатывать собственные элементы и включать их в документы XHTML для использования с пользовательскими агентами, поддерживающими XML. [9]
Впоследствии HTML 4.01 был переписан в XML -совместимую форму, XHTML 1.0 ( eXtensible 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 . Хотя элементы frame по-прежнему актуальны в том смысле, что присутствуют в 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 />элементы указывают ассоциативные пары ключ-значение . В общем случае элемент meta передает скрытую информацию о документе. Можно использовать несколько метатегов, все из которых должны быть вложены в элемент head. Конкретное назначение каждого <meta />элемента определяется его атрибутами. За пределами XHTML он часто указывается без косой черты ( <meta>), несмотря на то, что является элементом void.
В одной форме <meta />элементы могут указывать заголовки HTTP , которые должны быть отправлены веб-сервером до фактического содержимого. Например, указывает, что страница должна обслуживаться с заголовком HTTP, который называется и имеет значение .<meta http-equiv="foo" content="bar" />foobar
<meta />элемент определяет nameи связывает contentатрибуты HTML, описывающие аспекты страницы HTML. Чтобы предотвратить возможную двусмысленность, schemeможет быть предоставлен необязательный третий атрибут, , для указания семантической структуры, которая определяет значение ключа и его значение. Например, в элементе идентифицирует себя как содержащий элемент со значением , из структуры описания ресурсов 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>) может указывать источник и должен быть полностью квалифицированным Uniform Resource Identifier .
BLOCKQUOTEсуществовал в HTML Internet Draft 1.2 и был стандартизирован в HTML 2.0; все еще актуален. См. элемент blockquote для получения дополнительной информации.<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 . В качестве цели, установка атрибутов nameили id HTML , позволяет элементу быть связанным из унифицированного указателя ресурсов (URL) через идентификатор фрагмента . Две формы, начало и якорь, могут использоваться одновременно.
id, используя атрибут [27], поэтому использование не является обязательным, хотя этот способ добавления якорей продолжает работать.<a name="foo">...</a>Для иллюстрации: заголовок раздела оглавления например.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значение отображается в подсказке или каким-либо другим способом. Некоторые браузеры отображают alt-текст таким же образом, хотя это не то, что требуется спецификацией.
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>и <audio>.<track>...</track><video>...</video>srcатрибута. Поддерживаемые форматы видео различаются в зависимости от браузера.Эти элементы могут быть объединены в форму или в некоторых случаях использоваться отдельно в качестве элементов управления пользовательского интерфейса; в документе они могут быть простым HTML или использоваться в сочетании со скриптами. Разметка HTML определяет элементы, составляющие форму, и метод, которым она будет отправлена. Однако для обработки ввода пользователя после его отправки необходимо использовать некоторые формы скриптов ( серверные , клиентские или оба).
(Эти элементы являются либо блочными, либо встроенными элементами, но они собраны здесь, поскольку их использование более ограничено, чем использование других встроенных или блочных элементов.)
<form action="url">...</form><form>Элемент определяет и управляет общим действием области формы, используя требуемый actionатрибут.<datalist>...</datalist>options для использования в элементах формы.<fieldset>...</fieldset><fieldset>, к которым затем можно добавить <legend>, чтобы идентифицировать их функцию.<input /><input>элементы позволяют реализовать различные стандартные элементы управления формами.<button>предпочтителен, если это возможно (т.е. если клиент его поддерживает), так как он предоставляет более богатые возможности.srcатрибута.sizeопределяет ширину поля ввода по умолчанию в character-widths. 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 и более поздних таблицах 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, используют iframes для отображения контента ( плагинов ) на сторонних веб-сайтах. Google AdSense использует iframes для отображения баннеров на сторонних веб-сайтах.
В 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 />элемента, <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 = "Привет.jpg" longdesc = "description.html" >
Содержание description.html:
< br /> < p > Это изображение двухслойного праздничного торта. </ 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и текстXend-->после него, а иногда простоXend-->, в зависимости от браузера.
Комментарии могут появляться в любом месте документа, поскольку HTML-анализатор должен игнорировать их, где бы они ни появлялись, если только они не находятся внутри других структур HTML-тегов (т. е. их нельзя использовать рядом с атрибутами и значениями; это недопустимая разметка: ).<span id="x1"<!--for "extension one"--> style="...">
Комментарии могут появляться даже перед объявлением doctype; никаким другим тегам это делать не разрешено.
Однако не все браузеры и редакторы HTML полностью соответствуют структуре синтаксиса HTML и могут делать непредсказуемые вещи при некоторых синтаксических условиях. Неправильная обработка комментариев затрагивает только около 5% всех используемых браузеров и редакторов HTML, и даже тогда только определенные версии подвержены проблемам неправильной обработки комментариев (большая часть этого высокого процента приходится на Internet Explorer 6).
Есть несколько особенностей совместимости, связанных с комментариями:
doctypeзаставит Internet Explorer 6 использовать режим совместимости для страницы HTML. Никакая doctypeинформация не будет обработана.<style>и <script>элементы иногда все еще окружены разделителями комментариев, а браузеры с поддержкой CSS и скриптов специально написаны для игнорирования этой разметки комментариев как не являющейся комментарием. Это означает, что попытки фактически закомментировать разметку CSS и скриптов путем изменения элементов внутри комментария не будут распознаны, например .<-- [script]...[/script] --><style> ... {comment tags} ...</style><object><embed><embed>...фреймы действительно создают дополнительные проблемы с удобством использования, которые свойственны только пользователям с ограниченными возможностями, особенно тем, кто использует программы чтения с экрана.
