Editing HTML (section)

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