Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1121667 of Introduction to HTML

  • Revision slug: Web/Guide/HTML/Introduction
  • Revision title: Introduction to HTML
  • Revision id: 1121667
  • Created:
  • Creator: jsx
  • Is current revision? Yes
  • Comment Revert to revision of 2016-09-08 14:14:04 by ToastyMallows: "Reverting sandbox edit"

Revision Content

Before you start

To understand this article, you should be comfortable with using a {{Glossary("browser")}}. If you also know how to create and edit text files, you can test the examples shown in this article.

Most fundamentally, when you look at a webpage in a {{Glossary("Browser","Web browser")}}, you see words. But most of the time webpages contain styled text rather than plain text.  Nowadays, webpage designers have access to hundreds of different fonts, font sizes, colors, and even alphabets (e.g. Spanish, Japanese, Russian), and browsers can for the most part display them accurately. Webpages may also contain images, video clips, and background music. They may include drop-down menus, search boxes, or links you can follow to access other pages (whether on the same site or another site). Some websites even let visitors customize the page display to accommodate their preferences and challenges (e.g., sight challenges, deafness, or color blindness). Often a page contains content boxes that move (scroll) while the rest of the page remains static.

A typical webpage depends on several technologies (such as CSS, JavaScriptAJAX, JSON) to control what the end-user sees, but most fundamentally, developers write webpages in HTML, without which there can be no webpages. To display the page on the client-side device, a browser starts out by reading the HTML.

The W3C ({{Glossary("W3C","World Wide Web Consortium")}}) and the WHATWG ({{Glossary("WHATWG","Web Hypertext Application Technology Working Group")}}) maintains the HTML ({{Glossary("HTML","HyperText Markup Language")}}) international standards and specifications. The WHATWG treats HTML as a constantly evolving "living standard", whereas the W3C works both on HTML evolution (HTML 5.1) and on "snapshots" of HTML (of which the most recent is HTML5).

The HTML specification defines a single language that can be written either with the relaxed {{Glossary("HTML")}} syntax or the stricter {{Glossary("XML")}} syntax (Extensible Markup Language). HTML also addresses the needs of Web apps. HTML only describes the meaning of the content, not style and formatting. To define appearance and layout, please use {{glossary("CSS")}}, not explicit presentational {{Glossary("HTML")}}.

This article provides an Introduction to HTML. If you've ever wondered what goes on behind the scenes in your web browser, this article is the place to start learning.

History of HTML

Tim Berners-Lee, then a contractor at CERN (the European Organization for Nuclear Research), devised a way in the late 1980s for scientists to share documents over the {{glossary("Internet")}}. Before that, Internet communication had been limited to plain text, using technologies such as email, FTP (File Transfer Protocol), and Usenet-based discussion boards. {{Glossary("HTML")}} used a content model stored on a central server but transferrable to a local workstation and viewable in a browser, simplifying access to content and making "rich" content possible (such as sophisticated text formatting and images). HTML is derived from SGML, which is a complex syntax for marking up or binding of content (text or graphics) in documents; as of HTML5, HTML no longer attempts to adhere to SGML syntax.

What is HTML?

{{Glossary("HTML")}} is a markup language. The word markup was used by editors who marked up manuscripts (usually with a blue pencil) when giving instructions for revisions. "Markup" now means something slightly different: a language with specific syntax that instructs a Web browser how to display a page. Once again, HTML separates "content" (words, images, audio, video, and so on) from "presentation" (instructions for displaying each type of content). {{Glossary("HTML")}} uses a pre-defined set of {{Glossary("Element","elements")}} to define content types. Elements contain one or more "{{Glossary("Tag","tags")}}" that contain or express content. Tags are enclosed by angle brackets, and the closing tag begins with a forward slash.

The basic HTML code structure is shown below:

<html>
<head>
    <title>Page title here</title>
</head>
<body>
    This is sample text...
    <!-- We use this syntax to write comments -->
    <!-- Page content and rest of the tags here.... -->
    <!-- This is the actual area that gets shown in the browser -->
</body>
</html>

Most browsers allow the user to view the HTML of any webpage. In Firefox, for example, press Ctrl + U to view the page source. Beginners will find the code nearly unreadable for a complex page, but if you spend some time looking at the code for a simple page and comparing it to the page the code renders, you will soon develop a clear understanding of how the syntax works.

The paragraph element consists of the start tag "<p>" and the closing tag "</p>". The following example shows a paragraph contained within the HTML paragraph element. Remember that your browser will not display more than one space character in a row.

<p>You are beginning to learn HTML.</p>

When this content is displayed in a web browser, it looks like this:

{{ EmbedLiveSample("Spl1", 400, 60) }}

The browser uses {{Glossary("Tag","tags")}} as an indicator of how to display the content in the tags.

Usually {{Glossary("Element","elements")}} containing content can also contain other elements. For example, the emphasis element ("<em>") can be embedded within a paragraph element, to add emphasis to a word or phrase:

<p>You are <em>beginning</em> to learn HTML.</p>

When displayed, this looks like:

{{ EmbedLiveSample("Spl2", 400, 60) }}

Some {{Glossary("Element","elements")}} cannot contain other elements. For example, the image {{Glossary("tag")}} ("<img>") specifies the filename of the content (an image) as an {{Glossary("attribute")}}:

<img src="smileyface.jpg" alt="Smiley face" >

In XHTML (an {{Glossary("XML")}} schema that implements HTML elements), you'd often put a forward slash before the final angle bracket to indicate the ending of an empty element.

The rest of this article goes into greater detail regarding the concepts introduced in this section. However, if you want to see {{Glossary("HTML")}} in action, check out Mozilla Thimble, an interactive online editor that helps you learn how to write {{Glossary("HTML")}}. Also, see HTML Elements for a list of available elements and a description of their use.

Elements — the basic building blocks

{{Glossary("HTML")}} consists of a set of {{Glossary("Element","elements")}}, which define the semantic meaning of their content. Elements include two matching {{glossary("tag","tags")}} and everything in between. For example, the "<p>" element indicates a paragraph; the "<img>" element indicates an image. See the HTML Elements page for a complete list. Note: Some tags are self-closing and do not contain any content.

Some {{Glossary("Element","elements")}} have very precise meaning, as in "this is an image", "this is a heading", or "this is an ordered list". Others are less specific, such as "this is a section on the page" or "this is part of the text". Yet others are used for technical reasons, such as "this is identifying information for the page, so do not display it". Regardless, in one way or another all HTML elements have a semantic value.

Most elements may contain other elements, forming a hierarchical structure. A very simple but complete webpage looks like this:

<html>
  <head>
    <title>A minimal web page</title>
  </head>
  <body>
    <p>You are in the beginning stage of learning HTML.</p>
  </body>
</html>

As you can see, the {{HTMLElement("html")}} {{Glossary("element")}} surrounds the rest of the document, and the {{HTMLElement("body")}} {{Glossary("element")}} surrounds the page content. This structure is often thought of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the {{Glossary("DOM")}} (document object model).

Tags

{{Glossary("HTML")}} documents are written in plain text. You can write HTML in any text editor that lets you save content as plain text (e.g. Notepad, Notepad++, or Sublime Text),  but most HTML authors prefer to use a specialized editor that highlights syntax and shows the {{Glossary("DOM")}}. You may use uppercase for tag names, but the {{Glossary("W3C")}} (the global consortium that maintains the HTML standard) recommends using lower case (and XHTML requires lower case).

HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than sign (">"). Such markup is called a {{Glossary("tag")}}. Make sure to close the tag, as some tags are closed by default, whereas others might produce unexpected errors if you forget the end tag. 

Here is a simple example:

<p>This is text within a paragraph.</p>

In this example there is a start tag and a closing tag. Closing tags are the same as the start tag except with a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. To write valid code, you must properly nest start and closing tags, that is, write close tags in the opposite order from the start tags.

This is an an example of valid code:

<em>I <strong>really</strong> mean that</em>.

This is an example of invalid code:

<!--Invalid:--> <em>I <strong>really</em> mean that</strong>.

In the valid example, the inner {{htmlElement("strong")}} element is closed before the outer {{htmlElement("em")}} element.

Some {{Glossary("Element","elements")}} do not contain any text content or any other elements. These are empty elements and need no closing tag. This is an example:

<img src="smileyface.jpg" alt="Smiley face" >

Empty elements in XHTML mode are usually closed using a trailing forward slash.

<img src="smileyface.jpg" alt="Smiley face" />

In HTML this slash has a meaning that is not implemented in Firefox so it should not be used.  Do not close empty elements in HTML mode.

Attributes

The start tag may contain additional information, as in the preceding example. Such information is called an {{Glossary("attribute")}}. Attributes usually consist of 2 parts:

  • An attribute name
  • An attribute value

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

<input required="required">

<input required="">

<input required>

Attribute values that consist of a single word or number may be written as they are, but you must enclose values containing spaces in quotation marks (either single (') or double (") quotes). Many developers always use quotes to avoid mistakes like this:

<p class=foo bar> <!--(Beware, this probably does not mean what you think it means.)-->

In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it had been written like this:

<p class="foo" bar="">

Also XHTML requires that attributes values must always be quoted, even the attributes that require a numeric value.

Named character references

Named character references (often casually called {{Glossary("entities")}}) are used to print characters that have a special meaning in {{Glossary("HTML")}}. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. You should know these four common named character references:

  • &gt; denotes the greater-than sign (>)
  • &lt; denotes the less-than sign (<)
  • &amp; denotes the ampersand (&)
  • &quot; denotes double quote (")

There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

Comments and doctype

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a {{Glossary("browser")}}. This is useful for explaining a section of markup, leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

<!-- This is comment text -->

Besides {{Glossary("Tag","tags")}}, text content, and {{Glossary("Entity","entities")}}, an HTML document must contain a {{Glossary("doctype")}} declaration as the first line. The doctype declaration is not an HTML tag, but rather tells the browser which version of HTML the page is written in.

In HTML5, there is only one declaration and is written like this:

<!DOCTYPE html>

The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the {{Glossary("HTML")}} and {{Glossary("CSS")}} code according to {{Glossary("W3C")}} standards and not try to pretend that it is {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} from the 90s. (See quirks mode.)

In HTML 4.01, doctype referred to a {{Glossary("DTD")}} (Document Type Definition) as it was based on SGML. There were three different doctype declarations in HTML 4.01: strict, transitional, and frameset.

The strict DTD contained all HTML elements and attributes, but NOT presentational or deprecated elements (like font). Framesets were not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

The transitional DTD contained all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets were not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

The frameset DTD allowed frameset content and otherwise was the same as HTML 4.01 Transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

 

A complete but small document

 

Putting this together, here is a tiny example {{Glossary("HTML")}} document. You can copy this code to a text editor, save it as myfirstdoc.html, and load it in a {{Glossary("browser")}}. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it's just a small start.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letters "one" -->
  <p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

Revision Source

<div class="note">
<div class="threecolumns">
<p><strong style="font-style:normal">Before you start</strong></p>
</div>

<p>To understand this article, you should be comfortable with using a {{Glossary("browser")}}. If you also know how to create and edit text files, you can test the examples shown in this article.</p>
</div>

<p>Most fundamentally, when you look at a webpage in a {{Glossary("Browser","Web browser")}}, you see words. But most of the time webpages contain <em>styled </em>text rather than <em>plain text.&nbsp;</em> Nowadays, webpage designers have access to hundreds of different fonts, font sizes, colors, and even alphabets (e.g. Spanish, Japanese, Russian), and browsers can for the most part display them accurately. Webpages may also contain images, video clips, and background music. They may include drop-down menus, search boxes, or links you can follow to access other pages (whether on the same site or another site). Some websites even let visitors customize the page display to accommodate their preferences and challenges (e.g., sight challenges, deafness, or color blindness). Often a page contains content boxes that move (scroll) while the rest of the page remains static.</p>

<p>A typical webpage depends on several technologies (such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>,&nbsp;<a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) to control what the end-user sees, but most fundamentally, developers write webpages in <a href="/en-US/docs/HTML" title="HTML">HTML</a>, without which there can be no webpages. To display the page on the client-side device, a browser starts out by reading the HTML.</p>

<p>The <a class="external" href="https://www.w3.org/">W3C</a> ({{Glossary("W3C","World Wide Web Consortium")}}) and the&nbsp;<a href="https://www.whatwg.org" title="https://www.whatwg.org">WHATWG</a> ({{Glossary("WHATWG","Web Hypertext Application Technology Working Group")}}) maintains the HTML ({{Glossary("HTML","HyperText Markup Language")}})&nbsp;international standards and specifications. The WHATWG treats HTML as a constantly evolving "living standard", whereas the W3C works both on HTML evolution (<a href="https://www.w3.org/html/wg/drafts/html/master/">HTML 5.1</a>) and on "snapshots" of HTML (of which the most recent is <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>).</p>

<p>The <a href="https://www.w3.org/html/wg/drafts/html/master/" title="https://www.w3.org/html/wg/drafts/html/master/">HTML specification</a> defines a single language that can be written either with the relaxed {{Glossary("HTML")}} syntax or the stricter {{Glossary("XML")}} syntax (<a href="https://www.w3.org/XML/" title="https://www.w3.org/XML/">Extensible Markup Language</a>). HTML also addresses the needs of Web apps. HTML only describes the meaning of the content, not style and formatting. To define appearance and layout, please use {{glossary("CSS")}}, not explicit presentational {{Glossary("HTML")}}.</p>

<p><span class="seoSummary">This article provides an Introduction to HTML. If you've ever wondered what goes on behind the scenes in your web browser, this article is the place to start learning.</span></p>

<h2 id="History_of_HTML">History of HTML</h2>

<p><a href="https://www.w3.org/People/Berners-Lee/" title="https://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a>, then a contractor at <a href="https://public.web.cern.ch/public/" title="https://public.web.cern.ch/public/">CERN</a> (the European Organization for Nuclear Research), devised a way in the late 1980s for scientists to share documents over the {{glossary("Internet")}}. Before that, Internet communication had been limited to plain text, using technologies such as email, <a href="https://en.wikipedia.org/wiki/Ftp" title="https://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), and <a href="https://en.wikipedia.org/wiki/Usenet" title="https://en.wikipedia.org/wiki/Usenet">Usenet</a>-based discussion boards. {{Glossary("HTML")}} used a content model stored on a central server but transferrable to a local workstation and viewable in a browser, simplifying access to content and making "rich" content possible (such as sophisticated text formatting and images). HTML is derived from <a href="https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language">SGML,</a> which is a complex syntax for marking up or binding of content (text or graphics) in documents; as of HTML5, HTML no longer attempts to adhere to SGML syntax.</p>

<h2 id="What_is_HTML">What is HTML?</h2>

<p>{{Glossary("HTML")}} is a<strong> markup language</strong>. The word <em>markup</em> was used by editors who <em>marked up</em> manuscripts (usually with a blue pencil) when giving instructions for revisions. "Markup" now means something slightly different: a language with specific syntax that instructs a Web browser how to display a page. Once again, HTML separates "content" (words, images, audio, video, and so on) from "presentation" (instructions for displaying each type of content). {{Glossary("HTML")}} uses a pre-defined set of {{Glossary("Element","elements")}} to define content types. Elements contain one or more "{{Glossary("Tag","tags")}}" that contain or express content. Tags are enclosed by angle brackets, and the closing tag begins with a forward slash.</p>

<p>The basic HTML code structure is shown below:</p>

<div id="Spl0">
<pre>
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;<em>Page title here</em>&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    This is sample text...
    <span class="highCOM">&lt;!-- <em>We use this syntax to write comments</em> --&gt;</span>
    <em>&lt;!-- Page content and rest of the tags here.... --&gt;
    &lt;!-- This is the actual area that gets shown in the browser</em> --&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<div class="note">
<p><em>Most browsers allow the user to view the HTML of any webpage. In Firefox, for example, press Ctrl + U to view the page source.</em> Beginners will find the code nearly unreadable for a complex page, but if you spend some time looking at the code for a simple page and comparing it to the page the code renders, you will soon develop a clear understanding of how the syntax works.</p>
</div>

<p>The paragraph element consists of the start tag "&lt;p&gt;" and the closing tag "&lt;/p&gt;". The following example shows a paragraph contained within the HTML paragraph element. Remember that your browser will not display more than one space character in a row.</p>

<div id="Spl1">
<pre class="brush:html;">
&lt;p&gt;You are beginning to learn HTML.&lt;/p&gt;</pre>
</div>

<p>When this content is displayed in a web browser, it looks like this:</p>

<p>{{ EmbedLiveSample("Spl1", 400, 60) }}</p>

<p>The browser uses {{Glossary("Tag","tags")}} as an indicator of how to display the content in the tags.</p>

<p>Usually {{Glossary("Element","elements")}} containing content can also contain other elements. For example, the emphasis element ("&lt;em&gt;") can be embedded within a paragraph element, to add emphasis to a word or phrase:</p>

<div id="Spl2">
<pre class="brush:html;">
&lt;p&gt;You are &lt;em&gt;beginning&lt;/em&gt; to learn HTML.&lt;/p&gt;</pre>
</div>

<p>When displayed, this looks like:</p>

<p>{{ EmbedLiveSample("Spl2", 400, 60) }}</p>

<p>Some {{Glossary("Element","elements")}} cannot contain other elements. For example, the image {{Glossary("tag")}} ("&lt;img&gt;") specifies the filename of the content (an image) as an {{Glossary("attribute")}}:</p>

<pre class="brush:html;">
&lt;img src="smileyface.jpg" alt="Smiley face" &gt;</pre>

<p>In <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> (an {{Glossary("XML")}} schema that implements HTML elements), you'd often put a forward slash before the final angle bracket to indicate the ending of an empty element.</p>

<p>The rest of this article goes into greater detail regarding the concepts introduced in this section. However, if you want to see {{Glossary("HTML")}} in action, check out <a href="https://thimble.mozilla.org/">Mozilla Thimble</a>, an interactive online editor that helps you learn how to write {{Glossary("HTML")}}. Also, see <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> for a list of available elements and a description of their use.</p>

<h2 id="Elements_—_the_basic_building_blocks">Elements — the basic building blocks</h2>

<p>{{Glossary("HTML")}} consists of a set of <strong>{{Glossary("Element","elements")}}</strong>, which define the <strong>semantic</strong> meaning of their content. Elements include two matching {{glossary("tag","tags")}} and everything in between. For example, the "&lt;p&gt;" element indicates a paragraph; the "&lt;img&gt;" element indicates an image. See the <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> page for a complete list. <em>Note: Some tags are self-closing and do not contain any content.</em></p>

<p>Some {{Glossary("Element","elements")}} have very precise meaning, as in "this is an image", "this is a heading", or "this is an ordered list". Others are less specific, such as "this is a section on the page" or "this is part of the text". Yet others are used for technical reasons, such as "this is identifying information for the page, so do not display it". Regardless, in one way or another all HTML elements have a semantic value.</p>

<p>Most elements may contain other elements, forming a hierarchical structure. A very simple but complete webpage looks like this:</p>

<pre class="brush:html;">
&lt;html&gt;
&nbsp; &lt;head&gt;
&nbsp;   &lt;title&gt;A minimal web page&lt;/title&gt;
&nbsp; &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;You are in the beginning stage of learning HTML.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>As you can see, the {{HTMLElement("html")}} {{Glossary("element")}} surrounds the rest of the document, and the {{HTMLElement("body")}} {{Glossary("element")}} surrounds the page content. This structure is often thought of as a tree with branches (in this case, the &lt;body&gt; and &lt;p&gt; elements) growing from the trunk (&lt;html&gt;). This hierarchical structure is called the <strong>{{Glossary("DOM")}}</strong> (document object model).</p>

<h2 id="Tags">Tags</h2>

<p>{{Glossary("HTML")}} documents are written in plain text. You can write HTML in any text editor that lets you save content as plain text (e.g. Notepad, Notepad++, or Sublime Text),&nbsp; but most HTML authors prefer to use a specialized editor that highlights syntax and shows the {{Glossary("DOM")}}. You may use uppercase for tag names, but the {{Glossary("W3C")}} (the global consortium that maintains the HTML standard) recommends using lower case (and <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requires lower case).</p>

<p>HTML attaches special meaning to anything that starts with the less-than sign ("&lt;") and ends with the greater-than sign ("&gt;"). Such markup is called a <strong>{{Glossary("tag")}}</strong>. Make sure to close the tag, as some tags are closed by default, whereas others might produce unexpected errors if you forget the end tag.&nbsp;</p>

<p>Here is a simple example:</p>

<pre class="brush: html">
&lt;p&gt;This is text within a paragraph.&lt;/p&gt;
</pre>

<p>In this example there is a <em>start</em> tag and a <em>closing</em> tag. Closing tags are the same as the start tag except with a <em>forward slash</em> immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. To write <strong>valid </strong>code, you must properly <strong>nest </strong>start and closing tags, that is, write close tags in the opposite order from the start tags.</p>

<p>This is an an example of <em>valid</em> code:</p>

<pre class="brush: html">
&lt;em&gt;I &lt;strong&gt;really&lt;/strong&gt; mean that&lt;/em&gt;.
</pre>

<p>This is an example of <em>invalid</em> code:</p>

<pre class="brush: html">
&lt;!--Invalid:--&gt; &lt;em&gt;I &lt;strong&gt;really&lt;/em&gt; mean that&lt;/strong&gt;.</pre>

<p>In the valid example, the inner {{htmlElement("strong")}} element is closed before the outer {{htmlElement("em")}} element.</p>

<p>Some {{Glossary("Element","elements")}} do not contain any text content or any other elements. These are <strong>empty</strong> elements and need no closing tag. This is an example:</p>

<pre class="brush: html">
&lt;img src="smileyface.jpg" alt="Smiley face" &gt;</pre>

<p>Empty elements in XHTML mode are usually closed using a trailing forward slash.</p>

<pre class="brush: html">
&lt;img src="smileyface.jpg" alt="Smiley face" /&gt;</pre>

<p>In HTML this slash has a meaning that is not implemented in Firefox so it should not be used.&nbsp; Do not close empty elements in HTML mode.</p>

<h2 id="Attributes">Attributes</h2>

<p>The start tag may contain additional information, as in the preceding example. Such information is called an <strong>{{Glossary("attribute")}}</strong>. Attributes usually consist of 2 parts:</p>

<ul>
 <li>An attribute <strong>name</strong></li>
 <li>An attribute <strong>value</strong></li>
</ul>

<p>A few attributes can only have one value. They are <strong>Boolean</strong> attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:</p>

<pre class="brush: html">
&lt;input required="required"&gt;

&lt;input required=""&gt;

&lt;input required&gt;
</pre>

<p>Attribute values that consist of a single word or number may be written as they are, but you must enclose values containing spaces in quotation marks (either single (') or double (") quotes). Many developers always use quotes to avoid mistakes like this:</p>

<pre class="brush: html">
&lt;p class=foo bar&gt; &lt;!--(Beware, this probably does not mean what you think it means.)--&gt;</pre>

<p>In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it had been written like this:</p>

<pre class="brush: html">
&lt;p class="foo" bar=""&gt;</pre>

<p>Also XHTML requires that attributes values must always be quoted, even the attributes that require a numeric value.</p>

<h2 id="Named_character_references">Named character references</h2>

<p><strong>Named character references</strong> (often casually called <em>{{Glossary("entities")}}</em>) are used to print characters that have a special meaning in {{Glossary("HTML")}}. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. You should know these four common named character references:</p>

<ul>
 <li><code>&amp;gt;</code> denotes the greater-than sign (<code>&gt;</code>)</li>
 <li><code>&amp;lt;</code> denotes the less-than sign (<code>&lt;</code>)</li>
 <li><code>&amp;amp;</code> denotes the ampersand (<code>&amp;</code>)</li>
 <li><code>&amp;quot;</code> denotes double quote (")</li>
</ul>

<p>There are <a class="external" href="https://www.w3.org/html/wg/drafts/html/master/syntax.html#named-character-references" title="https://www.w3.org/html/wg/drafts/html/master/syntax.html#named-character-references">many more entities</a>, but these four are the most important because they represent characters that have a special meaning in HTML.</p>

<h2 id="Comments_and_doctype">Comments and doctype</h2>

<p>HTML has a mechanism for embedding <strong>comments</strong> that are not displayed when the page is rendered in a {{Glossary("browser")}}. This is useful for explaining a section of markup, leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:</p>

<pre class="brush: xml">
&lt;!-- This is comment text --&gt;</pre>

<p>Besides {{Glossary("Tag","tags")}}, text content, and {{Glossary("Entity","entities")}}, an HTML document must contain a <strong>{{Glossary("doctype")}}</strong> declaration as the first line. The <strong>doctype</strong> declaration is not an HTML tag, but rather tells the browser which version of HTML the page is written in.</p>

<p>In HTML5, there is only one declaration and is written like this:</p>

<pre class="brush: xml">
&lt;!DOCTYPE html&gt;</pre>

<p>The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the {{Glossary("HTML")}} and {{Glossary("CSS")}} code according to {{Glossary("W3C")}} standards and not try to pretend that it is {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} from the 90s. (See <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">quirks mode</a>.)</p>

<div class="note">
<p>In HTML 4.01, doctype referred to a {{Glossary("DTD")}} (Document Type Definition) as it was based on <a href="https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language" rel="external">SGML</a>. There were three different <strong>doctype</strong> declarations in HTML 4.01: strict, transitional, and frameset.</p>

<p>The <strong>strict </strong>DTD contained all HTML elements and attributes, but NOT presentational or deprecated elements (like font). Framesets were not allowed.</p>

<div class="code notranslate">
<pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"&gt;</pre>
</div>

<p>The <strong>transitional </strong>DTD contained all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets were not allowed.</p>

<div class="code notranslate">
<pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"&gt;</pre>
</div>

<p>The <strong>frameset </strong>DTD allowed frameset content and otherwise was the same as HTML 4.01 Transitional.</p>

<pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd"&gt;</pre>
</div>

<p>&nbsp;</p>

<h2 id="A_complete_but_small_document">A complete but small document</h2>

<p>&nbsp;</p>

<p>Putting this together, here is a tiny example {{Glossary("HTML")}} document. You can copy this code to a text editor, save it as <em>myfirstdoc.html</em>, and load it in a {{Glossary("browser")}}. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it's just a small start.</p>

<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;A tiny document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Main heading in my document&lt;/h1&gt;
  &lt;!-- Note that it is "h" + "1", not "h" + the letters "one" --&gt;
  &lt;p&gt;Look Ma, I am coding &lt;abbr title="Hyper Text Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
Revert to this revision