HTML Элементы (елементы)
HTML-элемент обычно состоит из тега Start и тега End с содержимым, вставленным между:
HTML- элемент — это все, от начального тега до конечного тега:
| Начальный тег | Содержимое элемента | Конечный тег |
|---|---|---|
| <h1> | Мой первый заголовок | </h1> |
| <p> | Мой первый абзац. | </p> |
| <br> |
Элементы HTML без содержимого называются пустыми элементами. Пустые элементы не имеют конечного тега, такого как <br> элемент (который указывает на разрыв строки).
Вложенные элементы HTML
Элементы HTML могут быть вложенными (элементы могут содержать элементы).
Все HTML-документы состоят из вложенных элементов HTML.
Этот пример содержит четыре элемента HTML:
Пример
Пример объяснения
<html> элемент определяет весь документ.
Он имеет тег Start <html> и тег End </html>.
Элемент Content — это другой элемент HTML ( <body> элемент).
<body> элемент определяет тело документа.
Он имеет тег Start <body> и тег End </body>.
Элемент Content — это два других HTML-элемента ( <h1> и <p> ).
<h1> элемент определяет заголовок.
Он имеет тег Start <H1> и тег End </H1>.
Элемент Content: мой первый заголовок.
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
Не забывайте, что конечный тег
Некоторые элементы HTML будут отображаться корректно, даже если вы забыли конечный тег:
Пример
<p>This is a paragraph
<p>This is a paragraph
Приведенный выше пример работает во всех браузерах, так как закрывающий тег считается необязательным.
Никогда не полагайтесь на это. Если вы забыли конечный тег, это может привести к неожиданным результатам и/или ошибкам.
Пустые элементы HTML
Элементы HTML без содержимого называются пустыми элементами.
<br> пустой элемент без закрывающего тега (тег <br> определяет разрыв строки).
Пустые элементы могут быть "закрыты" в открывающем теге так: <br />.
HTML5 не требует закрытия пустых элементов. Но если требуется более строгая проверка, или если необходимо сделать документ удобочитаемым синтаксическими анализаторами XML, необходимо правильно закрыть все элементы HTML.
Использовать строчные теги
Теги HTML не чувствительны к регистру: <p> означает то же, что и <p>.
Стандарт HTML5 не требует строчных тегов, но W3C рекомендует строчные буквы в HTML и требует нижнего регистра для более строгих типов документов, таких как XHTML.
HTML5
Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.
Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose. Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications.
For example, the following document is non-conforming, despite being syntactically correct:
. because the data placed in the cells is clearly not tabular data (and the cite element mis-used). A corrected version of this document might be:
This next document fragment, intended to represent the heading of a corporate site, is similarly non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section).
The hgroup element is intended for these kinds of situations:
In the next example, there is a non-conforming attribute value («carpet») and a non-conforming attribute («texture»), which is not permitted by this specification:
Here would be an alternative and correct way to mark this up:
Through scripting and using other mechanisms, the values of attributes, text, and indeed the entire structure of the document may change dynamically while a user agent is processing it. The semantics of a document at an instant in time are those represented by the state of the document at that instant in time, and the semantics of a document can therefore change over time. User agents must update their presentation of the document as this occurs.
HTML has a progress element that describes a progress bar. If its «value» attribute is dynamically updated by a script, the UA would update the rendering to show the progress changing.
3.2.2 Elements in the DOM
The nodes representing HTML elements in the DOM must implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes HTML elements in XML documents, even when those documents are in another context (e.g. inside an XSLT transform).
Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.
For example, an ol element represents an ordered list.
The basic interface, from which all the HTML elements’ interfaces inherit, and which must be used by elements that have no additional requirements, is the HTMLElement interface.
The HTMLElement interface holds methods and attributes related to a number of disparate features, and the members of this interface are therefore described in various different sections of this specification.
The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification) :
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
- onabort
- onblur *
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- oncuechange
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror *
- onfocus *
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload *
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onreset
- onscroll *
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
The attributes marked with an asterisk have a different meaning when specified on body elements as those elements expose event handlers of the Window object with the same names.
While these attributes apply to all elements, they are not useful on all elements. For example, only media elements will ever receive a volumechange event fired by the user agent.
Custom data attributes (e.g. data-foldername or data-msgid ) can be specified on any HTML element, to store custom data specific to the page.
In HTML documents, elements in the HTML namespace may have an xmlns attribute specified, if, and only if, it has the exact value » http://www.w3.org/1999/xhtml «. This does not apply to XML documents.
In HTML, the xmlns attribute has absolutely no effect. It is basically a talisman. It is allowed merely to make migration to and from XHTML mildly easier. When parsed by an HTML parser, the attribute ends up in no namespace, not the » http://www.w3.org/2000/xmlns/ » namespace like namespace declaration attributes in XML do.
In XML, an xmlns attribute is part of the namespace declaration mechanism, and an element cannot actually have an xmlns attribute in no namespace specified.
The XML specification also allows the use of the xml:space attribute in the XML namespace on any element in an XML document. This attribute has no effect on HTML elements, as the default behavior in HTML is to preserve whitespace. [XML]
There is no way to serialize the xml:space attribute on HTML elements in the text/html syntax.
To enable assistive technology products to expose a more fine-grained interface than is otherwise possible with HTML elements and attributes, a set of annotations for assistive technology products can be specified (the ARIA role and aria-* attributes).
3.2.3.1 The attribute
The id attribute specifies its element’s . The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.
An element’s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.
If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the element’s home subtree (e.g. for selectors in CSS or for the getElementById() method in the DOM).
Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.
This specification doesn’t preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element’s ID in a way that doesn’t conflict with the id attribute.
The IDL attribute must reflect the id content attribute.
3.2.3.2 The attribute
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.
If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML element with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information.
If the title attribute’s value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.
Caution is advised with respect to the use of newlines in title attributes.
For instance, the following snippet actually defines an abbreviation’s expansion with a line break in it:
Some elements, such as link , abbr , and input , define additional semantics for the title attribute beyond the semantics described above.
The IDL attribute must reflect the title content attribute.
3.2.3.3 The lang and xml:lang attributes
The attribute (in no namespace) specifies the primary language for the element’s contents and for any of the element’s attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown. [BCP47]
The attribute in the XML namespace is defined in XML. [XML]
If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.
The lang attribute in no namespace may be used on any HTML element.
The lang attribute in the XML namespace may be used on HTML elements in XML documents, as well as elements in other namespaces if the relevant specifications allow it (in particular, MathML and SVG allow lang attributes in the XML namespace to be specified on their elements). If both the lang attribute in no namespace and the lang attribute in the XML namespace are specified on the same element, they must have exactly the same value when compared in an ASCII case-insensitive manner.
Authors must not use the lang attribute in the XML namespace on HTML elements in HTML documents. To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname » xml:lang » on HTML elements in HTML documents, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner.
The attribute in no namespace with no prefix and with the literal localname » xml:lang » has no effect on language processing.
To determine the of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang attribute in the XML namespace set or is an HTML element and has a lang in no namespace attribute set. That attribute specifies the language of the node (regardless of its value).
If both the lang attribute in no namespace and the lang attribute in the XML namespace are set on an element, user agents must use the lang attribute in the XML namespace , and the lang attribute in no namespace must be ignored for the purposes of determining the element’s language.
If none of the node’s ancestors, including the root element, have either attribute set, but there is a pragma-set default language set, then that is the language of the node. If there is no pragma-set default language set, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language instead. In the absence of any such language information, and in cases where the higher-level protocol reports multiple languages, the language of the node is unknown, and the corresponding language tag is the empty string.
If the resulting value is not a recognized language tag, then it must be treated as an unknown language having the given language tag, distinct from all other languages. For the purposes of round-tripping or communicating with other services that expect language tags, user agents should pass unknown language tags through unmodified.
Thus, for instance, an element with lang=»xyzzy» would be matched by the selector :lang(xyzzy) (e.g. in CSS), but it would not be matched by :lang(abcde) , even though both are equally invalid. Similarly, if a Web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was «xyzzy», even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all.
If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown.
User agents may use the element’s language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, or for dictionary selection).
The IDL attribute must reflect the lang content attribute in no namespace.
3.2.3.4 The attribute (XML only)
The xml:base attribute is defined in XML Base. [XMLBASE]
The xml:base attribute may be used on elements of XML documents. Authors must not use the xml:base attribute in HTML documents.
3.2.3.5 The attribute
The dir attribute specifies the element’s text directionality. The attribute is an enumerated attribute with the following keywords and states:
The keyword, which maps to the state
Indicates that the contents of the element are explicitly directionally embedded left-to-right text.
The keyword, which maps to the state
Indicates that the contents of the element are explicitly directionally embedded right-to-left text.
The keyword, which maps to the state
Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element (as described below).
The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied.
For textarea and pre elements, the heuristic is applied on a per-paragraph level.
The attribute has no invalid value default and no missing value default.
of an element is either » or », and is determined as per the first appropriate set of steps from the following list:
If the element’s dir attribute is in the ltr state
If the element’s dir attribute is in the rtl state
If the element’s dir attribute is in the auto state If the element is a bdi element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)
Find the first character in tree order that matches the following criteria:
The character is from a text node that is a descendant of the element whose directionality is being determined.
The character is of bidirectional character type L, AL, or R. [BIDI]
The character is not in a text node that has an ancestor element that is a descendant of the element whose directionality is being determined and that is either:
- A bdi element.
- A script element.
- A style element.
- An element with a dir attribute in a defined state.
If such a character is found and it is of bidirectional character type AL or R, the directionality of the element is ‘rtl’.
Otherwise, the directionality of the element is ‘ltr’.
If the element is a root element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)
If the element has a parent element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)
The directionality of the element is the same as the element’s parent element’s directionality.
The effect of this attribute is primarily on the presentation layer. For example, the rendering section in this specification defines a mapping from this attribute to the CSS ‘direction’ and ‘unicode-bidi’ properties, and CSS defines rendering in terms of those properties.
Returns the html element’s dir attribute’s value, if any.
Can be set, to either » ltr «, » rtl «, or » auto » to replace the html element’s dir attribute’s value.
If there is no html element, returns the empty string and ignores new values.
The IDL attribute on an element must reflect the dir content attribute of that element, limited to only known values.
The IDL attribute on HTMLDocument objects must reflect the dir content attribute of the html element, if any, limited to only known values. If there is no such element, then the attribute must return the empty string and do nothing on setting.
Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g. as interpreted by search engines).
This markup fragment is of an IM conversation.
Given a suitable style sheet and the default alignment styles for the p element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows:
As noted earlier, the auto value is not a panacea. The final paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character, which causes the «right?» to be to the left of the Arabic text.
3.2.3.6 The attribute
Every HTML element may have a class attribute specified.
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)
Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such features.
There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
The and IDL attributes must both reflect the class content attribute.
3.2.3.7 The attribute
All HTML elements may have the style content attribute set. This is a CSS styling attribute as defined by the CSS Styling Attribute Syntax specification. [CSSATTR]
In user agents that support CSS, the attribute’s value must be parsed when the attribute is added or has its value changed, according to the rules given for CSS styling attributes . [CSSATTR]
Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.
In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)
Returns a CSSStyleDeclaration object for the element’s style attribute.
The IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute, if present. Mutating the CSSStyleDeclaration object must create a style attribute on the element (if there isn’t one already) and then change its value to be a value representing the serialized form of the CSSStyleDeclaration object. The same object must be returned each time. [CSSOM]
In the following example, the words that refer to colors are marked up using the span element and the style attribute to make those words show up in the relevant colors in visual media.
3.2.3.8 with the data-* attributes
A is an attribute in no namespace whose name starts with the string «», has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn’t affect such documents.
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
For instance, a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. This information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths.
It would be inappropriate, however, for the user to use generic software not associated with that music site to search for tracks of a certain length by looking at this data.
This is because these attributes are intended for use by the site’s own scripts, and are not a generic extension mechanism for publicly-usable metadata.
Every HTML element may have any number of custom data attributes specified, with any value.
Returns a DOMStringMap object for the element’s data-* attributes.
Hyphenated names become camel-cased. For example, data-foo-bar=»» becomes element.dataset.fooBar .
The IDL attribute provides convenient accessors for all the data-* attributes on an element. On getting, the dataset IDL attribute must return a DOMStringMap object, associated with the following algorithms, which expose these attributes on their element:
- Let list be an empty list of name-value pairs.
- For each content attribute on the element whose first five characters are the string » data- » and whose remaining characters (if any) do not include any characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z), add a name-value pair to list whose name is the attribute’s name with the first five characters removed and whose value is the attribute’s value.
- For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.
- Return list .
- Let name be the name passed to the algorithm.
- Let value be the value passed to the algorithm.
- If name contains a U+002D HYPHEN-MINUS character (-) followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), throw a SYNTAX_ERR exception and abort these steps.
- For each character in the range U+0041 to U+005A (U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in name , insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.
- Insert the string data- at the front of name .
- Set the value of the attribute with the name name , to the value value , replacing any previous value if the attribute already existed. If setAttribute() would have raised an exception when setting an attribute with the name name , then this must raise the same exception.
- Let name be the name passed to the algorithm.
- For each character in the range U+0041 to U+005A (U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in name , insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.
- Insert the string data- at the front of name .
- Remove the attribute with the name name , if such an attribute exists. Do nothing otherwise.
The same object must be returned each time.
If a Web page wanted an element to represent a space ship, e.g. as part of a game, it would have to use the class attribute along with data-* attributes:
Notice how the hyphenated attribute name becomes camel-cased in the API.
Authors should carefully design such extensions so that when the attributes are ignored and any associated CSS dropped, the page is still usable.
User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.
JavaScript libraries may use the custom data attributes, as they are considered to be part of the page on which they are used. Authors of libraries that are reused by many authors are encouraged to include their name in the attribute names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible.
For example, a library called «DoQuery» could use attribute names like data-doquery-range , and a library called «jJo» could use attributes names like data-jjo-range . The jJo library could also provide an API to set which prefix to use (e.g. J.setDataPrefix(‘j2’) , making the attributes have names like data-j2-range ).
3.2.4 Element definitions
Each element in this specification has a definition that includes the following information:
A list of categories to which the element belongs. These are used when defining the content models for each element.
Contexts in which this element can be used
A non-normative description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience.
For simplicity, only the most specific expectations are listed. For example, an element that is both flow content and phrasing content can be used anywhere that either flow content or phrasing content is expected, but since anywhere that flow content is expected, phrasing content is also expected (since all phrasing content is flow content), only «where phrasing content is expected» will be listed.
A normative description of what content must be included as children and descendants of the element.
A normative list of attributes that may be specified on the element (except where otherwise disallowed).
A normative definition of a DOM interface that such elements must implement.
This is then followed by a description of what the element represents, along with any additional normative conformance criteria that may apply to authors and implementations . Examples are sometimes also included.
3.2.4.1 Attributes
Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes.
HTML элементы
HTML элементом называется комбинация начального тэга, конечного тэга и содержимого.
Примеры HTML элементов:
| Начальный тэг | Содержимое элемента | Конечный тэг |
|---|---|---|
| <p> | Это абзац. | </p> |
| <b> | Это жирный текст. | </b> |
| <br /> | ||
Обратите внимание: большинство элементов могут также иметь атрибуты (атрибуты будут подробно рассмотрены в следующей главе данного учебника).
О конечном тэге
Браузер верно отобразит HTML элемент даже если Вы забудете указать конечный тэг.
HTML является языком «прощающим ошибки», однако существует и более строгая разновидность языка (XHTML), в которой пропуск конечного тэга будет считаться ошибкой.
Вложенные элементы
Большинство элементов могут быть вложены друг в друга (т.е. в содержимом одного элемента может располагаться другой элемент).
Например вложив элемент <i> в элемент <b> Вы сможете сделать текст одновременно жирным и курсивным.
В XHTML элементы всегда должны быть вложены правильно (неправильно: <i><b></i></b>, правильно: <i><b></b></i>), в HTML неправильно вложенные элементы не считаются ошибкой.
Пустые HTML элементы
Элементы, которые не могут иметь содержимое называются пустыми элементами, например <br>, <hr> являются пустыми элементами.
В XHTML пустые элементы обязаны иметь закрывающийся тэг (<br />,<hr />), в HTML отсутствие закрывающегося тэга не считается ошибкой и браузер будет верно отображать такие элементы.
В каком регистре писать тэги?
HTML не чувствителен к регистру это значит, что тэг <b> будет интерпретироваться браузером так же как и тэг <B>, в XHTML тэги могут быть написаны только в нижней раскладке.
Несмотря на то, что HTML не настаивает на строгом синтаксисе мы рекомендуем заранее выработать определенные правила написания кода (например если Вы пишете тэги в нижней раскладке, то делайте так всегда).
Код не следующий никаким правилам неприятно читать и сложно понимать.
Обратите внимание: при написании примеров к данному учебнику мы всегда следовали правилам XHTML. Узнать о XHTML больше можно в нашем XHTML учебнике (рекомендуем переходить к изучению этого учебника только после изучения HTML).