With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the result.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Click on the "Try it Yourself" button to see how it works.
At the end of the HTML tutorial, you can find more than 200 examples.
With our online editor, you can edit and test each example yourself.
Test your HTML skills at W3Schools!
At W3Schools you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
HTML is the standard markup language for creating Web pages.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
<!DOCTYPE html> declaration defines this document to be HTML5<html> element is the root element of an HTML
page<head> element contains meta information about the document<title> element specifies a title for the document<body> element contains the visible page content<h1> element defines a large heading<p> element defines a paragraphHTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
The browser does not display the HTML tags, but uses them to determine how to display the document:
Below is a visualization of an HTML page structure:
Note: Only the content inside the <body> section (the white area above) is displayed in a browser.
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
Since the early days of the web, there have been many versions of HTML:
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Ignore rich text commands in HTML files".
Then open a new document to place the code.
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
You can use either .htm or .html as file extension. There is no difference, it is up to you.
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:
Don't worry if these examples use tags you have not learned.
You will learn about them in the next chapters.
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Try it Yourself »
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Try it Yourself »
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
The HTML element is everything from the start tag to the end tag:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> |
HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Some HTML elements will display correctly, even if you forget the end tag:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Try it Yourself »
The example above works in all browsers, because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
At W3Schools we always use lowercase tags.
Attributes provide additional information about HTML elements.
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »
You will learn more about links and the <a> tag later in this tutorial.
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
<img src="img_girl.jpg">
Try it Yourself »
Images in HTML have a set of size attributes, which specifies the width and height of the image:
<img src="img_girl.jpg" width="500" height="600">
Try it Yourself »
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 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.
<img src="img_girl.jpg" alt="Girl
with a jacket">
Try it Yourself »
The alt attribute is also useful if the image does not exist:
What happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Try it Yourself »
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>
Try it Yourself »
You will learn more about styling later in this tutorial, and in our CSS Tutorial.
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).
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>
Try it Yourself »
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.
At W3Schools we always use lowercase attribute names.
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written as:
<a
href=https://www.w3schools.com>
Try it Yourself »
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>
Try it Yourself »
Using quotes are the most common. Omitting quotes can produce errors.
At W3Schools we always use quotes around attribute values.
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">
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
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) |
A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
Note: Browsers automatically add some white space (a margin) before and after a heading.
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.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
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>
Try it Yourself »
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:
<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>
Try it Yourself »
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>
.
.
.
Try it Yourself »
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
Have you ever seen a Web page and wondered "Hey! How did they do that?"
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.
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.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
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 |
The HTML <p> element defines a paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
Note: Browsers automatically add some white space (a margin) before and after a paragraph.
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>
Try it Yourself »
Most browsers will display HTML correctly even if you forget the end tag:
<p>This is a paragraph.
<p>This is another paragraph.
Try it Yourself »
The example above will work in most browsers, but do not rely on it.
Note: Dropping the end tag can produce unexpected results or errors.
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>
Try it Yourself »
The <br> tag is an empty tag, which means that it has no end tag.
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.
</p>
Try it Yourself »
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.
</pre>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
W3Schools' tag reference contains additional information about HTML elements and their attributes.
| Tag | Description |
|---|---|
| <p> | Defines a paragraph |
| <br> | Inserts a single line break |
| <pre> | Defines pre-formatted text |
I am Red
I am Blue
I am Big
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname
style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p
style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »
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>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
This text is bold
This text is italic
This is subscript and superscript
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 italic text.
Formatting elements were designed to display special types of text:
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
Try it Yourself »
The HTML <strong> element defines strong text, with added semantic "strong" importance.
<strong>This text is strong</strong>
Try it Yourself »
The HTML <i> element defines italic text, without any extra importance.
<i>This text is italic</i>
Try it Yourself »
The HTML <em> element defines emphasized text, with added semantic importance.
<em>This text is
emphasized</em>
Try it Yourself »
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
The HTML <small> element defines smaller text:
<h2>HTML
<small>Small</small> Formatting</h2>
Try it Yourself »
The HTML <mark> element defines marked or highlighted text:
<h2>HTML
<mark>Marked</mark> Formatting</h2>
Try it Yourself »
The HTML <del> element defines deleted (removed) text.
<p>My favorite color is <del>blue</del> red.</p>
Try it Yourself »
The HTML <ins> element defines inserted (added) text.
<p>My favorite
<ins>color</ins> is red.</p>
Try it Yourself »
The HTML <sub> element defines subscripted text.
<p>This
is <sub>subscripted</sub> text.</p>
Try it Yourself »
The HTML <sup> element defines superscripted text.
<p>This
is <sup>superscripted</sup> text.</p>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
| 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 |
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.
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
| 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 |
Comment tags are used to insert comments in the HTML source code.
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
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:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
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
<img border="0" src="pic_mountain.jpg"
alt="Mountain">
-->
Try it Yourself »
You might stumble upon conditional comments in HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
Conditional comments defines some HTML tags to be executed by Internet Explorer only.
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
In HTML, a color can be specified by using a color name:
HTML supports 140 standard color names.
You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
You can set the color of text:
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
enim...</p>
Try it Yourself »
You can set the color of borders:
<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>
Try it Yourself »
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
Same as color name "Tomato":
Same as color name "Tomato", but 50% transparent:
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
Try it Yourself »
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:
RED
GREEN
BLUE
Shades of gray are often defined using equal values for all the 3 light sources:
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).
Shades of gray are often defined using equal values for all the 3 light sources:
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
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.
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).
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:
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):
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):
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:
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.
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:
<h1 style="color:blue;">This is a Blue Heading</h1>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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;
}
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>
Try it Yourself »
The CSS border property defines a border around an HTML element:
p {
border: 1px
solid powderblue;
}
Try it Yourself »
The CSS padding property defines a padding (space) between the text and the border:
p {
border: 1px
solid powderblue;
padding: 30px;
}
Try it Yourself »
The CSS margin property defines a margin (space) outside the border:
p {
border: 1px
solid powderblue;
margin: 50px;
}
Try it Yourself »
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;
}
Try it Yourself »
Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!
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;
}
Try it Yourself »
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:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web site:
<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">
You can read more about file paths in the chapter HTML File Paths.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Links are found in nearly all web pages. Links allow users to click their way from page to page.
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.
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>
Try it Yourself »
The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request.
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>
Try it Yourself »
By default, a link will appear like this (in all browsers):
You can change the default colors, by using styles:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
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>
Try it Yourself »
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
This example will open the linked document in a new browser window/tab:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Try it Yourself »
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>
Try it Yourself »
It is common to use images as links:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
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>
Try it Yourself »
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>
You can read more about file paths in the chapter HTML File Paths.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Images can improve the design and the appearance of a web page.
<img src="pulpitrock.jpg"
alt="Mountain View">
Try it Yourself »
<img src="img_girl.jpg"
alt="Girl in a jacket">
Try it Yourself »
<img src="img_chania.jpg"
alt="Flowers in Chania">
Try it Yourself »
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">
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers
in Chania">
Try it Yourself »
If a browser cannot find an image, it will display the value of the alt attribute:
<img src="wrongname.gif" alt="Flowers
in Chania">
Try it Yourself »
Note: The alt attribute is required. A web page will not validate correctly without it.
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Try it Yourself »
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Try it Yourself »
The width and height attributes always defines the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents styles sheets from changing the 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;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Try it Yourself »
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;">
Try it Yourself »
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself »
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
Use the CSS float property to let the image float to the right or to the left of a text:
<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>
Try it Yourself »
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
In the image below, click on the computer, the phone, or the cup of coffee:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
Try it Yourself »
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.
To add a background image on an HTML element, use the CSS property
background-image:
To add a background image on a web page, specify the background-image property on the BODY element:
<body style="background-image:url('clouds.jpg')">
<h2>Background
Image</h2>
</body>
Try it Yourself »
To add a background image on a paragraph, specify the background-image property on the P element:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
Try it Yourself »
To learn more about background images, study our CSS Background Tutorial.
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.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg"
alt="Flowers" style="width:auto;">
</picture>
Try it Yourself »
Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that to not support the <picture> element, or if none of the <source> tags matched.
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.
Note: Loading images takes time. Large images can slow down your page. Use images carefully.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
| 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 |
| 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 |
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>
Try it Yourself »
Note: The <td> elements are the data containers of the table.
They can contain
all sorts of HTML elements; text, images, lists, other tables, etc.
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;
}
Try it Yourself »
Remember to define borders for both the table and the table cells.
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;
}
Try it Yourself »
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;
}
Try it Yourself »
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
th {
text-align: left;
}
Try it Yourself »
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;
}
Try it Yourself »
Note: If the table has collapsed borders, border-spacing has no effect.
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>
Try it Yourself »
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>
Try it Yourself »
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »
Note: The <caption> tag must be inserted immediately after the <table> tag.
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>
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Try it Yourself »
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;
}
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
| 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 |
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>
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 |
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
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>
Try it Yourself »
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 |
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
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>
Try it Yourself »
List can be nested (lists inside lists):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
Note: List items can contain new list, and other HTML elements, like images and links, etc.
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
<!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>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
| 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 |
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.
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).
<div>Hello</div>
<div>World</div>
Try it Yourself »
Block level elements in HTML:
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.
<span>Hello</span>
<span>World</span>
Try it Yourself »
Inline elements in HTML:
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:
<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>
Try it Yourself »
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:
<h1>My <span style="color:red">Important</span> Heading</h1>
Try it Yourself »
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
The class attribute specifies one or more class names for an HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
Using CSS to style all elements with the class name "city":
<style>
.city {
background-color: tomato;
color: white;
padding:
10px;
}
</style>
<h2
class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2
class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Try it Yourself »
London is the capital of England.
Paris is the capital of France.
Tokyo is the capital of Japan.
The class attribute can be used on any HTML element.
JavaScript can access elements with a specified class name by using the getElementsByClassName() method:
When a user clicks on a button, hide all elements with the class name "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Try it Yourself »
Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.
HTML elements can have more than one class name, each class name must be separated by a space.
Style elements with the class name "city", also style elements with the class name "main":
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Try it Yourself »
In the example above, the first h2 element belongs to both the "city" class and the "main" class.
Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 »
An iframe is used to display a web page within a web page.
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
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%").
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Try it Yourself »
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
<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:
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
Try it Yourself »
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:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it Yourself »
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
JavaScript makes HTML pages more dynamic and interactive.
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":
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Try it Yourself »
Tip: You can learn much more about JavaScript in our JavaScript Tutorial.
Here are some examples of what JavaScript can do:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Try it Yourself »
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Try it Yourself »
document.getElementById("image").src = "picture.gif";
Try it Yourself »
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:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Try it Yourself »
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
| 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 |
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:
An absolute file path is the full URL to an internet file:
<img src="https://www.w3schools.com/images/picture.jpg"
alt="Mountain">
The <img> tag and the src and alt attributes are explained in the chapter about HTML Images.
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:
<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:
<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:
<img src="../images/picture.jpg"
alt="Mountain">
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.
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 <title> element defines the title of the document, and is required in all HTML/XHTML documents.
The <title> element:
A simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it Yourself »
The <style> element is used to define style information for a single HTML page:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Try it Yourself »
The <link> element is used to link to external style sheets:
<link rel="stylesheet" href="mystyle.css">
Try it Yourself »
Tip: To learn all about CSS, visit our CSS Tutorial.
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:
<meta charset="UTF-8">
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:
<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">
Try it Yourself »
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.
The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Try it Yourself »
Tip: To learn all about JavaScript, visit our JavaScript Tutorial.
The <base> element specifies the base URL and base target for all relative URLs in a page:
<base href="https://www.w3schools.com/images/" target="_blank">
Try it Yourself »
According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.
The following code will validate as HTML5:
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself »
Note:
W3Schools does not recommend omitting the <html> and <body> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).
However, omitting the <head> tag has been a common practice for quite some time now.
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
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.
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:
|
|
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
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.
Tip: Do NOT use tables for your page layout!
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
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.
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.
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.
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.
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:
Note: A web page should look good on any device!
When making responsive web pages, add the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Try it Yourself »
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:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference.
Responsive images are images that scale nicely to fit any browser size.
If the width property is set to 100%, the image will be responsive and scale up and down:
<img
src="img_girl.jpg" style="width:100%;">
Try it Yourself »
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.
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:
<img
src="img_girl.jpg" style="max-width:100%;height:auto;">
Try it Yourself »
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:
<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>
Try it Yourself »
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:
Resize the browser window to see how the text size scales.
<h1 style="font-size:10vw">Hello World</h1>
Try it Yourself »
In addition to resize text and images, it is also common to use media queries in responsive web pages.
With media queries you can define completely different styles for different browser sizes.
Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:
<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>
Try it Yourself »
To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial.
A responsive web page should look good on large desktop screens and small mobile phones.
There are many existing CSS Frameworks that offer Responsive Design.
They are free, and easy to use.
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:
Resize the page to see the responsiveness!
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 is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
<!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>
Try it Yourself »
To learn more about W3.CSS, read our W3.CSS Tutorial.
Another popular framework is Bootstrap, it uses HTML, CSS and jQuery to make responsive web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div
class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div
class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div
class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
Try it Yourself »
To learn more about Bootstrap, go to our Bootstrap Tutorial.
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:
<p>Save
the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
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:
<p>If you input wrong value, the program will return <samp>Error!</samp></p>
Result:
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:
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:
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
Result:
x = 5;
y = 6;
z = x + y;
The HTML <var> element defines a variable.
The variable could be a variable in a mathematical expression or a variable in programming context:
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.
Result:
Exercise 1 » Exercise 2 » Exercise 3 »
| Tag | Description |
|---|---|
| <code> | Defines programming code |
| <kbd> | Defines keyboard input |
| <samp> | Defines computer output |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
Reserved characters in HTML must be replaced with character entities.
Characters that are not present on your keyboard can also be replaced by entities.
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
To display a less than sign (<) we must write: < or <
Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for numbers is good.
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:
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.
| 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 | ® | ® |
Note: Entity names are case sensitive.
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 | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
You will see more HTML symbols in the next chapter of this tutorial.
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.
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
I will display €
I will display €
I will display €
Try it Yourself »
| Char | Number | Entity | Description |
|---|---|---|---|
| ∀ | ∀ | ∀ | FOR ALL |
| ∂ | ∂ | ∂ | PARTIAL DIFFERENTIAL |
| ∃ | ∃ | ∃ | THERE EXISTS |
| ∅ | ∅ | ∅ | EMPTY SETS |
| ∇ | ∇ | ∇ | NABLA |
| ∈ | ∈ | ∈ | ELEMENT OF |
| ∉ | ∉ | ∉ | NOT AN ELEMENT OF |
| ∋ | ∋ | ∋ | CONTAINS AS MEMBER |
| ∏ | ∏ | ∏ | N-ARY PRODUCT |
| ∑ | ∑ | ∑ | N-ARY SUMMATION |
| 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 |
| Char | Number | Entity | Description |
|---|---|---|---|
| © | © | © | COPYRIGHT SIGN |
| ® | ® | ® | REGISTERED SIGN |
| € | € | € | EURO SIGN |
| ™ | ™ | ™ | TRADEMARK |
| ← | ← | ← | LEFTWARDS ARROW |
| ↑ | ↑ | ↑ | UPWARDS ARROW |
| → | → | → | RIGHTWARDS ARROW |
| ↓ | ↓ | ↓ | DOWNWARDS ARROW |
| ♠ | ♠ | ♠ | BLACK SPADE SUIT |
| ♣ | ♣ | ♣ | BLACK CLUB SUIT |
| ♥ | ♥ | ♥ | BLACK HEART SUIT |
| ♦ | ♦ | ♦ | BLACK DIAMOND SUIT |
To display an HTML page correctly, a web browser must know which character set (character encoding) to use.
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.
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:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta charset="UTF-8">
If a browser detects ISO-8859-1 in a web page, it defaults to ANSI, because ANSI is identical to ISO-8859-1 except that ANSI has 32 extra characters.
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 |
| 65 | A | A | A | A | Latin capital letter A |
| 66 | B | B | B | B | Latin capital letter B |
| 67 | C | C | C | C | Latin capital letter C |
| 68 | D | D | D | D | Latin capital letter D |
| 69 | E | E | E | E | Latin capital letter E |
| 70 | F | F | F | F | Latin capital letter F |
| 71 | G | G | G | G | Latin capital letter G |
| 72 | H | H | H | H | Latin capital letter H |
| 73 | I | I | I | I | Latin capital letter I |
| 74 | J | J | J | J | Latin capital letter J |
| 75 | K | K | K | K | Latin capital letter K |
| 76 | L | L | L | L | Latin capital letter L |
| 77 | M | M | M | M | Latin capital letter M |
| 78 | N | N | N | N | Latin capital letter N |
| 79 | O | O | O | O | Latin capital letter O |
| 80 | P | P | P | P | Latin capital letter P |
| 81 | Q | Q | Q | Q | Latin capital letter Q |
| 82 | R | R | R | R | Latin capital letter R |
| 83 | S | S | S | S | Latin capital letter S |
| 84 | T | T | T | T | Latin capital letter T |
| 85 | U | U | U | U | Latin capital letter U |
| 86 | V | V | V | V | Latin capital letter V |
| 87 | W | W | W | W | Latin capital letter W |
| 88 | X | X | X | X | Latin capital letter X |
| 89 | Y | Y | Y | Y | Latin capital letter Y |
| 90 | Z | Z | Z | Z | Latin capital letter Z |
| 91 | [ | [ | [ | [ | left square bracket |
| 92 | \ | \ | \ | \ | reverse solidus |
| 93 | ] | ] | ] | ] | right square bracket |
| 94 | ^ | ^ | ^ | ^ | circumflex accent |
| 95 | _ | _ | _ | _ | low line |
| 96 | ` | ` | ` | ` | grave accent |
| 97 | a | a | a | a | Latin small letter a |
| 98 | b | b | b | b | Latin small letter b |
| 99 | c | c | c | c | Latin small letter c |
| 100 | d | d | d | d | Latin small letter d |
| 101 | e | e | e | e | Latin small letter e |
| 102 | f | f | f | f | Latin small letter f |
| 103 | g | g | g | g | Latin small letter g |
| 104 | h | h | h | h | Latin small letter h |
| 105 | i | i | i | i | Latin small letter i |
| 106 | j | j | j | j | Latin small letter j |
| 107 | k | k | k | k | Latin small letter k |
| 108 | l | l | l | l | Latin small letter l |
| 109 | m | m | m | m | Latin small letter m |
| 110 | n | n | n | n | Latin small letter n |
| 111 | o | o | o | o | Latin small letter o |
| 112 | p | p | p | p | Latin small letter p |
| 113 | q | q | q | q | Latin small letter q |
| 114 | r | r | r | r | Latin small letter r |
| 115 | s | s | s | s | Latin small letter s |
| 116 | t | t | t | t | Latin small letter t |
| 117 | u | u | u | u | Latin small letter u |
| 118 | v | v | v | v | Latin small letter v |
| 119 | w | w | w | w | Latin small letter w |
| 120 | x | x | x | x | Latin small letter x |
| 121 | y | y | y | y | Latin small letter y |
| 122 | z | z | z | z | Latin small letter z |
| 123 | { | { | { | { | left curly bracket |
| 124 | | | | | | | | | vertical line |
| 125 | } | } | } | } | right curly bracket |
| 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 |
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.
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.
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.
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.
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.
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:
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 |
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.
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.
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.
XHTML is HTML written as XML.
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):
<html>
<head>
<title>This is bad HTML</title>
<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.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
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>This is wrong:
<p>This is a paragraph
<p>This is another paragraphThis is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>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" />This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>This is correct:
<body>
<p>This is a paragraph</p>
</body>This is wrong:
<table WIDTH="100%">This is correct:
<table width="100%">This is wrong:
<table width=100%>This is correct:
<table width="100%">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" />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 is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
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) |
You will learn a lot more about input types later in this tutorial.
<input type="text"> defines a one-line input field for text input:
<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:Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Male<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:
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
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:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value "_blank":
<form action="/action_page.php"
target="_blank">
Try it Yourself »
Other legal values are "_parent", "_top", or a name representing the name of an iframe.
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">
Try it Yourself »
or:
<form action="/action_page.php" method="post">
Try it Yourself »
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=MouseNotes on GET:
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.
Notes on POST:
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
<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>
Try it Yourself »
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
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.
This chapter describes all HTML form elements.
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
<input name="firstname" type="text">
Try it Yourself »
If the type attribute is omitted, the input field gets the default type: "text".
All the different input types are covered in the next chapter.
The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
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:
<option value="fiat" selected>Fiat</option>
Try it Yourself »
Use the size attribute to specify the number of visible values:
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Use the multiple attribute to allow the user to select more than one value:
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself »
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:
You can also define the size of the text area by using CSS:
<textarea name="message"
style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
Try it Yourself »
The <button> element defines a clickable button:
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
HTML5 added the following form elements:
Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not "destroy" your web page.
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.
<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>
Try it Yourself »
The <output> element represents the result of a calculation (like one performed by a script).
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 »
= 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 |
This chapter describes the different input types for the <input> element.
<input type="text"> defines a one-line text input field:
<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 the HTML code above will be displayed in a browser:
First name:<input type="password"> defines a password field:
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
User name:The characters in a password field are masked (shown as asterisks or circles).
<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:
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
If you omit the submit button's value attribute, the button will get a default text:
<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">
</form>
Try it Yourself »
<input type="reset"> defines a reset button that will reset all form values to their default values:
<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">
<input type="reset">
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Male<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
I have a bike<input type="button"> defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
HTML5 added several new input types:
New input types that are not supported by older web browsers, will behave as <input type="text">.
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>
Try it Yourself »
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.
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>
Try it Yourself »
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>
Try it Yourself »
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.
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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:
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
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.
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.
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.
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.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |
The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John">
</form>
Try it Yourself »
The readonly attribute specifies that the input field is read only (cannot be changed):
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" readonly>
</form>
Try it Yourself »
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:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" disabled>
</form>
Try it Yourself »
The size attribute specifies the size (in characters) for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" size="40">
</form>
Try it Yourself »
The maxlength attribute specifies the maximum allowed length for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname"
maxlength="10">
</form>
Try it Yourself »
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.
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must be checked by the receiver (the server) as well!
HTML5 added the following attributes for <input>:
and the following attributes for <form>:
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>
Try it Yourself »
Tip: In some browsers you may need to activate the autocomplete function for this to work.
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>
Try it Yourself »
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>
Try it Yourself »
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">
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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" value="Submit using POST">
</form>
Try it Yourself »
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):
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
Try it Yourself »
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>
Try it Yourself »
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">
Try it Yourself »
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>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Try it Yourself »
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:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
Try it Yourself »
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>
Try it Yourself »
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">
Try it Yourself »
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">
Try it Yourself »
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>
Try it Yourself »
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">
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
The default character encoding in HTML5 is UTF-8.
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>.
In the next chapter, HTML5 Support, you will learn how to "teach" older browsers to handle "unknown" (new) HTML elements.
The most interesting new API's in HTML5 are:
Tip: HTML Local storage is a powerful replacement for cookies.
The following HTML4 elements have been removed in HTML5:
| Removed Element | Use Instead |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | CSS |
| <big> | CSS |
| <center> | CSS |
| <dir> | <ul> |
| <font> | CSS |
| <frame> | |
| <frameset> | |
| <noframes> | |
| <strike> | CSS, <s>, or <del> |
| <tt> | CSS |
In the chapter HTML5 Migration, you will learn how to easily migrate from HTML4 to HTML5.
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.
You can teach older browsers to handle HTML5 correctly.
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.
You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.
HTML5 defines eight new semantic elements. All these are block-level elements.
To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
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:
<!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>
Try it Yourself »
The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.
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.
You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
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>.
You can download the latest version of HTML5shiv from github or reference the CDN version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</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>
Try it Yourself »
Below is a list of the new HTML5 elements, and a description of what they are used for.
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 |
Read more about HTML5 Semantics.
| 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 Attributes |
|---|---|
|
|
Learn all about old and new input types in HTML Input Types.
Learn all about input attributes in HTML Input Attributes.
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.
| Tag | Description |
|---|---|
| <canvas> | Draw graphics, on the fly, via scripting (usually JavaScript) |
| <svg> | Draw scalable vector graphics |
Read more about HTML5 Canvas.
Read more about HTML5 SVG.
| 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 |
Read more about HTML5 Video.
Read more about HTML5 Audio.
Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
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.
| 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.
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:
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.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Try it Yourself »
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:
<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>
Try it Yourself »
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.
Example for a newspaper: The sport articles in the sport section, may have a technical section in each article.
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:
<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>
Try it Yourself »
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.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Try it Yourself »
The <nav> element defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Try it Yourself »
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.
<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>
Try it Yourself »
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:
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Try it Yourself »
The <img> element defines the image, the <figcaption> element defines the caption.
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."
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 |
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.
You can migrate from XHTML to HTML5, using the same recipe.
| Typical HTML4 | Typical HTML5 |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <article> |
| <div id="footer"> | <footer> |
<!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>
<div id="footer">
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Try it Yourself »
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:
<!DOCTYPE html>
Try it Yourself »
Change the encoding information:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
to HTML5 encoding:
<meta charset="utf-8">
Try it Yourself »
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:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Try it Yourself »
Read more about the HTML5Shiv in HTML5 Browser Support.
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>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Try it Yourself »
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:
<article>
<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>
Try it Yourself »
<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>
Try it Yourself »
<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>
Try it Yourself »
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.
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.
Always keep your code tidy, clean, and well-formed.
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>
HTML5 allows mixing uppercase and lowercase letters in element names.
We recommend using lowercase element names because:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
<Section>
<p>This is a paragraph.</p>
</SECTION>
<section>
<p>This is a paragraph.</p>
</section>
In HTML5, you don't have to close all elements (for example the <p> element).
We recommend closing all HTML elements.
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
In HTML5, it is optional to close empty elements.
<meta
charset="utf-8">
<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!
HTML5 allows mixing uppercase and lowercase letters in attribute names.
We recommend using lowercase attribute names because:
<div CLASS="menu">
<div
class="menu">
HTML5 allows attribute values without quotes.
We recommend quoting attribute values because:
This will not work, because the value contains spaces:
<table class=table striped>
<table class=striped>
<table
class="striped">
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.
<img
src="html5.gif">
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.
<link
rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="styles.css">
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.
Try to avoid code lines longer than 80 characters.
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:
<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>
<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>
<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>
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
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>
Try it Yourself »
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).
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>
Try it Yourself »
We do not recommend omitting the <head> tag.
Omitting tags is unfamiliar to web developers. It needs time to be established as a guideline.
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>
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.
Short comments should be written on one line, like this:
<!-- This is a comment -->
Comments that spans more than one line, should be written like this:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Long comments are easier to observe if they are indented two spaces.
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;
}
Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js">
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")
Try it Yourself »
Visit the JavaScript Style Guide.
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.
HTML files should have a .html or .htm extension.
CSS files should have a .css extension.
JavaScript files should have a .js extension.
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.
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.
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.
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.
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 |
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>
Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Try it Yourself »
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);
Try it Yourself »
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);
Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
Try it Yourself »
To learn all about HTML <canvas>, Visit our full HTML Canvas Tutorial.
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
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 |
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Try it Yourself »
<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>
Try it Yourself »
<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>
Try it Yourself »
<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>
Try it Yourself »
<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>
Try it Yourself »
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.
The table below shows some important differences between Canvas and SVG:
| Canvas | SVG |
|---|---|
|
|
To learn more about SVG, please read our SVG Tutorial.
Google Maps allows you to display maps on your web page:
To demonstrate how to add a Google Map to a web page, we will use a basic HTML page:
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
Try it Yourself »
Set the size of the map:
<div id="map" style="width:400px;height:400px">
Try it Yourself »
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);
}
Try it Yourself »
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).
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:
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Try it Yourself »
Go to our Google Maps Tutorial to learn more about Google Maps.
Multimedia on the web is sound, music, videos, movies, and animations.
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.
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 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.
 |
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 |
MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be 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 .ram |
RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers. |
| Flash | .swf .flv |
Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. |
| 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 or MP4 |
.mp4 | MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. |
Only MP4, WebM, and Ogg video are supported by the HTML5 standard.
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 |
MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC 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 .ram |
RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web 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.
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.
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 |
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>
Try it Yourself »
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.
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>
Try it Yourself »
The autoplay attribute does not work in mobile devices like iPad and iPhone.
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 |
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
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.
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.
| 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 |
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.
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 |
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>
Try it Yourself »
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.
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 |
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
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.
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
The purpose of a plug-in is to extend the functionality of a web browser.
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.
To display video and audio: Use the <video> and <audio> tags.
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>
Try it Yourself »
The <object> element can also be used to include HTML in HTML:
<object width="100%" height="500px" data="snippet.html"></object>
Try it Yourself »
Or images if you like:
<object data="audi.jpeg"></object>
Try it Yourself »
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">
Try it Yourself »
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:
<embed width="100%" height="500px" src="snippet.html">
Try it Yourself »
Or images if you like:
<embed src="audi.jpeg">
Try it Yourself »
The easiest way to play videos in HTML, is to use YouTube.
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 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.
To play your video on a web page, do the following:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Try it Yourself »
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.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
Try it Yourself »
A comma separated list of videos to play (in addition to the original URL).
Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>
Try it Yourself »
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>
Try it Yourself »
Note: YouTube <object> and <embed> were deprecated from January 2015. You should migrate your videos to use <iframe> instead.
<object width="420" height="315"
data="https://www.youtube.com/embed/XGSy3_Czz8k">
</object>
Try it Yourself »
<embed width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
Try it Yourself »
The HTML Geolocation API is used to locate a 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.
Note: Geolocation is most accurate for devices with GPS, like iPhone.
The numbers in the table specify the first browser version that fully supports Geolocation.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.
The getCurrentPosition() method is used to return the user's position.
The example below returns the latitude and longitude of the user's position:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Try it Yourself »
Example explained:
The example above is a very basic Geolocation script, with no error handling.
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;
}
}
Try it Yourself »
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+"'>";
}
Try it Yourself »
Google Map Script
How to show an interactive Google Map with a marker, zoom and drag options.
This page has demonstrated how to show a user's position on a map.
Geolocation is also very useful for location-specific information, like:
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) |
The Geolocation object also has other interesting methods:
The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Try it Yourself »
Drag the W3Schools image into the rectangle.
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.
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 |
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>
Try it Yourself »It might seem complicated, but lets go through all the different parts of a drag and drop event.
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true">
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").
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()
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:
How to drag (and drop) an image back and forth between two <div> elements:
HTML web storage; better than cookies.
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.
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 provides two objects for storing data on the client:
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 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");
Try it Yourself »
Example explained:
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).";
Try it Yourself »
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:
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.";
Try it Yourself »
A web worker is a JavaScript running in the background, without affecting the performance of the page.
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.
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 |
The example below creates a simple web worker that count numbers in the background:
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..
}
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.
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.
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();
If you set the worker variable to undefined, after it has been terminated, you can reuse the code:
w = undefined;
We have already seen the Worker code in the .js file. Below is the code for the HTML page:
<!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 startWorker()
{
if(typeof(Worker) !== "undefined")
{
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else
{
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Try it Yourself »
Since web workers are in external files, they do not have access to the following JavaScript objects:
Server-Sent Events allow a web page to get updates from a server.
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.
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 |
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>";
};
Try it Yourself »
Example explained:
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..
}
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:
In the examples above we used the onmessage event to get messages. But other events are also available:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |
HTML document
HTML headings
HTML paragraphs
HTML links
HTML images
The title attribute
The href attribute
The width and height attributes
The alt attribute
Attribute without quotes
Attribute without quotes does not work
HTML headings
HTML horizontal rules
HTML head
HTML paragraphs
More HTML paragraphs
The use of line breaks in HTML
Poem problems (some problems with HTML formatting)
How to control the line breaks and spaces with the <pre> tag
HTML styles
HTML background color
HTML text color
HTML text font
HTML text size
HTML text alignment
Bold formatting using the <b> element
Strong formatting using the <strong> element
Italic formatting using the <i> element
Emphasized formatting using the <em> element
Small formatting using the <small> element
Marked formatting using the <mark> element
Marked deleted using the <del> element
Marked inserted using the <ins> element
Marked deleted and inserted using <del> and <ins>
Subscript formatting using the <sub> element
Superscript formatting using the <sup> element
Formatting short quotations with the <q> element.
Formatting quoted sections with the <blockquote> element.
Formatting document author/owner information with the <address> element
Formatting abbreviations and acronyms the <abbr> element
Formatting work title with the <cite> element
Formatting text direction with the <bdo> element
Hidden comments
Conditional comments
Comments for debugging
HTML with inline CSS
HTML with internal CSS
HTML with external CSS
HTML with CSS fonts
HTML with CSS using the id attribute
HTML with CSS using the class attribute
HTML and CSS borders
HTML and CSS padding
HTML and CSS margin
HTML and CSS full demo
Linking, using an absolute URL
Linking, using a relative URL
Changing the color of links
Removing the underline from links
Changing the target of a link
An image as a link
Creating a bookmark link
A link that breaks out of a frame
A mailto link
A mailto link with subject
The Mountain
An image height and width using attributes
An image height and width using CSS
An image height and width using both
An image in another folder
An image with a broken link
An image on another server
Using an image as a link
A moving image
An image map with clickable regions
A floating image
Basic HTML tables
A table with borders
A table with collapsed borders
A table with cell padding
A table with headings
A table with left-aligned headings
Horizontal/Vertical table headings
A table with a caption
Table cells that span more than one column
Table cells that span more than one row
A table with cell spacing
A table with HTML tags inside
Tables with different style using id I
Tables with different style using id II
Tables with different style using class I
Tables with different style using class II
An unordered list (default)
An unordered list with disc bullets
An unordered list with circle bullets
An unordered list with square bullets
An unordered list without bullets
An ordered list (default)
An ordered list with numbers
An ordered list with letters
An ordered list with lowercase letters
An ordered list with roman numbers
An ordered list with lowercase roman numbers
A description list
A nested list I
A nested list II
A horizontal list
A horizontal list menu
Styling <div> elements
Styling <span> elements
Classing <div> elements I
Classing <div> elements II
Classing <span> elements
Layout using float
Layout using flexbox
Layout using flexbox 2
Layout using flexbox 3
Inline frame (a frame inside an HTML page)
A valid HTML document with no <html> <body, and <head>
A valid HTML document with no <head> element
The <title> element defines the document title
The <style> element contains style information
The <link> element defines a relationship to an external resource
The <meta> element defines special meta information
The <script> element defines client-side JavaScripts
The <base> element defines the base URL for all URLs
Insert a script
Use of the <noscript> tag
Keyboard input formatting using the <kbd> element
Computer output formatting using the <samp> element
Programming code formatting using the <code> element
Programming code formatting preserving whitespace and line-breaks
Variable formatting using the <var> element
Form with text input
Form with radio button input
Form with text fields and a submit button
Form with a text fields without a name attribute
Grouping Form Data
A simple drop-down list
A drop-down list with a pre-selected value
A textarea (a multi-line text input field)
An input button
Using the <datalist> Element
Using the <output> Element
Input type text
Input type password
Input type radio
Input type checkbox
Input type button
Input type number - with restrictions
Input type number - with steps
Input type date - with date picker
Input type date - with restrictions
Input type color - with color picker
Input type range
Input type month
Input type week
Input type time
Input type datetime
Input type datetime-local
Input type email
Input type search
Input type tel
Input type url
The autocomplete attribute
The novalidate attribute
The autofocus_attribute
The form attribute
The formaction attribute
The formenctype attribute
The formmethod attribute
The formnovalidate attribute
The formtarget attribute
The height and width attributes
The list attribute
The min and max attributes
The multiple attribute
The pattern attribute
The placeholder attribute
The required attribute
The step attribute
Draw on the canvas with JavaScript
Draw a line with lineTo()
Draw a circle with arc()
Draw a text with fillText()
Draw a text with strokeText()
Draw a linear gradient
Draw a circular gradient
Draw an image with drawImage()
SVG Circle
SVG Rectangle
SVG Rounded Rectangle
SVG Star
SVG Logo
Play Bunny
Play bear video with controls
Play bear video with autoplay
Play Horse sound with controls
Get geolocation coordinates
Handle geolocation errors
Get geolocation with a map
Get geolocation with Google map script
Get geolocation and watch the position
Store a name permanently
Store a counter permanently
Store a counter for one session
HTML5 drag and drop
HTML5 web workers
HTML5 server sent events
The test contains 40 questions and there is no time limit.
The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 40 points.
Good luck!
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
We have gathered a variety of HTML exercises (with answers) for each HTML Chapter.
Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong.
You will get 1 point for each correct answer. Your score and total score will always be displayed.
Good luck!
Start HTML Exercises The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
W3Schools offers an Online Certification Program.
The perfect solution for busy professionals who need to balance work, family, and career building.
More than 15 000 certificates already issued!
Document Your SkillsKnowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career, or help you to start a new one. Get a CertificateGetting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary. |
|
This tutorial has taught you how to use HTML to create your own web site.
HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display.
For more information on HTML, please take a look at our HTML examples and our HTML reference.
CSS lets you style your HTML pages.
CSS gives you total control of the layout, without messing up the document content.
To learn more about CSS, please visit our CSS tutorial.
JavaScript makes your website more dynamic. A dynamic website can react to events and allow user interaction.
JavaScript is the most popular scripting language on the internet and it works with all major browsers.
If you want to learn more about JavaScript, please visit our JavaScript tutorial.
To make your website available to the world, you must publish it.
For this, you have two options:
An Internet service provider (ISP) is a company that provides services for accessing and using the Internet.
Internet services typically provided by ISPs include Internet access, Internet transit, domain name registration, web hosting, Usenet service, and colocation.
Using an Internet Service Provider (ISP) is the most common option.
Hosting your own website, on your own server, is also an option.
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
= New in HTML5.
| Tag | Description |
|---|---|
| <!--...--> | Defines a comment |
| <!DOCTYPE> | Defines the document type |
| <a> | Defines a hyperlink |
| <abbr> | Defines an abbreviation or an acronym |
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <area> | Defines an area inside an image-map |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <audio> | Defines sound content |
| <b> | Defines bold text |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <body> | Defines the document's body |
| <br> | Defines a single line break |
| <button> | Defines a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Defines a table caption |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Defines additional details that the user can view or hide |
| <dfn> | Represents the defining instance of a term |
| <dialog> | Defines a dialog box or window |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <div> | Defines a section in a document |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <em> | Defines emphasized text |
| <embed> | Defines a container for an external (non-HTML) application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <footer> | Defines a footer for a document or section |
| <form> | Defines an HTML form for user input |
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <h1> to <h6> | Defines HTML headings |
| <head> | Defines information about the document |
| <header> | Defines a header for a document or section |
| <hr> | Defines a thematic change in the content |
| <html> | Defines the root of an HTML document |
| <i> | Defines a part of text in an alternate voice or mood |
| <iframe> | Defines an inline frame |
| <img> | Defines an image |
| <input> | Defines an input control |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <label> | Defines a label for an <input> element |
| <legend> | Defines a caption for a <fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Defines a client-side image-map |
| <mark> | Defines marked/highlighted text |
| <menu> | Defines a list/menu of commands |
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines an embedded object |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <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) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | Defines smaller text |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <span> | Defines a section in a document |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for a <details> element |
| <sup> | Defines superscripted text |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Defines a date/time |
| <title> | Defines a title for the document |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines text that should be stylistically different from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | Defines a video or movie |
| <wbr> | Defines a possible line-break |
HTML attributes give elements meaning and context.
The global attributes below can be used on any HTML element.
= Attribute added in HTML5.
| Attribute | Description |
|---|---|
| accesskey | Specifies a shortcut key to activate/focus an element |
| class | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| contenteditable | Specifies whether the content of an element is editable or not |
| contextmenu | Specifies a context menu for an element. The context menu appears when a user right-clicks on the element |
| data-* | Used to store custom data private to the page or application |
| dir | Specifies the text direction for the content in an element |
| draggable | Specifies whether an element is draggable or not |
| dropzone | Specifies whether the dragged data is copied, moved, or linked, when dropped |
| hidden | Specifies that an element is not yet, or is no longer, relevant |
| id | Specifies a unique id for an element |
| lang | Specifies the language of the element's content |
| spellcheck | Specifies whether the element is to have its spelling and grammar checked or not |
| style | Specifies an inline CSS style for an element |
| tabindex | Specifies the tabbing order of an element |
| title | Specifies extra information about an element |
| translate | Specifies whether the content of an element should be translated or not |
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.
To learn more about programming events, please visit our JavaScript tutorial.
Below are the global event attributes that can be added to HTML elements to define event actions.
= New event attributes in HTML5.
Events triggered for the window object (applies to the <body> tag):
| Attribute | Value | Description |
|---|---|---|
| onafterprint | script | Script to be run after the document is printed |
| onbeforeprint | script | Script to be run before the document is printed |
| onbeforeunload | script | Script to be run when the document is about to be unloaded |
| onerror | script | Script to be run when an error occurs |
| onhashchange | script | Script to be run when there has been changes to the anchor part of the a URL |
| onload | script | Fires after the page is finished loading |
| onmessage | script | Script to be run when the message is triggered |
| onoffline | script | Script to be run when the browser starts to work offline |
| ononline | script | Script to be run when the browser starts to work online |
| onpagehide | script | Script to be run when a user navigates away from a page |
| onpageshow | script | Script to be run when a user navigates to a page |
| onpopstate | script | Script to be run when the window's history changes |
| onresize | script | Fires when the browser window is resized |
| onstorage | script | Script to be run when a Web Storage area is updated |
| onunload | script | Fires once a page has unloaded (or the browser window has been closed) |
Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Fires the moment that the element loses focus |
| onchange | script | Fires the moment when the value of the element is changed |
| oncontextmenu | script | Script to be run when a context menu is triggered |
| onfocus | script | Fires the moment when the element gets focus |
| oninput | script | Script to be run when an element gets user input |
| oninvalid | script | Script to be run when an element is invalid |
| onreset | script | Fires when the Reset button in a form is clicked |
| onsearch | script | Fires when the user writes something in a search field (for <input="search">) |
| onselect | script | Fires after some text has been selected in an element |
| onsubmit | script | Fires when a form is submitted |
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Fires when a user is pressing a key |
| onkeypress | script | Fires when a user presses a key |
| onkeyup | script | Fires when a user releases a key |
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Fires on a mouse click on the element |
| ondblclick | script | Fires on a mouse double-click on the element |
| onmousedown | script | Fires when a mouse button is pressed down on an element |
| onmousemove | script | Fires when the mouse pointer is moving while it is over an element |
| onmouseout | script | Fires when the mouse pointer moves out of an element |
| onmouseover | script | Fires when the mouse pointer moves over an element |
| onmouseup | script | Fires when a mouse button is released over an element |
| onmousewheel | script | Deprecated. Use the onwheel attribute instead |
| onwheel | script | Fires when the mouse wheel rolls up or down over an element |
| Attribute | Value | Description |
|---|---|---|
| ondrag | script | Script to be run when an element is dragged |
| ondragend | script | Script to be run at the end of a drag operation |
| ondragenter | script | Script to be run when an element has been dragged to a valid drop target |
| ondragleave | script | Script to be run when an element leaves a valid drop target |
| ondragover | script | Script to be run when an element is being dragged over a valid drop target |
| ondragstart | script | Script to be run at the start of a drag operation |
| ondrop | script | Script to be run when dragged element is being dropped |
| onscroll | script | Script to be run when an element's scrollbar is being scrolled |
| Attribute | Value | Description |
|---|---|---|
| oncopy | script | Fires when the user copies the content of an element |
| oncut | script | Fires when the user cuts the content of an element |
| onpaste | script | Fires when the user pastes some content in an element |
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).
Tip: Look at our HTML Audio and Video DOM Reference for more information.
| Attribute | Value | Description |
|---|---|---|
| onabort | script | Script to be run on abort |
| oncanplay | script | Script to be run when a file is ready to start playing (when it has buffered enough to begin) |
| oncanplaythrough | script | Script to be run when a file can be played all the way to the end without pausing for buffering |
| oncuechange | script | Script to be run when the cue changes in a <track> element |
| ondurationchange | script | Script to be run when the length of the media changes |
| onemptied | script | Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) |
| onended | script | Script to be run when the media has reach the end (a useful event for messages like "thanks for listening") |
| onerror | script | Script to be run when an error occurs when the file is being loaded |
| onloadeddata | script | Script to be run when media data is loaded |
| onloadedmetadata | script | Script to be run when meta data (like dimensions and duration) are loaded |
| onloadstart | script | Script to be run just as the file begins to load before anything is actually loaded |
| onpause | script | Script to be run when the media is paused either by the user or programmatically |
| onplay | script | Script to be run when the media is ready to start playing |
| onplaying | script | Script to be run when the media actually has started playing |
| onprogress | script | Script to be run when the browser is in the process of getting the media data |
| onratechange | script | Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode) |
| onseeked | script | Script to be run when the seeking attribute is set to false indicating that seeking has ended |
| onseeking | script | Script to be run when the seeking attribute is set to true indicating that seeking is active |
| onstalled | script | Script to be run when the browser is unable to fetch the media data for whatever reason |
| onsuspend | script | Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason |
| ontimeupdate | script | Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) |
| onvolumechange | script | Script to be run each time the volume is changed which (includes setting the volume to "mute") |
| onwaiting | script | Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) |
| Attribute | Value | Description |
|---|---|---|
| onshow | script | Fires when a <menu> element is shown as a context menu |
| ontoggle | script | Fires when the user opens or closes the <details> element |
All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):
For a full overview of HTML colors, visit our colors tutorial.
The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas.
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canvas> and its properties and methods.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
| Property | Description |
|---|---|
| fillStyle | Sets or returns the color, gradient, or pattern used to fill the drawing |
| strokeStyle | Sets or returns the color, gradient, or pattern used for strokes |
| shadowColor | Sets or returns the color to use for shadows |
| shadowBlur | Sets or returns the blur level for shadows |
| shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape |
| shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape |
| Method | Description |
|---|---|
| createLinearGradient() | Creates a linear gradient (to use on canvas content) |
| createPattern() | Repeats a specified element in the specified direction |
| createRadialGradient() | Creates a radial/circular gradient (to use on canvas content) |
| addColorStop() | Specifies the colors and stop positions in a gradient object |
| Property | Description |
|---|---|
| lineCap | Sets or returns the style of the end caps for a line |
| lineJoin | Sets or returns the type of corner created, when two lines meet |
| lineWidth | Sets or returns the current line width |
| miterLimit | Sets or returns the maximum miter length |
| Method | Description |
|---|---|
| rect() | Creates a rectangle |
| fillRect() | Draws a "filled" rectangle |
| strokeRect() | Draws a rectangle (no fill) |
| clearRect() | Clears the specified pixels within a given rectangle |
| Method | Description |
|---|---|
| fill() | Fills the current drawing (path) |
| stroke() | Actually draws the path you have defined |
| beginPath() | Begins a path, or resets the current path |
| moveTo() | Moves the path to the specified point in the canvas, without creating a line |
| closePath() | Creates a path from the current point back to the starting point |
| lineTo() | Adds a new point and creates a line to that point from the last specified point in the canvas |
| clip() | Clips a region of any shape and size from the original canvas |
| quadraticCurveTo() | Creates a quadratic Bézier curve |
| bezierCurveTo() | Creates a cubic Bézier curve |
| arc() | Creates an arc/curve (used to create circles, or parts of circles) |
| arcTo() | Creates an arc/curve between two tangents |
| isPointInPath() | Returns true if the specified point is in the current path, otherwise false |
| Method | Description |
|---|---|
| scale() | Scales the current drawing bigger or smaller |
| rotate() | Rotates the current drawing |
| translate() | Remaps the (0,0) position on the canvas |
| transform() | Replaces the current transformation matrix for the drawing |
| setTransform() | Resets the current transform to the identity matrix. Then runs transform() |
| Property | Description |
|---|---|
| font | Sets or returns the current font properties for text content |
| textAlign | Sets or returns the current alignment for text content |
| textBaseline | Sets or returns the current text baseline used when drawing text |
| Method | Description |
|---|---|
| fillText() | Draws "filled" text on the canvas |
| strokeText() | Draws text on the canvas (no fill) |
| measureText() | Returns an object that contains the width of the specified text |
| Method | Description |
|---|---|
| drawImage() | Draws an image, canvas, or video onto the canvas |
| Property | Description |
|---|---|
| width | Returns the width of an ImageData object |
| height | Returns the height of an ImageData object |
| data | Returns an object that contains image data of a specified ImageData object |
| Method | Description |
|---|---|
| createImageData() | Creates a new, blank ImageData object |
| getImageData() | Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas |
| putImageData() | Puts the image data (from a specified ImageData object) back onto the canvas |
| Property | Description |
|---|---|
| globalAlpha | Sets or returns the current alpha or transparency value of the drawing |
| globalCompositeOperation | Sets or returns how a new image are drawn onto an existing image |
| Method | Description |
|---|---|
| save() | Saves the state of the current context |
| restore() | Returns previously saved path state and attributes |
| createEvent() | |
| getContext() | |
| toDataURL() |
The HTML5 DOM has methods, properties, and events for the <audio> and <video> elements.
These methods, properties, and events allow you to manipulate <audio> and <video> elements using JavaScript.
| Method | Description |
|---|---|
| addTextTrack() | Adds a new text track to the audio/video |
| canPlayType() | Checks if the browser can play the specified audio/video type |
| load() | Re-loads the audio/video element |
| play() | Starts playing the audio/video |
| pause() | Pauses the currently playing audio/video |
| Property | Description |
|---|---|
| audioTracks | Returns an AudioTrackList object representing available audio tracks |
| autoplay | Sets or returns whether the audio/video should start playing as soon as it is loaded |
| buffered | Returns a TimeRanges object representing the buffered parts of the audio/video |
| controller | Returns the MediaController object representing the current media controller of the audio/video |
| controls | Sets or returns whether the audio/video should display controls (like play/pause etc.) |
| crossOrigin | Sets or returns the CORS settings of the audio/video |
| currentSrc | Returns the URL of the current audio/video |
| currentTime | Sets or returns the current playback position in the audio/video (in seconds) |
| defaultMuted | Sets or returns whether the audio/video should be muted by default |
| defaultPlaybackRate | Sets or returns the default speed of the audio/video playback |
| duration | Returns the length of the current audio/video (in seconds) |
| ended | Returns whether the playback of the audio/video has ended or not |
| error | Returns a MediaError object representing the error state of the audio/video |
| loop | Sets or returns whether the audio/video should start over again when finished |
| mediaGroup | Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements) |
| muted | Sets or returns whether the audio/video is muted or not |
| networkState | Returns the current network state of the audio/video |
| paused | Returns whether the audio/video is paused or not |
| playbackRate | Sets or returns the speed of the audio/video playback |
| played | Returns a TimeRanges object representing the played parts of the audio/video |
| preload | Sets or returns whether the audio/video should be loaded when the page loads |
| readyState | Returns the current ready state of the audio/video |
| seekable | Returns a TimeRanges object representing the seekable parts of the audio/video |
| seeking | Returns whether the user is currently seeking in the audio/video |
| src | Sets or returns the current source of the audio/video element |
| startDate | Returns a Date object representing the current time offset |
| textTracks | Returns a TextTrackList object representing the available text tracks |
| videoTracks | Returns a VideoTrackList object representing the available video tracks |
| volume | Sets or returns the volume of the audio/video |
| Event | Description |
|---|---|
| abort | Fires when the loading of an audio/video is aborted |
| canplay | Fires when the browser can start playing the audio/video |
| canplaythrough | Fires when the browser can play through the audio/video without stopping for buffering |
| durationchange | Fires when the duration of the audio/video is changed |
| emptied | Fires when the current playlist is empty |
| ended | Fires when the current playlist is ended |
| error | Fires when an error occurred during the loading of an audio/video |
| loadeddata | Fires when the browser has loaded the current frame of the audio/video |
| loadedmetadata | Fires when the browser has loaded meta data for the audio/video |
| loadstart | Fires when the browser starts looking for the audio/video |
| pause | Fires when the audio/video has been paused |
| play | Fires when the audio/video has been started or is no longer paused |
| playing | Fires when the audio/video is playing after having been paused or stopped for buffering |
| progress | Fires when the browser is downloading the audio/video |
| ratechange | Fires when the playing speed of the audio/video is changed |
| seeked | Fires when the user is finished moving/skipping to a new position in the audio/video |
| seeking | Fires when the user starts moving/skipping to a new position in the audio/video |
| stalled | Fires when the browser is trying to get media data, but data is not available |
| suspend | Fires when the browser is intentionally not getting media data |
| timeupdate | Fires when the current playback position has changed |
| volumechange | Fires when the volume has been changed |
| waiting | Fires when the video stops because it needs to buffer the next frame |
The table below lists all HTML elements, and shows what !DOCTYPE each element appears in.
| HTML 4.01 / XHTML 1.0 | |||||
|---|---|---|---|---|---|
| Tag | HTML5 | Transitional | Strict | Frameset | XHTML 1.1 |
| <a> | Yes | Yes | Yes | Yes | Yes |
| <abbr> | Yes | Yes | Yes | Yes | Yes |
| <acronym> | No | Yes | Yes | Yes | Yes |
| <address> | Yes | Yes | Yes | Yes | Yes |
| <applet> | No | Yes | No | Yes | No |
| <area> | Yes | Yes | Yes | Yes | No |
| <article> | Yes | No | No | No | No |
| <aside> | Yes | No | No | No | No |
| <audio> | Yes | No | No | No | No |
| <b> | Yes | Yes | Yes | Yes | Yes |
| <base> | Yes | Yes | Yes | Yes | Yes |
| <basefont> | No | Yes | No | Yes | No |
| <bdi> | Yes | No | No | No | No |
| <bdo> | Yes | Yes | Yes | Yes | No |
| <big> | No | Yes | Yes | Yes | Yes |
| <blockquote> | Yes | Yes | Yes | Yes | Yes |
| <body> | Yes | Yes | Yes | Yes | Yes |
| <br> | Yes | Yes | Yes | Yes | Yes |
| <button> | Yes | Yes | Yes | Yes | Yes |
| <canvas> | Yes | No | No | No | No |
| <caption> | Yes | Yes | Yes | Yes | Yes |
| <center> | No | Yes | No | Yes | No |
| <cite> | Yes | Yes | Yes | Yes | Yes |
| <code> | Yes | Yes | Yes | Yes | Yes |
| <col> | Yes | Yes | Yes | Yes | No |
| <colgroup> | Yes | Yes | Yes | Yes | No |
| <datalist> | Yes | No | No | No | No |
| <dd> | Yes | Yes | Yes | Yes | Yes |
| <del> | Yes | Yes | Yes | Yes | No |
| <details> | Yes | No | No | No | No |
| <dfn> | Yes | Yes | Yes | Yes | Yes |
| <dialog> | Yes | No | No | No | No |
| <dir> | No | Yes | No | Yes | No |
| <div> | Yes | Yes | Yes | Yes | Yes |
| <dl> | Yes | Yes | Yes | Yes | Yes |
| <dt> | Yes | Yes | Yes | Yes | Yes |
| <em> | Yes | Yes | Yes | Yes | Yes |
| <embed> | Yes | No | No | No | No |
| <fieldset> | Yes | Yes | Yes | Yes | Yes |
| <figcaption> | Yes | No | No | No | No |
| <figure> | Yes | No | No | No | No |
| <font> | No | Yes | No | Yes | No |
| <footer> | Yes | No | No | No | No |
| <form> | Yes | Yes | Yes | Yes | Yes |
| <frame> | No | No | No | Yes | No |
| <frameset> | No | No | No | Yes | No |
| <h1> to <h6> | Yes | Yes | Yes | Yes | Yes |
| <head> | Yes | Yes | Yes | Yes | Yes |
| <header> | Yes | No | No | No | No |
| <hr> | Yes | Yes | Yes | Yes | Yes |
| <html> | Yes | Yes | Yes | Yes | Yes |
| <i> | Yes | Yes | Yes | Yes | Yes |
| <iframe> | Yes | Yes | No | Yes | No |
| <img> | Yes | Yes | Yes | Yes | Yes |
| <input> | Yes | Yes | Yes | Yes | Yes |
| <ins> | Yes | Yes | Yes | Yes | No |
| <kbd> | Yes | Yes | Yes | Yes | Yes |
| <label> | Yes | Yes | Yes | Yes | Yes |
| <legend> | Yes | Yes | Yes | Yes | Yes |
| <li> | Yes | Yes | Yes | Yes | Yes |
| <link> | Yes | Yes | Yes | Yes | Yes |
| <main> | Yes | No | No | No | No |
| <map> | Yes | Yes | Yes | Yes | No |
| <mark> | Yes | No | No | No | No |
| <menu> | Yes | Yes | No | Yes | No |
| <menuitem> | Yes | No | No | No | No |
| <meta> | Yes | Yes | Yes | Yes | Yes |
| <meter> | Yes | No | No | No | No |
| <nav> | Yes | No | No | No | No |
| <noframes> | No | Yes | No | Yes | No |
| <noscript> | Yes | Yes | Yes | Yes | Yes |
| <object> | Yes | Yes | Yes | Yes | Yes |
| <ol> | Yes | Yes | Yes | Yes | Yes |
| <optgroup> | Yes | Yes | Yes | Yes | Yes |
| <option> | Yes | Yes | Yes | Yes | Yes |
| <output> | Yes | No | No | No | No |
| <p> | Yes | Yes | Yes | Yes | Yes |
| <param> | Yes | Yes | Yes | Yes | Yes |
| <pre> | Yes | Yes | Yes | Yes | Yes |
| <progress> | Yes | No | No | No | No |
| <q> | Yes | Yes | Yes | Yes | Yes |
| <rp> | Yes | No | No | No | No |
| <rt> | Yes | No | No | No | No |
| <ruby> | Yes | No | No | No | No |
| <s> | Yes | Yes | No | Yes | No |
| <samp> | Yes | Yes | Yes | Yes | Yes |
| <script> | Yes | Yes | Yes | Yes | Yes |
| <section> | Yes | No | No | No | No |
| <select> | Yes | Yes | Yes | Yes | Yes |
| <small> | Yes | Yes | Yes | Yes | Yes |
| <source> | Yes | No | No | No | No |
| <span> | Yes | Yes | Yes | Yes | Yes |
| <strike> | No | Yes | No | Yes | No |
| <strong> | Yes | Yes | Yes | Yes | Yes |
| <style> | Yes | Yes | Yes | Yes | Yes |
| <sub> | Yes | Yes | Yes | Yes | Yes |
| <summary> | Yes | No | No | No | No |
| <sup> | Yes | Yes | Yes | Yes | Yes |
| <table> | Yes | Yes | Yes | Yes | Yes |
| <tbody> | Yes | Yes | Yes | Yes | No |
| <td> | Yes | Yes | Yes | Yes | Yes |
| <textarea> | Yes | Yes | Yes | Yes | Yes |
| <tfoot> | Yes | Yes | Yes | Yes | No |
| <th> | Yes | Yes | Yes | Yes | Yes |
| <thead> | Yes | Yes | Yes | Yes | No |
| <time> | Yes | No | No | No | No |
| <title> | Yes | Yes | Yes | Yes | Yes |
| <tr> | Yes | Yes | Yes | Yes | Yes |
| <track> | Yes | No | No | No | No |
| <tt> | No | Yes | Yes | Yes | Yes |
| <u> | Yes | Yes | No | Yes | No |
| <ul> | Yes | Yes | Yes | Yes | Yes |
| <var> | Yes | Yes | Yes | Yes | Yes |
| <video> | Yes | No | No | No | No |
| <wbr> | Yes | No | No | No | No |
ANSI was the first official default character set in Windows.
The default character set in HTML 4 was 8859-1.
The default character set in HTML 5 is UTF-8.
For a closer look, visit our Complete HTML Character Set Reference.
| Number | ASCII | ANSI | 8859-1 | 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 |
| 65 | A | A | A | A | Latin capital letter A |
| 66 | B | B | B | B | Latin capital letter B |
| 67 | C | C | C | C | Latin capital letter C |
| 68 | D | D | D | D | Latin capital letter D |
| 69 | E | E | E | E | Latin capital letter E |
| 70 | F | F | F | F | Latin capital letter F |
| 71 | G | G | G | G | Latin capital letter G |
| 72 | H | H | H | H | Latin capital letter H |
| 73 | I | I | I | I | Latin capital letter I |
| 74 | J | J | J | J | Latin capital letter J |
| 75 | K | K | K | K | Latin capital letter K |
| 76 | L | L | L | L | Latin capital letter L |
| 77 | M | M | M | M | Latin capital letter M |
| 78 | N | N | N | N | Latin capital letter N |
| 79 | O | O | O | O | Latin capital letter O |
| 80 | P | P | P | P | Latin capital letter P |
| 81 | Q | Q | Q | Q | Latin capital letter Q |
| 82 | R | R | R | R | Latin capital letter R |
| 83 | S | S | S | S | Latin capital letter S |
| 84 | T | T | T | T | Latin capital letter T |
| 85 | U | U | U | U | Latin capital letter U |
| 86 | V | V | V | V | Latin capital letter V |
| 87 | W | W | W | W | Latin capital letter W |
| 88 | X | X | X | X | Latin capital letter X |
| 89 | Y | Y | Y | Y | Latin capital letter Y |
| 90 | Z | Z | Z | Z | Latin capital letter Z |
| 91 | [ | [ | [ | [ | left square bracket |
| 92 | \ | \ | \ | \ | reverse solidus |
| 93 | ] | ] | ] | ] | right square bracket |
| 94 | ^ | ^ | ^ | ^ | circumflex accent |
| 95 | _ | _ | _ | _ | low line |
| 96 | ` | ` | ` | ` | grave accent |
| 97 | a | a | a | a | Latin small letter a |
| 98 | b | b | b | b | Latin small letter b |
| 99 | c | c | c | c | Latin small letter c |
| 100 | d | d | d | d | Latin small letter d |
| 101 | e | e | e | e | Latin small letter e |
| 102 | f | f | f | f | Latin small letter f |
| 103 | g | g | g | g | Latin small letter g |
| 104 | h | h | h | h | Latin small letter h |
| 105 | i | i | i | i | Latin small letter i |
| 106 | j | j | j | j | Latin small letter j |
| 107 | k | k | k | k | Latin small letter k |
| 108 | l | l | l | l | Latin small letter l |
| 109 | m | m | m | m | Latin small letter m |
| 110 | n | n | n | n | Latin small letter n |
| 111 | o | o | o | o | Latin small letter o |
| 112 | p | p | p | p | Latin small letter p |
| 113 | q | q | q | q | Latin small letter q |
| 114 | r | r | r | r | Latin small letter r |
| 115 | s | s | s | s | Latin small letter s |
| 116 | t | t | t | t | Latin small letter t |
| 117 | u | u | u | u | Latin small letter u |
| 118 | v | v | v | v | Latin small letter v |
| 119 | w | w | w | w | Latin small letter w |
| 120 | x | x | x | x | Latin small letter x |
| 121 | y | y | y | y | Latin small letter y |
| 122 | z | z | z | z | Latin small letter z |
| 123 | { | { | { | { | left curly bracket |
| 124 | | | | | | | | | vertical line |
| 125 | } | } | } | } | right curly bracket |
| 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 |
URL encoding converts characters into a format that can be transmitted over the Internet.
Web browsers request pages from web servers by using a URL.
The URL is the address of a web page, like: https://www.w3schools.com.
URLs can only be sent over the Internet using the ASCII character-set.
Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format.
URL encoding replaces unsafe ASCII characters with a "%" followed by two
hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign or with %20.
If you click the "Submit" button below, 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.
In JavaScript, PHP, and ASP there are functions that can be used to URL encode a string.
In JavaScript you can use the encodeURI() function.
PHP has the rawurlencode() function, and ASP has the Server.URLEncode() function.
Click the "URL Encode" button to see how the JavaScript function encodes the text.
Note: The JavaScript function encodes space as %20.
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 |
|---|---|---|
| space | %20 | %20 |
| ! | %21 | %21 |
| " | %22 | %22 |
| # | %23 | %23 |
| $ | %24 | %24 |
| % | %25 | %25 |
| & | %26 | %26 |
| ' | %27 | %27 |
| ( | %28 | %28 |
| ) | %29 | %29 |
| * | %2A | %2A |
| + | %2B | %2B |
| , | %2C | %2C |
| - | %2D | %2D |
| . | %2E | %2E |
| / | %2F | %2F |
| 0 | %30 | %30 |
| 1 | %31 | %31 |
| 2 | %32 | %32 |
| 3 | %33 | %33 |
| 4 | %34 | %34 |
| 5 | %35 | %35 |
| 6 | %36 | %36 |
| 7 | %37 | %37 |
| 8 | %38 | %38 |
| 9 | %39 | %39 |
| : | %3A | %3A |
| ; | %3B | %3B |
| < | %3C | %3C |
| = | %3D | %3D |
| > | %3E | %3E |
| ? | %3F | %3F |
| @ | %40 | %40 |
| A | %41 | %41 |
| B | %42 | %42 |
| C | %43 | %43 |
| D | %44 | %44 |
| E | %45 | %45 |
| F | %46 | %46 |
| G | %47 | %47 |
| H | %48 | %48 |
| I | %49 | %49 |
| J | %4A | %4A |
| K | %4B | %4B |
| L | %4C | %4C |
| M | %4D | %4D |
| N | %4E | %4E |
| O | %4F | %4F |
| P | %50 | %50 |
| Q | %51 | %51 |
| R | %52 | %52 |
| S | %53 | %53 |
| T | %54 | %54 |
| U | %55 | %55 |
| V | %56 | %56 |
| W | %57 | %57 |
| X | %58 | %58 |
| Y | %59 | %59 |
| Z | %5A | %5A |
| [ | %5B | %5B |
| \ | %5C | %5C |
| ] | %5D | %5D |
| ^ | %5E | %5E |
| _ | %5F | %5F |
| ` | %60 | %60 |
| a | %61 | %61 |
| b | %62 | %62 |
| c | %63 | %63 |
| d | %64 | %64 |
| e | %65 | %65 |
| f | %66 | %66 |
| g | %67 | %67 |
| h | %68 | %68 |
| i | %69 | %69 |
| j | %6A | %6A |
| k | %6B | %6B |
| l | %6C | %6C |
| m | %6D | %6D |
| n | %6E | %6E |
| o | %6F | %6F |
| p | %70 | %70 |
| q | %71 | %71 |
| r | %72 | %72 |
| s | %73 | %73 |
| t | %74 | %74 |
| u | %75 | %75 |
| v | %76 | %76 |
| w | %77 | %77 |
| x | %78 | %78 |
| y | %79 | %79 |
| z | %7A | %7A |
| { | %7B | %7B |
| | | %7C | %7C |
| } | %7D | %7D |
| ~ | %7E | %7E |
| %7F | %7F | |
| ` | %80 | %E2%82%AC |
| | %81 | %81 |
| ‚ | %82 | %E2%80%9A |
| ƒ | %83 | %C6%92 |
| „ | %84 | %E2%80%9E |
| … | %85 | %E2%80%A6 |
| † | %86 | %E2%80%A0 |
| ‡ | %87 | %E2%80%A1 |
| ˆ | %88 | %CB%86 |
| ‰ | %89 | %E2%80%B0 |
| Š | %8A | %C5%A0 |
| ‹ | %8B | %E2%80%B9 |
| Π| %8C | %C5%92 |
| | %8D | %C5%8D |
| Ž | %8E | %C5%BD |
| | %8F | %8F |
| | %90 | %C2%90 |
| ‘ | %91 | %E2%80%98 |
| ’ | %92 | %E2%80%99 |
| “ | %93 | %E2%80%9C |
| ” | %94 | %E2%80%9D |
| • | %95 | %E2%80%A2 |
| – | %96 | %E2%80%93 |
| — | %97 | %E2%80%94 |
| ˜ | %98 | %CB%9C |
| ™ | %99 | %E2%84 |
| š | %9A | %C5%A1 |
| › | %9B | %E2%80 |
| œ | %9C | %C5%93 |
| | %9D | %9D |
| ž | %9E | %C5%BE |
| Ÿ | %9F | %C5%B8 |
| %A0 | %C2%A0 | |
| ¡ | %A1 | %C2%A1 |
| ¢ | %A2 | %C2%A2 |
| £ | %A3 | %C2%A3 |
| ¤ | %A4 | %C2%A4 |
| ¥ | %A5 | %C2%A5 |
| ¦ | %A6 | %C2%A6 |
| § | %A7 | %C2%A7 |
| ¨ | %A8 | %C2%A8 |
| © | %A9 | %C2%A9 |
| ª | %AA | %C2%AA |
| « | %AB | %C2%AB |
| ¬ | %AC | %C2%AC |
| | %AD | %C2%AD |
| ® | %AE | %C2%AE |
| ¯ | %AF | %C2%AF |
| ° | %B0 | %C2%B0 |
| ± | %B1 | %C2%B1 |
| ² | %B2 | %C2%B2 |
| ³ | %B3 | %C2%B3 |
| ´ | %B4 | %C2%B4 |
| µ | %B5 | %C2%B5 |
| ¶ | %B6 | %C2%B6 |
| · | %B7 | %C2%B7 |
| ¸ | %B8 | %C2%B8 |
| ¹ | %B9 | %C2%B9 |
| º | %BA | %C2%BA |
| » | %BB | %C2%BB |
| ¼ | %BC | %C2%BC |
| ½ | %BD | %C2%BD |
| ¾ | %BE | %C2%BE |
| ¿ | %BF | %C2%BF |
| À | %C0 | %C3%80 |
| Á | %C1 | %C3%81 |
| Â | %C2 | %C3%82 |
| Ã | %C3 | %C3%83 |
| Ä | %C4 | %C3%84 |
| Å | %C5 | %C3%85 |
| Æ | %C6 | %C3%86 |
| Ç | %C7 | %C3%87 |
| È | %C8 | %C3%88 |
| É | %C9 | %C3%89 |
| Ê | %CA | %C3%8A |
| Ë | %CB | %C3%8B |
| Ì | %CC | %C3%8C |
| Í | %CD | %C3%8D |
| Î | %CE | %C3%8E |
| Ï | %CF | %C3%8F |
| Ð | %D0 | %C3%90 |
| Ñ | %D1 | %C3%91 |
| Ò | %D2 | %C3%92 |
| Ó | %D3 | %C3%93 |
| Ô | %D4 | %C3%94 |
| Õ | %D5 | %C3%95 |
| Ö | %D6 | %C3%96 |
| × | %D7 | %C3%97 |
| Ø | %D8 | %C3%98 |
| Ù | %D9 | %C3%99 |
| Ú | %DA | %C3%9A |
| Û | %DB | %C3%9B |
| Ü | %DC | %C3%9C |
| Ý | %DD | %C3%9D |
| Þ | %DE | %C3%9E |
| ß | %DF | %C3%9F |
| à | %E0 | %C3%A0 |
| á | %E1 | %C3%A1 |
| â | %E2 | %C3%A2 |
| ã | %E3 | %C3%A3 |
| ä | %E4 | %C3%A4 |
| å | %E5 | %C3%A5 |
| æ | %E6 | %C3%A6 |
| ç | %E7 | %C3%A7 |
| è | %E8 | %C3%A8 |
| é | %E9 | %C3%A9 |
| ê | %EA | %C3%AA |
| ë | %EB | %C3%AB |
| ì | %EC | %C3%AC |
| í | %ED | %C3%AD |
| î | %EE | %C3%AE |
| ï | %EF | %C3%AF |
| ð | %F0 | %C3%B0 |
| ñ | %F1 | %C3%B1 |
| ò | %F2 | %C3%B2 |
| ó | %F3 | %C3%B3 |
| ô | %F4 | %C3%B4 |
| õ | %F5 | %C3%B5 |
| ö | %F6 | %C3%B6 |
| ÷ | %F7 | %C3%B7 |
| ø | %F8 | %C3%B8 |
| ù | %F9 | %C3%B9 |
| ú | %FA | %C3%BA |
| û | %FB | %C3%BB |
| ü | %FC | %C3%BC |
| ý | %FD | %C3%BD |
| þ | %FE | %C3%BE |
| ÿ | %FF | %C3%BF |
The ASCII control characters %00-%1F were originally designed to control hardware devices.
Control characters have nothing to do inside a URL.
| ASCII Character | Description | URL-encoding |
|---|---|---|
| NUL | null character | %00 |
| SOH | start of header | %01 |
| STX | start of text | %02 |
| ETX | end of text | %03 |
| EOT | end of transmission | %04 |
| ENQ | enquiry | %05 |
| ACK | acknowledge | %06 |
| BEL | bell (ring) | %07 |
| BS | backspace | %08 |
| HT | horizontal tab | %09 |
| LF | line feed | %0A |
| VT | vertical tab | %0B |
| FF | form feed | %0C |
| CR | carriage return | %0D |
| SO | shift out | %0E |
| SI | shift in | %0F |
| DLE | data link escape | %10 |
| DC1 | device control 1 | %11 |
| DC2 | device control 2 | %12 |
| DC3 | device control 3 | %13 |
| DC4 | device control 4 | %14 |
| NAK | negative acknowledge | %15 |
| SYN | synchronize | %16 |
| ETB | end transmission block | %17 |
| CAN | cancel | %18 |
| EM | end of medium | %19 |
| SUB | substitute | %1A |
| ESC | escape | %1B |
| FS | file separator | %1C |
| GS | group separator | %1D |
| RS | record separator | %1E |
| US | unit separator | %1F |
The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers.
According to the W3C recommendation you should declare the primary language for each Web page with the lang attribute inside the <html> tag, like this:
<html lang="en">
...
</html>
In XHTML, the language is declared inside the <html> tag as follows:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>
ISO 639-1 defines abbreviations for languages.
In HTML and XHTML they can be used in the lang and xml:lang attributes.
See also: next reference for country codes.
| Language | ISO Code |
|---|---|
| Abkhazian | ab |
| Afar | aa |
| Afrikaans | af |
| Akan | ak |
| Albanian | sq |
| Amharic | am |
| Arabic | ar |
| Aragonese | an |
| Armenian | hy |
| Assamese | as |
| Avaric | av |
| Avestan | ae |
| Aymara | ay |
| Azerbaijani | az |
| Bambara | bm |
| Bashkir | ba |
| Basque | eu |
| Belarusian | be |
| Bengali (Bangla) | bn |
| Bihari | bh |
| Bislama | bi |
| Bosnian | bs |
| Breton | br |
| Bulgarian | bg |
| Burmese | my |
| Catalan | ca |
| Chamorro | ch |
| Chechen | ce |
| Chichewa, Chewa, Nyanja | ny |
| Chinese | zh |
| Chinese (Simplified) | zh-Hans |
| Chinese (Traditional) | zh-Hant |
| Chuvash | cv |
| Cornish | kw |
| Corsican | co |
| Cree | cr |
| Croatian | hr |
| Czech | cs |
| Danish | da |
| Divehi, Dhivehi, Maldivian | dv |
| Dutch | nl |
| Dzongkha | dz |
| English | en |
| Esperanto | eo |
| Estonian | et |
| Ewe | ee |
| Faroese | fo |
| Fijian | fj |
| Finnish | fi |
| French | fr |
| Fula, Fulah, Pulaar, Pular | ff |
| Galician | gl |
| Gaelic (Scottish) | gd |
| Gaelic (Manx) | gv |
| Georgian | ka |
| German | de |
| Greek | el |
| Greenlandic | kl |
| Guarani | gn |
| Gujarati | gu |
| Haitian Creole | ht |
| Hausa | ha |
| Hebrew | he |
| Herero | hz |
| Hindi | hi |
| Hiri Motu | ho |
| Hungarian | hu |
| Icelandic | is |
| Ido | io |
| Igbo | ig |
| Indonesian | id, in |
| Interlingua | ia |
| Interlingue | ie |
| Inuktitut | iu |
| Inupiak | ik |
| Irish | ga |
| Italian | it |
| Japanese | ja |
| Javanese | jv |
| Kalaallisut, Greenlandic | kl |
| Kannada | kn |
| Kanuri | kr |
| Kashmiri | ks |
| Kazakh | kk |
| Khmer | km |
| Kikuyu | ki |
| Kinyarwanda (Rwanda) | rw |
| Kirundi | rn |
| Kyrgyz | ky |
| Komi | kv |
| Kongo | kg |
| Korean | ko |
| Kurdish | ku |
| Kwanyama | kj |
| Lao | lo |
| Latin | la |
| Latvian (Lettish) | lv |
| Limburgish ( Limburger) | li |
| Lingala | ln |
| Lithuanian | lt |
| Luga-Katanga | lu |
| Luganda, Ganda | lg |
| Luxembourgish | lb |
| Manx | gv |
| Macedonian | mk |
| Malagasy | mg |
| Malay | ms |
| Malayalam | ml |
| Maltese | mt |
| Maori | mi |
| Marathi | mr |
| Marshallese | mh |
| Moldavian | mo |
| Mongolian | mn |
| Nauru | na |
| Navajo | nv |
| Ndonga | ng |
| Northern Ndebele | nd |
| Nepali | ne |
| Norwegian | no |
| Norwegian bokmål | nb |
| Norwegian nynorsk | nn |
| Nuosu | ii |
| Occitan | oc |
| Ojibwe | oj |
| Old Church Slavonic, Old Bulgarian | cu |
| Oriya | or |
| Oromo (Afaan Oromo) | om |
| Ossetian | os |
| Pāli | pi |
| Pashto, Pushto | ps |
| Persian (Farsi) | fa |
| Polish | pl |
| Portuguese | pt |
| Punjabi (Eastern) | pa |
| Quechua | qu |
| Romansh | rm |
| Romanian | ro |
| Russian | ru |
| Sami | se |
| Samoan | sm |
| Sango | sg |
| Sanskrit | sa |
| Serbian | sr |
| Serbo-Croatian | sh |
| Sesotho | st |
| Setswana | tn |
| Shona | sn |
| Sichuan Yi | ii |
| Sindhi | sd |
| Sinhalese | si |
| Siswati | ss |
| Slovak | sk |
| Slovenian | sl |
| Somali | so |
| Southern Ndebele | nr |
| Spanish | es |
| Sundanese | su |
| Swahili (Kiswahili) | sw |
| Swati | ss |
| Swedish | sv |
| Tagalog | tl |
| Tahitian | ty |
| Tajik | tg |
| Tamil | ta |
| Tatar | tt |
| Telugu | te |
| Thai | th |
| Tibetan | bo |
| Tigrinya | ti |
| Tonga | to |
| Tsonga | ts |
| Turkish | tr |
| Turkmen | tk |
| Twi | tw |
| Uyghur | ug |
| Ukrainian | uk |
| Urdu | ur |
| Uzbek | uz |
| Venda | ve |
| Vietnamese | vi |
| Volapük | vo |
| Wallon | wa |
| Welsh | cy |
| Wolof | wo |
| Western Frisian | fy |
| Xhosa | xh |
| Yiddish | yi, ji |
| Yoruba | yo |
| Zhuang, Chuang | za |
| Zulu | zu |
When a browser requests a service from a web server, an error might occur.
This is a list of HTTP status messages that might be returned:
| Message: | Description: |
|---|---|
| 100 Continue | The server has received the request headers, and the client should proceed to send the request body |
| 101 Switching Protocols | The requester has asked the server to switch protocols |
| 103 Checkpoint | Used in the resumable requests proposal to resume aborted PUT or POST requests |
| Message: | Description: |
|---|---|
| 200 OK | The request is OK (this is the standard response for successful HTTP requests) |
| 201 Created | The request has been fulfilled, and a new resource is created |
| 202 Accepted | The request has been accepted for processing, but the processing has not been completed |
| 203 Non-Authoritative Information | The request has been successfully processed, but is returning information that may be from another source |
| 204 No Content | The request has been successfully processed, but is not returning any content |
| 205 Reset Content | The request has been successfully processed, but is not returning any content, and requires that the requester reset the document view |
| 206 Partial Content | The server is delivering only part of the resource due to a range header sent by the client |
| Message: | Description: |
|---|---|
| 300 Multiple Choices | A link list. The user can select a link and go to that location. Maximum five addresses |
| 301 Moved Permanently | The requested page has moved to a new URL |
| 302 Found | The requested page has moved temporarily to a new URL |
| 303 See Other | The requested page can be found under a different URL |
| 304 Not Modified | Indicates the requested page has not been modified since last requested |
| 306 Switch Proxy | No longer used |
| 307 Temporary Redirect | The requested page has moved temporarily to a new URL |
| 308 Resume Incomplete | Used in the resumable requests proposal to resume aborted PUT or POST requests |
| Message: | Description: |
|---|---|
| 400 Bad Request | The request cannot be fulfilled due to bad syntax |
| 401 Unauthorized | The request was a legal request, but the server is refusing to respond to it. For use when authentication is possible but has failed or not yet been provided |
| 402 Payment Required | Reserved for future use |
| 403 Forbidden | The request was a legal request, but the server is refusing to respond to it |
| 404 Not Found | The requested page could not be found but may be available again in the future |
| 405 Method Not Allowed | A request was made of a page using a request method not supported by that page |
| 406 Not Acceptable | The server can only generate a response that is not accepted by the client |
| 407 Proxy Authentication Required | The client must first authenticate itself with the proxy |
| 408 Request Timeout | The server timed out waiting for the request |
| 409 Conflict | The request could not be completed because of a conflict in the request |
| 410 Gone | The requested page is no longer available |
| 411 Length Required | The "Content-Length" is not defined. The server will not accept the request without it |
| 412 Precondition Failed | The precondition given in the request evaluated to false by the server |
| 413 Request Entity Too Large | The server will not accept the request, because the request entity is too large |
| 414 Request-URI Too Long | The server will not accept the request, because the URL is too long. Occurs when you convert a POST request to a GET request with a long query information |
| 415 Unsupported Media Type | The server will not accept the request, because the media type is not supported |
| 416 Requested Range Not Satisfiable | The client has asked for a portion of the file, but the server cannot supply that portion |
| 417 Expectation Failed | The server cannot meet the requirements of the Expect request-header field |
| Message: | Description: |
|---|---|
| 500 Internal Server Error | A generic error message, given when no more specific message is suitable |
| 501 Not Implemented | The server either does not recognize the request method, or it lacks the ability to fulfill the request |
| 502 Bad Gateway | The server was acting as a gateway or proxy and received an invalid response from the upstream server |
| 503 Service Unavailable | The server is currently unavailable (overloaded or down) |
| 504 Gateway Timeout | The server was acting as a gateway or proxy and did not receive a timely response from the upstream server |
| 505 HTTP Version Not Supported | The server does not support the HTTP protocol version used in the request |
| 511 Network Authentication Required | The client needs to authenticate to gain network access |
The two most used HTTP methods are: GET and POST.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.
A web browser may be the client, and an application on a computer that hosts a web site may be the server.
Example: A client (browser) submits an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content.
Two commonly used methods for a request-response between a client and server are: GET and POST.
Note that the query string (name/value pairs) is sent in the URL of a GET request:
/test/demo_form.php?name1=value1&name2=value2
Some other notes on GET requests:
Note that the query string (name/value pairs) is sent in the HTTP message body of a POST request:
POST /test/demo_form.php HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
Some other notes on POST requests:
The following table compares the two HTTP methods: GET and POST.
| GET | POST | |
|---|---|---|
| BACK button/Reload | Harmless | Data will be re-submitted (the browser should alert the user that the data are about to be re-submitted) |
| Bookmarked | Can be bookmarked | Cannot be bookmarked |
| Cached | Can be cached | Not cached |
| Encoding type | application/x-www-form-urlencoded | application/x-www-form-urlencoded or multipart/form-data. Use multipart encoding for binary data |
| History | Parameters remain in browser history | Parameters are not saved in browser history |
| Restrictions on data length | Yes, when sending data, the GET method adds the data to the URL; and the length of a URL is limited (maximum URL length is 2048 characters) | No restrictions |
| Restrictions on data type | Only ASCII characters allowed | No restrictions. Binary data is also allowed |
| Security | GET is less secure compared to POST because data sent is part of the URL Never use GET when sending passwords or other sensitive information! |
POST is a little safer than GET because the parameters are not stored in browser history or in web server logs |
| Visibility | Data is visible to everyone in the URL | Data is not displayed in the URL |
The following table lists some other HTTP request methods:
| Method | Description |
|---|---|
| HEAD | Same as GET but returns only HTTP headers and no document body |
| PUT | Uploads a representation of the specified URI |
| DELETE | Deletes the specified resource |
| OPTIONS | Returns the HTTP methods that the server supports |
| CONNECT | Converts the request connection to a transparent TCP/IP tunnel |
The tool below allows you to work out the em sizes from pixels (or vice versa).
Set a default pixel size:
pxConvert PX to EM:
px
Convert EM to PX:
em
Result:
In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table.
Tip: The default font size is usually 16px.
What is the difference between PX, EM and Percent?
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.
Save time by using keyboard shortcuts.
Keyboard shortcuts are often used in modern operating systems and computer software programs.
Using keyboard shortcuts could save you a lot of time.
| Description | Windows | Mac OS |
|---|---|---|
| Edit menu | Alt + E | Ctrl + F2 + F |
| File menu | Alt + F | Ctrl + F2 + E |
| View menu | Alt + V | Ctrl + F2 + V |
| Select all text | Ctrl + A | Cmd + A |
| Copy text | Ctrl + C | Cmd + C |
| Find text | Ctrl + F | Cmd + F |
| Find and replace text | Ctrl + H | Cmd + F |
| New Document | Ctrl + N | Cmd + N |
| Open a file | Ctrl + O | Cmd + O |
| Print options | Ctrl + P | Cmd + P |
| Save file | Ctrl + S | Cmd + S |
| Paste text | Ctrl + V | Cmd + V |
| Cut text | Ctrl + X | Cmd + X |
| Redo text | Ctrl + Y | Shift + Cmd + Z |
| Undo text | Ctrl + Z | Cmd + Z |
| Description | Windows | Mac OS |
|---|---|---|
| Cursor Movement | ||
| Go to the right or to the beginning of next line break | Right Arrow | Right Arrow |
| Go to the left or to the end of previous line break | Left Arrow | Left Arrow |
| Go up one row | Up Arrow | Up Arrow |
| Go down one row | Down Arrow | Down Arrow |
| Go to the beginning of the current line | Home | Cmd + Left Arrow |
| Go to the end of the current line | End | Cmd + Right Arrow |
| Go to the beginning of the document | Ctrl + Home | Cmd + Up Arrow |
| Go to the end of the document | Ctrl + End | Cmd + Down Arrow |
| Move up one frame | Page Up | Fn + Up Arrow |
| Move down one frame | Page Down | Fn + Down Arrow |
| Go to beginning of previous word | Ctrl + Left Arrow | Option + Left Arrow |
| Go to beginning of next word | Ctrl + Right Arrow | Option + Right Arrow |
| Go to beginning of line break | Ctrl + Up Arrow | Cmd + Left Arrow |
| Go to end of line break | Ctrl + Down Arrow | Cmd + Right Arrow |
| Text Selection | ||
| Select characters to the left | Shift + Left Arrow | Shift + Left Arrow |
| Select characters to the right | Shift + Right Arrow | Shift + Right Arrow |
| Select lines upwards | Shift + Up Arrow | Shift + Up Arrow |
| Select lines downwards | Shift + Down Arrow | Shift + Down Arrow |
| Select words to the left | Shift + Ctrl + Left | Shift + Opt + Left |
| Select words to the right | Shift + Ctrl + Right | Shift + Opt + Right |
| Select paragraphs to the left | Shift + Ctrl + Up | Shift + Opt + Up |
| Select paragraphs to the right | Shift + Ctrl + Down | Shift + Opt + Down |
| Select text between the cursor and the beginning of the current line | Shift + Home | Cmd + Shift + Left Arrow |
| Select text between the cursor and the end of the current line | Shift + End | Cmd + Shift + Right Arrow |
| Select text between the cursor and the beginning of the document | Shift + Ctrl + Home | Cmd + Shift + Up Arrow or Cmd + Shift + Fn + Left Arrow |
| Select text between the cursor and the end of the document | Shift + Ctrl + End | Cmd + Shift + Down Arrow or Cmd + Shift + Fn + Right Arrow |
| Select one frame at a time of text above the cursor | Shift + Page Up | Shift + Fn + Up Arrow |
| Select one frame at a time of text below the cursor | Shift + Page Down | Shift + Fn + Down Arrow |
| Select all text | Ctrl + A | Cmd + A |
| Find text | Ctrl + F | Cmd + F |
| Text Formatting | ||
| Make selected text bold | Ctrl + B | Cmd + B |
| Make selected text italic | Ctrl + I | Cmd + I |
| Underline selected text | Ctrl + U | Cmd + U |
| Make selected text superscript | Ctrl + Shift + = | Cmd + Shift + = |
| Make selected text subscript | Ctrl + = | Cmd + = |
| Text Editing | ||
| Delete characters to the left | Backspace | Backspace |
| Delete characters to the right | Delete | Fn + Backspace |
| Delete words to the right | Ctrl + Del | Cmd + Backspace |
| Delete words to the left | Ctrl + Backspace | Cmd + Fn + Backspace |
| Indent | Tab | Tab |
| Outdent | Shift + Tab | Shift + Tab |
| Copy text | Ctrl + C | Cmd + C |
| Find and replace text | Ctrl + H | Cmd + F |
| Paste text | Ctrl + V | Cmd + V |
| Cut text | Ctrl + X | Cmd + X |
| Redo text | Ctrl + Y | Shift + Cmd + Z |
| Undo text | Ctrl + Z | Cmd + Z |
| Description | Windows | Mac OS |
|---|---|---|
| Navigation | ||
| Scroll down a frame | Space or Page Down | Space or Fn + Down Arrow |
| Scroll up a frame | Shift + Space or Page Up | Shift + Space or Fn + Up Arrow |
| Go to bottom of the page | End | Cmd + Down Arrow |
| Go to top of the page | Home | Cmd + Up Arrow |
| Go back | Alt + Left Arrow or Backspace | Cmd + Left Arrow |
| Go forward | Alt + Right Arrow or Shift + Backspace | Cmd + Right Arrow |
| Refresh a webpage | F5 | Cmd + R |
| Refresh a webpage (no cache) | Ctrl + F5 | Cmd + Shift + R |
| Stop | Esc | Esc |
| Toggle full-screen | F11 | Cmd + Shift + F |
| Zoom in | Ctrl + + | Cmd + + |
| Zoom out | Ctrl + - | Cmd + - |
| Zoom 100% (default) | Ctrl + 0 | Cmd + 0 |
| Open homepage | Alt + Home | Option + Home or Option + Fn + Left Arrow |
| Find text | Ctrl + F | Cmd + F |
| Tab / Window Management | ||
| Open a new tab | Ctrl + T | Cmd + T |
| Close current tab | Ctrl + W | Cmd + W |
| Close all tabs | Ctrl + Shift + W | Cmd + Q |
| Close all tabs except the current tab | Ctrl + Alt + F4 | Cmd + Opt + W |
| Go to next tab | Ctrl + Tab | Control + Tab or Cmd + Shift + Right Arrow |
| Go to previous tab | Ctrl + Shift + Tab | Shift + Control + Tab or Cmd + Shift + Left Arrow |
| Go to a specific tab number | Ctrl + 1-8 | Cmd + 1-8 |
| Go to the last tab | Ctrl + 9 | Cmd + 9 |
| Reopen the last closed tab | Ctrl + Shift + T | Cmd + Shift + T |
| Open a new window | Ctrl + N | Cmd + N |
| Close current window | Alt + F4 | Cmd + W |
| Go to next window | Alt + Tab | Cmd + Tab |
| Go to previous window | Alt + Shift + Tab | Cmd + Shift + Tab |
| Reopen the last closed window | Ctrl + Shift + N | |
| Open links in a new tab in the background | Ctrl + Click | Cmd + Click |
| Open links in a new tab in the foreground | Ctrl + Shift + Click | Cmd + Shift + Click |
| Print current webpage | Ctrl + P | Cmd + P |
| Save current webpage | Ctrl + S | Cmd + S |
| Address Bar | ||
| Cycle between toolbar, search bar, and page elements | Tab | Tab |
| Go to browser's address bar | Ctrl + L or Alt + D | Cmd + L |
| Focus and select the browser's search bar | Ctrl + E | Cmd + E / Cmd + K |
| Open the address bar location in a new tab | Alt + Enter | Opt + Enter |
| Display a list of previously typed addresses | F4 | |
| Add "www." to the beginning and ".com" to the end of the text typed in the address bar (e.g., type "w3schools" and press Ctrl + Enter to open "www.w3schools.com") | Ctrl + Enter | Cmd + Enter or Control + Enter |
| Bookmarks | ||
| Open the bookmarks menu | Ctrl + B | Cmd + B |
| Add bookmark for current page | Ctrl + D | Cmd + Opt + B or Cmd + Shift + B |
| Open browsing history | Ctrl + H | Cmd + Shift + H or Cmd + Y |
| Open download history | Ctrl + J | Cmd + J or Cmd + Shift + J |
| Description | Windows | Mac OS |
|---|---|---|
| Save screenshot of the whole screen as file | Cmd + Shift + 3 | |
| Copy screenshot of the whole screen to the clipboard | PrtScr (Print Screen) or Ctrl + PrtScr | Cmd + Ctrl + Shift + 3 |
| Save screenshot of window as file | Cmd + Shift + 4, then Space | |
| Copy screenshot of window to the clipboard | Alt + PrtScr | Cmd + Ctrl + Shift + 4, then Space |
| Copy screenshot of wanted area to the clipboard | Cmd + Ctrl + Shift + 4 | |
| Save screenshot of wanted area as file | Cmd + Shift + 4 |
Note: Due to different keyboard setups, some shortcuts may not be compatible for all users.