mozilla

Revision 621707 of Introduction to HTML

  • Revision slug: Web/Guide/HTML/Introduction
  • Revision title: Introduction to HTML
  • Revision id: 621707
  • Created:
  • Creator: Yecril
  • Is current revision? Không
  • Comment ALT is required for IMG

Revision Content

Before you start

To understand this article, it is recommended to be comfortable with using a {{Glossary("browser")}}.

If you are also familiar with manipulating (creating and editing) raw text files on a computer you'll be able to test the examples shown in the article.

When you look at a web page in a {{Glossary("Browser","web browser")}}, you see, at the simplest level, words. These words usually have some style characteristics, such as different fonts, font sizes and colors. In many cases a page also displays images or maybe video. Sometimes there is a form where you can enter (or search) for information, or customize the display of the page to your liking. Often a page contains content that moves or changes while the rest of the page remains the same.

Several technologies (such as CSS, JavaScript, Flash, AJAX, JSON) can be used to define the elements of a web page. However, at the very lowest level, a web page is defined using HTML ({{Glossary("HTML","HyperText Markup Language")}}). Without {{Glossary("HTML")}}, there is no web page. HTML is the shell that holds everything together: an international standard whose specifications are maintained by the World Wide Web Consortium ({{Glossary("W3C")}}) and the Web Hypertext Application Technology Working Group ({{Glossary("WHATWG")}}). The WHATWG considers HTML a "living standard" which is constantly evolving, whereas the W3C works on both "snapshots" of HTML, the most current of which is HTML5 and on the evolution of HTML (HTML 5.1).

The HTML specification defines a single language that can be written using the relaxed {{Glossary("HTML")}} syntax, but also the more strict {{Glossary("XML")}} (Extensible Markup Language) one, and also addresses the needs of web applications. {{Glossary("HTML")}} does not describe the style and formatting of content, but only the content itself and its meaning.

The creator of a web page can use {{Glossary("Cascading style sheets (CSS)","CSS")}}  to define the appearance and layout of texts and other materials. Current best practices in web development encourage the use of {{Glossary("CSS")}} rather than 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.

A brief history of HTML

In the late 1980s, Tim Berners-Lee was working as a physicist at CERN (the European Organization for Nuclear Research). He devised a way for scientists to share documents over the internet. Prior to his invention, communication via the internet was limited to plain text, using technologies such as email, FTP (File Transfer Protocol), and Usenet-based discussion boards. The invention of {{Glossary("HTML")}} made use of a model of content stored on a central server that could be transferred and displayed on a local workstation via a browser. It simplified access to content and enabled the display of "rich" content (such as sophisticated text formatting and the display of images).

What is HTML?

{{Glossary("HTML")}} is a markup language. It tells the web browser what content to display. HTML separates "content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of content and the instructions for how that type of content should be displayed). {{Glossary("HTML")}} uses a pre-defined set of {{Glossary("Element","elements")}} to identify content types. Elements contain one or more "{{Glossary("Tag","tags")}}" that contain or express content. {{Glossary("Tag","Tags")}} are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of the content) is prefixed by a forward slash.

For example, 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:

<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 the {{Glossary("Tag","tags")}} as an indicator of how to display the content in the tags.

{{Glossary("Element","Elements")}} that contain content can usually 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")}} do not contain other elements. For example, the image {{Glossary("tag")}} ("<img>") specifies the file name of the content (an image) as an {{Glossary("attribute")}}:

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

Often a forward slash is placed before the final angle bracket to indicate the end of the tag. This is optional in {{Glossary("HTML")}} but is required  in XHTML (which is an {{Glossary("XML")}} schema that implements HTML elements).

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, which is an interactive online editor that helps you learn how to write {{Glossary("HTML")}} markup. 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")}}. Elements define the semantic meaning of their content. Elements include everything between two matching element {{Glossary("Tag","tags")}}, including the tags themselves. For example, the "<p>" element indicates a paragraph; the "<img>" element indicates an image. See the HTML Elements page for a complete list.

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 that should not be displayed." Regardless, in one way or another all HTML elements have a semantic value.

Most elements may contain other elements, forming a hierarchic structure. A very simple but complete web page looks like this:

<html>
  <body>
    <p> you are in your beginning stage of HTML</p>
  </body>
</html>

As you can see, the <html> {{Glossary("element")}} surround the rest of the document, and the <body> {{Glossary("element")}} surround 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")}}: the {{Glossary("DOM","Document Object Model")}}.

Tags

{{Glossary("HTML")}} documents are written in plain text. They can be written in any text editor that allows content to be saved as plain text, such as Notepad, Notepad++, or Sublime,  but most HTML authors prefer to use a specialized editor that highlights syntax and shows the {{Glossary("DOM")}}. Tag names may be written in either upper or lower case. However, 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 but also contain a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. Start and closing tags should be properly nested--that is, closing tags should be written in the opposite order of the start tags. Proper nesting is one rule that must be obeyed in order to write valid code.

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

Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested. In the invalid code, they are nested.

Until the adoption of the HTML5 parsing rules, {{Glossary("browsers")}} didn't interpret invalid code in the same way and produced different results when they encountered invalid code. Browsers were forgiving to Web authors, but unfortunately not all in the same way, resulting in almost unpredictable results in case of invalid HTML. These days are over with the latest evolution of browsers, like Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18, or Safari 5, as they implement the now-standard invalid-code-parsing rules. Invalid code results in the same {{Glossary("DOM")}} tree on all modern browsers.

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

Many people mark up empty elements using a trailing forward slash (which is mandatory in XHTML).

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

In HTML this slash has no technical functionality and using it is a pure stylistic choice, though it is recommended to always close tags.

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 as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a mistake:

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

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. There are four common named character references one must know:

  • &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.

Doctype and comments

In addition to {{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; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, doctype refers to a {{Glossary("DTD")}} (Document Type Definition) as it was based on SGML. There are three different doctype declarations in HTML 4.01.

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

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

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

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

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

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

In HTML 5, 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 90's. (See quirks mode.)

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, or 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 -->

A complete but small document

Putting this together, here is a tiny example of an {{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 is only 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">
 <p><strong style="font-style: normal;">Before you start</strong></p>
 <p>To understand this article, it is recommended to be comfortable with using a {{Glossary("browser")}}.</p>
 <p>If you are also familiar with manipulating (creating and editing) raw text files on a computer you'll be able to test the examples shown in the article.</p>
</div>
<p>When you look at a web page in a {{Glossary("Browser","web browser")}}, you see, at the simplest level, words. These words usually have some style characteristics, such as different fonts, font sizes and colors. In many cases a page also displays images or maybe video. Sometimes there is a form where you can enter (or search) for information, or customize the display of the page to your liking. Often a page contains content that moves or changes while the rest of the page remains the same.</p>
<p>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>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) can be used to define the elements of a web page. However, at the very lowest level, a web page is defined using <a href="/en-US/docs/HTML" title="HTML">HTML</a> ({{Glossary("HTML","HyperText Markup Language")}}). Without {{Glossary("HTML")}}, there is no web page. HTML is the shell that holds everything together: an international standard whose specifications are maintained by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> ({{Glossary("W3C")}}) and the <a href="http://www.whatwg.org" title="http://www.whatwg.org">Web Hypertext Application Technology Working Group</a> ({{Glossary("WHATWG")}}). The WHATWG considers HTML a "living standard" which is constantly evolving, whereas the W3C works on both "snapshots" of HTML, the most current of which is <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> and on the evolution of HTML (<a href="http://www.w3.org/html/wg/drafts/html/master/">HTML 5.1</a>).</p>
<p>The <a href="http://www.w3.org/html/wg/drafts/html/master/" title="http://www.w3.org/html/wg/drafts/html/master/">HTML specification</a> defines a single language that can be written using the relaxed {{Glossary("HTML")}} syntax, but also the more strict {{Glossary("XML")}} (<a href="http://www.w3.org/XML/" title="http://www.w3.org/XML/">Extensible Markup Language</a>) one, and also addresses the needs of web applications. {{Glossary("HTML")}} does<strong> not</strong> describe the style and formatting of content, but only the content itself and its <strong>meaning</strong>.</p>
<p>The creator of a web page can use {{Glossary("Cascading style sheets (CSS)","CSS")}}&nbsp; to define the appearance and layout of texts and other materials. Current best practices in web development encourage the use of {{Glossary("CSS")}} rather than 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="A_brief_history_of_HTML">A brief history of HTML</h2>
<p>In the late 1980s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> was working as a physicist at <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (the European Organization for Nuclear Research). He devised a way for scientists to share documents over the internet. Prior to his invention, communication via the internet was limited to plain text, using technologies such as email, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), and <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>-based discussion boards. The invention of {{Glossary("HTML")}} made use of a model of content stored on a central server that could be transferred and displayed on a local workstation via a browser. It simplified access to content and enabled the display of "rich" content (such as sophisticated text formatting and the display of images).</p>
<h2 id="What_is_HTML.3F">What is HTML?</h2>
<p>{{Glossary("HTML")}} is a<strong> markup language</strong>. It tells the web browser what content to display. HTML separates "content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of content and the instructions for how that type of content should be displayed). {{Glossary("HTML")}} uses a pre-defined set of {{Glossary("Element","elements")}} to identify content types. Elements contain one or more "{{Glossary("Tag","tags")}}" that contain or express content. {{Glossary("Tag","Tags")}} are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of the content) is prefixed by a forward slash.</p>
<p>For example, 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:</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 the {{Glossary("Tag","tags")}} as an indicator of how to display the content in the tags.</p>
<p>{{Glossary("Element","Elements")}} that contain content can usually 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")}} do not contain other elements. For example, the image {{Glossary("tag")}} ("&lt;img&gt;") specifies the file name 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>Often a forward slash is placed before the final angle bracket to indicate the end of the tag. This is optional in {{Glossary("HTML")}} but is required&nbsp; in <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> (which is an {{Glossary("XML")}} schema that implements HTML elements).</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.webmaker.org/">Mozilla Thimble</a>, which is an interactive online editor that helps you learn how to write {{Glossary("HTML")}} markup. 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_.E2.80.94_the_basic_building_blocks">Elements — the basic building blocks</h2>
<p>{{Glossary("HTML")}} consists of a set of <strong>{{Glossary("Element","elements")}}</strong>. Elements define the <strong>semantic</strong> meaning of their content. Elements include everything between two matching element {{Glossary("Tag","tags")}}, including the tags themselves. 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.</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 that should not be displayed." Regardless, in one way or another all HTML elements have a semantic value.</p>
<p>Most elements may contain other elements, forming a hierarchic structure. A very simple but complete web page looks like this:</p>
<pre class="brush:html;">
&lt;html&gt;
  &lt;body&gt;
    &lt;p&gt; you are in your beginning stage of HTML&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
<p>As you can see, the &lt;html&gt; {{Glossary("element")}} surround the rest of the document, and the &lt;body&gt; {{Glossary("element")}} surround 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>: the <strong>{{Glossary("DOM","Document Object Model")}}</strong>.</p>
<h2 id="Tags">Tags</h2>
<p>{{Glossary("HTML")}} documents are written in plain text. They can be written in any text editor that allows content to be saved as plain text, such as Notepad, Notepad++, or Sublime,&nbsp; but most HTML authors prefer to use a specialized editor that highlights syntax and shows the {{Glossary("DOM")}}. Tag names may be written in either upper or lower case. However, 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: xml">
&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 but also contain a <em>forward slash</em> immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. Start and closing tags should be properly <strong>nested</strong>--that is, closing tags should be written in the opposite order of the start tags. Proper nesting is one rule that must be obeyed in order to write <strong>valid</strong> code.</p>
<p>This is an an example of <em>valid</em> code:</p>
<pre class="brush: xml">
&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: xml">
Invalid: &lt;em&gt;I &lt;strong&gt;really&lt;/em&gt; mean that&lt;/strong&gt;.</pre>
<p>Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested. In the invalid code, they are nested.</p>
<div class="note">
 <p>Until the adoption of the HTML5 parsing rules, {{Glossary("browsers")}} didn't interpret invalid code in the same way and produced different results when they encountered invalid code. Browsers were forgiving to Web authors, but unfortunately not all in the same way, resulting in almost unpredictable results in case of invalid HTML. These days are over with the latest evolution of browsers, like Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18, or Safari 5, as they implement the now-standard invalid-code-parsing rules. Invalid code results in the same {{Glossary("DOM")}} tree <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">on all modern browsers</a>.</p>
</div>
<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: xml">
&lt;img src="smileyface.jpg" alt="Smiley face" &gt;</pre>
<p>Many people mark up empty elements using a trailing forward slash (which is mandatory in XHTML).</p>
<pre class="brush: xml">
&lt;img src="smileyface.jpg" alt="Smiley face" /&gt;</pre>
<p>In HTML this slash has no technical functionality and using it is a pure stylistic choice, though it is recommended to always close tags.</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: xml">
&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 as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a mistake:</p>
<pre class="brush: xml">
&lt;p class=foo bar&gt; (Beware, this probably does not mean what you think it means.)</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: xml">
&lt;p class="foo" bar=""&gt;</pre>
<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. There are four common named character references one must know:</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="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.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="Doctype_and_comments">Doctype and comments</h2>
<p>In addition to {{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; it is an instruction to the web browser about what version of HTML the page is written in.</p>
<p>In HTML 4.01, doctype refers to a {{Glossary("DTD")}} (Document Type Definition) as it was based on <a href="http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language" rel="external">SGML</a>. There are three different <strong>doctype</strong> declarations in HTML 4.01.</p>
<p><strong>HTML 4.01 Strict</strong></p>
<p>This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.</p>
<div class="code notranslate">
 <pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</pre>
</div>
<p><strong>HTML 4.01 Transitional</strong></p>
<p>This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.</p>
<div class="code notranslate">
 <pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</pre>
</div>
<p><strong>HTML 4.01 Frameset</strong></p>
<p>This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.</p>
<pre class="brush: xml">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;</pre>
<p>In HTML 5, 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 90's. (See <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">quirks mode</a>.)</p>
<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, or 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>
<h2 id="A_complete_but_small_document">A complete but small document</h2>
<p>Putting this together, here is a tiny example of an {{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 is only a small start.</p>
<pre class="brush: xml">
&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