Editing HTML element (section)

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