0% found this document useful (0 votes)

377 views

HTML Book

full html Book

Uploaded by

Muhammad Ashraf Soomro

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

377 views

HTML Book

full html Book

Uploaded by

Muhammad Ashraf Soomro

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 199

HTML Attributes

Attributes provide additional information about HTML elements.

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

HTML links are defined with the <a> tag. The link address is specified in the hrefattribute:

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

The width and height Attributes

Images in HTML has a set of size attributes, which specifies the width and height of the image :

<img src="img_girl.jpg" width="500" height="600">

The image size is specified in pixels: 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, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person,
can "hear" the element.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">

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

<p style="color:red">I am a 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:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use 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:

<p title="I'm a tooltip">

This is a paragraph.
</p>

We Suggest: Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.

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.

The HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written as:

W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.
Sometimes it is necessary to use quotes. This example will not display the title attribute correctly, because it contains a
space:

<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

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 with double quotes

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

HTML Attributes

Below is an alphabetical list of some attributes often used in HTML:

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

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)

Examples

1. <!DOCTYPE html>

<html>

<body>

<p>W3Schools is a web developer's site.</p>

</body>

</html>

2. <!DOCTYPE html>

<html>

<body>

<img src="w3schools.jpg" width="104" height="142">

</body>

</html>

3. <!DOCTYPE html>

This is a link

</body>

</html>

4. !DOCTYPE html>

<html>

<body>

<a href="https://www.w3schools.com">This is a link</a>

</body>

</html>

5. <!DOCTYPE html>

<html>

<body>

<img src="w3schooooools.jpg" width="135" height="50">

</body>

</html>

HTML Headings

Headings are important in HTML documents.

HTML Headings

Headings are defined with the <h1> to <h6> tags.

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

Heading 1

Heading 2

Heading 3
Heading 4

Heading 5

Heading 6

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users skim your pages 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.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute:

<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
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

The <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:
<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>
.
.
.

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), 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.

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4

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

<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

1. Add a tooltip to the paragraph below with the text "About W3Schools".

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

2. Change the size of the image to 250 pixels wide and 400 pixels tall.

<!DOCTYPE html>

<html>

<body>

<h1>London</h1>

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

</body>

</html>

3. Transform the text below into a link that goes to "https://www.w3schools.com".

!DOCTYPE html>
<html>

<body>

</body>

</html>

4. Change the destination of the link below to "www.wwf.org.uk".

<!DOCTYPE html>

<html>

<body>

Universal Studios Presents

Jurassic Park

About

On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned dinosaurs!!

</body>

</html>

HTML Paragraphs

The HTML <p> element defines a paragraph:

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

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:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
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:

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

The example above will work in most browsers, but do not rely on it.

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:

<p>This is<br>a paragraph<br>with line breaks.</p>

The Poem Problem

This poem will display on a single line:

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

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:

<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

Exercise 1 Exercise 2 Exercise 3 Exercise 4

1. Add a paragraph to this document with the text "Hello World!".

<!DOCTYPE html>
<html>
<body>
</body>
</html>
2. Clean up this document with proper end tags.
<!DOCTYPE html>
<html>
<body>
<h1>This is a Heading
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
</body>
</html>
3. Fix the display of the poem below. Display the poem over 4 lines using <br> elements.
!DOCTYPE html>
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
4. Fix the display of this poem. Display the poem as suggested in the code below using <pre>.
<!DOCTYPE html>
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>

HTML Styles

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:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

Example
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size

The 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>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

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

Text Formatting

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italictext.

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.

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong"
importance.

<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

The HTML <del> element defines deleted (removed) text.

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted
text.

<p>This is <sup>superscripted</sup> text.</p>

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

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

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Quotation and Citation Elements

Quotation

Here is a quote from WWF's website:

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.

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

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

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

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

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.

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

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

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:

<bdo dir="rtl">This text will be written from right to left</bdo>

Exercise 1 Exercise 2 Exercise 3 Exercise 4

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

<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

Comment tags are used to insert comments in the HTML source code.

HTML Comment Tags

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

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

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

Try it Yourself

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

<!-- Do not display this at the moment

Conditional Comments

You might stumble upon conditional comments in HTML:

Conditional comments defines some HTML tags to be executed by Internet Explorer only.

Test Yourself with Exercises!

Exercise 1 Exercise 2

HTML Colors

HTML colors can be specified using predefined color names, RGB, HEX, HSL, RGBA, and HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue
Violet

LightGray

Background Color

You can set the background color for HTML elements:

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.

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

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi ad...</p>

Border Color

You can set the color of borders:

Hello World

Hello World
Hello World

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

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)

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

RGB Value

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

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

BLUE

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:

Example

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

HEX Value
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).

Example

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:

Example
#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

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

Example
hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation

Saturation can be describe 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%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness

The lightness off 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

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

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%)

hsl(0, 0%, 100%)

RGBA Value

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):

Example

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Try it Yourself

HSLA Value

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):

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Try it Yourself
TML Styles - CSS

CSS = Styles and Colors

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 stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

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.

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:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</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:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

The CSS border property defines a border around an HTML element:

p {
border: 1px solid powderblue;
}

CSS Padding

The CSS padding property defines a padding (space) between the text and the border:

p {
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin

The CSS margin property defines a margin (space) outside the border:

p {
border: 1px solid powderblue;
margin: 50px;
}

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:

#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 a special type 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:

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:

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:
<link rel="stylesheet" href="styles.css">

hapter 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

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6

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.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

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

Local Links

The example above used an absolute URL (A full web address).

A local link (link to the same web site) is specified with a relative URL (without http://www....).
<a href="html_images.asp">HTML Images</a>

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

You can change the default colors, by using styles:

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

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:

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

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:

HTML Links - Create a Bookmark

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.

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>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

<a href="html_demo.html#C4">Jump to Chapter 4</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:

<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:
<a href="/html/default.asp">HTML tutorial</a>

This example links to a page located in the same folder as the current page:

<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
Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

HTML Link Tags

Tag Description

<a> Defines a hyperlink

HTML Images

JPG Images

GIF Images
PNG Images

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View"style="width:304px;height:228px;">

</body>
</html>

HTML Images Syntax

In HTML, images are defined with the <img> tag.

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" alt="some_text"style="width:width;height:height;">

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

If a browser cannot find an image, it will display the value of the alt attribute:
<img src="wrongname.gif" alt="HTML5 Icon"style="width:128px;height:128px;">

The alt attribute is required. A web page will not validate correctly without it.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value):

<img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">

Alternatively, you can use the width and height attributes. Here, the values are specified
in pixels by default:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the
image loads.

Width and Height, or Style?

Both the width, height, and style attributes are valid in HTML5.

However, we suggest using the style attribute. It prevents internal or external styles sheets from changing the original size
of images:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

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

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
<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:

You can read more about file paths in the chapter HTML File Paths.

Animated Images

The GIF standard allows animated images:

<img src="programming.gif" alt="Computer Man"style="width:48px;height:48px;">

Using an Image as a Link

To use an image as a link, simply nest the <img> tag inside the <a> tag:

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>

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

Image Maps

Use the <map> tag to define an image-map. An image-map is an image with clickable areas.

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between
the image and the map.

The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:
<img src="planets.gif" alt="Planets" usemap="#planetmap"style="width:145px;height:12
6px;">

Background Image

To add a background image on an HTML element, use the CSS propertybackground-image:

Example

To add a background image on a web page, specify the background-image property on the
BODY element:

<h2>Background Image</h2>

</body>

To add a background image on a paragraph, specify the background-image property on the

P element:

<body>

</body>

The <picture> Element

HTML5 introduced the <picture> element to add 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 fit the current view and/or device.

Each <source> element have attributes describing when their image is the most suitable.

The browser will use the first <source> element with matching attribute values, and ignore any following <source>
elements.
Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465
pixels.

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 blind, 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
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
Use the HTML <picture> element to show different images for different devices

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6

HTML Image Tags

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 Tables

HTML Table Example

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.

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

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:

table, th, td {
border: 1px solid black;
}

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

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:

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:

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:

table {
border-spacing: 5px;
}

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
<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

To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
<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

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</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
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

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6

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

<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

HTML Lists

Previous Next

HTML List Example

An Unordered List:

Item
Item
Item
Item

An Ordered List:

1. First item
2. Second item
3. Third item
4. Fourth item

Try it Yourself

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li>tag.

The list items will be marked with bullets (small black circles) by default:

<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

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>

Example - None
<ul style="list-style-type:none">
<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:

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

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>

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>
<li>Milk</li>
</ol>

HTML Description Lists

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:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

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>

Horizontal Lists

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a 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;
text-decoration: none;
}

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

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6

HTML List Tags

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

HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or 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.

Examples of block-level elements:

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.

Examples of inline elements:

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but both style and class 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>

The <span> Element

The <span> element is often used as a container for some text.

The <span> element has no required attributes, but both style and class 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)

HTML The class Attribute

Using The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the
same class name.

Here we have three <div> elements that point to the same class name:

Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<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.</p>
</div>

</body>
</html>

London

London is the capital 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.

Paris

Paris is the capital and most populous city of France.

Situated on the Seine River, it is at the heart of the le-de-France region, also known as
the rgion parisienne.

Within its metropolitan area is one of the largest population centers in Europe, with over
12 million inhabitants.

Tokyo

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.

The Tokyo prefecture is part of the world's most populous metropolitan area with 38
million people and the world's largest urban economy.

Using The class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:

Example
<!DOCTYPE html>
<html>
<head>
<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>

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag:

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 attribute values are specified in pixels by default, but they can also be in percent (like
"80%").
Example
<iframe src="demo_iframe.htm" height="200" width="300"></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>

Try it Yourself

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 grey;"></iframe>

Iframe - Target for a Link

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

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example

My First JavaScript
Click me to display Date and Time

Try it Yourself

The HTML <script> Tag

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting 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 very often use the document.getElementById(id)

method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
A Taste of JavaScript

Here are some examples of what JavaScript can do:

JavaScript can change HTML content

document.getElementById("demo").innerHTML = "Hello JavaScript!";

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:

Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

HTML Script Tags

Tag Description

<script> Defines a client-side script

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4

HTML File Paths

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 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 an internet file:

Example
<img src="https://www.w3schools.com/images/picture.jpg"alt="Mountain">

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

Best Practice

It is a 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 Head

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, links, scripts, and other
meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and
<base>.

The HTML <title> Element

The <title> element defines the title of the document, and is required in all HTML/XHTML
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>
<title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>

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

The HTML <meta> Element

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 charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Setting The Viewport

HTML5 introduced 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

HTML Layouts

HTML Layout Example

City Gallery

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.

HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new 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

HTML Layout Techniques

There are four different ways to create multicolumn layouts. Each way has its pros and
cons:

HTML tables
CSS float property
CSS framework
CSS flexbox

Which One to Choose?

HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table>
element is to display tabular data. So, do not use tables for your page layout! They will
bring a mess into your code. And imagine how hard it will be to redesign your site after a
couple of months.

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

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.

Float Example
City Gallery

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.

CSS Flexbox

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. Disadvantages: Does not
work in IE10 and earlier.

Learn more about flexbox in our CSS Flexbox chapter.

Flexbox Example

City Gallery

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.

Try it Yourself
HTML Responsive Web Design

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets,
and phones).

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or
move the content to make it look good on any screen:

Setting The Viewport

When making responsive web pages, add the following <meta> element in all your web
pages:

Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions on how to
control the page's dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:
Without the viewport meta tag:

With the viewport meta tag:

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the width property is set to 100%, the image will be responsive and scale up and down:

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:

Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Try it Yourself

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

Media Queries

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
vertically on large screens and horizontally 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;
width:60%; /*The width is 60%, by default*/
}

/Use a media query to add a breakpoint at 800px:/

@media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}
}
</style>

Responsive Web Page - Full Example

Responsive Web Design - Frameworks

There are many existing CSS Frameworks that offer Responsive Design.

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

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million
inhabitants.

Tokyo

Tokyo is the capital of Japan.

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>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

Bootstrap

Another popular framework is Bootstrap, it uses HTML, CSS and jQuery to make
responsive web pages.
Example
<!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/boot
strap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></scri
pt>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></s
cript>
</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 class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>

</body>
</html>

HTML Computer Code Elements

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

Text surrounded by <kbd> tags is typically displayed in the browser's default 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 the browser's default 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

The HTML <code> element defines a fragment of computer code.

Text surrounded by <code> tags is typically displayed in the browser's default 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>

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.

Exercise 1 Exercise 2 Exercise 3

HTML Computer Code Elements

Tag Description
<code> Defines programming code

<kbd> Defines keyboard input

<samp> Defines computer output

<var> Defines a variable

<pre> Defines preformatted text

HTML Entities

Reserved characters in HTML must be replaced with character entities.

Characters that are not present on your keyboard can also be replaced by entities.

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;

&#entity_number;

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.

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 that browsers truncate 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 Name Entity Number

non-breaking space    

< less than < <

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark (apostrophe) ' '

cent ¢ ¢

pound £ £

yen ¥ ¥

euro € €

copyright © ©

registered trademark ® ®

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.

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

O Õ O

You will see more HTML symbols in the next chapter of this tutorial.

HTML Symbols

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.

If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.

Example

<p>I will display €</p>

<p>I will display €</p>
<p>I will display €</p>

Will display as:

I will display
I will display
I will display

Some Mathematical Symbols Supported by HTML

Char Number Entity Description

∀ ∀ FOR ALL

∂ ∂ PARTIAL DIFFERENTIAL

∃ ∃ THERE EXISTS

∅ ∅ EMPTY SETS

∇ ∇ NABLA

∈ ∈ ELEMENT OF

∉ ∉ NOT AN ELEMENT OF

∋ &ni; CONTAINS AS MEMBER

∏ ∏ N-ARY PRODUCT

∑ ∑ N-ARY SUMMATION

Some Greek Letters Supported by HTML

Char Number Entity Description

Α Α GREEK CAPITAL LETTER ALPHA

Β Β GREEK CAPITAL LETTER BETA

Γ Γ GREEK CAPITAL LETTER GAMMA

Δ Δ GREEK CAPITAL LETTER DELTA

Ε Ε GREEK CAPITAL LETTER EPSILON

Ζ Ζ GREEK CAPITAL LETTER ZETA

Some Other Entities Supported by HTML

Char Number Entity Description

© © COPYRIGHT SIGN

® ® REGISTERED SIGN

€ € EURO SIGN

™ ™ TRADEMARK

← ← LEFTWARDS ARROW

↑ ↑ UPWARDS ARROW

→ → RIGHTWARDS ARROW

↓ ↓ DOWNWARDS ARROW

♠ &spades; BLACK SPADE SUIT

♣ &clubs; BLACK CLUB SUIT

♥ &hearts; BLACK HEART SUIT

♦ &diams; BLACK DIAMOND SUIT

HTML Encoding (Character Sets)

To display an HTML page correctly, a web browser must know which character set (character encoding) 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 ! $ + - (
)@<>.

ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.

ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.

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 encoding 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:

For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:
<meta charset="UTF-8">

Differences Between Character Sets

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

38 & & & & ampersand

39 ' ' ' ' apostrophe

40 ( ( ( ( left parenthesis

41 ) ) ) ) right parenthesis

42 * * * * asterisk

43 + + + + plus sign

44 , , , , comma

45 - - - - hyphen-minus

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

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

62 > > > > greater-than sign

63 ? ? ? ? question mark

64 @ @ @ @ commercial at

91 [ [ [ [ left square bracket

92 \ \ \ \ reverse solidus

93 ] ] ] ] right square bracket

94 ^ ^ ^ ^ circumflex accent

95 _ _ _ _ low line
96 ` ` ` ` grave accent

122 z z z z Latin small letter z

123 { { { { left curly bracket

124 | | | | vertical line

125 } } } } right curly bracket

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

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

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

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

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

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

174 registered sign

175 macron
176 degree sign

177 plus-minus sign

178 superscript two

179 superscript three

180 acute accent

181 micro sign

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

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

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

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

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

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

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

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

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

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.

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.

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.

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

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.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Try It Yourself

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

%80 %E2%82%AC
%A3 %C2%A3

%A9 %C2%A9

%AE %C2%AE

%C0 %C3%80

%C1 %C3%81

%C2 %C3%82

%C3 %C3%83

%C4 %C3%84

%C5 %C3%85

For a complete reference of all URL encodings, visit our URL Encoding Reference.

HTML and XHTML

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language

XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

Why XHTML?

Many pages on the internet contain "bad" HTML.

This HTML code works fine in most browsers (even if it does not follow the HTML rules):

<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices.
Smaller devices often lack the resources or power to interpret "bad" markup.

XML is a markup language where documents must be marked up correctly (be "well-formed").

If you want to study XML, please read our XML tutorial.

By combining the strengths of HTML and XML, XHTML was developed.

XHTML is HTML redesigned as XML.

The Most Important Differences from HTML:

Document Structure

XHTML DOCTYPE is mandatory

The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory

XHTML Elements

XHTML elements must be properly nested

XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element

XHTML Attributes

Attribute names must be in lower case

Attribute values must be quoted
Attribute minimization is forbidden

<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.

A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

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.

This example shows an XHTML document with a minimum of required tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Title of document</title>
</head>

<body>
some content
</body>

</html>

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

<b><i>This text is bold and italic</b></i>

In XHTML, all elements must be properly nested within each other, like this:

<b><i>This text is bold and italic</i></b>

XHTML Elements Must Always Be Closed

This is wrong:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

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

Empty Elements Must Also Be Closed

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />

A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

This is wrong:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

XHTML Attribute Names Must Be In Lower Case

This is wrong:

This is correct:

Attribute Values Must Be Quoted

This is wrong:

This is correct:

Attribute Minimization Is Forbidden

Wrong:

<input type="checkbox" name="vehicle" value="car" checked />

Correct:

<input type="checkbox" name="vehicle" value="car"checked="checked" />

Wrong:

<input type="text" name="lastname" disabled />

Correct:

<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML

1. Add an XHTML <!DOCTYPE> to the first line of every page

2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values

Validate HTML With The W3C Validator

Put your web address in the box below:

HTML Forms

HTML Form Example

First name:

Last name:

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 can be displayed in several ways, depending on the typeattribute.

Here are some examples:

Type Description

<input type="text"> Defines a one-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)

Text Input

<input type="text"> defines a one-line input field for text input:

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Try it Yourself

This is how it will look like in a browser:

First name:
Last name:

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked>Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

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 server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:
The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web 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 Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

<form action="/action_page.php" method="get">

or:

<form action="/action_page.php" method="post">

When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address field:

/action_page.php?firstname=Mickey&lastname=Mouse

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not display the
submitted form data in the page address field.

POST has no size limitations, and can be used to send large amounts of data.

The Name Attribute

Each input field must have a name attribute to be submitted.

If will only submit the "Last name" input field:

Example

the name attribute is omitted, the data of that input field will not be sent at all.
This example

<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Personal information:First name:

Last name:

More Examples

Send e-mail from a form

How to send e-mail from a form.

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4

Here is the list of <form> attributes:

Attribute Description

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

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

You will learn more about the form attributes in the next chapters.

HTML Form Elements

This chapter describes all HTML form elements.

The <iput> Element

The most important form element is the <input> element.

The <input> element can be displayed in several ways, depending on the typeattribute.
The <select> Element

The <select> element defines a drop-down list:

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

To define a pre-selected option, add the selected attribute to the option:

Example
<option value="fiat" selected>Fiat</option>

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.

This is how the HTML code above will be displayed in a browser:

The <button> Element

The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

This is how the HTML code above will be displayed in a browser:

HTML5 Form Elements

HTML5 added the following form elements:

HTML5 <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
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

HTML5 <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:

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3

HTML Form Elements

= new in HTML5.

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

<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

This capter describes the different input types for the <input> element.

Input Type Text

<input type="text"> defines a one-line text input field:

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:
Input Type Password

<input type="password"> defines a password field:

Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

This is how the HTML code above will be displayed in a browser:

User name:

User password:

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:

This is how the HTML code above will be displayed in a browser:

First name:

Last name:
If you omit the submit button's value attribute, the button will get a default text:

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their
default values:

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

This is how the HTML code above will be displayed in a browser:

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.

Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike

I have a car

Input Type Button

<input type="button"> defines a button:

Example
<input type="button" onclick="alert('Hello World!')"value="Click Me!">

This is how the HTML code above will be displayed in a browser:

HTML5 Input Types

HTML5 added several new input types:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

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>
Select your favorite color:
<input type="color" 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>
Birthday:
<input type="date" name="bday">
</form>

You can also add restrictions to dates:

Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type Email

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 adds ".com" to the keyboard to match email input.

Example
<form>
E-mail:
<input type="email" name="email">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
Birthday (month and year):
<input type="month" 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>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description

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

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

<form>
Quantity:
<input type="number" name="points" 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

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example

<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

The tel type is currently supported only in Safari 8.

Example
<form>
Telephone:
<input type="tel" name="usrtel">
</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

<form>
Select a time:
<input type="time" name="usr_time">
</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>
Add your homepage:
<input type="url" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field .

Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

HTML Input Type Attribute

Tag Description

<input type=""> Specifies the input type to display

HTML Input Attributes

The value Attribute

The value attribute specifies the initial value for an input field:

Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

The disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not be sent when
submitting the form:

Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>

The size Attribute

The size attribute specifies the size (in characters) for the input field:

Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:

Example
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

With a maxlength attribute, the input field will not accept more than the allowed number of characters.

The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.
HTML5 Attributes

HTML5 added the following attributes for <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

and the following attributes for <form>:

autocomplete
novalidate

The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically completes the input values based on values that the user has entered
before.

Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

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):

<form action="/action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that the form data should not be validated when submitted.

Example

Indicates that the form is not to be validated on submit:

<form action="/action_page.php" novalidate>

E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

Example

Let the "First name" input field automatically get focus when the page loads:

First name:<input type="text" name="fname" autofocus>

The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.

Example

An input field located outside the HTML form (but still a part of the form):

<form action="/action_page.php" id="form1">

First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.
The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute is used with type="submit" and type="image".

Example

An HTML form with two submit buttons, with different actions:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>

The formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with
method="post").

The formenctype attribute overrides the enctype attribute of the <form> element.

The formenctype attribute is used with type="submit" and type="image".

Example

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit
button):

<form action="/action_page_binary.asp" method="post">

First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type="submit" and type="image".

Example

The second submit button overrides the HTTP method of the form:

<form action="/action_page.php" method="get">

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post"formaction="action_page_post.asp"
value="Submit using POST">
</form>

The formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute can be used with type="submit".

Example

A form with two submit buttons (with and without validation):

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after
submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".

Example

A form with two submit buttons, with different target windows:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

The height and width Attributes

The height and width attributes specify the height and width of an <input type="image"> element.

Always specify the size of images. If the browser does not know the size, the page will flicker while images load.

Example

Define an image as the submit button, with height and width attributes:

<input type="image" src="img_submit.gif" alt="Submit" width="48"height="48">

The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

Example

An <input> element with pre-defined values in a <datalist>:

The min and max Attributes

The min and max attributes specify the minimum and maximum values for an <input> element.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and
week.

Example

<input> elements with min and max values:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.

Example

A file upload field that accepts multiple values:

Select images: <input type="file" name="img" multiple>

The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

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):

Country code: <input type="text" name="country_code" pattern="[A-Za-

z]{3}" title="Three letter country code">

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short
description of the format).

The 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, email, and password.
Example

An input field with a placeholder text:

<input type="text" name="fname" placeholder="First name">

The required Attribute

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

Example

A required input field:

Username: <input type="text" name="usrname" required>

The step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: The step 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:

<input type="number" name="points" step="3">

Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise 4

HTML Form and Input Elements

Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

HTML5 Introduction

What is New in HTML5?

The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>

The character encoding (charset) declaration is also very simple:

HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

New HTML5 Elements

The most interesting new HTML5 elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

New HTML5 API's (Application Programming Interfaces)

The most interesting new API's in HTML5 are:

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

Tip: HTML Local storage is a powerful replacement for cookies.

Removed Elements in HTML5

The following HTML4 elements have been removed in HTML5:

Removed Element Use Instead

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>
<font> CSS

<frame>

<strike> CSS, <s>, or <del>

<tt> CSS

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

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

From 1991 to 1999, HTML developed from version 1 to version 4.

In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The XHTML syntax was strict, and the
developers were forced to write valid and "well-formed" code.

In 2004, W3C's decided to close down the development of HTML, in favor of XHTML.

In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed. The WHATWG wanted to develop
HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.

In 2004 - 2006, the WHATWG gained support by the major browser vendors.

In 2006, W3C announced that they would support WHATWG.

In 2008, the first HTML5 public draft was released.

In 2012, WHATWG and W3C decided on a separation:

WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New
features can be added, but old functionality cannot be removed.

The WHATWG HTML5 Living Standard was published in 2012, and is continuously updated.
W3C wanted to develop a definitive HTML5 and XHTML standard.

The W3C HTML5 recommendation was released 28 October 2014.

W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016.

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can "teach" older browsers to handle "unknown" HTML elements.

Define Semantic Elements as Block Elements

HTML5 defines eight new semantic elements. All these are block-levelelements.

To secure correct behavior in older browsers, you can set the CSS displayproperty for these HTML elements to block:

header, section, footer, aside, nav, main, article, figure {

display: block;
}

Add New Elements to HTML

You can also add new elements to an HTML page with a browser trick.

This example adds a new element called <myHero> to an HTML page, and defines a style for it:

Example
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

Problem With Internet Explorer 8

You could use the solution described above for all new HTML5 elements.

However, IE8 (and earlier) does not allow styling of unknown elements!

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5
elements in versions of Internet Explorer prior to version 9.

Syntax For HTML5Shiv

The HTML5Shiv is placed within the <head> tag.

The HTML5Shiv is a javascript file that is referenced in a <script> tag.

You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>,
<nav>, <footer>.

HTML5Shiv Example

If you do not want to download and store the HTML5Shiv on your site, you could reference
the version found on the CDN site.

The HTML5Shiv script must be placed in the <head> element, after any stylesheets:

Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

</head>
<body>
<section>

<h1>Famous Cities</h1>

<article>
<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>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<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.</p>
</article>

</section>

</body>
</html>

HTML5 New Elements

New Elements in HTML5

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description

<article> Defines an article in a document

<aside> Defines content aside from the page content

<bdi> Isolates a part of text that might be formatted in a different

direction from other text outside it

<details> Defines additional details that the user can view or hide

<dialog> Defines a dialog box or window

<figcaption> Defines a caption for a <figure> element

<figure> Defines self-contained content

<footer> Defines a footer for a document or section

<header> Defines a header for a document or section

<main> Defines the main content of a document

<mark> Defines marked/highlighted text

<menuitem> Defines a command/menu item that the user can invoke from a
popup menu

<meter> Defines a scalar measurement within a known range (a gauge)

<nav> Defines navigation links

<progress> Represents the progress of a task

<rp> Defines what to show in browsers that do not support ruby

annotations

<rt> Defines an explanation/pronunciation of characters (for East

Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

<wbr> Defines a possible line-break

New Form Elements

Tag Description

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.

New Input Types

New Input Types New Input Attributes

color autocomplete
date autofocus
datetime form
datetime-local formaction
email formenctype
month formmethod
number formnovalidate
range formtarget
search height and width
tel list
time min and max
url multiple
week pattern (regexp)
placeholder
required
step

Learn all about old and new input types in HTML Input Types.

Learn all about input attributes in HTML Input Attributes.

HTML5 - New Attribute Syntax

HTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an <input> tag:

Type Example

Empty <input type="text" value="John" disabled>

Unquoted <input type="text" value=John>

Double-quoted <input type="text" value="John Doe">

Single-quoted <input type="text" value='John Doe'>

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
HTML5 Graphics

Tag Description

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)

<svg> Draw scalable vector graphics

New Media Elements

Tag Description

<audio> Defines sound content

<embed> Defines a container for an external (non-HTML) application

<source> Defines multiple media resources for media elements (<video> and <audio>)

<track> Defines text tracks for media elements (<video> and <audio>)

<video> Defines video or movie

HTML5 Semantic Elements

Semantics is the study of the meanings of words and phrases in a language.

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.

Browser Support

Yes Yes Yes Yes Yes

HTML5 semantic elements are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle "unknown elements".

Read about it in HTML5 Browser Support.

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

HTML5 <section> Element

The <section> element defines a section in a document.

According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."

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>

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

<article>
<h1>What Does WWF Do?</h1>
<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>
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 <sections> elements.

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

HTML5 <header> Element

The <header> element specifies a header for a document or section.

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>

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

Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>

HTML5 <nav> Element

The <nav> element defines a set 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>

HTML5 <aside> Element

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>

HTML5 <figure> and <figcaption> Elements

The purpose of a figure caption is to add a visual explanation to an image.

In HTML5, an image and a caption can be grouped together in a <figure>element:

Example
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304"height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

Why Semantic Elements?

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer, menu, navigation,
main, container, content, article, sidebar, topnav, etc.

This made it impossible for search engines to identify the correct web page content.
With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.

According to the W3C, a Semantic Web: "Allows data to be shared and reused across applications, enterprises, and
communities."

Semantic Elements in HTML5

Below is an alphabetical list of the new semantic elements in HTML5.

The links go to our complete HTML5 Reference.

Tag Description

<article> Defines an article

<aside> Defines content aside from the page content

<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

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

HTML5 Migration

Migration from HTML4 to HTML5

This chapter is entirely about how to migrate from HTML4 to HTML5.

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original
content or structure.

Typical HTML4 Typical HTML5

<div id="header"> <header>

<div id="menu"> <nav>

<div id="content"> <section>

<div class="article"> <article>

A Typical HTML4 Page

Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}

div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}

div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

div.article {
margin: 5px;
padding: 10px;
background-color: white;
}

div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>

<div id="header">
<h1>Monday Times</h1>
</div>

<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>

<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in
porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in
porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>

</body>
</html>

Change to HTML5 Doctype

Change the doctype:

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

to the HTML5 doctype:

Example
<!DOCTYPE html>

Change to HTML5 Encoding

Change the encoding information:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

to HTML5 encoding:

Example
<meta charset="utf-8">

Add The HTML5Shiv

The new HTML5 semantic elements are supported in all modern browsers. In addition, you can "teach" older browsers how to
handle "unknown elements".

However, IE8 and earlier, does not allow styling of unknown elements. So, the HTML5Shiv is a JavaScript workaround to
enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

Add the HTML5Shiv:

Example

Try it Yourself

Change to HTML5 Semantic Elements

The existing CSS contains id's and classes for styling the elements:

body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}

div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}

div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

div.article {
margin: 5px;
padding: 10px;
background-color: white;
}

div#menu ul {
padding: 0;
}

div#menu ul li {
display: inline;
margin: 5px;
}

Replace with equal CSS styles for HTML5 semantic elements:

body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}

header, footer {
padding: 10px;
color: white;
background-color: black;
}

section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}

nav ul {
padding: 0;
}

nav ul li {
display: inline;
margin: 5px;
}

Finally, change the elements to HTML5 semantic elements:

<body>

<header>
<h1>Monday Times</h1>
</header>

<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta
lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta
lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>

</body>

The Difference Between <article> <section> and <div>

There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>.

In the HTML5 standard, the <section> element is defined as a block of related elements.

The <article> element is defined as a complete, self-contained block of related elements.

The <div> element is defined as a block of children elements.

How to interpret that?

In the example above, we have used <section> as a container for related <articles>.

But, we could have used <article> as a container for articles as well.

Here are some different examples:

<h2>Famous Cities</h2>

<article>
<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>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<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.</p>
</article>
</article>

<h2>Famous Cities</h2>

<div class="city">
<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>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<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.</p>
</div>

</article>

<div> in <section> in <article>:

<section>
<h2>Famous Cities</h2>

<div class="city">
<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>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<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.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</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>

<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

</article>

HTML5 Style Guide and Coding Conventions

HTML Coding Conventions

Web developers are often uncertain about the coding style and syntax to use in HTML.

Between 2000 and 2010, many web developers converted from HTML to XHTML.

With XHTML, developers were forced to write valid and "well-formed" code.

HTML5 is a bit more sloppy when it comes to code validation.

Be Smart and Future Proof

A consistent use of style, makes it easier for others to understand your HTML.

In the future, programs like XML readers, may want to read your HTML.

Using a well-formed-"close to XHTML" syntax, can be smart.

Use Correct Document Type

Always declare the document type as the first line in your document:

<!DOCTYPE html>

If you want consistency with lower case tags, you can use:

<!doctype html>

Use Lower Case Element Names

HTML5 allows mixing uppercase and lowercase letters in element names.

We recommend using lowercase element names because:

Mixing uppercase and lowercase names is bad

Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write

Bad:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Very Bad:
<Section>
<p>This is a paragraph.</p>
</SECTION>

Good:
<section>
<p>This is a paragraph.</p>
</section>

Close All HTML Elements

In HTML5, you don't have to close all elements (for example the <p> element).
We recommend closing all HTML elements.

Bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Good:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Close Empty HTML Elements

In HTML5, it is optional to close empty elements.

Allowed:
<meta charset="utf-8">

Also Allowed:
<meta charset="utf-8" />

However, the closing slash (/) is REQUIRED in XHTML and XML.

If you expect XML software to access your page, it is a good idea to keep the closing slash!

Use Lower Case Attribute Names

HTML5 allows mixing uppercase and lowercase letters in attribute names.

We recommend using lowercase attribute names because:

Mixing uppercase and lowercase names is bad

Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write

Bad:
<div CLASS="menu">

Good:
<div class="menu">
Quote Attribute Values

HTML5 allows attribute values without quotes.

We recommend quoting attribute values because:

Mixing uppercase and lowercase values is bad

Quoted values are easier to read

<table class=table striped>

Bad:
<table class=striped>

Good:
<table class="striped">

Image Attributes

Always add the "alt" attribute to images. This attribute is important when the image for some reason cannot be displayed.
Also, always define image width and height. It reduces flickering because the browser can reserve space for the image before
loading.

Bad:
<img src="html5.gif">

Good:
<img src="html5.gif" alt="HTML5"style="width:128px;height:128px">

Spaces and Equal Signs

HTML5 allows spaces around equal signs. But space-less is easier to read, and groups
entities better together.

Bad:
<link rel = "stylesheet" href = "styles.css">

Good:
<link rel="stylesheet" href="styles.css">

Avoid Long Code Lines

When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.

Blank Lines and Indentation

Do not add blank lines 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.

Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:

Unnecessary:
<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>

Better:
<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>

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>

List Example:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

Omitting <html> and <body>?

In the HTML5 standard, the <html> tag and the <body> tag can be omitted.

The following code will validate as HTML5:

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

We do not recommend omitting the <html> and <body> tags.

The <html> element is the document root. It is the recommended place for specifying the page language:

<!DOCTYPE html>
<html lang="en-US">

Declaring a language is important for accessibility applications (screen readers) and search engines.

Omitting <html> or <body> can crash DOM and XML software.

Omitting <body> can produce errors in older browsers (IE9).

Omitting <head>?

In the HTML5 standard, the <head> tag can also be omitted.

By default, browsers will add all elements before <body>, to a default <head> element.

You can reduce the complexity of HTML, by omitting the <head> tag:
<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

We do not recommend omitting the <head> tag.

Meta Data

The <title> element is required in HTML5. Make the title as meaningful as possible:

<title>HTML5 Syntax and Coding Style</title>

To ensure proper interpretation, and correct search engine indexing, both the language and the character encoding should be
defined as early as possible in a document:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

Setting The Viewport

HTML5 introduced 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:
Short comments should be written on one line, like this:

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

Long comments are easier to observe if they are indented two spaces.

Style Sheets

Use simple syntax for linking to style sheets (the type attribute is not necessary):

<link rel="stylesheet" href="styles.css">

Short rules can be written compressed, on one line, like this:

p.intro {font-family: Verdana; font-size: 16em;}

Long 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
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
Avoid lines over 80 characters

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

Accessing HTML Elements with JavaScript

A consequence of using "untidy" HTML styles, might result in JavaScript errors.

These two JavaScript statements will produce different results:

var obj = getElementById("Demo")

var obj = getElementById("demo")

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" or "london.jpg".

If you use a mix of upper and lower case, you have to be extremely consistent.

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 lower case 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

There is no difference between the .htm and .html extensions. Both will be treated as HTML by any web browser or web
server.

The differences are cultural:

.htm "smells" of early DOS systems where the system limited the extensions to 3 characters.

.html "smells" of Unix operating systems that did not have this limitation.

Technical Differences

When a URL does not specify a filename (like https://www.w3schools.com/css/), the server returns a default filename.
Common default filenames are index.html, index.htm, default.html, and default.htm.

If your server is configured only with "index.html" as default filename, your file must be named "index.html", not
"index.htm."

However, servers can be configured with more than one default filename, and normally you can set up as many default
filenames as needed.

Anyway, the full extension for HTML files is .html, and there's no reason it should not be used.
HTML5 Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor
rectangle, and a multicolor text.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <canvas> element.

Element

<canvas> 4.0 9.0 2.0 3.1 9.0

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the
canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

</canvas>

Draw a Line

Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Draw a Circle
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Draw a Text

Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Stroke Text

Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Draw Linear Gradient

Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Draw Circular Gradient

Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Draw Image
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Canvas Tutorial

To learn all about HTML <canvas>, Visit our full HTML Canvas Tutorial.

HTML5 SVG

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web
SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <svg> element.

Element

<svg> 4.0 9.0 3.0 3.2 10.1

SVG Circle

Example
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">

</body>
</html>

SVG Rectangle

Example

<svg width="400" height="100">

<rect width="400" height="100"style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle

Example

<svg width="400" height="180">

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG Star

Example

<svg width="300" height="200">

<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG Logo

SVG

Example

<svg height="130" width="500">

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%"y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45" font-family="Verdana"x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event
handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can
automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should
be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas SVG

Resolution dependent Resolution independent

No support for event handlers Support for event handlers
Poor text rendering capabilities Best suited for applications with large rendering areas (Google
You can save the resulting image as .png or Maps)
.jpg Slow rendering if complex (anything that uses the DOM a lot will
Well suited for graphic-intensive games be slow)
Not suited for game applications

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>

Set the Map Size

Set the size of the map:

Example
<div id="map" style="width:400px;height:400px">

Create a Function to Set The Map Properties

This example defines a Google Map centered in London, England:

function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

Example Explained

The mapOptions variable defines the properties for the map.

The center property specifies where to center the map (using latitude and longitude coordinates).

The zoom property specifies the zoom level for the map (try to experiment with the zoom level).

The mapTypeId property specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE,
HYBRID, and TERRAIN.

The line: var map=new google.maps.Map(document.getElementById("map"), mapOptions); creates a new map

inside the <div> element with id="map", using the parameters that are passed (mapOptions).

Add the Google Maps API

Finally, show the map on the page!

The functionality of the map is provided by a JavaScript library located at Google. Add a script to refer to the Google Maps
API with a callback to the myMap function:

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.

Examples: Images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

In this chapter you will learn about the different multimedia formats.

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors and fonts, and images!

Audio, video, and animation have been handled differently by the major browsers. Different formats have been supported,
and some formats require extra helper programs (plug-ins) to work.

Hopefully this will become history. HTML5 multimedia promises an easier future for multimedia.

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

MP4 is the new and upcoming format for internet video.

MP4 is recommended by YouTube.

MP4 is supported by Flash Players.

MP4 is supported by HTML5.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be
.mpeg supported by all browsers, but it is not supported in HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays
well on Windows computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware.
Plays well on Windows computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple
computers, but not in web browsers. (See MP4)

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online
.ram video and Internet TV, but does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
.flv

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video
or MP4 cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.

Audio Formats

MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC
.midi sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all
computers and music hardware, but not in web browsers.

RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web
.ram browsers.

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on
Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple
computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems.
Supported by HTML5.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines
good compression (small files) with high quality. Supported by all browsers.

MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet.
This leads to automatic support for MP4 audio by all browsers.

Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.

HTML5 Video
Playing Videos in HTML

Before HTML5, a video could only be played in a browser with a plug-in (like flash).

The HTML5 <video> element specifies a standard way to embed a video in a web page.
Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Element

<video> 4.0 9.0 3.5 4.0 10.5

The HTML <video> Element

To show a video in HTML, use the <video> element:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically use the autoplay attribute:

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML Video - Browser Support

In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

The browser support for the different formats is:

Browser MP4 WebM Ogg

Internet Explorer YES NO NO

Chrome YES YES YES

Firefox YES YES YES

Safari YES NO NO

Opera YES (from Opera 25) YES YES

HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

HTML Video - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

HTML5 Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as <video> and <audio>

<track> Defines text tracks in media players

HTML5 Audio

Audio on the Web

Before HTML5, audio files could only be played in a browser with a plug-in (like flash).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

Browser Support

The numbers in the table specify the first browser version that fully supports the <audio> element.

Element

<audio> 4.0 9.0 3.5 4.0 10.5

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will
use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio>
element.

HTML Audio - Browser Support

In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.

The browser support for the different formats is:

Browser MP3 Wav Ogg

Internet Explorer YES NO NO

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

Ogg audio/ogg

Wav audio/wav

HTML Audio - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and volume.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.

HTML5 Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as <video> and
<audio>

HTML Plug-ins

HTML Helpers (Plug-ins)

Helper applications (plug-ins) are computer programs that extend the standard functionality of a web browser.

Examples of well-known plug-ins are Java applets.

Plug-ins can be added to web pages with the <object> tag or the <embed> tag.

Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.
The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.

<object width="400" height="50" data="bookmark.swf"></object>

The <object> element can also be used to include HTML in HTML:

Example
<object width="100%" height="500px" data="snippet.html"></object>

Or images if you like:

Example
<object data="audi.jpeg"></object>

The <embed> Element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML
specification before HTML5.

<embed width="400" height="50" src="bookmark.swf">

Note that the <embed> element does not have a closing tag. It can not contain alternative
text.

The <embed> element can also be used to include HTML in HTML:

Example
<embed width="100%" height="500px" src="snippet.html">

Or images if you like:

Example
<embed src="audi.jpeg">

HTML YouTube Videos

Struggling with Video Formats?

Earlier in this tutorial, you have seen that you might have to convert your videos to different formats to make them play in
all browsers.

Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id

YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

Upload the video to YouTube

Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

Example - Using iFrame (recommended)

YouTube Autoplay

You can have your video start playing automatically when a user visits that page by adding a simple parameter to your
YouTube URL.

Note: Take careful consideration when deciding to autoplay your videos. Automatically starting a video can annoy your
visitor and end up causing more harm than good.

Value 0 (default): The video will not play automatically when the player loads.

Value 1: The video will play automatically when the player loads.

YouTube - Autoplay
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

YouTube Playlist

A comma separated list of videos to play (in addition to the original URL).

YouTube Loop
Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>

YouTube Controls

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>

YouTube - Using <object> or <embed>

Note: YouTube <object> and <embed> were deprecated from January 2015. You should
migrate your videos to use <iframe> instead.

Example - Using <object> (deprecated)

Example - Using <embed> (deprecated)

HTML5 Geolocation
Locate the User's Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Browser Support

The numbers in the table specify the first browser version that fully supports Geolocation.
API

Geolocation 5.0 - 49.0 (http) 9.0 3.5 5.0 16.0

50.0 (https)

Using HTML Geolocation

The getCurrentPosition() method is used to return the user's position.

Example explained:

Check if Geolocation is supported

If supported, run the getCurrentPosition() method. If not, display a message to the user
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
The showPosition() function outputs the Latitude and Longitude

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}

Displaying the Result in a Map

To display the result in a map, you need access to a map service, like Google Maps.

In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image):

function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=

"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";

}

Location-specific Information

This page has demonstrated how to show a user's position on a map.

Geolocation is also very useful for location-specific information, like:

Up-to-date local information

Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are
returned if available:

Property Returns

coords.latitude The latitude as a decimal number (always returned)

coords.longitude The longitude as a decimal number (always returned)

coords.accuracy The accuracy of position (always returned)

coords.altitude The altitude in meters above the mean sea level (returned if available)

coords.altitudeAccuracy The altitude accuracy of position (returned if available)

coords.heading The heading as degrees clockwise from North (returned if available)

coords.speed The speed in meters per second (returned if available)

timestamp The date/time of the response (returned if available)

Geolocation Object - Other interesting Methods

The Geolocation object also has other interesting methods:

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.

The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):

TML5 Drag and Drop

Drag and Drop

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

In HTML5, drag and drop is part of the standard: Any element can be draggable.

Browser Support

The numbers in the table specify the first browser version that fully supports Drag and Drop.

API

Drag and Drop 4.0 9.0 3.5 6.0 12.0

HTML Drag and Drop Example

The example below is a simple drag and drop example:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

What to Drag - ondragstart and setData()

Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

In this case, the data type is "text" and the value is the id of the draggable element ("drag1").

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the
element.

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

Code explained:

Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the
same type in the setData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element

More Examples

Drag image back and forth

How to drag (and drop) an image back and forth between two <div> elements:

Try it Yourself

HTML5 Web Storage

HTML web storage; better than cookies.

What is HTML Web Storage?

With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure,
and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support

The numbers in the table specify the first browser version that fully supports Web Storage.

API

Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date

window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and
will be available the next day, week, or year.

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith"

Retrieve the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a
number to be able to increase the counter:

if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is
deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

HTML5 Web Workers

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance
of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the
background.

Browser Support

The numbers in the table specify the first browser version that fully support Web Workers.

API

Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Example

The example below creates a simple web worker that count numbers in the background:

Example

Count numbers:

Start Worker Stop Worker

Check Web Worker Support

Before creating a web worker, check whether the user's browser supports it:

if (typeof(Worker) !== "undefined") {

// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}

Create a Web Worker File

Now, let's create our web worker in an external JavaScript.

Here, we create a script that counts. The script is stored in the "demo_workers.js" file:

var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

The important part of the code above is the postMessage() method - which is used to post a message back to the HTML
page.

Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

Create a Web Worker Object

Now that we have the web worker file, we need to call it from an HTML page.

The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in
"demo_workers.js":

if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker.

w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

When the web worker posts a message, the code within the event listener is executed. The data from the web worker is
stored in event.data.

Terminate a Web Worker

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it
is terminated.
To terminate a web worker, and free browser/computer resources, use the terminate() method:

w.terminate();

Reuse the Web Worker

If you set the worker variable to undefined, after it has been terminated, you can reuse the code:

w = undefined;

Full Web Worker Example Code

We have already seen the Worker code in the .js file. Below is the code for the HTML page:

Example
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>

Web Workers and the DOM

Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object

The document object
The parent object

HTML5 Server-Sent Events

Server-Sent Events allow a web page to get updates from a server.

Server-Sent Events - One Way Messaging

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events,
the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Browser Support

The numbers in the table specify the first browser version that fully support server-sent events.

API

SSE 6.0 Not supported 6.0 5.0 11.5

Receive Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

Example explained:

Create a new EventSource object, and specify the URL of the page sending the updates (in this example
"demo_sse.php")
Each time an update is received, the onmessage event occurs
When an onmessage event occurs, put the received data into the element with id="result"

Check Server-Sent Events Support

In the tryit example above there were some extra lines of code to check browser support for server-sent events:

if(typeof(EventSource) !== "undefined") {

// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}

Server-Side Code Example

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start
sending event streams.

Code in PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Code in ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Code explained:

Set the "Content-Type" header to "text/event-stream"

Specify that the page should not cache
Output the data to send (Always start with "data: ")
Flush the output data back to the web page

Events Description

onopen When a connection to the server is opened

onmessage When a message is received

onerror When an error occurs

(Ebook PDF) Computer Organization and Design ARM Edition: The Hardware Software Interface All Chapters Instant Download
100% (6)
(Ebook PDF) Computer Organization and Design ARM Edition: The Hardware Software Interface All Chapters Instant Download
51 pages
Manual Raymarine E7 PDF
No ratings yet
Manual Raymarine E7 PDF
320 pages
PHP 8 in Nutshell
No ratings yet
PHP 8 in Nutshell
6 pages
HTTP Request Splitting
No ratings yet
HTTP Request Splitting
68 pages
Remoteworklife - Co-The Best MEGA LIST of Work From Home Jobs
No ratings yet
Remoteworklife - Co-The Best MEGA LIST of Work From Home Jobs
8 pages
AT-940 Flight Inspection System
No ratings yet
AT-940 Flight Inspection System
75 pages
Dark Web PDF
100% (1)
Dark Web PDF
17 pages
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Web 200 Syllabus
No ratings yet
Web 200 Syllabus
11 pages
Perl Debugger Refcard A4
No ratings yet
Perl Debugger Refcard A4
2 pages
Div and Span
No ratings yet
Div and Span
59 pages
Section 3 - Networks
No ratings yet
Section 3 - Networks
27 pages
Lecture5 PHP Mysql
No ratings yet
Lecture5 PHP Mysql
66 pages
AdaCore Tech Cyber Security Web
No ratings yet
AdaCore Tech Cyber Security Web
94 pages
Portable Executable Format
No ratings yet
Portable Executable Format
18 pages
Security Testing by OWASP Top 10
No ratings yet
Security Testing by OWASP Top 10
30 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
56 pages
Encrypt Password With C#
100% (3)
Encrypt Password With C#
12 pages
Pipenv Documentation: Release 2018.11.27.dev0
No ratings yet
Pipenv Documentation: Release 2018.11.27.dev0
74 pages
Lecture 1 HTML & Css
No ratings yet
Lecture 1 HTML & Css
92 pages
SERVER SIDE SCRIPTING BASIC-php
No ratings yet
SERVER SIDE SCRIPTING BASIC-php
42 pages
CSS Commands
No ratings yet
CSS Commands
373 pages
Kali Linux Tools Listing
No ratings yet
Kali Linux Tools Listing
5 pages
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
100% (1)
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
12 pages
Linux Installation - Guide
No ratings yet
Linux Installation - Guide
9 pages
Introduction To LaTeX - Dumitrescu
No ratings yet
Introduction To LaTeX - Dumitrescu
24 pages
Full download Advanced Guide to Python 3 Programming Hunt pdf docx
100% (1)
Full download Advanced Guide to Python 3 Programming Hunt pdf docx
55 pages
Ruby Cheat Sheet
No ratings yet
Ruby Cheat Sheet
6 pages
HTML 5
0% (1)
HTML 5
110 pages
Fundamentals of Web Development With: HTML, CSS, Javascript
100% (1)
Fundamentals of Web Development With: HTML, CSS, Javascript
14 pages
ICMP CheatSheet Part2 - (Networkwalks - Com) v1
No ratings yet
ICMP CheatSheet Part2 - (Networkwalks - Com) v1
1 page
Web Data: XML
No ratings yet
Web Data: XML
13 pages
SSH
No ratings yet
SSH
14 pages
Dynamic HTML: Cascading Style Sheets (CSS)
No ratings yet
Dynamic HTML: Cascading Style Sheets (CSS)
66 pages
PHP Beginner 2018 02
No ratings yet
PHP Beginner 2018 02
28 pages
Angularjs: HTML Enhanced For Web Apps!
No ratings yet
Angularjs: HTML Enhanced For Web Apps!
4 pages
XSS Answers
No ratings yet
XSS Answers
7 pages
SQL Alchemy
No ratings yet
SQL Alchemy
1,088 pages
Best Kali Pen Tools
No ratings yet
Best Kali Pen Tools
9 pages
Linux Programming: Lab Manual
No ratings yet
Linux Programming: Lab Manual
53 pages
PHP Tutorials Examples Object Oriented Programming With PHP
No ratings yet
PHP Tutorials Examples Object Oriented Programming With PHP
24 pages
HTML5 - Web Forms 2
No ratings yet
HTML5 - Web Forms 2
3 pages
HTML and Java Script
No ratings yet
HTML and Java Script
9 pages
CSC358 Wireshark Assignment 2 Solution
No ratings yet
CSC358 Wireshark Assignment 2 Solution
9 pages
Php/Mysql Tutorial: Introduction To Database
No ratings yet
Php/Mysql Tutorial: Introduction To Database
58 pages
Xss
No ratings yet
Xss
4 pages
Tag Name Code Example Browser View: (Tip) Visit Our Site (Tip)
No ratings yet
Tag Name Code Example Browser View: (Tip) Visit Our Site (Tip)
7 pages
Common Web Security Threats
No ratings yet
Common Web Security Threats
41 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
Perl 4
No ratings yet
Perl 4
112 pages
PHP:Hypertext Preprocessor
No ratings yet
PHP:Hypertext Preprocessor
30 pages
Perl Syntax: Basic Script
No ratings yet
Perl Syntax: Basic Script
9 pages
Learn HTML
No ratings yet
Learn HTML
11 pages
Out of Character Use of Punycode and Homoglyph Attacks To Obfuscate Urls For Phishing
No ratings yet
Out of Character Use of Punycode and Homoglyph Attacks To Obfuscate Urls For Phishing
39 pages
What Is Cookie
No ratings yet
What Is Cookie
10 pages
Hacking SQL Injection Hack PDF
No ratings yet
Hacking SQL Injection Hack PDF
31 pages
ARP Mapping: in A Frame With The MAC Address of The Local Host, or Next-Hop Router
No ratings yet
ARP Mapping: in A Frame With The MAC Address of The Local Host, or Next-Hop Router
17 pages
Practicals 3
No ratings yet
Practicals 3
5 pages
Unit - 2 PHP Basics: Learning Objectives
No ratings yet
Unit - 2 PHP Basics: Learning Objectives
45 pages
Building Websites with VB.NET and DotNetNuke 4
From Everand
Building Websites with VB.NET and DotNetNuke 4
Daniel N. Egan
1/5 (1)
Extensible Markup Language XML A Complete Guide
From Everand
Extensible Markup Language XML A Complete Guide
Gerardus Blokdyk
No ratings yet
Configuration of a Simple Samba File Server, Quota and Schedule Backup
From Everand
Configuration of a Simple Samba File Server, Quota and Schedule Backup
Dr. Hidaia Mahmood Alassouli
No ratings yet
NW.js Essentials
From Everand
NW.js Essentials
Alessandro Benoit
No ratings yet
Advanced GitLab CI/CD Pipelines: An In-Depth Guide for Continuous Integration and Deployment
From Everand
Advanced GitLab CI/CD Pipelines: An In-Depth Guide for Continuous Integration and Deployment
Adam Jones
No ratings yet
376 SPD Itc Application Form Post 01. To 06.
No ratings yet
376 SPD Itc Application Form Post 01. To 06.
4 pages
Total 272 60 332: Province/area General Seats Seats Reserved For Women Total Seats
No ratings yet
Total 272 60 332: Province/area General Seats Seats Reserved For Women Total Seats
2 pages
Population Welfare Department Sindh Jobs Application Form 2016
No ratings yet
Population Welfare Department Sindh Jobs Application Form 2016
1 page
Population Welfare Department Sindh Jobs Application Form 2016
No ratings yet
Population Welfare Department Sindh Jobs Application Form 2016
1 page
Sachal Jo Risalo
No ratings yet
Sachal Jo Risalo
524 pages
Installation Manual Series D 1FH: Proportional DC Valve
100% (1)
Installation Manual Series D 1FH: Proportional DC Valve
20 pages
C For Loop Exercises v2
No ratings yet
C For Loop Exercises v2
5 pages
Project Cdrs2022
No ratings yet
Project Cdrs2022
2 pages
Pyro Sim Manual
No ratings yet
Pyro Sim Manual
180 pages
[email protected]: - Mobaxterm Personal Edition V23.4
No ratings yet
[email protected]: - Mobaxterm Personal Edition V23.4
13 pages
Huda Nur Aziz 28 36
No ratings yet
Huda Nur Aziz 28 36
10 pages
MBA - Information Technology Management
100% (1)
MBA - Information Technology Management
14 pages
Internationalization in SAP
No ratings yet
Internationalization in SAP
6 pages
MAC21_E
No ratings yet
MAC21_E
32 pages
Susan Tang Resume 20240228
No ratings yet
Susan Tang Resume 20240228
1 page
AS400 Interview Questions Part - 2
No ratings yet
AS400 Interview Questions Part - 2
2 pages
Panel LCD Chimei-M270H1-L01
No ratings yet
Panel LCD Chimei-M270H1-L01
27 pages
United States Patent: (10) Patent No.: US 9.229,444 B2
No ratings yet
United States Patent: (10) Patent No.: US 9.229,444 B2
16 pages
Messaging Solution For Partner
No ratings yet
Messaging Solution For Partner
19 pages
Constant and Variable Types
No ratings yet
Constant and Variable Types
5 pages
49 acessible
No ratings yet
49 acessible
3 pages
Lab - 14 - Routing Protocols & Configuration
No ratings yet
Lab - 14 - Routing Protocols & Configuration
19 pages
A Novel Multi-Stage Approach For Hierarchical Intrusion Detection
No ratings yet
A Novel Multi-Stage Approach For Hierarchical Intrusion Detection
15 pages
Amarjeet Singh
No ratings yet
Amarjeet Singh
6 pages
Home Autel 2
No ratings yet
Home Autel 2
41 pages
Numerical Analysis Introduction
No ratings yet
Numerical Analysis Introduction
33 pages
AIC Ch12 PDF
No ratings yet
AIC Ch12 PDF
44 pages
Field-Installation-Guide-Cisco-HCI-Intersight
No ratings yet
Field-Installation-Guide-Cisco-HCI-Intersight
28 pages
Math 365 Project
No ratings yet
Math 365 Project
2 pages
Murali's Profile
No ratings yet
Murali's Profile
6 pages
English Application Form
No ratings yet
English Application Form
4 pages