Editing HTML (section)

=== Elements ===
{{Main|HTML element}}
[[File:HTML element content categories.svg|thumb|HTML element content categories]]
HTML documents imply a structure of nested [[HTML element]]s. These are indicated in the document by HTML ''tags'', enclosed in angle brackets.<ref>{{cite web|title=HTML Elements|url=https://www.w3schools.com/html/html_elements.asp|publisher=w3schools|access-date=16 March 2015}}</ref>{{better source needed|date=February 2019}}

In the simple, general case, the extent of an element is indicated by a pair of tags: a "start tag" {{code|lang=html|code=<p>}} and "end tag" {{code|lang=html|code=</p>}}. The text content of the element, if any, is placed between these tags.

Tags may also enclose further tag markup between the start and end, including a mixture of tags and text. This indicates further (nested) elements, as children of the parent element.

The start tag may also include the element's ''attributes'' within the tag. These indicate other information, such as identifiers for sections within the document, identifiers used to bind style information to the presentation of the document, and for some tags such as the {{code|lang=html|code=<img>}} used to embed images, the reference to the image resource in the format like this: {{code|lang=html|code=<img src="example.com/example.jpg">}}

Some elements, such as the [[line breaking character|line break]] {{code|lang=html|code=<br>}} do not permit ''any'' embedded content, either text or further tags. These require only a single empty tag (akin to a start tag) and do not use an end tag.

Many tags, particularly the closing end tag for the very commonly used paragraph element {{code|lang=html|code=<p>}}, are optional. An HTML browser or other agent can infer the closure for the end of an element from the context and the structural rules defined by the HTML standard. These rules are complex and not widely understood by most HTML authors.

The general form of an HTML element is therefore: {{code|lang=html|code=<tag attribute1="value1" attribute2="value2">''content''</tag>}}. Some HTML elements are defined as ''empty elements'' and take the form {{code|lang=html|code=<tag attribute1="value1" attribute2="value2">}}. Empty elements may enclose no content, for instance, the {{code|lang=html|code=<br>}} tag or the inline {{code|lang=html|code=<img>}} tag.
The name of an HTML element is the name used in the tags.
The end tag's name is preceded by a slash character <code>&#47;</code>. If a tag has no content, an end tag is not allowed. If attributes are not mentioned, default values are used in each case.

==== Element examples ====
{{See also|HTML element}}

Header of the HTML document: {{code|lang=html|code=<head>...</head>}}. The title is included in the head, for example:
<syntaxhighlight lang="html">
<head>
  <title>The Title</title>
  <link rel="stylesheet" href="stylebyjimbowales.css"> <!-- Imports Stylesheets -->
</head>
</syntaxhighlight>

===== Headings =====
HTML headings are defined with the {{code|lang=html|code=<h1>}} to {{code|lang=html|code=<h6>}} tags with H1 being the highest (or most important) level and H6 the least:
<syntaxhighlight lang="html">
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</syntaxhighlight>
The effects are:
<blockquote>
<div style="overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;">Heading Level 1</div>
<div style="overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;">Heading Level 2</div>
<div style="overflow: hidden; page-break-after: avoid; font-size: 1.17em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;">Heading Level 3</div>
<div style="overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;">Heading Level 4</div>
<div style="overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;">Heading Level 5</div>
<div style="overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;">Heading Level 6</div>
</blockquote>

CSS can substantially change the rendering.
Paragraphs:<syntaxhighlight lang="html"><p>Paragraph 1</p> <p>Paragraph 2</p></syntaxhighlight>

===== Line breaks =====

{{code|lang=html|code=<br>}}. The difference between {{code|lang=html|code=<br>}} and {{code|lang=html|code=<p>}} is that {{code|lang=html|code=<br>}} [[line breaking character|breaks a line]] without altering the semantic structure of the page, whereas {{code|lang=html|code=<p>}} sections the page into [[paragraph]]s. The element {{code|code=<br>|lang=html}} is an ''empty element'' in that, although it may have attributes, it can take no content and it must not have an end tag.
<syntaxhighlight lang="html"><p>This <br> is a paragraph <br> with <br> line breaks</p></syntaxhighlight>

===== Links =====

This is a link in HTML. To create a link the {{code|lang=html|code=<a>}} tag is used. The <code>href</code> attribute holds the [[URL]] address of the link.
<syntaxhighlight lang="html"><a href="https://www.wikipedia.org/">A link to Wikipedia!</a></syntaxhighlight>

===== Inputs =====
There are many possible ways a user can give inputs like:<syntaxhighlight lang="html">
<input type="text"> <!-- This is for text input -->
<input type="file"> <!-- This is for uploading files -->
<input type="checkbox"> <!-- This is for checkboxes -->
</syntaxhighlight>
{{Anchor|Comments|comments}}'''Comments:'''
<syntaxhighlight lang="html"><!-- This is a comment --></syntaxhighlight> Comments can help in the understanding of the markup and do not display in the webpage.

There are several types of markup elements used in HTML:
; Structural markup indicates the purpose of text : For example, {{code|lang=html|code=<h2>Golf</h2>}} establishes "Golf" as a second-level [[HTML element#Basic text|heading]]. Structural markup does not denote any specific rendering, but most web browsers have default styles for element formatting. Content may be further styled using [[Cascading Style Sheets]] (CSS).<ref>{{cite web|title=CSS Introduction|url=https://www.w3schools.com/css/css_intro.asp|publisher=W3schools|access-date=16 March 2015}}</ref>
; Presentational markup indicates the appearance of the text, regardless of its purpose : For example, {{code|lang=html|code=<b>bold text</b>}} indicates that visual output devices should render "boldface" in bold text, but gives a little indication what devices that are unable to do this (such as aural devices that read the text aloud) should do. In the case of both {{code|lang=html|code=<b>bold text</b>}} and {{code|lang=html|code=<i>italic text</i>}}, there are other elements that may have equivalent visual renderings but that are more semantic in nature, such as {{code|lang=html|code=<strong>strong text</strong>}} and {{code|lang=html|code=<em>emphasized text</em>}} respectively. It is easier to see how an aural user agent should interpret the latter two elements. However, they are not equivalent to their presentational counterparts: it would be undesirable for a screen reader to emphasize the name of a book, for instance, but on a screen, such a name would be italicized. Most presentational markup elements have become [[Deprecation|deprecated]] under the HTML 4.0 specification in favor of using [[CSS]] for styling.
; Hypertext markup makes parts of a document into links to other documents : An anchor element creates a [[hyperlink]] in the document and its <code>href</code> attribute sets the link's target [[URL]]. For example, the HTML markup {{code|lang=html|code=<a href="https://en.wikipedia.org/">Wikipedia</a>}}, will render the word "<span class="plainlinks">[//en.wikipedia.org/ Wikipedia]</span>" as a hyperlink. To render an image as a hyperlink, an <code>img</code> element is inserted as content into the <code>a</code> element. Like <code>br</code>, <code>img</code> is an empty element with attributes but no content or closing tag. {{code|lang=html|code=<a href="https://example.org"><img src="image.gif" alt="descriptive text" width="50" height="50" border="0"></a>}}.

==== Attributes ====
{{Main|HTML attribute}}
Most of the attributes of an element are [[name–value pair]]s, separated by <code>&#61;</code> and written within the start tag of an element after the element's name. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML (but not XHTML).<ref>{{cite web |url=https://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2|title=On SGML and HTML|publisher=World Wide Web Consortium|access-date=November 16, 2008}}</ref><ref>{{cite web |url=https://www.w3.org/TR/xhtml1/diffs.html#h-4.4|title=XHTML 1.0 – Differences with HTML&nbsp;4|publisher=World Wide Web Consortium|access-date=November 16, 2008}}</ref> Leaving attribute values unquoted is considered unsafe.<ref>{{cite web|first=Jukka|last=Korpela|url=https://jkorpela.fi/qattr.html|title=Why attribute values should always be quoted in HTML|publisher=Cs.tut.fi|date=July 6, 1998|access-date=November 16, 2008}}</ref> In contrast with name-value pair attributes, there are some attributes that affect the element simply by their presence in the start tag of the element,<ref name="tagshtml">{{cite web|title=Tags used in HTML|url=https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html|date=November 3, 1992|publisher=World Wide Web Consortium|url-status=live|archive-url=https://web.archive.org/web/20100131184344/http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html|archive-date=January 31, 2010|access-date=November 16, 2008}}</ref> like the <code>ismap</code> attribute for the <code>img</code> element.<ref>{{cite web|url=https://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-ismap|title=Objects, Images, and Applets in HTML documents|publisher=World Wide Web Consortium|date=December 24, 1999|access-date=November 16, 2008}}</ref>

There are several common attributes that may appear in many elements :
* The <code>id</code> attribute provides a document-wide unique identifier for an element. This is used to identify the element so that stylesheets can alter its presentational properties, and scripts may alter, animate or delete its contents or presentation. Appended to the URL of the page, it provides a globally unique identifier for the element, typically a sub-section of the page. For example, the ID "Attributes" in <code><nowiki>https://en.wikipedia.org/wiki/HTML#Attributes</nowiki></code>.
* The <code>class</code> attribute provides a way of classifying similar elements. This can be used for [[semantics|semantic]] or presentation purposes. For example, an HTML document might semantically use the designation {{code|lang=html|code=<class="notation">}} to indicate that all elements with this class value are subordinate to the main text of the document. In presentation<!-- Presentationally is not a formally accepted word -->, such elements might be gathered together and presented as footnotes on a page instead of appearing in the place where they occur in the HTML source. Class attributes are used semantically in [[microformat]]s. Multiple class values may be specified; for example {{code|lang=html|code=<class="notation important">}} puts the element into both the <code>notation</code> and the <code>important</code> classes.
* An author may use the <code>style</code> attribute to assign presentational properties to a particular element. It is considered better practice to use an element's <code>id</code> or <code>class</code> attributes to select the element from within a [[Cascading Style Sheets|stylesheet]], though sometimes this can be too cumbersome for a simple, specific, or ad hoc styling.
* The <code>title</code> attribute is used to attach a subtextual explanation to an element. In most [[Web browser|browsers]] this attribute is displayed as a [[tooltip]].
* The <code>lang</code> attribute identifies the natural language of the element's contents, which may be different from that of the rest of the document. For example, in an English-language document: <syntaxhighlight lang="html"><p>Oh well, <span lang="fr">c'est la vie</span>, as they say in France.</p></syntaxhighlight>

The abbreviation element, <code>abbr</code>, can be used to demonstrate some of these attributes:

<syntaxhighlight lang="html"><abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr></syntaxhighlight>

This example displays as <abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr>; in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language."

Most elements take the language-related attribute <code>dir</code> to specify text direction, such as with "rtl" for right-to-left text in, for example, [[Arabic language|Arabic]], [[Persian language|Persian]] or [[Hebrew language|Hebrew]].<ref>{{cite web|title=H56: Using the dir attribute on an inline element to resolve problems with nested directional runs|url=https://www.w3.org/TR/WCAG-TECHS/H56.html|website=Techniques for WCAG 2.0|publisher=W3C|access-date=18 September 2010}}</ref>