HTML Tutorial

HTML
Tutorial
❮ HomeNext ❯
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
Examples in Every Chapter

This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the
result.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
1
</body>
</html>
HTML Introduction
HTML is the standard markup language for creating Web pages.
What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and
so on
 Browsers do not display the HTML tags, but use them to render the content of
the page
A Simple HTML Document

2
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Tags
3
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted
before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them.
The browser does not display the HTML tags, but uses them to determine how to
display the document:
4
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
5
</head>
<body>
<h1>This is a heading</h1>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is displayed
in a browser.
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
6
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
7
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
8
This tutorial follows the latest HTML 5 standard.
HTML Editors
A simple text editor is all you need to learn HTML.
Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)

Windows 8 or later:
9
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files

correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML

Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
10
<body>
</body>
</html>
Step 3: Save the HTML Page

11
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred

encoding for HTML files).
You can use either .htm or .html as file extension. There is no difference, it is up to
you.
Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-
click - and choose "Open with").
The result will look much like this:
12
W3Schools Online Editor
With our free online editor, you can edit the HTML code and view the result in your
browser.
It is the perfect tool when you want to test code fast. It also has color coding and the
ability to save and share code with others:
13
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
HTML Basic Examples
In this chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned about yet.
14
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>

</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
15
Example
<h1>This is heading 1</h1>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>
16
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as

attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML Buttons
HTML buttons are defined with the <button> tag:
Example
<button>Click me</button>
17
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
18
HTML Elements
An HTML element usually consists of a start tag and an end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
19
HTML elements with no content are called empty elements. Empty elements do not
have an end tag, such as the <br> element (which indicates a line break).
Nested HTML Elements

HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>

</body>
</html>
Example Explained
20
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
Inside the <html> element is the <body> element.
<html>
<body>

</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
Inside the <body> element is two other HTML elements: <h1> and <p>.
<body>

</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
21
The element content is: My First Heading.
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
</body>
</html>
22
The example above works in all browsers, because the closing tag is considered
optional.
Never rely on this. It might produce unexpected results and/or errors if you
forget the end tag.
Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break):
Example
<p>This is a <br> paragraph with a line break.</p>
Empty elements can be "closed" in the opening tag like this: <br />.
HTML does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you must
close all HTML elements properly.
HTML Is Not Case Sensitive

23
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but

W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
At W3Schools we always use lowercase tags.
HTML Attributes
An HTML attribute provides additional information about an HTML element.
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute
24
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
Example
<a href="https://www.w3schools.com">This is a link</a>
You will learn more about links and the <a> tag later in this tutorial.
The src Attribute

HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
The width and height Attributes

HTML images also have width and height attributes, which specifies the width and
height of the image:
25
Example
<img src="img_girl.jpg" width="500" height="600">
The width and height are specified in pixels by default; so width="500" means 500
pixels wide.
You will learn more about images in our HTML Images chapter.
The alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be
displayed.
The value of the alt attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image cannot be displayed (e.g. if it does not
exist):
Example
26
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size
etc.
Example
<p style="color:red">This is a red paragraph.</p>
You will learn more about styling later in this tutorial, and in our CSS Tutorial.
The lang Attribute

The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and

search engines:
27
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two more
letters (US).
The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute
will be displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
We Suggest: Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.
28
The title attribute can be written with uppercase or lowercase like title or TITLE.
W3C recommends lowercase in HTML, and demands lowercase for stricter

document types like XHTML.
At W3Schools we always use lowercase attribute names.
We Suggest: Quote Attribute Values

The HTML standard does not require quotes around attribute values.
The href attribute can be written without quotes:
Bad
<a href=https://www.w3schools.com>
Good
<a href="https://www.w3schools.com">
W3C recommends quotes in HTML, and demands quotes for stricter document types

like XHTML.
29
Sometimes it is necessary to use quotes. This example will not display the title
attribute correctly, because it contains a space:
Example
<p title=About W3Schools>
Using quotes are the most common. Omitting quotes can produce errors.
At W3Schools we always use quotes around attribute values.
Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Chapter Summary
30
 All HTML elements can have attributes
 The title attribute provides additional "tool-tip" information
 The href attribute provides address information for links
 The width and height attributes provide size information for images
 The alt attribute provides text for screen readers
 At W3Schools we always use lowercase attribute names
 At W3Schools we always quote attribute values
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML, which you will
learn more about in this tutorial:
Attribute Description
alt Specifies an alternative text for an image, when the image cannot be
displayed
disabled Specifies that an input element should be disabled
31
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
32
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
33
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Note: Browsers automatically add some white space (a margin) before and after a
heading.
Headings Are Important

Search engines use the headings to index the structure and content of your web
pages.
Users often skim a page by its headings. It is important to use headings to show the
document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the
less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property:
34
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
The HTML <head> Element

35
The HTML <head> element is a container for metadata. HTML metadata is data about
the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Note: Metadata typically define the document title, character set, styles, scripts, and
other meta information.
How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"
36
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window containing the
HTML source code of the page.
Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and the
CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel
that opens.
HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their
attributes.
You will learn more about HTML tags and attributes in the next chapters of this
tutorial.
Tag Description
<html> Defines the root of an HTML document
37
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta
information, and more)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
HTML Paragraphs
38
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
Example
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove any extra spaces and extra lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
39
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph.
<p>This is another paragraph.
The example above will work in most browsers, but do not rely on it.
Note: Dropping the end tag can produce unexpected results or errors.
40
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem

This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
41
Oh, bring back my Bonnie to me.
</p>
The HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and
it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</pre>
HTML Tag Reference

42
W3Schools' tag reference contains additional information about HTML elements and
their attributes.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
43
Example
I am Red
I am Blue
I am Big
The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property defines the background color for an HTML element.
44
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
45
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
46
Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
Example
This text is bold
This text is italic
This is subscript and superscript
47
HTML Formatting Elements
Formatting elements were designed to display special types of text:
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic "strong"

importance.
48
Example
<strong>This text is strong</strong>
HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.
Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference

in the meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".
HTML <small> Element
49
The HTML <small> element defines smaller text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element

The HTML <mark> element defines marked/highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element

The HTML <del> element defines deleted/removed text.
Example
<p>My favorite color is <del>blue</del> red.</p>
50
HTML <ins> Element
The HTML <ins> element defines inserted/added text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element

The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
51
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
52
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Quotation and Citation

Elements
In this chapter we will go through
the <q>, <blockquote>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
53
Example
Here is a quote from WWF's website:
For nearly 60 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is supported by
more than one million members in the United States and close to five million globally.
HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
54
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems

and search-engines.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
HTML <address> for Contact Information

55
The HTML <address> element defines contact information (author/owner) of a document
or an article.
The <address> element is usually displayed in italic. Most browsers will add a line break
before and after the element.
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.
Browsers usually display <cite> elements in italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
56
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Quotation and Citation Elements

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
57
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
HTML Comments
HTML comments are not displayed in the browser, but they can help document
your HTML source code.
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

58
Notice that there is an exclamation point (!) in the opening tag, but not in the closing
tag.
Note: Comments are not displayed by the browser, but they can help document your
HTML source code.
With comments you can place notifications and reminders in your HTML:
Example


Comments are also great for debugging HTML, because you can comment out HTML
lines of code, one at a time, to search for errors:
Example

HTML Colors
59
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
60
Gray
SlateBlue
Violet
LightGray
Background Color
You can set the background color for HTML elements:
Hello World
61
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
62
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
Same as color name "Tomato":
63
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
64
HTML RGB and RGBA Colors
❮ PreviousNext ❯
An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).
RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0
and 255.
This makes 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value
(255) and the others are set to 0.
65
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)
RED
255
GREEN
99
BLUE
71
Example
rgb(255, 0, 0)
66
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Try it Yourself »
Shades of gray are often defined using equal values for all the 3 light sources:
Example
67
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
Try it Yourself »
68
RGBA Color Values
RGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Experiment by mixing the RGBA values below:
69
HTML HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green)
and BB (blue) hexadecimal integers specify the components of the color.
HEX Color Values

70
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff)
and the others are set to the lowest value (00).
Experiment by mixing the HEX values below:
#ff6347
RED
ff
GREEN
63
BLUE
47
Example
71
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
72
Shades of gray are often defined using equal values for all the 3 light sources:
Example
#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
73
#ffffff
HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).
HSL Color Values

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
74
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full
color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is

white
Experiment by mixing the HSL values below:
hsl(0, 100%, 50%)
HUE
SATURATION
100%
LIGHTNESS
50%
Example
75
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Try it Yourself »
76
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
77
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Try it Yourself »
Lightness
The lightness of a color can be described as how much light you want to give the
color, where 0% means no light (black), 50% means 50% light (neither dark nor
light) 100% means full lightness (white).
Example
78
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Try it Yourself »
79
Shades of gray are often defined by setting the hue and saturation to 0, and adjust
the lightness from 0% to 100% to get darker/lighter shades:
Example
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
80
hsl(0, 0%, 100%)
Try it Yourself »
HSLA Color Values

HSLA color values are an extension of HSL color values with an alpha channel - which
specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)
HUE
81
0
SATURATION
100%
LIGHTNESS
50%
ALPHA
0.5
Example
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
82
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
CSS = Styles and Colors

83
M a n i p u l a t e T e x t
C o l o r s , B o x e s
Styling HTML with CSS

CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files.
However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.
Tip: You can learn much more about CSS in our CSS Tutorial.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
84
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
85
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site,
by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
86
An external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
87
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
88
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border:
Example
p {
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p {
margin: 50px;
}
89
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is used
to select one unique element!
The class Attribute

To define a style for special types of elements, add a class attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
90
p.error {
color: red;
}
External References
External style sheets can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web site:
Example
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as the current page:
Example
91
Chapter Summary
 Use the HTML style attribute for inline styling
 Use the HTML <style> element to define internal CSS
 Use the HTML <link> element to refer to an external CSS file
 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border
HTML Style Tags

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
92
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
93
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address

(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you might generate
two requests to the server. Many servers will automatically add a forward slash to the
end of the address, and then create a new request.
Local Links
The example above used an absolute URL (a full web address).
94
A local link (link to the same web site) is specified with a relative URL (without
https://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _blank - Opens the linked document in a new window or tab

 _self - Opens the linked document in the same window/tab as it was clicked
(this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Tip: If your webpage is locked in a frame, you can use target="_top" to break out of
the frame:
95
Example
<a href="https://www.w3schools.com/html/" target="_top">HTML tutorial!</a>
HTML Links - Image as a Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border

around the image (when the image is a link).
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a
button:
96
Example
<button onclick="document.location = 'default.asp'">HTML Tutorial</button>
Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the current
web page.
This example uses a full URL to link to a web page:
Example
97
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML tutorial</a>
Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
98
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Links - Different Colors

HTML links will be displayed in different colors depending on whether they have
been visited, are unvisited, or are active.
HTML Link Colors

By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
99
You can change the default colors, by using CSS:
Example
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
100
Link Buttons
A link can also be styled as a button, by using CSS:
This is a link
Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
HTML Link Tags

Tag Description
101
HTML Links - Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific
parts of a web page.
Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the
bookmark.
Example
First, create a bookmark with the id attribute:
102
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
Example
<a href="#C4">Jump to Chapter 4</a>
You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Chapter Summary
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="#value") to link to the bookmark
HTML Link Tags

Tag Description
103
HTML Images
Images can improve the design and the appearance of a web page.
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML Images Syntax

In HTML, images are defined with the <img> tag.
104
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader).
The value of the alt attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="wrongname.gif" alt="Flowers in Chania">
Note: The alt attribute is required. A web page will not validate correctly without it.
105
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in

pixels.
Note: Always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.
Width and Height, or Style?
106
The width, height, and style attributes are valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from

changing the size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web
page.
107
However, it is common to store images in a sub-folder. You must then include the
folder name in the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" al
t="W3Schools.com">
Animated Images
HTML allows animated GIFs:
Example
108
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around
the image (when the image is a link).
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
109
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the text,
and allows the user to "listen" to the content. Screen readers are useful for people
who are visually impaired or learning disabled.
Chapter Summary
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image, if it cannot
be displayed
 Use the HTML width and height attributes to define the size of the image
 Use the CSS width and height properties to define the size of the image
(alternatively)
 Use the CSS float property to let the image float
HTML Image Tags

110
Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map
<picture> Defines a container for multiple image resources
HTML Image Maps
With HTML image-maps, you can create clickable areas on an image.
111
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.
Click on the computer, the phone, or the cup of coffee in the image below:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
112
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
How Does it Work?

The idea behind an image map is that you should be able to perform different actions
depending on where in the image you click.
To create an image map you need an image, and a map containing some rules that
describe the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other images is
that you must add a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image map,
and is used to create a relationship between the image and the image map.
Note: You can use any image as an image map.
113
The Map
Then add a <map> element.
The <map> element is used to create an image map, and is linked to the image by

using the name attribute:
<map name="workmap">
The name attribute must have the same value as the usemap attribute.
Note: You may insert the <map> element anywhere you like, it does not have to be
inserted right after the image.
The Areas
Then add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the area, and you can choose one of these values:
 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
114
 default - defines the entire region
Coordinates
You must define some coordinates to be able to place the clickable area onto the
image.
The coordinates come in pairs, one for the x-axis and one for the y-axis.
The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from
the top:
115
The coordinates 270, 350 is located 270 pixels from the left margin and 350 pixels
from the top:
Now you have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page
computer.htm:
116
Circle
To add a circle area, first locate the coordinates of the center of the circle:
337, 300
117
Then specify the radius of the circle:
44 pixels
118
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
This is the area that becomes clickable and will send the user to the page coffee.htm:
119
Image Map and JavaScript
A clickable area does not have to be a link to another page, it can also trigger a
JavaScript function.
Add a click event on the <area> element to execute a JavaScript function:
120
Example
You can use the onclick attribute to execute a JavaScript function when the area is
clicked
<area shape="circle" coords="337,300,44" onclick="myFunction()">
Chapter Summary
 Use the HTML <map> element to define an image-map
 Use the HTML <area> element to define the clickable areas in the image-map
 Use the HTML <img>'s element usemap attribute to point to an image-map
HTML Background Images
A background image can be specified on almost any HTML element.
Background Image on a HTML element
121
To add a background image on an HTML element, use the HTML style attribute and
the CSS background-image property:
Example
Add a background image on a HTML element:
<div style="background-image: url('img_girl.jpg');">
You can also specify the background image in the <style> element:
Example
Specify the background image in the style element:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Background Image on a Page

If you want the entire page to have a background image, then you must specify the
background image on the <body> element:
122
Example
Add a background image on a HTML page:
<style>
body {
}
</style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself,
horizontally and vertically, until it reaches the end of the element:
Example
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, use the background-

repeat property.
123
Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Background Cover
If you want the background image cover the entire element, you can set
the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:
As you can see, the image will cover the entire element, with no stretching, the image
will keep its original proportions.
Example
<style>
body {
background-attachment: fixed;
background-size: cover;
124
}
</style>
Background Stretch
If you want the background image stretch to fit the entire image in the element, you
can set the background-size property to 100% 100%:
Try resizing the browser window, and you will see that the image will stretch, but
always cover the entire element.
Example
<style>
body {
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Learn More CSS
125
From the examples above you have learned that background images can be styled by
using the CSS background properties.
HTML Picture Element
The HTML <picture> element allows us to display different pictures for different
devices or screen sizes.
126
The HTML <picture> Element
The <picture> element gives us more flexibility when specifying image resources.
The <picture> element contains a number of <source> elements, each referring to

different image sources. This way the browser can choose the image that best fits the
current view and/or device.
Each <source> element have attributes describing when their image is the most

suitable.
127
Example
Show different images on different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Note: Always specify an <img> element as the last child element of

the <picture> element. The <img> element is used by browsers that do not support
the <picture> element, or if none of the <source> tags matched.
When to use the Picture Element

There are two main purposes for the <picture> element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The
browser will use the first <source> element with matching attribute values, and ignore
any of the following elements.
2. Format Support
128
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser will use the
first format it recognizes and ignore any of the following.
Example
The browser will use the first image format it recognizes:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Note: The browser will use the first <source> element with matching attribute values,
and ignore any following <source> elements.
HTML Tables
HTML tables allow web authors to arrange data into rows and columns.
Example
129
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Defining an HTML Table

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with
the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
130
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
131
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-
collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
132
th, td {
padding: 15px;
}
HTML Table - Left-align Headings

By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
133
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
Example
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows

134
To make a cell span more than one row, use the rowspan attribute:
Example
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:
Example
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
135
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
136
</tr>
</table>
Now you can define a special style for this table:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}
And add more styles:

table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
137
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table
HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
138
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup>

element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
139
HTML Lists
HTML lists allow web authors to group a set of related items in lists.
Example
An unordered HTML list:
 Item
 Item
 Item
 Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
140
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists

141
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
142
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item

Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
143
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
144
Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML Lists

List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: List items can contain new list, and other HTML elements, like images and
links, etc.
145
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
}
146
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <li> element to define a list item
 Lists can be nested inside lists
 List items can contain other HTML elements
 Use the CSS property float:left or display:inline to display a list horizontally
147
HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
148
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
149
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
150
<li>Milk</li>
</ol>
Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting
from a specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists

List can be nested (lists inside lists):
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
151
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Note: List items can contain new list, and other HTML elements, like images and
links, etc.
Chapter Summary
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Lists can be nested inside lists
 List items can contain other HTML elements
HTML Other Lists
HTML also supports description lists.
152
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Chapter Summary
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list
HTML List Tags
153
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
154
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of
element it is.
The two display values are: block and inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Example
<div>Hello World</div>
Block level elements in HTML:
<address>
<article>
155
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
156
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.
This is an inline <span> element inside a paragraph.
157
Example
<span>Hello World</span>
Inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
158
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
159
<textarea>
<time>
<tt>
<var>
The <div> Element

The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of
content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
160
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the
text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
161
HTML The class Attribute
The HTML class attribute is used to define equal styles for elements with the same
class name.
Using The class Attribute

All HTML elements with the same class attribute will get the same style.
Here we have three <div> elements that point to the same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
162
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Result:
163
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Try it Yourself »
Using The class Attribute on Inline Elements

The HTML class attribute can also be used on inline elements:
Example
<!DOCTYPE html>
<html>
<head>
164
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Try it Yourself »
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Select Elements With a Specific Class

In CSS, to select elements with a specific class, write a period (.) character, followed
by the name of the class:
165
Example
Use CSS to style all elements with the class name "city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Result:
London
London is the capital of England.
Paris
166
Tokyo
Try it Yourself »
Multiple Classes
HTML elements can have more than one class name, each class name must be
separated by a space.
Example
Style elements with the class name "city", also style elements with the class name
"main":
<h2 class="city main">London</h2>
Try it Yourself »
In the example above, the first <h2> element belongs to both the "city" class and the
"main" class.
167
Different Tags Can Share Same Class
Different tags, like <h2> and <p>, can have the same class name and thereby share the
same style:
Example
<p class="city">Paris is the capital of France</p>
Try it Yourself »
Using The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for elements
with the specified class name.
JavaScript can access elements with a specified class name by using

the getElementsByClassName() method:
Example
When a user clicks on a button, hide all elements with the class name "city":
168
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Don't worry if you don't understand the code in the example above.
You will learn more about JavaScript in our HTML JavaScript chapter, or you can study
our JavaScript Tutorial.
HTML The id Attribute
The HTML id attribute is used to specify a unique id for an HTML element (the
value must be unique within the HTML document).
Using The id Attribute

The id attribute is used by CSS or JavaScript to perform certain tasks for the element
with the specific id value.
169
In CSS, to select an element with a specific id, write a hash (#) character, followed by
the id of the element:
Example
Use CSS to style an element with the id "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
Result:
My Header
Tip: The id attribute can be used on any HTML element.
Note: The id value is case-sensitive.
Note: The id value must contain at least one character, and must not contain

whitespace (spaces, tabs, etc.).
170
Difference Between Class and ID
An HTML element can only have one unique id that belongs to that single element,
while a class name can be used by multiple elements:
Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>


<h1 id="myHeader">My Cities</h1>


<h2 class="city">London</h2>
171
Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
172
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using
the getElementById() method:
Example
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
HTML Iframes
173
An HTML iframe is used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Or you can use CSS to set the height and width of the iframe:
174
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Iframe - Remove the Border

By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
Iframe - Target for a Link
175
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
HTML iframe Tag

Tag Description
<iframe> Defines an inline frame
HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
176
Example
My First JavaScript
Click me to display Date and Time
The HTML <script> Tag

The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains script statements, or it points to an external

script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
To select an HTML element, JavaScript most often uses

the document.getElementById() method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with
id="demo":
Example
177
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
A Taste of JavaScript
Here are some examples of what JavaScript can do:
JavaScript can change HTML content

JavaScript can change HTML styles

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
JavaScript can change HTML attributes

document.getElementById("image").src = "picture.gif";
The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled
scripts in their browser or have a browser that doesn't support client-side scripts:
178
Example
<script>
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
HTML Script Tags

Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side
scripts
179
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File Path Examples

Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the

current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the

current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the

root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up
180
from the current folder
HTML File Paths

A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
 Web pages
 Images
 Style sheets
 JavaScripts
Absolute File Paths

An absolute file path is the full URL to a file:
Example
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
The <img> tag is explained in the chapter about HTML Images.
181
Relative File Paths
A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder located at the root of
the current web:
Example
<img src="/images/picture.jpg" alt="Mountain">
In this example, the file path points to a file in the images folder located in the current
folder:
Example
<img src="images/picture.jpg" alt="Mountain">
In this example, the file path points to a file in the images folder located in the folder
one level above the current folder:
Example
<img src="../images/picture.jpg" alt="Mountain">
182
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base
URL. All links will work on your own computer (localhost) as well as on your current
public domain and your future public domains.
HTML - The Head Element

The HTML <head> element is a container for all the head
elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other
meta information.
183
The HTML <title> Element
The <title> element defines the title of the document, and is required in all HTML
documents.
The <title> element:
 defines a title in the browser tab

 provides a title for the page when it is added to favorites
 displays a title for the page in search engine results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
The content of the document......
</body>
</html>
184
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element

The <link> element is used to link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
Tip: To learn all about CSS, visit our CSS Tutorial.
The HTML <meta> Element

185
The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines

(keywords), and other web services.
Define the character set used:
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags:
Example
<meta name="description" content="Free Web tutorials">
186
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport

In HTML, there is a method to let web designers take control over the viewport,
through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and
will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of
the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport <meta> tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two
links below to see the difference.
187
Without the viewport meta tag
188
With the viewport meta tag
The HTML <script> Element

The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
189
Example
<script>
function myFunction() {
}
</script>
Tip: To learn all about JavaScript, visit our JavaScript Tutorial.
The HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a
page:
Example
<base href="https://www.w3schools.com/images/" target="_blank">
HTML head Elements

Tag Description
190
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
191
HTML Layout Elements and
Techniques
Websites often display content in multiple columns (like a magazine or
newspaper).
Example
Cities
 London
 Paris
 Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.
Footer
192
HTML Layout Elements
HTML offers several semantic elements that define the different parts of a web page:
 <header> - Defines a header for a document or a section

 <nav> - Defines a container for navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent self-contained article
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details
 <summary> - Defines a heading for the <details> element
You can read more about semantic elements in our HTML Semantics chapter.
HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each way has its
pros and cons:
 CSS framework
 CSS float property
193
 CSS flexbox
 CSS grid
CSS Frameworks
If you want to create your layout fast, you can use a framework,
like W3.CSS or Bootstrap.
CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to
learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow, which may
harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
Example
Cities
 London
 Paris
 Tokyo
194
London
Footer
CSS Flexbox Layout

Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices.
Learn more about flexbox in our CSS Flexbox chapter.
Example
Cities
 London
 Paris
 Tokyo
195
London
Footer
CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.
Learn more about CSS grids in our CSS Grid View chapter.
HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!
196
A responsive web design will automatically adjust for different screen sizes and
viewports.
What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide,
shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets,
and phones):
197
To create a responsive website, add the following <meta> tag to all your web pages:
Example
This will set the viewport of your page, which will give the browser instructions on how
to control the page's dimensions and scaling.
page with the viewport meta tag:
198
Without the viewport meta tag:
199
With the viewport meta tag:
Tip: If you are browsing this page on a phone or a tablet, you can click on the two
links above to see the difference.
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
200
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up
and down:
201
202
Example
<img src="img_girl.jpg" style="width:100%;">
Notice that in the example above, the image can be scaled up to be larger than its
original size. A better solution, in many cases, will be to use the max-width property
instead.
Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but
never scale up to be larger than its original size:
203
204
Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser
window sizes.
Resize the browser window to see how the image below change depending on the
width:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
205
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.
Media Queries
206
In addition to resize text and images, it is also common to use media queries in
responsive web pages.
With media queries you can define completely different styles for different browser
sizes.
Example: resize the browser window to see that the three div elements below will
display horizontally on large screens and stacked vertically on small screens:
Left Menu
Main Content
Right Content
Example
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
207
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */

@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Tip: To learn more about Media Queries and Responsive Web Design, read our RWD
Tutorial.
Responsive Web Page - Full Example

A responsive web page should look good on large desktop screens and on small
mobile phones.
Responsive Web Design - Frameworks

There are many existing CSS Frameworks that offer Responsive Design.
208
They are free, and easy to use.
Using W3.CSS
A great way to create a responsive design, is to use a responsive style sheet,
like W3.CSS
W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop,
tablet, or phone:
W3.CSS Demo
Resize the page to see the responsiveness!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over
13 million inhabitants.
Paris
The Paris area is one of the largest population centers in Europe, with more than 12
million inhabitants.
209
Tokyo
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in
the world.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
210
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<h2>Tokyo</h2>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
To learn more about W3.CSS, read our W3.CSS Tutorial.
Bootstrap
Another popular framework is Bootstrap, it uses HTML, CSS and jQuery to make
responsive web pages.
Example
211
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.j
s"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
...
</div>
...
</div>
</div>
212
</div>
</body>
</html>
HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.
Example
<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
HTML <kbd> For Keyboard Input

The HTML <kbd> element represents user input, like keyboard input or voice
commands.
213
Text surrounded by <kbd> tags is typically displayed in a monospace font:
Example
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
Save the document by pressing Ctrl + S
HTML <samp> For Program Output

The HTML <samp> element represents output from a program or computing system.
Text surrounded by <samp> tags is typically displayed in a monospace font:
Example
<p>If you input wrong value, the program will return <samp>Error!</samp></p>
Result:
If you input wrong value, the program will return Error!
HTML <code> For Computer Code

214
The HTML <code> element defines a fragment of computer code.
Text surrounded by <code> tags is typically displayed in a monospace font:
Example
<code>
x = 5;
y = 6;
z = x + y;
</code>
Result:
x = 5; y = 6; z = x + y;
Notice that the <code> element does not preserve extra whitespace and line-breaks.
To fix this, you can put the <code> element inside a <pre> element:
Example
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
215
Result:
x = 5;
y = 6;
z = x + y;
HTML <var> For Variables

The HTML <var> element defines a variable.
The variable could be a variable in a mathematical expression or a variable in

programming context:
Example
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.
Result:
Einstein wrote: E = mc2.
HTML Computer Code Elements

Tag Description
216
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a variable
<pre> Defines preformatted text
HTML Semantic Elements
217
Semantic elements = elements with a meaning.
What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its

content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its

content.
Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts
of a web page:
 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
218
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
HTML <section> Element

The <section> element defines a section in a document.
According to W3C's HTML documentation: "A section is a thematic grouping of

content, typically with a heading."
219
A home page could normally be split into sections for introduction, content, and
contact information.
Example
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
HTML <article> Element

The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
Example
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
220
and build a future in which humans live in harmony with nature.</p>
</article>
Nesting <article> in <section> or Vice Versa?

The<article> element specifies independent, self-contained content.
The <section> element defines section in a document.
Can we use the definitions to decide how to nest those elements? No, we cannot!
So, on the Internet, you will find HTML pages with <section> elements

containing <article> elements, and <article> elements
containing <section> elements.
You will also find pages with <section> elements containing <section> elements,

and <article> elements containing <article> elements.
Example for a newspaper: The sport <article> in the sport section, may have a

technical section in each <article>.
HTML <header> Element

The <header> element specifies a header for a document or section.
221
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <footer> Element

The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
You may have several <footer> elements in one document.
222
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
HTML <nav> Element

The <nav> element defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element.

The <nav> element is intended only for major block of navigation links.
Example
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside> Element

223
The <aside> element defines some content aside from the content it is placed in (like
a sidebar).
The <aside> content should be related to the surrounding content.
Example
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
HTML <figure> and <figcaption> Elements

An image and a caption can be grouped together in a <figure> element.
The purpose of a caption is to add a visual explanation to an image.
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
224
The <img> element defines the image, the <figcaption> element defines the caption.
Why Semantic Elements?

According to the W3C: "A semantic Web allows data to be shared and reused across
applications, enterprises, and communities."
Semantic Elements in HTML

Below is an alphabetical list of some of the semantic elements in HTML.
The links go to our complete HTML Reference.
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
225
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
226
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
HTML Style Guide and Coding

Conventions
A consistent, clean, and tidy HTML code makes it easier for others to read and
understand your code.
Be Smart and Future Proof

Here are some guidelines and tips for creating good HTML source code.
227
Use Correct Document Type
Always declare the document type as the first line in your document.
The correct document type for HTML is:
<!DOCTYPE html>
Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
 Mixing uppercase and lowercase names looks bad

 Developers normally use lowercase names
 Lowercase looks cleaner
 Lowercase is easier to write
Good:
<body>
<p>This is a paragraph</p>
</body>
228
Bad:
<BODY>
<P>This is a paragraph</P>
</BODY>
Close All HTML Elements

In HTML, you do not have to close all elements (for example the <p> element).
However, we recommend closing all HTML elements, like this:
Good:
<section>
</section>
Bad:
<section>
</section>
229
Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
 Mixing uppercase and lowercase names looks bad

 Developers normally use lowercase names
 Lowercase look cleaner
 Lowercase are easier to write
Good:
Bad:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Always Quote Attribute Values

HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
 Developers normally quote attribute values

 Quoted values are easier to read
 You MUST use quotes if the value contains spaces
230
Good:
<table class="striped">
Bad:
<table class=striped>
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for
some reason cannot be displayed.
Also, always define the width and height of images. This reduces flickering, because
the browser can reserve space for the image before loading.
Good:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Bad:
<img src="html5.gif">
231
Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and groups
entities better together.
Good:
Bad:
<link rel = "stylesheet" href = "styles.css">
Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the
HTML code.
Try to avoid too long code lines.
Blank Lines and Indentation
232
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Good:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Bad:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
233
</body>
Good Table Example:

<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Good List Example:

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Never Skip the <title> Element
234
The <title> element is required in HTML.
The contents of a page title is very important for search engine optimization (SEO)!
The page title is used by search engine algorithms to decide the order when listing
pages in search results.
The <title> element:
 defines a title in the browser toolbar

 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
So, try to make the title as accurate and meaningful as possible:
<title>HTML Style Guide and Coding Conventions</title>
Omitting <html> and <body>?

An HTML page will validate without the <html> and <body> tags:
Example
<!DOCTYPE html>
<head>
</head>
235
However, we recommend to always add the <html> and <body> tags!
The <html> element is the document root, and the recommended place for specifying
the page language. Declaring the page language is important for accessibility
applications (screen readers) and search engines.
Omitting <body> can produce errors in older browsers.
Omitting <html> and <body> can also crash DOM and XML software.
Example
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
</body>
</html>
Omitting <head>?
The HTML <head> tag can also be omitted.
236
Browsers will add all elements before <body>, to a default <head> element.
Example
<!DOCTYPE html>
<html>
<body>
</body>
</html>
However, we recommend using the <head> tag.
Close Empty HTML Elements?

In HTML, it is optional to close empty elements.
Allowed:
<meta charset="utf-8">
Also Allowed:
<meta charset="utf-8" />
237
If you expect XML/XHTML software to access your page, keep the closing slash (/),
because it is required in XML and XHTML.
Meta Data
To ensure proper interpretation and correct search engine indexing, both the language
and the character encoding should be defined as early as possible in an HTML
document:
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>

The viewport is the user's visible area of a web page. It varies with the device - it will
be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
238
This gives the browser instructions on how to control the page's dimensions and
scaling.
The width=device-width part sets the width of the page to follow the screen-width of
the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two
links below to see the difference.
239
Without the viewport meta tag
240
With the viewport meta tag
HTML Comments
Short comments should be written on one line, like this:

241
Comments that spans more than one line, should be written like this:

Long comments are easier to observe if they are indented with two spaces.
Using Style Sheets

Use simple syntax for linking to style sheets (the type attribute is not necessary):
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
 Place the opening bracket on the same line as the selector

 Use one space before the opening bracket
242
 Use two spaces of indentation
 Use semicolon after each property-value pair, including the last
 Only use quotes around values if the value contains spaces
 Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
243
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg"
cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be
accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will
break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html or .htm extension.
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?

244
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like
"https://www.w3schools.com/"), the server just adds a default filename, such as
"index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file
must be named "index.html", and not "default.html."
However, servers can be configured with more than one default filename, and
normally you can set up as many default filenames as needed.
HTML Entities
Reserved characters in HTML must be replaced with character entities.
245
HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might
mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
To display a less than sign (<) we must write: < or <
Advantage of using an entity name: An entity name is easy to remember.

Disadvantage of using an entity name: Browsers may not support all entity
names, but the support for numbers is good.
Non-breaking Space
A common character entity used in HTML is the non-breaking space:
A non-breaking space is a space that will not break into a new line.
246
Two words separated by a non-breaking space will stick together (not break into a
new line). This is handy when breaking the words might be disruptive.
Examples:
 § 10
 10 km/h
 10 PM
Another common use of the non-breaking space is to prevent browsers from

truncating spaces in HTML pages.
If you write 10 spaces in your text, the browser will remove 9 of them. To add real
spaces to your text, you can use the character entity.
The non-breaking hyphen (‑) lets you use a hyphen character (-) that won't
break.
Some Other Useful HTML Character Entities

Result Description Entity Entity Number
Name
247
non-breaking space
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark (apostrophe) ' '
¢ cent ¢ ¢
£ pound £ £
248
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
Note: Entity names are case sensitive.
Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and
between two letters.
Diacritical marks can be used in combination with alphanumeric characters to produce

a character that is not present in the character set (encoding) used in the page.
249
Here are some examples:
Mark Character Construct Result
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
250
̃ O Õ Õ
You will see more HTML symbols in the next chapter of this tutorial.
HTML Symbols
Characters that are not present on your keyboard can also be replaced by entities.
HTML Symbol Entities

HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal
keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
251
If no entity name exists, you can use an entity number, a decimal, or hexadecimal
reference.
Example
<p>I will display €</p>
Will display as:

I will display €
I will display €
I will display €
Try it Yourself »
Some Mathematical Symbols Supported by

HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
252
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS AS MEMBER
253
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Full Math Reference
Some Greek Letters Supported by HTML

Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
254
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Full Greek Reference
Some Other Entities Supported by HTML

© © © COPYRIGHT SIGN
255
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ &spades; BLACK SPADE SUIT
256
♣ ♣ &clubs; BLACK CLUB SUIT
♥ ♥ &hearts; BLACK HEART SUIT
♦ ♦ &diams; BLACK DIAMOND SUIT
Using Emojis in HTML

Emojis are characters from the UTF-8 character set: 😄 😍 💗
What are Emojis?

Emojis look like images, or icons, but they are not.
They are letters (characters) from the UTF-8 (Unicode) alphabet.
257
UTF-8 covers almost all of the characters and symbols in the world.
The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used
in the page.
This is specified in the <meta> tag:
If not specified, UTF-8 is the default character set in HTML.
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always be
displayed using numbers (called entity numbers):
 A is 65
 B is 66
 C is 67
Example
<!DOCTYPE html>
<html>
258
<head>
</head>
<body>
<p>I will display A B C</p>

<p>I will display A B C</p>
</body>
</html>
Example Explained
The <meta charset="UTF-8"> element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
To let the browser understand that you are displaying a character, you must start the
entity number with &# and end it with ; (semicolon).
Emoji Characters
Emojis are also characters from the UTF-8 alphabet:
 😄 is 128516
 😍 is 128525
 💗 is 128151
259
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Since Emojis are characters, they can be copied, displayed, and sized just like any
other character in HTML.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
260
</body>
</html>
Emoji Value
🗻 #128507;
🗼 #128508;
🗽 #128509;
🗾 #128510;
🗿 #128511;
261
😀 #128512;
😁 #128513;
😂 #128514;
😃 #128515;
😄 #128516;
😅 #128517;
For a full list, please go to our HTML Emoji Reference.
The @charset CSS Rule
262
You can use the CSS @charset rule to specify the character encoding used in a style
sheet:
Example
Set the encoding of the style sheet to Unicode UTF-8:
@charset "UTF-8";
HTML Encoding (Character Sets)

To display an HTML page correctly, a web browser must know which character set
to use.
What is Character Encoding?

ASCII was the first character encoding standard (also called character set). ASCII
defined 128 different alphanumeric characters that could be used on the internet:
numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ <
>.
ISO-8859-1 was the default character set for HTML 4. This character set supported
256 different character codes.
263
ANSI (Windows-1252) was the original Windows character set. ANSI is identical to
ISO-8859-1, except that ANSI has 32 extra characters.
Because ANSI and ISO-8859-1 were so limited, HTML 4 also supported UTF-8.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
The default character set for HTML5 is UTF-8.
The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used
in the page.
This is specified in the <meta> tag:
If a browser detects ISO-8859-1 in a web page, it defaults to ANSI.
Differences Between Character Sets
264
The following table displays the differences between the character sets described
above:
Numb ASCII ANSI 8859 UTF-8 Description
32 space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
265
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 - - - - hyphen-minus
266
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
267
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
268
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin capital letter A
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
69 E E E E Latin capital letter E
269
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
270
78 N N N N Latin capital letter N
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
85 U U U U Latin capital letter U
271
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
272
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
273
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
109 m m m m Latin small letter m
274
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
117 u u u u Latin small letter u
275
118 v v v v Latin small letter v
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
276
126 ~ ~ ~ ~ tilde
127 DEL
128 € euro sign
129 NOT USED
130 ‚ single low-9 quotation mark
131 ƒ Latin small letter f with hook
132 „ double low-9 quotation mark
133 … horizontal ellipsis
277
134 † dagger
135 ‡ double dagger
136 ˆ modifier letter circumflex accent
137 ‰ per mille sign
138 Š Latin capital letter S with caron
139 ‹ single left-pointing angle quotation mark
140 Œ Latin capital ligature OE
141 NOT USED
278
142 Ž Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145 ‘ left single quotation mark
146 ’ right single quotation mark
147 “ left double quotation mark
148 ” right double quotation mark
149 • bullet
279
150 – en dash
151 — em dash
152 ˜ small tilde
153 ™ trade mark sign
154 š Latin small letter s with caron
155 › single right-pointing angle quotation mark
156 œ Latin small ligature oe
157 NOT USED
280
158 ž Latin small letter z with caron
159 Ÿ Latin capital letter Y with diaeresis
160 no-break space
161 ¡ ¡ ¡ inverted exclamation mark
162 ¢ ¢ ¢ cent sign
163 £ £ £ pound sign
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
281
166 ¦ ¦ ¦ broken bar
167 § § § section sign
168 ¨ ¨ ¨ diaeresis
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
171 « « « left-pointing double angle quotation mark
172 ¬ ¬ ¬ not sign
173 soft hyphen
282
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
176 ° ° ° degree sign
177 ± ± ± plus-minus sign
178 ² ² ² superscript two
179 ³ ³ ³ superscript three
180 ´ ´ ´ acute accent
181 µ µ µ micro sign
283
182 ¶ ¶ ¶ pilcrow sign
183 · · · middle dot
184 ¸ ¸ ¸ cedilla
185 ¹ ¹ ¹ superscript one
186 º º º masculine ordinal indicator
187 » » » right-pointing double angle quotation mark
188 ¼ ¼ ¼ vulgar fraction one quarter
189 ½ ½ ½ vulgar fraction one half
284
190 ¾ ¾ ¾ vulgar fraction three quarters
191 ¿ ¿ ¿ inverted question mark
192 À À À Latin capital letter A with grave
193 Á Á Á Latin capital letter A with acute
194 Â Â Â Latin capital letter A with circumflex
195 Ã Ã Ã Latin capital letter A with tilde
196 Ä Ä Ä Latin capital letter A with diaeresis
197 Å Å Å Latin capital letter A with ring above
285
198 Æ Æ Æ Latin capital letter AE
199 Ç Ç Ç Latin capital letter C with cedilla
200 È È È Latin capital letter E with grave
201 É É É Latin capital letter E with acute
202 Ê Ê Ê Latin capital letter E with circumflex
203 Ë Ë Ë Latin capital letter E with diaeresis
204 Ì Ì Ì Latin capital letter I with grave
205 Í Í Í Latin capital letter I with acute
286
206 Î Î Î Latin capital letter I with circumflex
207 Ï Ï Ï Latin capital letter I with diaeresis
208 Ð Ð Ð Latin capital letter Eth
209 Ñ Ñ Ñ Latin capital letter N with tilde
210 Ò Ò Ò Latin capital letter O with grave
211 Ó Ó Ó Latin capital letter O with acute
212 Ô Ô Ô Latin capital letter O with circumflex
213 Õ Õ Õ Latin capital letter O with tilde
287
214 Ö Ö Ö Latin capital letter O with diaeresis
215 × × × multiplication sign
216 Ø Ø Ø Latin capital letter O with stroke
217 Ù Ù Ù Latin capital letter U with grave
218 Ú Ú Ú Latin capital letter U with acute
219 Û Û Û Latin capital letter U with circumflex
220 Ü Ü Ü Latin capital letter U with diaeresis
221 Ý Ý Ý Latin capital letter Y with acute
288
222 Þ Þ Þ Latin capital letter Thorn
223 ß ß ß Latin small letter sharp s
224 à à à Latin small letter a with grave
225 á á á Latin small letter a with acute
226 â â â Latin small letter a with circumflex
227 ã ã ã Latin small letter a with tilde
228 ä ä ä Latin small letter a with diaeresis
229 å å å Latin small letter a with ring above
289
230 æ æ æ Latin small letter ae
231 ç ç ç Latin small letter c with cedilla
232 è è è Latin small letter e with grave
233 é é é Latin small letter e with acute
234 ê ê ê Latin small letter e with circumflex
235 ë ë ë Latin small letter e with diaeresis
236 ì ì ì Latin small letter i with grave
237 í í í Latin small letter i with acute
290
238 î î î Latin small letter i with circumflex
239 ï ï ï Latin small letter i with diaeresis
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with tilde
242 ò ò ò Latin small letter o with grave
243 ó ó ó Latin small letter o with acute
244 ô ô ô Latin small letter o with circumflex
245 õ õ õ Latin small letter o with tilde
291
246 ö ö ö Latin small letter o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with stroke
249 ù ù ù Latin small letter u with grave
250 ú ú ú Latin small letter u with acute
251 û û û Latin small letter with circumflex
252 ü ü ü Latin small letter u with diaeresis
253 ý ý ý Latin small letter y with acute
292
254 þ þ þ Latin small letter thorn
255 ÿ ÿ ÿ Latin small letter y with diaeresis
The ASCII Character Set

ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.
The ANSI Character Set (Windows-1252)

ANSI is identical to ASCII for the values from 0 to 127.
ANSI has a proprietary set of characters for the values from 128 to 159.
ANSI is identical to UTF-8 for the values from 160 to 255.
293
The ISO-8859-1 Character Set
8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.
The UTF-8 Character Set

UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159.
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10 000 different characters.
For a closer look, study our Complete HTML Character Set Reference.
The @charset CSS Rule

294
You can use the CSS @charset rule to specify the character encoding used in a style
sheet:
Example
Set the encoding of the style sheet to Unicode UTF-8:
@charset "UTF-8";
HTML Uniform Resource Locators

A URL is another word for a web address.
A URL can be composed of words (w3schools.com), or an Internet Protocol (IP)

address (192.68.20.50).
Most people enter the name when surfing, because names are easier to remember
than numbers.
URL - Uniform Resource Locator

Web browsers request pages from web servers by using a URL.
295
A Uniform Resource Locator (URL) is used to address a document (or other data) on
the web.
A web address like https://www.w3schools.com/html/default.asp follows these syntax

rules:
scheme://prefix.domain:port/path/filename
Explanation:
 scheme - defines the type of Internet service (most common is http or https)

 prefix - defines a domain prefix (default for http is www)
 domain - defines the Internet domain name (like w3schools.com)
 port - defines the port number at the host (default for http is 80)
 path - defines a path at the server (If omitted: the root directory of the site)
 filename - defines the name of a document or resource
Common URL Schemes

The table below lists some common schemes:
Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not
296
encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a URL
contains characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format that can be transmitted
over the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal

digits.
297
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+)
sign, or %20.
Try It Yourself
Hello Günter Submit

If you click "Submit", the browser will URL encode the input before it is sent to the
server.
A page at the server will display the received input.
Try some other input and click Submit again.
ASCII Encoding Examples

Your browser will encode input, according to the character-set used in your page.
The default character-set in HTML5 is UTF-8.
Character From Windows-1252 From UTF-8
298
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
Â %C2 %C3%82
299
Ã %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85
HTML Versus XHTML
XHTML is a stricter, more XML-based version of HTML.
What is XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is a stricter, more XML-based version of HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers
300
Why XHTML?
XML is a markup language where all documents must be marked up correctly (be
"well-formed").
XHTML was developed to make HTML more extensible and flexible to work with other
data formats (such as XML). In addition, browsers ignore errors in HTML pages, and
try to display the website even if it has some errors in the markup. So XHTML comes
with a much stricter error handling
If you want to study XML, please read our XML Tutorial.
The Most Important Differences from HTML

 <!DOCTYPE> is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory
 Elements must always be properly nested
 Elements must always be closed
 Elements must always be in lowercase
 Attribute names must always be in lowercase
 Attribute values must always be quoted
 Attribute minimization is forbidden
301
XHTML - <!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML <!DOCTYPE> declaration.
The <html>, <head>, <title>, and <body> elements must also be present, and the
xmlns attribute in <html> must specify the xml namespace for the document.
Example
Here is an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
XHTML Elements Must be Properly Nested

302
In XHTML, elements must always be properly nested within each other, like this:
Correct:
<b><i>Some text</i></b>
Wrong:
<b><i>Some text</b></i>
XHTML Elements Must Always be Closed

In XHTML, elements must always be closed, like this:
Correct:
<p>This is another paragraph</p>
Wrong:
<p>This is another paragraph
XHTML Empty Elements Must Always be Closed

303
In XHTML, empty elements must always be closed, like this:
Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
Wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
XHTML Elements Must be in Lowercase

In XHTML, element names must always be in lowercase, like this:
Correct:
<body>
</body>
Wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
304
XHTML Attribute Names Must be in Lowercase
In XHTML, attribute names must always be in lowercase, like this:
Correct:
Wrong:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
XHTML Attribute Values Must be Quoted

In XHTML, attribute values must always be quoted, like this:
Correct:
Wrong:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
305
XHTML Attribute Minimization is Forbidden
In XHTML, attribute minimization is forbidden:
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
HTML Forms
An HTML form is used to collect user input. The user input can then be sent to a
server for processing.
Example
First name:
John
306
Last name:
Doe
Submit
The <form> Element

The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like: text fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element

The <input> element is the most important form element.
The <input> element is displayed in several ways, depending on the type attribute.
307
Here are some examples:
Type Description
<input type="text"> Defines a single-line text input field
<input type="radio"> Defines a radio button (for selecting one of many

choices)
<input type="submit"> Defines a submit button (for submitting the form)
You will learn a lot more about input types later in this tutorial.
Text Fields
<input type="text"> defines a single-line input field for text input.
Example
308
A form with two text input fields:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of an input field is
20 characters.
The <label> Element

Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will

read out loud the label when the user is focused on the input element.
309
The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input>

element to bind them together.
Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
This is how the HTML code above will be displayed in a browser:
310
Male
Female
Other
The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-
handler.
The form-handler is typically a page on the server with a script for processing input
data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
311
First name:
John
Last name:
Doe
Submit
The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a page on the server when the user clicks on the
submit button.
In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the form
data:
If the action attribute is omitted, the action is set to the current page.
The Target Attribute

312
The target attribute specifies if the submitted result will open in a new browser tab, a
frame, or in the current window.
The default value is "_self" which means the form will be submitted in the current
window.
To make the form result open in a new browser tab, use the value "_blank".
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", "_top", or a name representing the name of an iframe.
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data.
Example
Use the GET method when submitting the form:
<form action="/action_page.php" method="get">
313
or:
Example
Use the POST method when submitting the form:
<form action="/action_page.php" method="post">
When to Use GET?

The default HTTP method when submitting form data is GET.
However, when GET is used, the form data will be visible in the page's address
field:
/action_page.php?firstname=John&lastname=Doe
Notes on GET:
 Appends form-data into the URL in name/value pairs

 The length of a URL is limited (2048 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google
314
When to Use POST?
Always use POST if the form data contains sensitive or personal information. The
POST method does not display the form data in the page address field.
Notes on POST:
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked
The Name Attribute

Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
<input type="text" id="fname" value="John"><br><br>
</form>
315
Here is the list of all <form> attributes:
accept-charset Specifies the charset used in the submitted form (default: the page
charset).
action Specifies an address (url) where to submit the form (default: the
submitting page).
autocomplete Specifies if the browser should autocomplete the form (default:

on).
enctype Specifies the encoding of the submitted data (default: is url-

encoded).
method Specifies the HTTP method used when submitting the form
(default: GET).
316
name Specifies a name used to identify the form (for DOM usage:
document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default:
_self).
HTML Form Elements
This chapter describes all the different HTML form elements.
The <input> Element

One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
317
Example
<input type="text" id="firstname" name="firstname">
If the type attribute is omitted, the input field gets the default type: "text".
All the different input types are covered in the next chapter: HTML Input Types.
The <select> Element

The <select> element defines a drop-down list:
Example
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
318
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select name="cars" size="3">
</select>
Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:
Example
319
<select name="cars" size="4" multiple>
</select>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
320
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
The <button> Element

The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
321
Click Me!
Note: Always specify the type attribute for the button element. Different browsers

may use different default types for the button element.
The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personalia:</legend>
</fieldset>
</form>
322
Personalia:First name:
John
Last name:
Doe
Submit
The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of

the <datalist> element.
Example
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
323
</datalist>
</form>
The <output> Element

The <output> element represents the result of a calculation (like one performed by a
script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
324
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
325
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
HTML Input Types
326
This chapter describes the different types for the HTML <input> element.
HTML Input Types

Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
327
Input Type Text
<input type="text"> defines a single-line text input field:
Example
<form>
<input type="text" id="fname" name="fname"><br>
</form>
First name:
Last name:
Input Type Password

<input type="password"> defines a password field:
Example
328
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Username:
Password:
The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
329
</form>
First name:
John
Last name:
Doe
Submit
If you omit the submit button's value attribute, the button will get a default text:
Example
<input type="submit">
</form>
Input Type Reset

330
<input type="reset"> defines a reset button that will reset all form values to their
default values:
Example
<input type="reset">
</form>
First name:
John
Last name:
Doe
Submit Reset

If you change the input values and then click the "Reset" button, the form-data will be
reset to the default values.
Input Type Radio

<input type="radio"> defines a radio button.
331
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Male
Female
Other
Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
332
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
I have a bike
I have a car
I have a boat
Input Type Button

<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
333
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
334
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time
zone.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Input Type Email

335
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated

when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
336
Input Type Month
The <input type="month"> allows the user to select a month and year.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Input Type Number

The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value
from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
337
Input Restrictions
Here is a list of some common input restrictions:
checked Specifies that an input field should be pre-selected when the

page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
338
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value
from 0 to 100, in steps of 10. The default value is 30:
Example
339
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10
" value="30">
</form>
Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is
not important (like a slider control). Default range is 0 to 100. However, you can set
restrictions on what numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular
text field).
Example
340
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]
{3}">
</form>
Input Type Time

The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
341
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match
url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week

The <input type="week"> allows the user to select a week and year.
342
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Input Type Attribute

Tag Description
<input type=""> Specifies the input type to display
HTML Input Attributes
This chapter describes the different attributes for the HTML <input> element.
343
The value Attribute
The input value attribute specifies an initial value for an input field:
Example
Input fields with initial (default) values:
<form>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The readonly Attribute

The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it,
and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example
344
A read-only input field:
<form>
<input type="text" id="fname" name="fname" value="John" readonly><br>
</form>
The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<input type="text" id="fname" name="fname" value="John" disabled><br>
</form>
345
The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url,
email, and password.
Example
Set a width for an input field:
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in
an input field.
346
Note: When a maxlength is set, the input field will not accept more than the specified
number of characters. However, this attribute does not provide any feedback. So, if
you want to alert the user, you must write JavaScript code.
Example
Set a maximum length for an input field:
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The min and max Attributes

The input min and max attributes specify the minimum and maximum values for an
input field.
The min and max attributes work with the following input types: number, range, date,
datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Example
Set a max date, a min date, and a range of legal values:
347
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>

<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>>
The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one
value in an input field.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
348
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is
checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel,
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
The placeholder Attribute
349
The input placeholder attribute specifies short a hint that describes the expected value
of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel,
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The required Attribute

The input required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
350
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The step Attribute

The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a
range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
351
<input type="number" id="points" name="points" step="3">
</form>
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add
illegal input. To safely restrict input, it must also be checked by the receiver (the
server)!
The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus
when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
<form>
<input type="text" id="fname" name="fname" autofocus><br>
</form>
The height and width Attributes

352
The input height and width attributes specify the height and width of an <input
type="image"> element.
Tip: Always specify both the height and width attributes for images. If height and
width are set, the space required for the image is reserved when the page is loaded.
Without these attributes, the browser does not know the size of the image, and
cannot reserve the appropriate space to it. The effect will be that the page layout will
change during loading (while the images load).
Example
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
The list Attribute

The input list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
Example
353
An <input> element with pre-defined values in a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a
field, the browser should display options to fill in the field, based on earlier typed
values.
The autocomplete attribute works with <form> and the following <input> types: text,

search, url, tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on, and off for one input field:
354
<form action="/action_page.php" autocomplete="on">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
</form>
Tip: In some browsers you may need to activate an autocomplete function for this to
work (Look under "Preferences" in the browser's menu).
HTML Form and Input Elements

Tag Description
355
HTML Input form* Attributes
This chapter describes the different form* attributes for the HTML <input> element.
The form Attribute

The input form attribute specifies the form the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form> element it
belongs to.
Example
An input field located outside of the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
</form>
<input type="text" id="lname" name="lname" form="form1">
356
The formaction Attribute
The input formaction attribute specifies the URL of the file that will process the input
when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and image.
Example
An HTML form with two submit buttons, with different actions:
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
The formenctype Attribute

The input formenctype attribute specifies how the form-data should be encoded when
submitted (only for forms with method="post").
357
Note: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the following input types: submit and image.
Example
A form with two submit buttons. The first sends the form-data with default encoding,
the second sends the form-data encoded as "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
The formmethod Attribute

The input formmethod attribute defines the HTTP method for sending form-data to the
action URL.
Note: This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the following input types: submit and image.
The form-data can be sent as URL variables (method="get") or as an HTTP post

transaction (method="post").
358
Notes on the "get" method:
 This method appends the form-data to the URL in name/value pairs

 This method is useful for form submissions where a user want to bookmark the
result
 There is a limit to how much data you can place in a URL (varies between
browsers), therefore, you cannot be sure that all of the form-data will be
correctly transferred
 Never use the "get" method to pass sensitive information! (password or other
sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
 This method sends the form-data as an HTTP post transaction

 Form submissions with the "post" method cannot be bookmarked
 The "post" method is more robust and secure than "get", and "post" does not
have size limitations
Example
A form with two submit buttons. The first sends the form-data with method="get".
The second sends the form-data with method="post":
<form action="/action_page.php" method="get">
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
359
The formtarget Attribute
The input formtarget a attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.
Note: This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the following input types: submit and image.
Example
A form with two submit buttons, with different target windows:
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
The formnovalidate Attribute

The input formnovalidate attribute specifies that an <input> element should not be
validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form> element.
360
The formnovalidate attribute works with the following input types: submit.
Example
A form with two submit buttons (with and without validation):
<input type="email" id="email" name="email"><br><br>
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
The novalidate Attribute

The novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be validated
when submitted.
Example
Specify that no form-data should be validated on submit:
<form action="/action_page.php" novalidate>
<input type="email" id="email" name="email"><br><br>
361
</form>
HTML Form and Input Elements

Tag Description
362
363

HTML Tutorial

Uploaded by

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

HTML

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Examples in Every Chapter

A Simple HTML Document

<h1>My First Heading</h1>

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>

<p>This is another paragraph.</p>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Learn HTML Using Notepad or TextEdit

We believe using a simple text editor is a good way to learn HTML.

Step 1: Open Notepad (PC)

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Also change some preferences to get the application to save files

Then open a new document to place the code.

Step 2: Write Some HTML

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Step 3: Save the HTML Page

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred

Step 4: View the HTML Page in Your Browser

The result will look much like this:

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<h1>My First Heading</h1>

<h1> defines the most important heading. <h6> defines the least important heading:

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

The source file (src), alternative text (alt), width, and height are provided as

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

Nested HTML Elements

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

<h1>My First Heading</h1>

It has a start tag <html> and an end tag </html>.

Inside the <html> element is the <body> element.

<h1>My First Heading</h1>

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.