Introduction to HTML

Before you start

To understand this article, it is recommended to be comfortable with the use of a Browser.
If you are also familiar with the manipulation (creating and editing) text files, you can test the
examples shown in this article.
When you look at a web page in a web browser, you see, at the simplest level, words. It is rare to
see a web page containing only plain text. Instead the words you see and read have style
characteristics. Modern web page designers have access to hundreds of different fonts, font sizes,
colors, and even alphabets (e.g. Spanish, Japanese, Russian). Modern browsers can display most of
them accurately. Web pages may also contain images, video clips, and background music. They
may include drop down menus, search boxes, clickable links to products or other pages within the
same website, or links to external web pages. Some web sites even provide options to customize the
page display to accomodate personal preference or inabilities such as limited vision, deafness, or
color blindness. Often a page contains content boxes that move (scroll) while the rest of the page
remains static.
Several technologies (such as CSS, JavaScript, Flash, AJAX, JSON) can be used to define the
elements of a web page. However, at the base level, a web page is created using HTML (HyperText
Markup Language). Without HTML, there is no web page. HTML is what a browser "reads" to 
present the page on the client-side computer.
HTML's  international standards and specifications are maintained by the World Wide Web
Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
The WHATWG considers HTML a "living standard" which is constantly evolving, whereas the
W3C works on both "snapshots" of HTML, the most recent 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 HTML
syntax, but also the more strict XML (Extensible Markup Language) one, and also addresses the
needs of web applications. 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 CSS to define the appearance and layout of texts and other
materials. Current best practices in web development encourage the use of CSS rather than explicit
presentational 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

1
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 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?
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. The term remains in use, though
with slightly different meaning. A markup language as it relates to browsers is a language with
specific syntax that gives intructions to a web browser about how to display a page. 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). HTML
uses a pre-defined set of elements to identify content types. Elements contain one or more "tags"
that contain or express content. 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.
Most browsers allow the user to view the HTML of any webpage. Using Firefox, for example, click
on menu item:Tools:Web Developer:Page Source to view the HTML of a page. 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 some of the basic syntax requirements. Try it next time you pull up a "sign in"
page that contains few elements such as the sign in at www.ecrater.com.
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 but remember it will
not preserve more than one white spaces:
<p>You are beginning to learn HTML.</p>

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

The browser uses the tags as an indicator of how to display the content in the tags.
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:

2
Some elements do not contain other elements. For example, the image tag ("<img>") specifies the
file name of the content (an image) as an attribute:
<img src="smileyface.jpg" alt="Smiley face" >

Often a forward slash is placed before the final angle bracket to indicate the end tag of an empty
element in XHTML (which is an 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 HTML in action, check out Mozilla Thimble, which is an interactive
online editor that helps you learn how to write HTML markup. Also, see HTML Elements for a list
of available elements and a description of their use.

Elements — the basic building blocks

HTML consists of a set of elements. Elements define the semantic meaning of their content.
Elements include everything between two matching element 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 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> element surround the rest of the document, and the <body> 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 DOM: the Document Object Model.

Tags
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 Text,  but most HTML
authors prefer to use a specialized editor that highlights syntax and shows the DOM. Tag names
may be written in either upper or lower case. However, the W3C (the global consortium that
maintains the HTML standard) recommends using lower case (and XHTML requires lower case).

3
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 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.
Some 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. 
Empty elements must not be closed in HTML mode.

Attributes
The start tag may contain additional information, as in the preceding example. Such information is
called an 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>

4
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 entities) are used to print characters that have a
special meaning in 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 tags, text content, and entities, an HTML document must contain a 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 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">

5
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 HTML and CSS code according to W3C standards and not try to
pretend that it is 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 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 -->

A complete but small document

Putting this together, here is a tiny example of an HTML document. You can copy this code to a
text editor, save it as myfirstdoc.html, and load it in a 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 RMScreenprint</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>

In This Article

1. Summary
2. Active learning
1. First step: A file
2. Second step: A web browser
3. Third step: Experiment and learn
3. Deeper dive
1. This is not a very pretty web page
2. Growing to two pages
1. Linking between two local pages

6
 2. Linking to another website
4. Next steps
In this article you will learn how to create a simple webpage.

Prerequisites: You need to have a text editor and to know how to open a file in a browser.
You will create a webpage on your computer that you will be able to use with your
Objective:
browser.

Summary
The simplest webpage is just an HTML file. Just one valid HTML file on your computer and a web
browser are the only things you need. We will see how HTML tags are used, and you'll be able to
view the page you create in your browser.

Active learning
First of all, make sure you have a text editor that you are comfortable with and a web browser up
and running. Pretty much any text editor will do; you can use Notepad on Windows or TextEdit on
the Mac, for example. Just be sure that you're creating plain text files and not RTF or Word files
when you work.
If you're using TextEdit on your Mac, you can make sure the file you're editing is a text format file
by choosing the "Make Plain Text" option in the "Format" menu.

First step: A file

A single webpage consists (at least) of an HTML file, so we'll start by creating one of those. Open
your text editor and create a new text file, then type something like this:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<body>
This is a page
a simple page
</body>
</html>

You can edit this as you want; feel free to add or change the text in the body or title, then save the
file. Be sure to give the file a name ending with the extension ".html". For example, you might
name it "my_page.html".
Now you should have a file on your computer; it might look like this in your folder (this obviously
depends on what operating system you're using):

Opening the file in your editor, it might look something like this (again, depending on what editor
you use):

7
Re-opening the file in an editor will require dragging the file into your editor, opening it using the
"Open" option in the editor's File menu, or right-clicking the file and choosing to open it in your
text editor. Double-clicking the file will open it in your browser, which is our next step.

Second step: A web browser

Within your file explorer (such Windows Explorer, Files in Ubuntu, or Finder on the Mac), find the
file you just created and open it with your browser. You can do this by either dragging it onto the
browser's icon or, usually, by simply double-clicking the file. It should display the text from the
HTML file you created, and the tab should have the title of the page. This should look something
like this, although it will vary depending on your platform and browser:

You can see that the tab displays the title you specified, and that the content of the page's body is
there — with no line break between the two lines in the text. Interesting.

Third step: Experiment and learn

Try removing parts of the HTML and see what happens. Some changes will still allow the page to
display in your browser, and others will cause obvious problems with the results. This is because
browsers are designed to understand that people are prone to certain types of mistakes, and they try
to compensate for some of them.
The first thing you should notice is that the only thing you see displayed on screen is the text that's
not inside angled brackets (otherwise known as the greater-than and less-than symbols, but we call
them angled brackets when talking about HTML). Everything inside angled brackets are tags; these
represent the structure or skeleton of your web page. In between the tags is where all displayed
content appears.
In our example, we have two main sections to our HTML page: a heading, contained within the
<head> block, and a body, contained within the <body>. The body contains the text displayed
within the page.
Each tag has a specific meaning and should be used accordingly; for example, <title> is used to
indicate the title of the page, which needn't be the same as the name of the file!). Notice also that

8
tags can occur within the content of other tags. The <title> is contained inside the page's
<head>, for instance.

If you want to add something like a picture to your page, you need to add a tag for the image and
the image itself. For example:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<body>
This is a page
a simple page
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
now with a unicorn
</body>
</html>

Edit your file to include the tag, like this:

<img src="unicorn_pic.png" alt="Unicorn picture :)" />

It can go anywhere inside the <body>. Don't forget to save your changed page!

Then put a file named "unicorn_pic.png" in the same folder as your HTML file. When you refresh
your browser window (or re-open the HTML file in your browser), you should see the changed
content, complete with unicorn! (don't forget to save your page).

Note: You can get a copy of the unicorn picture to use in your experiments by right-clicking above
on the image and choosing the "Save Image As..." option from the menu that appears.
The files needed for this page to work now look something like this in your desktop:

9
The resulting page should look something like this in your browser:

You might have noticed that the <img> tag here has attributes which provide additional
information needed to build the requested object; in this case, these are the name of the image file to
display and an alternative text string which is displayed if the image can't be loaded.
This is an example of how to add a picture to your page, but you can use similar techniques to add
music, videos, and more, all using nothing more than HTML.

Deeper dive
This is not a very pretty web page
As you may have noticed, this web page is not a miracle of design and beauty. This is because
HTML is all about the content and what the content means (in terms of its context and the
relationships between content blocks), rather than design.
CSS enables you to make the content sparkle, by adding layout, color, fonts, and so forth. Pure
HTML is good enough for making simple webpages, but more complex pages (or even simple ones
with attractive designs) typically need CSS and possibly JavaScript. HTML builds content, CSS
styles the content, and JavaScript makes the content dynamic.
Let's experiment a bit with CSS by making the body text of the page blue:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<body style="color:blue">
<p>This is a some blue text</p>

10
 <img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>

Note the addition of the style attribute to the page's <body>. This specifies the CSS to apply to
the body text.
You want the text to be underlined? Try adding "text-decoration: underline;" to the body:
<body style="color:blue; text-decoration: underline;">

You want the text to have a specific size? Try adding "font-size: 42px;" like this:
<body style="color:blue; text-decoration: underline; font-size: 42px;">

The end result looks like this:

<html>
<head>
<title>Hi there</title>
</head>
<body>
<p style="color: blue; text-decoration: underline; font-size: 42px;">This is a
blue underlined big text </p>
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>

And if you save the content of the page with your editor, then refresh your browser, the page should
now look like this:

11
Growing to two pages
When you browse the Web, you often come across links. These are the most useful way to navigate
from one page to another. Since HTML is about content and links are a form of content, you can
create links among pages using only HTML.
Linking between two local pages
For this exercise, you will need to create two HTML files on your computer (you can keep the
previous one). We'll add a link to each page so you can quickly switch back and forth between
them.
In the first file you can keep the same general structure as before. The important thing is to add a
new tag, <a>, like this:
<!DOCTYPE html>
<html>
<head>
<title>Page 1 to ground control</title>
</head>
<body>
This is page 1.
<a href="page2.html" title="to page 2">What is going on on page 2?</a>
</body>
</html>

The second page should link back to the first page:

12
<!DOCTYPE html>
<html>
<head>
<title>Page 2 :)</title>
</head>
<body>
This is a page 2.
<a href="page1.html" title="to page 1">Want to go back to page 1? Click
here</a>
</body>
</html>

Note: Make sure the file names specified in the <a> tag's href attribute match the names of the files
you created on your computer.
You can now navigate between the two HTML documents. Open page 1 in your browser and click
the link to open page 2, and vice versa. You can also test the "previous" button in your browser; it
will bring you back to the last page you were looking at.
Your file manager should have the two HTML files in the same folder, like this:

Page 1 looks like this in the browser:

And Page 2 looks like this in the browser, after clicking the link on Page 1:

Note: The link back to page 1 is violet because the browser "knows" that we've previously visited
the first page.
If you want, you can try this with more than two pages, or continue on to the next section to take
this to the next level.
Linking to another website
In this exercise, we will add a link to the HTML file so that the reader can quickly get to some
useful page on the Web. You can link to anything available on the public Web. Let's try linking to
Wikipedia:

13
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
One day,...Unicorns are great...See you.
<a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on
Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
</body>
</html>

This should look more or less like this in the browser:

Hover the mouse pointer over the link; you'll see the title attribute displayed in a hovering
tooltip. This can be used to provide more information about the link, so the user can make an
informed decision about whether or not to click on it.
Reminder: Whenever you edit the page, don't forget to save the file on your editor and to refresh
the page on your browser so that you can see the changes you made.

Next steps
 How to use HTML tags: There are a lot of tags in HTML; we've only looked at the basics
here! You will find more resources about what is possible here.
 Anatomy of a web page: HTML has some rules and a page may have a lot of content; this
can help you understand more complex pages, such as those used on some of the most
popular sites on the Web!
 Understanding links: We used some very simple examples with links; this article is for you
if you want to know understand why "links" are the origin of the name "Web".
 Using images and adding audio and video are useful for adding multimedia content with
simple HTML.

In This Article

1. Summary
1. Tags syntax
2. HTML Elements
3. HTML  tags
2. Active learning
3. Diving deeper

14
 1. Self-closing tags
2. Special elements
3. HTML Document structure
4. Overlapped elements
5. Check your HTML
4. Next steps
This article covers the very basics of HTML. Find out what tags are and how to use them.

You should already know the difference between a webpage and a website and how
Prerequisites:
to create a simple HTML document.
Learn what HTML tags are and how to use them in proper places in an HTML
Objective:
document.

Summary
HTML (Hypertext Markup Language) is a descriptive language used to structure a webpage's
content (e.g. text, images, links).
An HTML document is a text document containing tags, which must be properly used to describe
the document's structure. Tags tell the browser how to display the document and allows you to
embed various media (e.g. images, video, sound) within the text.
The browser does not display the tags themselves. When users visit a webpage, their browser
parses the document and interprets the tags in order to display the webpage correctly. For example,
if there is an <img> tag within the document, the browser loads the associated image and displays
that image in place of the HTML tag.

Tags syntax
HTML tags follow a simple but strict syntax:

 Opening angle bracket (<)

 Tag Name
 Attributes (optional). First a space, then the attribute name, an equal sign (=), and a value
enclosed in double quotes ("").
 Closing angle bracket (>)
A few examples:

 <article>
 <meta charset="utf-8">
 <img src="myPicture.png" alt="">

HTML Elements
Tags usually come in pairs. One tag in each pair is the opening tag, the other the closing tag. A
closing tag must have a tag name identical to its matching opening tag. Moreover, a closing tag
must include a forward slash (/) between the opening bracket and the tag name. For example, if <p>
is an opening tag, </p> is the corresponding closing tag.

15
An HTML element consists of an opening tag, the corresponding closing tag, and the text in
between:

You can see why we lay down these rigid conventions for closing tags, because you can nest
elements inside each other:
<p>
Here start a paragraph
<strong>
Here is some important text within the paragraph
</strong>
and the paragraph ends here
</p>

Best practice: Strictly speaking, some closing tags are optional. However, if you omit closing tags,
you're at the mercy of your browser's unpredictable rules for ending an element. Therefore,
whenever you need to enclose tags with text, we urge you to always end the element explicitly with
a closing tag.

HTML  tags
HTML provides nearly 140 tags to provide the browser with semantics, or rules for interpreting and
displaying the content. Among other things, tags can provide metadata for the HTML document, set
the font, emphasize certain phrases (e.g. with italics), add media contents, or handle forms.
Here are a few of the most common tags:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
These are header tags which define headings, ranging from h1 for the most general heading
to h6 for the most specific.
<p>
This is the paragraph tag, used to create paragraphs, which are usually separated by line
breaks.
<a>
This tag is used to create a link to external resources such as a different webpage, an email, an
image, a different section of the current document, and so on. The <a> tags enclose the text
representing the link and the href attribute is used to define the target URL: <a
href="target_url">some text that the user will see</a>.
<img>
This tag embeds an image in the HTML document. Here's an example of how to use it: <img
src="myImage.png" alt="">

<div> and <span>

16
 These tags do not have any special meaning. They are used to create separate sections within
the document. They are often employed for styling and scripting (which we'll discuss later
on).
<ul>, <ol> and <li>
Those tags are used to create lists. <ul> defines a unordered list, <ol> defines an ordered
list, and <li> defines a list item within a list element. Here's <ul> in action:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Feel free to explore and tinker with these tags. Later on we'll go over together how to embed media,
forms, tables, and so on, but don't hesitate to experiment with any of the HTML tags. Just make
sure that you're using the relevant tags, since their semantic matters. The HTML semantic hugely
impacts how readily search engines will find and point to your webpage.

Active learning
TBD

Diving deeper
So we looked at some basic, straightforward rules governing HTML tags and elements. But of
course, all good simple rules come with exceptions. Let's take a look at those.

Self-closing tags
As we saw, an HTML element is a text string with its enclosing tags. However, some tags cannot
enclose text. The <img> tag is an easy-to-understand example. The browser replaces the <img>
tag with the requested image and throws away all text within the img element. For that reason, the
<img> tag is a self-closing tag which defines an HTML element of its own without any closing tag.
Here some text before an image element
<img src="myImage.png" alt="">
Here some text after an image element

A self closing tag can have a special syntax. You may add a / character before the tag's closing
angle-bracket, but you don't have to:
<img src="myImage.png" alt="">
vs.
<img src="myImage.png" alt="" />

Note: Because a single tag does define a whole HTML element sometimes, people often get
confused between tags and elements, even for elements that require opening and closing tags.

Special elements
In HTML, there are two special elements not made of tags. They are essential and we'll cover them
right now.

17
Doctype
The doctype is a formal declaration, placed at the very start of an HTML document, that the
document is a standard HTML document. It looks like this:
<!DOCTYPE html>

HTML is more formal now than it used to be. Browsers have two rendering modes for HTML
documents so they can cope with old legacy documents. There's a "quirk mode" for old documents
and the "standard mode" for new documents. If the browser doesn't find the doctype at the
beginning of the document, the browser will use quirk mode. You don't want that, because quirk
mode is not nearly as reliable or consistent as standard mode.
Best practice: We strongly urge you to add a doctype to all your HTML documents to make sure
the browser uses the "standard mode".
Comments
Comments are very special elements. They are notes you put in your HTML document for your
own needs. The browser does not show comments to your user.
In HTML, comments are text enclosed between <!-- and -->
<!-- This is a comment. It won't show up in the browser. -->

This text does show up in the browser.

HTML Document structure

The basic structure of an HTML document is defined with a set of special tags. The elements
defined by these tags may not occur more than once in a given document, and don't have to occur at
all (except for the mandatory title element). The browser will supply for the lack of implied
elements.
<html>
Defines the document's root element. Each HTML document contains only one root element
which contains all other elements. You may not include elements outside the root element.
<head>
Defines the document's head element. The browser does not display this element, which only
carries metadata like the title and description. Browsers can use metadata to enhance the
user's experience, and we'll discuss it later on.
<body>
Defines the document's body element. There is only one body element inside an HTML
document and it always comes after the head element. Everything the user will see goes in the
body element.
<title>
Defines the document's title element. The title element is the only mandatory HTML element,
and it goes inside the head element since the title is part of the metadata shown in various
places (e.g. the browser tab or as part of a search engine result).

Formal vs. valid

This is the simplest formal HTML document you can write:
<!DOCTYPE html>

18
<html>
<head>
<title>A formal HTML document</title>
</head>
<body>
<!-- Add some content here -->
</body>
</html>

If you omit all the optional elements, this is the simplest valid HTML document you can write:
<!DOCTYPE html>
<title>This is a very small HTML document</title>

Best practice: We recommend you use the formal structure. If you don't clearly separate <head>-
material and <body>-material, it's easy to make mistakes that could lead to unexpected browser
behavior.

Overlapped elements
To wrap up our overview of HTML tags, it is worth mentioning that if elements can be nested, they
cannot overlap.
What are overlapped elements? Here's an example:
<p>
my paragraph starts here
<strong>
some important text
</p>
<p>
a second paragraph
</strong>
and the strong element ended just above
</p>

In this example, the strong element overlaps (it starts within the first paragraph and ends within the
second paragraph). That's the wrong way to code. You should write this:
<p>
my paragraph starts here
<strong>
some important text
</strong>
</p>
<p>
<strong>
a second paragraph
</strong>
with another strong element in it
</p>

In a simple case like this, the browser can usually understand what you mean, but miscoding often
has serious consequences, especially when you start to use CSS or JavaScript (as we'll do soon).
Suppose we'd been using a <div> tag, say, rather than <p> and <strong> tags:
<div>
my paragraph starts here
<div>

19
 some important text
</div>
<div>
a second paragraph
</div>
and my paragraph ends here
</div>

How are you supposed to know if there's an overlap or not? It's impossible because this is some
valid code of a div element with two nested div elements! So pay attention to this if you don't want
strange behavior with your future HTML documents.

Check your HTML

It is good practice to confirm that your HTML code is correct. The best way to do so is through the
W3C HTML Validator, an online tool that reads any HTML document and tells you whether the
document complies fully with HTML specifications. If the code is invalid, the validator furnishes
information about the coding mistakes.
Note: Because of the way this validator is made, if you have an HTML document full of errors,
always correct the first error and revalidate the document. A single error can create many
subsequent errors so never focus on the last error, always focus on the first one.

Next steps
You should now be able to write your first full HTML document and have a rough draft of a
working website.

20