HTML element

Since HTML5, HTML allows the use of uppercase attribute names and omission of quotemarks.

Informally, HTML elements are sometimes referred to as "tags" (an example of synecdoche), though many prefer the term tag strictly in reference to the markup delimiting the start and end of an element.

Element (and attribute) names may be written in any combination of upper or lower case in HTML, but must be in lower case in XHTML. The canonical form was upper-case until HTML 4, and was used in HTML specifications, but in recent years, lower-case has become more common.

There are three kinds of HTML elements: normal elements, raw text elements, and void elements.

Normal elements usually have both a start tag and an end tag, although for some elements the end tag, or both tags, can be omitted. It is constructed in a similar way:

• a start tag (Raw text elements (also known as text or text-only elements) are constructed with:
  • a start tag (in the form <title> element, which must not contain other elements (including markup of text), only <tag>), which contains any HTML attributes. They may not contain any children, such as text or other elements. For compatibility with XHTML, the HTML specification<tag/> is permissible). The slash is required in XHTML and other XML applications. Two common void elements are "},"parts":[{"template":{"target":{"wt":"code","href":"./Template:Code"},"params":{"lang":{"wt":"html"},"code":{"wt":"<br />"}},"i":0}}]}'><br /> (for a hard line-break, such as in a poem or an address) and "},"parts":[{"template":{"target":{"wt":"code","href":"./Template:Code"},"params":{"lang":{"wt":"html"},"code":{"wt":"<hr />"}},"i":0}}]}'><hr /> (for a thematic break). Other such elements are often place-holders which reference external files, such as the image ("},"parts":[{"template":{"target":{"wt":"code","href":"./Template:Code"},"params":{"lang":{"wt":"html"},"code":{"wt":"<img />"}},"i":0}}]}'><img />) element. The attributes included in the element will then point to the external file in question. Another example of a void element is "},"parts":[{"template":{"target":{"wt":"code","href":"./Template:Code"},"params":{"lang":{"wt":"html"},"code":{"wt":"<link/>"}},"i":0}}]}'><link/>, for which the syntax is:
    "}}'><link rel="stylesheet" href="fancy.css" type="text/css">

    This "},"parts":[{"template":{"target":{"wt":"code","href":"./Template:Code"},"params":{"lang":{"wt":"html"},"code":{"wt":"<link />"}},"i":0}}]}'><link /> element points the browser at a style sheet to use when presenting the HTML document to the user. In the HTML syntax attributes do not have to be quoted if they are composed only of certain characters: letters, digits, the hyphen-minus and the period. When using the XML syntax (XHTML), on the other hand, all attributes must be quoted, and a spaced trailing slash is required before the last angle bracket:

    "}}'><link rel="stylesheet" href="fancy.css" type="text/css" />

    Attributes

    edit

    HTML attributes define desired behavior or indicate additional element properties. Most attributes require a value. In HTML, the value can be left unquoted if it does not include spaces (attribute='value"). In XML, those quotes are required.

    Boolean attributes, on the other hand, do not require a value to be specified. An example is the checked for checkboxes:

    \n"}}'><input type=checkbox checked>

    In the XML (and thus XHTML) syntax, though, a value is required, and the name should be repeated as the value:

    \n"}}'><inputtype="checkbox"checked="checked"/>

    Element standards

    edit

    HTML elements are defined in a series of freely available open standards issued since 1995, initially by the IETF and subsequently by the W3C.

    During the browser wars of the 1990s, developers of user agents (e.g. web browsers) often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognize non-standard elements, and they will be ignored, possibly causing the page to be displayed improperly.

    In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.

    Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML. See HTML for a discussion of the minor differences between the two.

    Element status

    edit

    Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).

    In HTML 4.01 / XHTML 1.0, the status of elements is complicated by the existence of three types of DTD:

    • Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
    • Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
    • Strict, which is the up-to-date (as at 1999) form of HTML.

    HTML5 instead provides a listing of obsolete features to go along with the standardized normative content. They are broken down into "obsolete but conforming" for which implementation instructions exist and "non-conforming" ones that should be replaced.

    The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2. All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict. While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.

    (Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)

    A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements that are expected to be formally deprecated in the future.

    Content vs. presentation and behavior

    edit

    Since HTML 4, HTML has increasingly focused on the separation of content (the visible text and images) from presentation (like color, font size, and layout). This is often referred to as a separation of concerns. HTML is used to represent the structure or content of a document, its presentation remains the sole responsibility of CSS style sheets. A default style sheet is suggested as part of the CSS standard, giving a default rendering for HTML.

    Behavior (interactivity) is also kept separate from content, and is handled by scripts. Images are contained in separate graphics files, separate from text, though they can also be considered part of the content of a page.

    Separation of concerns allows the document to be presented by different user agents according to their purposes and abilities. For example, a user agent can select an appropriate style sheet to present a document by displaying on a monitor, printing on paper, or to determine speech characteristics in an audio-only user agent. The structural and semantic functions of the markup remain identical in each case.

    Historically, user agents did not always support these features. In the 1990s, as a stop-gap, presentational elements (like <img/> or <script>, with related HTML attributes, provide style sheets and scripts.

    • In the document head, <style>...</style> and <script/> or <noscript>...</noscript> element provides embedded alternative content where appropriate; however, it can only be used in the document head and in the body as a block-level element.

    Document structure elements

    edit

    <html>...</html>

    The root element of an HTML document; all other elements are contained in this. The HTML element delimits the beginning and the end of an HTML document.

    Both the start and end tags may be omitted (HTML5).

    Standardized in HTML 2.0; still current.

    <head>...</head>

    <base />

    Specifies a base URL for all relative href and other links in the document. Must appear before any element that refers to an external resource. HTML permits only one <base> element for each document. This element has HTML attributes, but no contents.

    A development version of this element (as BASE) is mentioned in HTML Tags; standardized in HTML 2.0; still current.

    <basefont /> (deprecated)

    Specifies a base font size, typeface, and color for the document. Used together with <font> elements. Deprecated in favor of style sheets.

    Standardized in HTML 3.2; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict.

    The <ISINDEX> tag being rendered in Netscape 3.0.

    <isindex /> (deprecated)

    "}}'><isindex> could either appear in the document head or in the body, but only once in a document. It would display a text field that would send the single parameter as <link rel="stylesheet" type="text/css" href="url" title="description_of_style">. A less-common, but important, usage is to supply navigation hints consistently through use of microformats. Several common relationships are defined, that may be exposed to users through the browser interface rather than directly in the web page, such as: "}}'><link rel="next" href="url">. A document's <head> element may contain any number of <link/> elements. This element has HTML attributes, but no contents.

    LINK existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.

    <meta />

    <meta name="foo" content="bar" scheme="DC" /> the <meta/> element identifies itself as containing the foo element, with a value of bar, from the DC or Dublin Core resource description framework.

    Standardized in HTML 2.0; still current.

    <object>...</object>

    Used for including generic objects within the document header. Though rarely used within a <head> element, it could potentially be used to extract foreign data and associate it with the current document.

    Standardized in HTML 4.0; still current.

    <script>...</script>

    Can act as a container for script instructions or link to an external script with the optional src attribute. Also usable in the document body to dynamically generate either both block or inline content.

    Standardized in HTML 3.2; still current.

    <style>...</style>

    Specifies a CSS style for the document, usually in the form, ... </style>"}}'><style type="text/css">...</style>. Can either act as a container for style instructions or link to external style sheets – for example, in CSS, with @import directives of the form, @import url; </style>"}}'><style>@importurl;</style>

    Standardized in HTML 3.2; still current.

    <title>...</title>

    This tag defines a document title. Required in every HTML and XHTML document. User agents may use the title in different ways. For example:

    • Web browsers usually display it in a window's title bar when the window is open, and (where applicable) in the task bar when the window is minimized.
    • It may become the default file-name when saving the page.
    • We can use <title> element only one time in a web page, and when we make another page then we will use again another <title> element with new title (do not take same name for all title tag in website, It can be problem for search engines).
    • Web search engines' web crawlers may pay particular attention to the words used in the title.

    The <title> element must not contain other elements, only text. Only one <title> element is permitted in a document.

    Existed in HTML Tags, and was standardized in HTML 2.0; still current.

    Document body elements

    edit

    In visual browsers, displayable elements can be rendered as either block or inline. While all elements are part of the document sequence, block elements appear within their parent elements:

    • as rectangular objects which do not break across lines;
    • with block margins, width, and height properties which can be set independently of the surrounding elements.

    Conversely, inline elements are treated as part of the flow of document text; they cannot have margins, width, or height set, and do break across lines.

    Block elements

    edit

    Block elements, or block-level elements, have a rectangular structure. By default, these elements will span the entire width of its parent element, and will thus not allow any other element to occupy the same horizontal space as it is placed on.

    The rectangular structure of a block element is often referred to as the CSS box model, and is made up of several parts. Each element contains the following:

    • The content of an element is the actual text (or other media) placed between the opening and closing tags of an element.
    • The padding of an element is the space around the content but which still forms part of the element. Padding should not be used to create white space between two elements. Any background style assigned to the element, such as a background image or color, will be visible within the padding. Increasing the size of an element's padding increases the amount of space this element will take up.
    • The border of an element is the absolute end of an element and spans the perimeter of that element. The thickness of a border increases the size of an element.
    • The margin of an element is the white space that surrounds an element. The content, padding, and border of any other element will not be allowed to enter this area unless forced to do so by some advanced CSS placement. Using most standard DTDs, margins on the left and right of different elements will push each other away. Margins on the top or bottom of an element, on the other hand, will not stack or will intermingle. This means that the white space between these elements will be as big as the larger margin between them.

    The above section refers only to the detailed implementation of CSS rendering and has no relevance to HTML elements themselves.

    Basic text

    edit

    P</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":3}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h1"},"content":{"wt":"{{XMLElement|h1|Level 1 heading}} {{anchor|heading}}"}},"i":4}},"\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h2"},"content":{"wt":"{{XMLElement|h2|Level 2 heading}}"},"multi":{"wt":"y"}},"i":5}},"\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h3"},"content":{"wt":"{{XMLElement|h3|Level 3 heading}}"},"multi":{"wt":"y"}},"i":6}},"\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h4"},"content":{"wt":"{{XMLElement|h4|Level 4 heading}}"},"multi":{"wt":"y"}},"i":7}},"\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h5"},"content":{"wt":"{{XMLElement|h5|Level 5 heading}}"},"multi":{"wt":"y"}},"i":8}},"\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"h6"},"content":{"wt":"{{XMLElement|h6|Level 6 heading}}"},"multi":{"wt":"y"}},"i":9}},"\n\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"Section headings at different levels. <code>h1</code> delimits the highest-level heading, <code>h2</code> the next level down (sub-section), <code>h3</code> for a level below that, and so on to <code>h6</code>. They are sometimes referred to collectively as <code>h''n''</code> tags, ''n'' meaning any of the available heading levels.\n\nMost visual browsers show headings as large bold text by default, though this can be overridden with [[Cascading Style Sheets|CSS]]. Heading elements are not intended merely for creating large or bold text – in fact, they should {{em|not}} be used for explicitly styling text. Rather, they describe the document's structure and organization. Some programs use them to generate outlines and tables of contents."}},"i":10}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"Headings existed in ''[[#HTMLTAGS|HTML Tags]]'', and were '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":11}},"\n",{"template":{"target":{"wt":"glossary end","href":"./Template:Glossary_end"},"params":{},"i":12}}]}'/>

    <p>...</p>

    Creates a paragraph, perhaps the most common block level element.

    P existed in HTML Tags, and was standardized in HTML 2.0; still current.

    <h1>...</h1>

    <h2>...</h2>

    <h3>...</h3>

    <h4>...</h4>

    <h5>...</h5>

    <h6>...</h6>

    Section headings at different levels. h1 delimits the highest-level heading, h2 the next level down (sub-section), h3 for a level below that, and so on to h6. They are sometimes referred to collectively as hn tags, n meaning any of the available heading levels. Most visual browsers show headings as large bold text by default, though this can be overridden with CSS. Heading elements are not intended merely for creating large or bold text – in fact, they should not be used for explicitly styling text. Rather, they describe the document's structure and organization. Some programs use them to generate outlines and tables of contents.

    Headings existed in HTML Tags, and were standardized in HTML 2.0; still current.

    Lists

    edit

    {{cite web |url=http://www.w3.org/TR/html5/grouping-content.html#the-dl-element |title=4.4 Grouping content – HTML5 |work=HTML5: A vocabulary and associated APIs for HTML and XHTML – W3C Recommendation |publisher=[[World Wide Web Consortium]] |at=§4.4.8 The dl element |date=28 October 2014 |access-date=16 August 2015}}</ref> and was known as a definition list prior to HTML5.<ref>{{cite web |url=http://www.w3.org/TR/html4/struct/lists.html#edef-DL |title=Lists in HTML documents |at=§10.3 Definition lists: the DL, DT, and DD elements |work=HTML 4.01 Specification – W3C Recommendation |date=24 December 1999 |publisher=World Wide Web Consortium |access-date=2 May 2015 }}</ref> Description lists are intended for groups of \"terms and definitions, metadata topics and values, questions and answers, or any other groups of name–value data\".<ref>{{cite web |website=[[W3C]]|title=HTML5: A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft|date=5 April 2011|url=http://www.w3.org/TR/2011/WD-html5-20110405/grouping-content.html#the-dl-element}}.</ref>"}},"i":3}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>DL</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":4}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"dt"},"content":{"wt":"{{XMLElement|dt|Definition Term}}"}},"i":5}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"A name in a description list (previously definition term in a definition list)."}},"i":6}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>DT</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":7}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"dd"},"content":{"wt":"{{XMLElement|dd|Definition}}"}},"i":8}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"A value in a description list (previously definition data in a definition list)."}},"i":9}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>DD</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":10}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"ol"},"content":{"wt":"{{XMLElement|ol|Ordered List}}"}},"i":11}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"An ordered (enumerated) list. The <code>type</code> attribute can be used to specify the kind of marker to use in the list, but style sheets give more control. The default is Arabic numbering. In an HTML attribute: {{nobr|{{code|lang=html|code=<ol type=\"foo\">}}}}; or in a CSS declaration: {{nobr|{{code|lang=css|code=ol { list-style-type: foo; } }}}} – replacing <code><var>foo</var></code> with one of the following:\n* A, B, C&nbsp;... – HTML value: <code>A</code>; CSS value: <code>upper-alpha</code>\n* a, b, c&nbsp;... – HTML value: <code>a</code>; CSS value: <code>lower-alpha</code>\n* I, II, III&nbsp;... – HTML value: <code>I</code>; CSS value: <code>upper-roman</code>\n* i, ii, iii&nbsp;... – HTML value: <code>i</code>; CSS value: <code>lower-roman</code>\n* 1, 2, 3&nbsp;... – HTML value: <code>1</code>; <code>decimal</code>\nCSS provides several other options not available as pure-HTML markup, including <code>none</code>, and options for [[CJK]], Hebrew, Georgian, and Armenian script. The attribute is deprecated in HTML 3.2 and 4.01, but not in HTML 5."}},"i":12}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>OL</code> existed in ''[[#HTMLDRAFT12|HTML Internet Draft 1.2]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":13}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"ul"},"content":{"wt":"{{XMLElement|ul|Unordered List}}"}},"i":14}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"An unordered (bulleted) list. The type of list item marker can be specified in an HTML attribute: {{nobr|{{code|lang=html|code=<ul type=\"foo\">}}}}; or in a CSS declaration: {{nobr|{{code|lang=css|code=ul { list-style-type: foo; } }}}} – replacing <code><var>foo</var></code> with one of the following (the same values are used in HTML and CSS): <code>disc</code> (the default), <code>square</code>, or <code>circle</code>. '''Only''' the CSS method is supported in HTML5; the attribute is deprecated in HTML 3.2 and 4.01. CSS also provides <code>none</code>, and the ability to replace these bullets with custom images."}},"i":15}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>UL</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":16}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"li"},"content":{"wt":"{{XMLElement|li|List Item}}"}},"i":17}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"A list item in ordered (<code>ol</code>) or unordered (<code>ul</code>) lists."}},"i":18}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>LI</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; still current."}},"i":19}},"\n\n",{"template":{"target":{"wt":"term","href":"./Template:Term"},"params":{"term":{"wt":"dir"},"content":{"wt":"{{XMLElement|dir|Directory List|deprecated=1}}"}},"i":20}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"A directory listing. The original purpose of this element was never widely supported; deprecated in favor of {{code|lang=html|code=<ul>}}."}},"i":21}},"\n",{"template":{"target":{"wt":"defn","href":"./Template:Defn"},"params":{"1":{"wt":"<code>DIR</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]]; '''deprecated''' in [[#HTML401|HTML 4.0 Transitional]]; '''invalid''' in [[#HTML401|HTML 4.0 Strict]]."}},"i":22}},"\n",{"template":{"target":{"wt":"glossary end","href":"./Template:Glossary_end"},"params":{},"i":23}}]}'/>

    <dl>...</dl>

    ol{list-style-type:foo;} – replacing foo with one of the following:

    • A, B, C ... – HTML value: A; CSS value: upper-alpha
    • a, b, c ... – HTML value: a; CSS value: lower-alpha
    • I, II, III ... – HTML value: I; CSS value: upper-roman
    • i, ii, iii ... – HTML value: i; CSS value: lower-roman
    • 1, 2, 3 ... – HTML value: 1; decimal

    CSS provides several other options not available as pure-HTML markup, including none, and options for CJK, Hebrew, Georgian, and Armenian script. The attribute is deprecated in HTML 3.2 and 4.01, but not in HTML 5.

    OL existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.

    <ul>...</ul>

    An unordered (bulleted) list. The type of list item marker can be specified in an HTML attribute: "}}'><ul type="foo">; or in a CSS declaration: