Editing HTML element (section)

==Overview==

===Syntax===

{{Image frame|caption=Parts of an HTML container element
|content=<math>
\overbrace{
  \overbrace{\mathtt{\color{BrickRed}<\!p\ }\color{Magenta}\underbrace\mathtt{class}_\mathsf{\color{Black}{Attribute \atop name}}\mathtt{= ''}\!\underbrace\mathtt{paragraph}_\mathsf{\color{White}{Attr} \atop \color{Black}Attribute\ value}''\mathtt{\color{BrickRed}>}}^\mathsf{Start\ tag}
  \overbrace\mathtt{\color{Green}This\ is\ a\ paragraph.}^\mathsf{Content}
  \overbrace\mathtt{\color{BrickRed}<\!/p\!>}^\mathsf{End \atop tag}
}^\mathsf{Element}
</math>
}}
In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. An '''HTML tag''' is composed of the name of the element, surrounded by [[angle bracket]]s. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the {{tag|p|o}} element, would be written as:
<syntaxhighlight lang="html">
<p>In the HTML syntax, most elements are written ...</p>
</syntaxhighlight>
However, not all of these elements {{em|require}} the end tag, or even the start tag, to be present.<ref name=whatwg-syntax-tag-omission/> <!--Examples will be given throughout the article when I get around to it. —Ms2ger--> Some elements, the so-called ''[[#Void elements|void elements]]'', do not have an end tag. A typical example is the {{tag|br|o}} (hard line-break) element. A void element's behavior is predefined, and it cannot contain any content or other elements. For example, an address would be written as:
<syntaxhighlight lang="html">
<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>
</syntaxhighlight>
When using [[XHTML]], it is required to open and close all elements, including void elements. This can be done by placing an end tag immediately after the start tag, but this is not legal in HTML 5 and will lead to two elements being created. An alternative way to specify that it is a void element, which is compatible with both XHTML and HTML 5, is to put a <code>/</code> at the {{em|end}} of the tag (not to be confused with the <code>/</code> at the {{em|beginning}} of a closing tag).
<syntaxhighlight lang="html">
<p>P. Sherman<br />42 Wallaby Way<br />Sydney</p>
</syntaxhighlight>

[[HTML attribute]]s are specified inside the start tag. For example, the {{tag|abbr|o}} element, which represents an [[abbreviation]], expects a <code>title</code> attribute within its opening tag. This would be written as:
<syntaxhighlight lang="html">
<abbr title="abbreviation">abbr.</abbr>
</syntaxhighlight>

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.<ref name="XHTML10-42">[[#XHTML10|XHTML 1.0]] §4.2</ref> 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.

==== Types of element ====
There are three kinds of [[HTML]] elements: normal elements, raw text elements, and void elements.

'''{{vanchor|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'' ({{tag|{{var|tag}}|o}}) marking the beginning of an element, which may incorporate any number of [[HTML attribute]]s;
* some amount of ''content'', including text and other elements;
* an ''end tag'', in which the element name is prefixed with a [[Slash (punctuation)|slash]]: {{tag|{{var|tag}}|c}}.

'''{{vanchor|Raw text elements}}''' (also known as text or text-only elements) are constructed with:
* a ''start tag'' (in the form {{tag|{{var|tag}}|o}}) marking the beginning of an element, which may incorporate any number of HTML attributes;
* some amount of text ''content'', but no elements (all tags, apart from the applicable end tag, will be interpreted as content);
* an ''end tag'', in which the element name is prefixed with a slash: {{tag|{{var|tag}}|c}}. In some versions of HTML, the end tag is optional for some elements. The end tag is required in [[XHTML]].
An example is the {{tag|title|o}} element, which must not contain other elements (including markup of text), only {{em|plain}} text.

'''{{Anchor|Empty element}}{{vanchor|Void elements}}''' (also sometimes called empty elements, single elements or stand-alone elements) only have a start tag (in the form {{tag|{{var|tag}}|o}}), which contains any HTML attributes. They may not contain any children, such as text or other elements. For compatibility with [[XHTML]], the HTML specification{{Which|date=August 2022}} allows an optional space and slash{{Citation needed|date=August 2022}} ({{tag|{{var|tag}}|s}} is permissible). The slash is required in [[XHTML]] and other [[XML]] applications. Two common void elements are {{tag|br|s}} (for a [[Hard return|hard line-break]], such as in a poem or an address) and {{tag|hr|s}} (for a thematic break). Other such elements are often place-holders which reference external files, such as the image ({{tag|img|s}}) element. The attributes included in the element will then point to the external file in question. Another example of a void element is {{tag|link|s}}, for which the syntax is:
<syntaxhighlight lang="html">
<link rel="stylesheet" href="fancy.css" type="text/css">
</syntaxhighlight>
This {{tag|link|s}} element points the browser at a [[Style sheet (web development)|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 (punctuation)|slash]] is required before the last angle bracket:
<syntaxhighlight lang="xml">
<link rel="stylesheet" href="fancy.css" type="text/css" />
</syntaxhighlight>

==== Attributes ====
'''[[HTML attribute]]s''' 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 (<code>{{var|attribute}}={{var|value}}</code>), or it can be quoted with single or double quotes (<code>{{var|attribute}}='{{var|value}}'</code> or <code>{{var|attribute}}="{{var|value}}"</code>). In [[XML]], those quotes are required.

[[Boolean data type|Boolean]] attributes, on the other hand, do not require a value to be specified. An example is the <code>checked</code> for checkboxes:
<syntaxhighlight lang="html">
<input type=checkbox checked>
</syntaxhighlight>
In the XML (and thus [[XHTML]]) syntax, though, a value is required, and the name should be repeated as the value:
<syntaxhighlight lang="xml">
<input type="checkbox" checked="checked" />
</syntaxhighlight>

===Element standards===

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 agent]]s (e.g. [[web browser]]s) 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.<ref>[[#XML10|XML 1.0]] (The ability to produce additional elements is part of the ''eXtensibility'' in the acronym.)</ref>

Subsequently, HTML 4.01 was rewritten in an [[XML]]-compatible form, [[#XHTML10|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#SGML-based versus XML-based HTML|HTML]] for a discussion of the minor differences between the two.

===Element status===
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 [[XML validation|validating]] user agents).<ref name="XML10-51">[[#XML10|XML 1.0]] §5.1</ref>

In [[HTML 4.01]] / [[XHTML 1.0]], the status of elements is complicated by the existence of three types of [[Document Type Definition|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.<ref>[[#WHATWGLS|WHATWGLS]]. § 15</ref>

The first Standard ([[HTML#HTML 2|HTML 2.0]]) contained four deprecated elements, one of which was invalid in [[HTML 3.2]]. All four are invalid in [[HTML 4|HTML 4.01 Transitional]], which also deprecated a further ten elements. All of these, plus two others, are invalid in [[HTML 4|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|XHTML 1.0 Strict]], but also includes the '''[[Ruby (annotation markup)|Ruby markup]]''' module.)<ref name="XHTML11">[[#XHTML11|XHTML 1.1]] §A</ref>

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===

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).<ref>{{Cite web
  |title=HTML & CSS
  |url=http://www.w3.org/standards/webdesign/htmlcss
  |year=2013
  |publisher=[[W3C]]
}}</ref> 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 (web development)|style sheet]] is suggested as part of the CSS standard, giving a default rendering for HTML.<ref>{{Cite web
  |title=Appendix D. Default style sheet for HTML 4
  |work=Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  |date=7 June 2011
  |url=http://www.w3.org/TR/CSS2/sample.html
  |publisher=[[W3C]]
}}</ref>

Behavior (interactivity) is also kept separate from content, and is handled by [[Client-side scripting|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 {{tag|b|o}} and {{tag|i|o}}) were added to HTML, at the cost of creating problems for interoperability and user accessibility. This is now regarded as outmoded and has been superseded by style sheet-based design; most presentational elements are now deprecated.<ref name="HTML401-141">[[#HTML401|HTML 4.01]] §14.1</ref>

External image files are incorporated with the {{tag|img|s}} or {{tag|object|s}} elements. (With [[XHTML]], the [[Scalable Vector Graphics|SVG]] language can also be used to write graphics within the document, though linking to external SVG files is generally simpler.)<ref name="SVG11-23">{{cite web |editor-last1=Ferraiolo |editor-first1=J. |editor-last2=Fujisawa |editor-first2=J. |editor-last3=Jackson |editor-first3=D. |work=Scalable Vector Graphics (SVG) 1.1 Specification |title=§2.3 Options for using SVG in Web pages |publisher=[[W3C]] |date=2003-01-14 |url= http://www.w3.org/TR/2003/REC-SVG11-20030114/ |access-date=2009-03-25}}</ref> Where an image is not purely decorative, HTML allows replacement content with similar semantic value to be provided for non-visual user agents.

An HTML document can also be extended through the use of scripts to provide additional behaviors beyond the abilities of HTML hyperlinks and forms.

The elements {{tag|style|o}} and {{tag|script|o}}, with related [[HTML attributes]], provide style sheets and scripts.
* In the document head, {{tag|style|s}} and {{tag|script|s}} may link to shared external documents, or {{tag|style}} and {{tag|script}} may contain embedded instructions. (The {{tag|link|o}} element can also be used to link style sheets.)
* {{tag|script|s}} or {{tag|script}} can occur at any point in the document (head or body).
* The <code>style</code> attribute is valid in most document body elements (e.g. {{tag|div|o|attribs=style="..."}}) for inclusion of ''inline style'' instructions.
* ''Event-handling attributes'', which provide links to scripts, are optional in most elements.
* For user agents which do not operate scripts, the {{tag|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.