HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
With our "Try it Yourself" editor, you can edit the HTML code and 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>
Click on the "Try it Yourself" button to see how it works.
In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!
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>
<!DOCTYPE html> declaration defines
that this document is an HTML5 document<html> element is the root element of an HTML
page<head> element contains meta information about the
HTML page<title> element specifies a title for the
HTML page (which is shown in the browser's title bar or in the page's tab)<body> element defines the
document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.<h1> element defines a large heading<p> element defines a paragraphAn HTML element is defined by a start tag, some content, and an end tag:
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> | none | none |
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A 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: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.
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 | |
| 2014 | |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | |
| 2017 |
This tutorial follows the latest HTML5 standard.
A simple text editor is all you need to learn HTML.
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 that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
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 "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
Write or copy the following HTML code 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).
Tip: 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:
With our free online editor, you can edit the HTML code and view the result in your browser.
It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Click on the "Try it Yourself" button to see how it works.
If you want to create your own website and save your code online, try our free website builder, called :
In this chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned about yet.
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>
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>
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>
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML images 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">
Have you ever seen a Web page and wondered "Hey! How did they do that?"
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
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.
An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
Examples of some HTML elements:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1>
and <p>):
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <html> element is the root element
and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is
a <body>
element:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <body> element defines the
document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there
are two other elements:
<h1> and
<p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
<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>
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and
is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
At W3Schools we always use lowercase tag names.
W3Schools' tag reference contains additional information about these tags and their attributes.
| Tag | Description |
|---|---|
| Defines the root of an HTML document | |
| Defines the document's body | |
| Defines HTML headings |
For a complete list of all available HTML tags, visit our .
HTML attributes provide additional information about HTML elements.
The <a> tag defines a hyperlink. The
href attribute specifies the URL of the page
the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
You will learn more about links in our .
The <img> tag is used to embed an
image in an HTML page. The src attribute
specifies the path to the image to be displayed:
<img src="img_girl.jpg">
There are two ways to specify the URL in the src
attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
The <img> tag should also contain the
width and
height attributes, which specify the width and
height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
The required alt attribute for the <img>
tag specifies an
alternate text for an image, if the image for some reason cannot be displayed.
This can be due to
a slow connection, or an error in the src attribute, or if the user uses a screen
reader.
<img src="img_girl.jpg" alt="Girl
with a jacket">
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl
with a jacket">
You will learn more about images in our .
The style attribute is used to add styles to
an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
You will learn more about styles in our .
You should always include the lang attribute
inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang
attribute. So, the first two characters define the language of the HTML page,
and the last two characters define the country.
The following example specifies English as the language and United States as the country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
You can see all the language codes in our .
The title attribute defines some extra
information about an
element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a paragraph.</p>
The HTML standard does not require lowercase attribute names.
The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.
However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.
At W3Schools we always use lowercase attribute names.
The HTML standard does not require quotes around attribute values.
However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:
<p
title=About W3Schools>
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">
href attribute of
<a> specifies the URL of the page the link goes tosrc attribute of
<img> specifies the path to the image to be displayedwidth and height attributes
of <img> provide size information for imagesalt attribute of
<img> provides an alternate text for an imagestyle attribute is used to add styles
to an element, such as color, font, size, and morelang attribute
of the <html> tag declares the
language of the Web pagetitle attribute defines some extra
information about an elementHTML headings are titles or subtitles that you want to display on a webpage.
HTML 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>
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 often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important
<h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Each HTML heading has a default size. However, you can specify the size for any heading
with the style attribute, using the CSS font-size property:
<h1
style="font-size:60px;">Heading 1</h1>
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
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 display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and 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>
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>
The <hr> tag is an empty tag, which means that it has no end tag.
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
The <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>
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>
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
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 CSS background-color property defines the background color
for an HTML element.
Set 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>
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p
style="background-color:tomato;">This is a paragraph.</p>
</body>
The CSS 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>
The CSS 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>
The CSS 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>
The CSS 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>
style attribute for styling HTML elementsbackground-color for background colorcolor for text colorsfont-family for text fontsfont-size for text sizestext-align for text alignmentHTML contains several elements for defining text with a special meaning.
This text is bold
This text is italic
This is subscript and superscript
Formatting elements were designed to display special types of text:
<b> - Bold text<strong> - Important text<i> - Italic text<em> - Emphasized text<mark> - Marked text<small> - Smaller text<del> - Deleted text<ins> - Inserted text<sub> - Subscript text<sup> - Superscript textThe HTML <b> element defines bold text,
without any extra importance.
<b>This text is bold</b>
The HTML <strong> element defines text
with strong importance. The content inside is typically displayed in bold.
<strong>This text is
important!</strong>
The HTML <i> element defines a part of
text in an alternate voice or mood. The content inside is typically displayed in
italic.
Tip: The <i> tag is often used to indicate a technical term,
a phrase from another language, a thought, a ship name, etc.
<i>This text is italic</i>
The HTML <em> element defines
emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em>
with an emphasis, using verbal stress.
<em>This text is
emphasized</em>
The HTML <small> element defines
smaller text:
<small>This is some smaller text.</small>
The HTML <mark> element defines text
that should be marked or highlighted:
<p>Do not forget to buy <mark>milk</mark> today.</p>
The HTML <del> element defines text
that has been deleted from a document. Browsers will usually strike a line
through deleted text:
<p>My favorite color is <del>blue</del> red.</p>
The HTML <ins> element defines a text
that has been inserted into a document. Browsers will usually underline inserted
text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
The HTML <sub> element defines
subscript text. Subscript text appears half a character below the normal line,
and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:
<p>This
is <sub>subscripted</sub> text.</p>
The HTML <sup> element defines
superscript text. Superscript text appears half a character above the normal
line, and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes, like WWW[1]:
<p>This
is <sup>superscripted</sup> text.</p>
In this chapter we will go through the
<blockquote>,<q>, <abbr>, <address>, <cite>,
and <bdo> HTML elements.
Here is a quote from WWF's website:
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
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 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in
which they live.
</blockquote>
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
The HTML <address> tag defines the contact information for the author/owner of a document
or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic,
and browsers will
always add a line break before and after the <address> element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
The HTML <cite> tag defines the title of a
creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override
the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML comments are not displayed in the browser, but they can help document your 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 start tag, but not in the end 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 code:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph
</p> -->
<p>This is a paragraph too.</p>
You can also hide more than one line. Everything between the <!-- and the -->
will be hidden from the display.
Hide a section of HTML code:
<p>This is a paragraph.</p>
<!--
<p>Look at this cool
image:</p>
<img border="0" src="pic_trulli.jpg"
alt="Trulli">
-->
<p>This is a paragraph too.</p>
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
Comments can be used to hide parts in the middle of the HTML code.
Hide a part of a paragraph:
<p>This <!-- great text --> is a paragraph.</p>
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
In HTML, a color can be specified by using a color name:
HTML supports .
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>
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>
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):
<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>
You will learn more about , and in the next chapters.
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
In HTML, a color can be specified by using a color name:
HTML supports .
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>
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>
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):
<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>
You will learn more about , and in the next chapters.
An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).
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 with a value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
RED
GREEN
BLUE
Shades of gray are often defined using equal values for all three parameters:
RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the RGBA values below:
RED
GREEN
BLUE
ALPHA
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
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 other two (green and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.
To display black, set all color parameters to 00, like this: #000000.
To display white, set all color parameters to ff, like this: #ffffff.
Experiment by mixing the HEX values below:
RED
GREEN
BLUE
Shades of gray are often defined using equal values for all three parameters:
HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).
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 value. 0% is black, and 100% is white.
Experiment by mixing the HSL values below:
HUE
SATURATION
LIGHTNESS
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light), and 100% means full lightness (white).
Shades of gray are often defined by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades:
HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the HSLA values below:
HUE
SATURATION
LIGHTNESS
ALPHA
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!
CSS can be added to HTML documents in 3 ways:
style attribute inside HTML elements<style> element in the <head> section<link>
element to link to an external CSS fileThe most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.
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.
The following example sets the text color of the <h1> element to blue,
and the text color of the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
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.
The following example sets the text color of ALL the <h1> elements
(on that page) to blue, and the text color of ALL the <p> elements to
red. In addition, the page will be displayed with a "powderblue" background
color:
<!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>
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each 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>
The 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 what the "styles.css" file looks like:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
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.
Use of CSS color, font-family and font-size properties:
<!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>
The CSS border property defines a border
around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Use of CSS border property:
p {
border: 2px
solid powderblue;
}
The CSS padding property defines a padding
(space) between the text and the border.
Use of CSS border and padding properties:
p {
border: 2px
solid powderblue;
padding: 30px;
}
The CSS margin property defines a margin
(space) outside the border.
Use of CSS border and margin properties:
p {
border: 2px
solid powderblue;
margin: 50px;
}
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 .
style attribute for inline styling<style> element to define internal CSS<link> element to refer to an external CSS file<head> element to store <style> and <link> elementscolor property for text colorsfont-family property for text fontsfont-size property for text sizesborder property for borderspadding property for space inside the bordermargin property for space outside the borderTip: You can learn much more about CSS in our .
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. A link can be an image or any other HTML element!
The HTML <a> tag defines a hyperlink.
It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a>
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:
Tip: Links can of course be styled with CSS, to get another look!
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in
the same window/tab as it was clicked_blank - Opens the document in a new window or tab_parent - Opens the document in the parent frame_top - Opens the document in the full body of the windowUse target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Both examples above are using an absolute URL (a full web address)
in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
To use an image as a link, just put the <img>
tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Use
mailto: inside the
href attribute to create a link that opens the user's email program (to
let them send a new email):
<a href="mailto:[email protected]">Send email</a>
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Learn more about JavaScript in our .
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Use a full URL to link to a web page:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Link 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 .
<a> element to define a linkhref attribute to define the link addresstarget attribute to define where to open the linked document<img> element (inside <a>)
to use an image as a link
mailto: scheme inside the
href attribute to create a link that opens the user's email program| Tag | Description |
|---|---|
| Defines a hyperlink |
For a complete list of all available HTML tags, visit our .
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. A link can be an image or any other HTML element!
The HTML <a> tag defines a hyperlink.
It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a>
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:
Tip: Links can of course be styled with CSS, to get another look!
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in
the same window/tab as it was clicked_blank - Opens the document in a new window or tab_parent - Opens the document in the parent frame_top - Opens the document in the full body of the windowUse target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Both examples above are using an absolute URL (a full web address)
in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
To use an image as a link, just put the <img>
tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Use
mailto: inside the
href attribute to create a link that opens the user's email program (to
let them send a new email):
<a href="mailto:[email protected]">Send email</a>
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Learn more about JavaScript in our .
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Use a full URL to link to a web page:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Link 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 .
<a> element to define a linkhref attribute to define the link addresstarget attribute to define where to open the linked document<img> element (inside <a>)
to use an image as a link
mailto: scheme inside the
href attribute to create a link that opens the user's email program| Tag | Description |
|---|---|
| Defines a hyperlink |
For a complete list of all available HTML tags, visit our .
An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.
By default, a link will appear like this (in all browsers):
You can change the link state colors, by using CSS:
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:
<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>
A link can also be styled as a button, by using CSS:
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
To learn more about CSS, go to our .
| Tag | Description |
|---|---|
| Defines a hyperlink |
For a complete list of all available HTML tags, visit our .
HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.
First, use the id attribute to create a
bookmark:
<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>
You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
id attribute (id="value") to define bookmarks in a pagehref attribute (href="#value") to link to the bookmark| Tag | Description |
|---|---|
| Defines a hyperlink |
For a complete list of all available HTML tags, visit our .
Images can improve the design and the appearance of a web page.
<img src="pic_trulli.jpg"
alt="Italian Trulli">
<img src="img_girl.jpg"
alt="Girl in a jacket">
<img src="img_chania.jpg"
alt="Flowers in Chania">
The HTML <img> tag is used to embed an
image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding
space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required
attributes:
<img src="url" alt="alternatetext">
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that
moment, that gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in relation
to the web page, otherwise your visitors will get a broken link icon. The broken
link icon and the alt text are shown if the browser cannot find the image.
<img src="img_chania.jpg" alt="Flowers
in Chania">
The required 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">
If a browser cannot find an image, it will display the value of the alt
attribute:
<img src="wrongname.gif" alt="Flowers
in Chania">
Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.
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;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the
image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.
The width, height, and style attributes are
all valid in HTML.
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" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
If you have your images in a sub-folder, you must include the folder
name in the src attribute:
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full)
URL in the src attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
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;">
</a>
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>
Tip: To learn more about CSS Float, read our .
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
<img> element to define an imagesrc attribute to define the URL of the imagealt attribute to define an alternate text for an image, if it cannot be displayedwidth and height attributes
or the CSS width and height
properties to define the size of the imagefloat property to let the image float
to the left or to the rightNote: Loading large images takes time, and can slow down your web page. Use images carefully.
Images can improve the design and the appearance of a web page.
<img src="pic_trulli.jpg"
alt="Italian Trulli">
<img src="img_girl.jpg"
alt="Girl in a jacket">
<img src="img_chania.jpg"
alt="Flowers in Chania">
The HTML <img> tag is used to embed an
image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding
space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required
attributes:
<img src="url" alt="alternatetext">
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that
moment, that gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in relation
to the web page, otherwise your visitors will get a broken link icon. The broken
link icon and the alt text are shown if the browser cannot find the image.
<img src="img_chania.jpg" alt="Flowers
in Chania">
The required 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">
If a browser cannot find an image, it will display the value of the alt
attribute:
<img src="wrongname.gif" alt="Flowers
in Chania">
Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.
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;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the
image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.
The width, height, and style attributes are
all valid in HTML.
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" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
If you have your images in a sub-folder, you must include the folder
name in the src attribute:
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full)
URL in the src attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
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;">
</a>
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>
Tip: To learn more about CSS Float, read our .
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
<img> element to define an imagesrc attribute to define the URL of the imagealt attribute to define an alternate text for an image, if it cannot be displayedwidth and height attributes
or the CSS width and height
properties to define the size of the imagefloat property to let the image float
to the left or to the rightNote: Loading large images takes time, and can slow down your web page. Use images carefully.
| Tag | Description |
|---|---|
| Defines an image | |
| Defines an image map | |
| Defines a clickable area inside an image map | |
| Defines a container for multiple image resources |
For a complete list of all available HTML tags, visit our .
With HTML image maps, you can create clickable areas on an image.
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Here is the HTML source code for the image map above:
<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>
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the clickable areas.
The image is inserted using the <img> tag.
The only difference from other images is that you must
add a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag
# followed by the name of the image map, and is used to create a relationship
between the image and the image map.
Tip: You can use any image as an image map!
Then, add a <map> element.
The <map> element is used to create an image map, and is linked to the image by using the
required name
attribute:
<map name="workmap">
The name attribute must have the same value as the
<img>'s usemap attribute .
Then, add the clickable areas.
A clickable area is defined using an <area> element.
You must define the shape of the clickable area, and you can choose one of these values:
rect - defines a rectangular regioncircle - defines a circular regionpoly - defines a polygonal regiondefault - defines the entire regionYou must also define some coordinates to be able to place the clickable area onto the image.
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates 34,44 is located 34 pixels
from the left margin and 44 pixels from the top:
The coordinates 270,350 is located 270
pixels from the left margin and 350 pixels from the top:
Now we have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page "computer.htm":
To add a circle area, first locate the coordinates of the center of the circle:
337,300
Then specify the radius of the circle:
44 pixels
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
This is the area that becomes clickable and will send the user to the page "coffee.htm":
The shape="poly" contains several coordinate
points, which creates a shape formed with straight lines (a polygon).
This can be used to create any shape.
Like maybe a croissant shape!
How can we make the croissant in the image below become a clickable link?
We have to find the x and y coordinates for all edges of the croissant:
The coordinates come in pairs, one for the x-axis and one for the y-axis:
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
This is the area that becomes clickable and will send the user to the page "croissant.htm":
A clickable area can also trigger a JavaScript function.
Add a click event to the <area> element
to execute a JavaScript function:
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
<map> element to define an image map<area> element to define the clickable areas in the image mapusemap attribute of the
<img> element to point to an image map| Tag | Description |
|---|---|
| Defines an image | |
| Defines an image map | |
| Defines a clickable area inside an image map | |
| Defines a container for multiple image resources |
For a complete list of all available HTML tags, visit our .
A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML style attribute
and the CSS background-image property:
Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
You can also specify the background image in the <style>
element, in the <head>
section:
Specify the background image in the <style>
element:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
If you want the entire page to have a background image, you must
specify the background image on the <body> element:
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, set the background-repeat property
to no-repeat.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
If you want the background image to cover the entire element, you
can set the background-size property to
cover.
Also, to make sure the entire element is always covered, set the
background-attachment property to fixed:
This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
If you want the background image to stretch to fit the entire element, you
can set the background-size property to
100% 100%:
Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
From the examples above you have learned that background images can be styled by using the CSS background properties.
To learn more about CSS background properties, study our .
The HTML <picture> element allows
you to display different pictures for
different devices or screen sizes.
The HTML <picture> element gives web
developers more flexibility in
specifying image resources.
The <picture> element contains one or
more <source> elements, each referring
to different images through the srcset
attribute. This way the browser can choose the image that best
fits the current view and/or device.
Each <source> element has a
media attribute that defines when the image is the
most suitable.
Show different images for different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Note: Always specify an <img> element as the last child
element of the <picture> element. The <img> element is used by browsers that do
not support the <picture> element, or if none of the <source> tags match.
There are two main purposes for the <picture> element:
If you have a small screen or device, it is not necessary to load a large
image file. The browser will use the first <source>
element with matching attribute values, and ignore any of the following
elements.
Some browsers or devices may not support all image formats. By using the
<picture> element, you can add images of all
formats, and the browser will use the first format it recognizes, and ignore any
of the following elements.
The browser will use the first image format it recognizes:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Note: The browser will use the first <source> element with matching attribute
values, and ignore any following <source> elements.
| Tag | Description |
|---|---|
| Defines an image | |
| Defines an image map | |
| Defines a clickable area inside an image map | |
| Defines a container for multiple image resources |
For a complete list of all available HTML tags, visit our .
A favicon is a small image displayed next to the page title in the browser tab.
You can use any image you like as your favicon. You can also create your own favicon on sites like .
Tip: A favicon is a small image, so it should be a simple image with high contrast.
A favicon image is displayed to the left of the page title in the browser tab, like this:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Next, add a <link> element to your "index.html" file,
after the <title> element, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.
The following table shows the file format support for a favicon image:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
<link> element to
insert a favicon| Tag | Description |
|---|---|
| Defines the relationship between a document and an external resource |
For a complete list of all available HTML tags, visit our .
Every web page should have a page title to describe the meaning of the page.
The <title> element adds a title
to your page:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
The title is shown in the browser's title bar:
The title should describe the content and the meaning of the page.
The page title is very important for search engine optimization (SEO). The text is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
So, try to make the title as accurate and meaningful as possible!
| Tag | Description |
|---|---|
| Defines the title of the document |
For a complete list of all available HTML tags, visit our .
HTML tables allow web developers to arrange data into rows and columns.
| 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 |
A table in HTML consists of table cells inside rows and columns.
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Each table cell is defined by a
<td> and a </td> tag.
td
stands for table data.
Everything between <td> and </td> are the content of the table cell.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Each table row starts with a
<tr> and ends with a </tr> tag.
tr
stands for table row.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the
<td> tag:
th
stands for table header.
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements
are bold and centered, but you can change that with CSS.
HTML tables allow web developers to arrange data into rows and columns.
| 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 |
A table in HTML consists of table cells inside rows and columns.
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Each table cell is defined by a
<td> and a </td> tag.
td
stands for table data.
Everything between <td> and </td> are the content of the table cell.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Each table row starts with a
<tr> and ends with a </tr> tag.
tr
stands for table row.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the
<td> tag:
th
stands for table header.
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements
are bold and centered, but you can change that with CSS.
HTML tables can have borders of different styles and shapes.
To add a border, use the CSS border property on
table, th, and
td elements:
table, th, td
{
border: 1px solid black;
}
To avoid having double borders like in the example above, set the CSS border-collapse
property to collapse.
This will make the borders collapse into a single border:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
With the border-radius property, the borders get rounded corners:
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Skip the border around the table by leaving out table from the css selector:
th, td {
border: 1px solid
black;
border-radius: 10px;
}
With the border-style property, you can set the
appearance of the border.
The following values are allowed:
dotted
dashed
solid
double
groove ridge inset outset none
hidden
th, td {
border-style: dotted;
}
With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the
width or height
properties to specify the size of a table, row or column.
To set the width of a table, add the style
attribute to the <table> element:
Set the width of the table to 100%:
<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>
Note: Using a percentage as the size unit for a width means
how wide will this element be compared to its parent element, which in this case
is the <body>
element.
To set the size of a specific column, add the style
attribute on a <th> or
<td> element:
Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">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>
To set the height of a specific row, add the style
attribute on a table row element:
Set the height of the second row to 200 pixels:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML tables can have headers for each column or row, or for many columns/rows.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MON | TUE | WED | THU | FRI | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DECEMBER | ||
|---|---|---|
Table headers are defined with th elements.
Each th element represents a table cell.
<table>
<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>
To use the first column as table headers, define the first cell in each row as a
<th> element:
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
By default, table headers are bold and centered:
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
To left-align the table headers, use the CSS text-align property:
th {
text-align: left;
}
You can have a header that spans over two or more columns.
| Name | Age | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
To do this, use the colspan attribute on the
<th> element:
<table>
<tr>
<th colspan="2">Name</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>
You will learn more about colspan and rowspan in the chapter.
You can add a caption that serves as a heading for the entire table.
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
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>
Note: The <caption> tag
should be inserted immediately after the <table> tag.
HTML tables can adjust the padding inside the cells, and also the space between the cells.
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
th, td
{
padding: 15px;
}
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left,
and padding-right properties:
th, td
{
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS
border-spacing property on the table
element:
table
{
border-spacing:
30px;
}
HTML tables can have cells that span over multiple rows and/or columns.
| NAME | ||
|---|---|---|
| APRIL | ||
|---|---|---|
| 2022 | ||
|---|---|---|
| FIESTA | ||
To make a cell span over multiple columns, use the colspan attribute:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Note: The value of the colspan attribute represents the number of columns to span.
To make a cell span over multiple rows, use the rowspan attribute:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Note: The value of the rowspan attribute represents the number of
rows to span.
Use CSS to make your tables look better.
If you add a background color on every other table row, you will get a nice zebra stripes effect.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
To style every other table row element, use the :nth-child(even)
selector like this:
tr:nth-child(even) {
background-color: #D6EEEE;
}
Note: If you use (odd) instead of
(even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
To make vertical zebra stripes, style every other column, instead of every other row.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Set the :nth-child(even) for table data elements like this:
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Note: Put the :nth-child() selector
on both th and td
elements if you want to have the styling on both headers and regular table
cells.
You can combine the styling from the two examples above and you will have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the border-bottom property to all
tr elements to get horizontal dividers:
tr {
border-bottom: 1px solid #ddd;
}
Use the :hover selector on
tr to highlight table rows on mouse
over:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
tr:hover {background-color: #D6EEEE;}
The <colgroup> element is used to style specific
columns of a table.
If you want to style the two first columns of a table, use the <colgroup>
and <col>
elements.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
The <colgroup> element should be used as a container for the column
specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns that get the style.
The style attribute specifies the style to give the columns.
Note: There is a very limited selection of .
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Note: The <colgroup> tag must be a
child of a <table> element and should be placed
before any other table elements, like <thead>,
<tr>, <td>
etc., but after the <caption> element, if
present.
There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:
property
property
properties
properties
All other CSS properties will have no effect on your tables.
If you want to style more columns with different styles, use more
<col> elements inside the
<colgroup>:
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
If you want
to style columns in the middle of a table, insert a "empty"
<col> element (with no
styles) for the columns before:
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
You can hide columns with the visibility: collapse property:
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
HTML lists allow web developers to group a set of related items in lists.
An unordered HTML list:
An ordered HTML list:
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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>
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>
| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our .
HTML lists allow web developers to group a set of related items in lists.
An unordered HTML list:
An ordered HTML list:
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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>
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>
| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our .
The HTML <ul> tag defines an unordered
(bulleted) list.
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
The CSS list-style-type property is used to define the style of the
list item marker. It can have one of the following values:
| 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>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lists can be nested (list inside list):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: A list item (<li>) can contain
a 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 navigation 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>
Tip: You can learn much more about CSS in our .
<ul> element to define an unordered listlist-style-type property to define the list item marker<li> element to define a list itemfloat:left to display a list horizontally| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our .
The HTML <ol> tag defines an ordered list. An
ordered list can be numerical or alphabetical.
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>
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="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lists can be nested (list inside list):
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Note: A list item (<li>) can contain
a new list, and other HTML elements, like images and links, etc.
<ol> element to define an ordered listtype attribute to define the numbering type<li> element to define a list item| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our .
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The tag defines the description list, the
tag defines the term (name), and the
tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dl> element to define a description list<dt> element to define the description term<dd> element to describe the term in a description list| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our .
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p>
and <div>.
The <p> element defines a paragraph in an
HTML document.
The <div> element defines a division
or a section in an HTML document.
The <p> element is a block-level element.
<p>Hello World</p>
<div>Hello World</div>
Here are the block-level elements in HTML:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<span>Hello World</span>
Here are the inline elements in HTML:
Note: An inline element cannot contain a block-level element!
The <div> element is
often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of
content:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
The <span> element is
an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
<div> element is a block-level
and is often used as a container for other HTML elements<span> element is an inline
container used to mark up a part of a text, or a part of a document| Tag | Description |
|---|---|
| Defines a section in a document (block-level) | |
| Defines a section in a document (inline) |
For a complete list of all available HTML tags, visit our .
The HTML class attribute is
used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
The class attribute is often used to point
to a class name in a style sheet. It can also be used by a JavaScript to access and
manipulate elements with the specific class name.
In the following example we have three <div> elements
with a class attribute with the value of
"city". All of the three <div>
elements will be styled equally according to the .city
style definition in the head section:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
In the following example we have two <span> elements
with a class attribute with the value of
"note". Both <span>
elements will be styled equally according to the .note
style definition in the head section:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our .
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
Create a class named "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
In the following example, the first <h2> element belongs to both the
city class and also to the main class,
and will get the CSS styles from both of the classes:
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Different HTML elements can point to the same class name.
In the following example, both <h2> and <p>
point to the "city" class
and will share the same style:
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:
Click on a button to 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>
Don't worry if you don't understand the code in the example above.
You will learn more about JavaScript in our chapter, or you can study our .
class attribute specifies one or
more class names for an elementclass attribute can be used on any
HTML elementgetElementsByClassName()
methodThe HTML id attribute is used
to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
The id attribute specifies a unique id
for an HTML element. The value of the id
attribute must be unique within the HTML document.
The id attribute is used to point
to a specific style declaration in a style sheet. It is also used by JavaScript to access and
manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the
id name
"myHeader". This <h1>
element will be styled according to the #myHeader
style definition in the head section:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
Note: The id name is case sensitive!
Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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>
Tip: You can learn much more about CSS in our .
HTML bookmarks are used to allow readers to jump to specific parts of a webpage.
Bookmarks can be useful if your page is very long.
To use a bookmark, you must first create it, and then add a link to it.
Then, 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>
The id attribute can also be used by JavaScript to perform
some tasks for that specific element.
JavaScript can access an element with a specific id with the getElementById() method:
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Tip: Study JavaScript in the chapter, or in our .
id attribute is used to specify a unique id
for an HTML elementid
attribute must be unique within the HTML documentid
attribute is used by CSS and JavaScript to style/select a specific elementid
attribute is case sensitiveid
attribute is also used to create HTML bookmarksgetElementById()
methodAn HTML iframe is used to display a web page within a web page.
The HTML <iframe> tag specifies an
inline frame.
An inline frame is used to embed another document within the current HTML document.
<iframe src="url" title="description"></iframe>
Tip: It is a good practice to always include a
title attribute for the <iframe>.
This is used by screen readers to read out what the content of the iframe is.
Use the height and width attributes to specify the
size of the iframe.
The height and width are specified in pixels by default:
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Or you can add the style attribute and use
the CSS height and width
properties:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
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;"
title="Iframe Example"></iframe>
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 red;"
title="Iframe Example"></iframe>
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" title="Iframe
Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<iframe> tag specifies an
inline framesrc
attribute defines the URL of the page to embed
title attribute (for screen readers)height and width attributes specify the
size of the iframeborder:none; to remove the border
around the iframeJavaScript makes HTML pages more dynamic and interactive.
The HTML <script> tag is used to define a client-side script
(JavaScript).
The <script> element either contains script statements, or it points to an
external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript most often uses the
document.getElementById() method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Tip: You can learn much more about JavaScript in our .
Here are some examples of what JavaScript can do:
JavaScript can change content:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
JavaScript can change styles:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
JavaScript can change attributes:
document.getElementById("image").src = "picture.gif";
The HTML <noscript> tag defines an alternate content
to be displayed to users that
have disabled scripts in their browser or have a browser that doesn't support
scripts:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
A file path describes the location of a file in a web site's folder structure.
| Path | Description |
|---|---|
| <img src="picture.jpg"> | The "picture.jpg" file is located in the same folder as the current page |
| <img src="images/picture.jpg"> | The "picture.jpg" file is located in the images folder in the current folder |
| <img src="/images/picture.jpg"> | The "picture.jpg" file is located in the images folder at the root of the current web |
| <img src="../picture.jpg"> | The "picture.jpg" file 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 a file:
<img src="https://www.w3schools.com/images/picture.jpg"
alt="Mountain">
The <img> tag is explained in the chapter: .
A relative file path points to a file relative to the current page.
In the following 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 the following 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 the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:
<img src="../images/picture.jpg"
alt="Mountain">
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
The HTML <head> element
is a container for the following elements:
<title>, <style>,
<meta>, <link>, <script>, and <base>.
The <head> element is a container for metadata (data
about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The <title> element defines the title of the document.
The title must be text-only, and it is shown in the browser's title bar or in
the page's tab.
The <title> element is required in HTML documents!
The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
So, try to make the title as accurate and meaningful as possible!
A simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
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>
The <link> element defines the
relationship between the current document and an external resource.
The <link>
tag is most often used to link to external style sheets:
<link rel="stylesheet" href="mystyle.css">
Tip: To learn all about CSS, visit our .
The <meta> element is typically used
to specify the character set, page description, keywords, author of the document,
and viewport settings.
The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example of <meta> tags:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
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.
The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Tip: To learn all about JavaScript, visit our .
The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an
href or a target attribute present, or both.
There can only be one single <base>
element in a document!
Specify a default URL and a default target for all links on a page:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
<head> element is a container for metadata (data
about data)<head> element is placed between the <html> tag and the <body> tag<title> element is required and
it defines the title of the document<style> element is used to
define style information for a single document<link>
tag is most often used to link to external style sheets<meta> element is typically
used to specify the character set, page description, keywords, author of the
document, and viewport settings<script> element is used to define client-side JavaScripts<base> element specifies the
base URL and/or target for all relative URLs in a page| Tag | Description |
|---|---|
| Defines information about the document | |
| Defines the title of a document | |
| Defines a default address or a default target for all links on a page | |
| Defines the relationship between a document and an external resource | |
| Defines metadata about an HTML document | |
| Defines a client-side script | |
| Defines style information for a document |
For a complete list of all available HTML tags, visit our .
Websites often display content in multiple columns (like a magazine or a newspaper).
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
HTML has several semantic elements that define the different parts of a web page:
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
If you want to create your layout fast, you can use a CSS framework, like or .
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
* no credit card required
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 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.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Learn more about flexbox in our 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.
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Learn more about CSS grids in our chapter.
Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
To create a responsive website, add the following <meta>
tag to all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.
Responsive images are images that scale nicely to fit any browser size.
If the CSS width property is set to 100%, the image will be responsive and scale
up and down:
<img
src="img_girl.jpg" style="width:100%;">
Notice that in the example above, the image can be scaled up to be larger than its original size.
A better solution, in many cases, will be to use the max-width property instead.
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;">
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 changes 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>
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>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
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 stack 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 screen and (max-width: 800px) {
.left,
.main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Tip: To learn more about Media Queries and Responsive Web Design, read our .
A responsive web page should look good on large desktop screens and on small mobile phones.
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
* no credit card required
All popular CSS Frameworks offer responsive design.
They are free, and easy to use.
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.
W3.CSS is smaller and faster than similar CSS frameworks.
W3.CSS is designed to be independent of jQuery or any other JavaScript library.
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>
To learn more about W3.CSS, read our .
Another popular CSS framework is Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div
class="container mt-5">
<div class="row">
<div
class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div
class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div
class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
To learn more about Bootstrap, go to our .
HTML contains several elements for defining user input and computer code.
<code>
x = 5;
y = 6;
z = x + y;
</code>
The HTML <kbd> element is used
to define keyboard input. The content inside is displayed in the browser's
default monospace font.
Define some text as keyboard input in a document:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
The HTML <samp> element is used to
define sample output from a computer program. The content inside is displayed in
the browser's default monospace font.
Define some text as sample output from a computer program in a document:
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to
continue</samp></p>
Result:
File not found.
Press F1 to continue
The HTML <code> element is used
to define a piece of computer code. The content inside is displayed in the
browser's default monospace font.
Define some text as computer code in a document:
<code>
x = 5;
y = 6;
z = x + y;
</code>
Result:
x = 5;
y = 6;
z = x + y;
Notice that the <code> element does not preserve extra whitespace and line-breaks.
To fix this, you can put the <code> element inside a <pre> element:
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
Result:
x = 5;
y = 6;
z = x + y;
The HTML <var> element is used
to define a variable in programming or in a mathematical expression. The
content inside is typically displayed in italic.
Define some text as variables in a document:
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var>
is the base, and <var>h</var> is the vertical height.</p>
Result:
<kbd> element defines
keyboard input<samp> element defines
sample output from a computer program<code> element defines a piece of computer code<var> element defines a variable in programming or in a mathematical expression<pre> element defines
preformatted textSemantic 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.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page:
The <section> element defines a section in a document.
According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."
Examples of where a <section> element can be used:
A web page could normally be split into sections for introduction, content, and contact information.
Two sections in a document:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
Examples of where the <article> element can be used:
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Use CSS to style the <article> element:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
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, you will find HTML pages with <section> elements
containing <article> elements, and <article> elements containing <section> elements.
The <header> element represents a container for introductory content or
a set of navigational links.
A <header> element typically contains:
Note: You can have several <header> elements in one
HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
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>
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
You can have several <footer> elements in one document.
A footer section in a document:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
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 blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
A set 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>
The <aside> element defines some content aside from the content it is
placed in (like a sidebar).
The <aside> content should be
indirectly related to the surrounding content.
Display some content aside from the content it is placed in:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Use CSS to style the <aside> element:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or
as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."
Below is a list of some of the semantic elements in HTML.
| Tag | Description |
|---|---|
| Defines independent, self-contained content | |
| Defines content aside from the page content | |
| Defines additional details that the user can view or hide | |
| Defines a caption for a <figure> element | |
| Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. | |
| Defines a footer for a document or section | |
| Specifies a header for a document or section | |
| Specifies the main content of a document | |
| Defines marked/highlighted text | |
| Defines navigation links | |
| Defines a section in a document | |
| Defines a visible heading for a <details> element | |
| Defines a date/time |
For a complete list of all available HTML tags, visit our .
A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
Here are some guidelines and tips for creating good HTML code.
Always declare the document type as the first line in your document.
The correct document type for HTML is:
<!DOCTYPE html>
HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
<body>
<p>This is a paragraph.</p>
</body>
<BODY>
<P>This is a paragraph.</P>
</BODY>
In HTML, you do not have to close all elements (for example the <p> element).
However, we strongly recommend closing all HTML elements, like this:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
<table
class="striped">
<table class=striped>
This will not work, because the value contains spaces:
<table class=table striped>
Always specify the alt attribute for images. This attribute is important if the image
for some reason cannot be displayed.
Also, always define the width and
height of images. This reduces flickering, because the browser can reserve space for
the image before loading.
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
<img
src="html5.gif">
HTML 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 NOT convenient to scroll right and left to read the HTML code.
Try to avoid too long code lines.
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
<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.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</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.</p>
<h2>London</h2><p>London
is the capital city of England. It is the most populous city in the United
Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital
of France. The Paris area is one of the largest population centers in Europe.</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>
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
The <title> element is required in HTML.
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
So, try to make the title as accurate and meaningful as possible:
<title>HTML
Style Guide and Coding Conventions</title>
An HTML page will validate without the <html> and
<body> tags:
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
However, we strongly recommend to always add the <html> and
<body> tags!
Omitting <body> can produce errors in older browsers.
Omitting <html> and <body>
can also crash DOM and XML software.
The HTML <head> tag can also be omitted.
Browsers will add all elements before <body>, to a default <head>
element.
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
However, we recommend using the <head> tag.
In HTML, it is optional to close empty elements.
<meta
charset="utf-8">
<meta charset="utf-8" />
If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
You should always include the lang attribute
inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
To ensure proper interpretation and correct search engine indexing, both the language and
the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
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 with two spaces.
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
.
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.
Reserved characters in HTML must be replaced with character 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
entity numbers is good.
A commonly used entity 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 browsers from truncating spaces in HTML pages.
If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the character entity.
Tip: The non-breaking hyphen () is used to define a hyphen character (‑) that does not break into a new line.
| Result | Description | Entity Name | Entity Number | Try it |
|---|---|---|---|---|
| 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 | Try it |
|---|---|---|---|---|
| ̀ | a | à | à | |
| ́ | a | á | á | |
| ̂ | a | â | â | |
| ̃ | a | ã | ã | |
| ̀ | O | Ò | Ò | |
| ́ | O | Ó | Ó | |
| ̂ | O | Ô | Ô | |
| ̃ | O | Õ | Õ |
You will see more HTML symbols in the next chapter of this tutorial.
Symbols that are not present on your keyboard can also be added by using entities.
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.
Display the euro sign, €, with an entity name, a decimal, and a hexadecimal value:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
| Char | Number | Entity | Description | Try it |
|---|---|---|---|---|
| ∀ | ∀ | ∀ | 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 | Try it |
|---|---|---|---|---|
| Α | Α | Α | 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 | Try it |
|---|---|---|---|---|
| © | © | © | 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 |
Emojis are characters from the UTF-8 character set: 😄 😍 💗
Emojis look like images, or icons, but they are not.
They are letters (characters) from the UTF-8 (Unicode) character set.
UTF-8 covers almost all of the characters and symbols in the world.
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 charset="UTF-8">
If not specified, UTF-8 is the default character set in HTML.
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
The <meta charset="UTF-8"> element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).
Emojis are also characters from the UTF-8 alphabet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
| Emoji | Value | Try it |
|---|---|---|
| 🗻 | 🗻 | |
| 🗼 | 🗼 | |
| 🗽 | 🗽 | |
| 🗾 | 🗾 | |
| 🗿 | 🗿 | |
| 😀 | 😀 | |
| 😁 | 😁 | |
| 😂 | 😂 | |
| 😃 | 😃 | |
| 😄 | 😄 | |
| 😅 | 😅 |
For a full list, please go to our .
To display an HTML page correctly, a web browser must know which character set to use.
ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8.
ANSI (Windows-1252) was the original Windows character set. ANSI is identical to ISO-8859-1, except that ANSI has 32 extra characters.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
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 charset="UTF-8">
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.
ISO-8859-1 is identical to ASCII for the values from 0 to 127.
ISO-8859-1 does not use the values from 128 to 159.
ISO-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 .
A URL is another word for a web address.
A URL can be composed of words (e.g. w3schools.com), or an Internet Protocol (IP) address (e.g. 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 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 . 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 .
XHTML is a stricter, more XML-based version of HTML.
XML is a markup language where all documents must be marked up correctly (be "well-formed").
XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling.
If you want to study XML, please read our .
An XHTML document must have an XHTML <!DOCTYPE> declaration.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
Here is an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
In XHTML, elements must always be properly nested within each other, like this:
<b><i>Some
text</i></b>
<b><i>Some
text</b></i>
In XHTML, elements must always be closed, like this:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is a paragraph
<p>This is another paragraph
In XHTML, empty elements must always be closed, like this:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
In XHTML, element names must always be in lowercase, like this:
<body>
<p>This is a paragraph</p>
</body>
<BODY>
<P>This is a paragraph</P>
</BODY>
In XHTML, attribute names must always be in lowercase, like this:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
In XHTML, attribute values must always be quoted, like this:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
In XHTML, attribute minimization is forbidden:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The HTML <form> element is used to
create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio
buttons, submit buttons, etc.
All the different form elements are covered in this chapter: .
The HTML <input> element is the most
used form element.
An <input> element can be displayed in
many ways, depending on the type
attribute.
Here are some examples:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
All the different input types are covered in this chapter: .
The <input type="text"> defines a single-line input field for
text input.
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how the HTML code above will be displayed in a browser:
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
Notice the use of the <label> element in the
example above.
The <label> tag defines a label for many
form elements.
The <label> element is useful for
screen-reader users, because the screen-reader will read out loud the label when
the user focuses on the input element.
The <label> element also helps users who have
difficulty clicking on very small regions (such as radio buttons or checkboxes)
- because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
The for attribute of the <label> tag should
be equal to the id attribute of the <input>
element to bind them together.
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
A form with radio buttons:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action
attribute.
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
This chapter describes the different attributes for the HTML <form> element.
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.
In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data:
On submit, send form data to "action_page.php":
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Tip: If the action attribute is omitted, the action is set to the current page.
The target attribute specifies where to
display the response that is received after submitting the form.
The target attribute can have one of the
following values:
| Value | Description |
|---|---|
| _blank | The response is displayed in a new window or tab |
| _self | The response is displayed in the current window |
| _parent | The response is displayed in the parent frame |
| _top | The response is displayed in the full body of the window |
| framename | The response is displayed in a named iframe |
The default value is _self which means that
the response will open in the current window.
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
The method attribute specifies the HTTP
method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get")
or as HTTP post transaction (with method="post").
The default HTTP method when submitting form data is GET.
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
Notes on GET:
Notes on POST:
Tip: Always use POST if the form data contains sensitive or personal information!
The autocomplete attribute specifies whether
a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
A form with autocomplete on:
<form action="/action_page.php" autocomplete="on">
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>
This chapter describes all the different HTML form elements.
The HTML <form> element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type
attribute.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
All the different values of the type
attribute are covered in the next chapter:
.
The <label> element defines a label for
several
form elements.
The <label> element is useful for
screen-reader users, because the screen-reader will read out loud the label when
the user focus on the input element.
The <label> element also help users who have
difficulty clicking on very small regions (such as radio buttons or checkboxes)
- because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
The for attribute of the <label> tag should
be equal to the id attribute of the <input>
element to bind them together.
The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> element 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>
Use the size attribute to specify the number of visible values:
<label for="cars">Choose a car:</label>
<select id="cars" 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>
Use the multiple attribute to allow the user to select more than one value:
<label for="cars">Choose a car:</label>
<select id="cars" 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>
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>
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>
The <button> element defines a clickable
button:
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:
Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.
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>Personalia:</legend>
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
This is how the HTML code above will be displayed in a browser:
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>
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>
This chapter describes the different types for the HTML <input> element.
Here are the different input types you can use in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">Tip: The default value of the type attribute
is
"text".
<input type="text"> defines a
single-line text input field:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how the HTML code above will be displayed in a browser:
First name:<input type="password"> defines a password field:
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
This is how the HTML code above will be displayed in a browser:
Username: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">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
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">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
<input type="reset"> defines a reset button
that will reset all form values to their default values:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
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:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
This is how the HTML code above will be displayed in a browser:
<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" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
<input type="button"> defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:
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.
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
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.
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
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.
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
The <input type="image">
defines an image as a submit button.
The path to the image is specified in the src attribute.
<form>
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form>
The <input type="file">
defines a file-select field and a "Browse" button for file uploads.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
The <input type="hidden">
defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
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.
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
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:
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| 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:
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
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:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
The <input type="tel"> is used for input fields that should contain a telephone number.
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
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.
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
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.
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
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.
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
This chapter describes the different attributes for the HTML <input> element.
The input value attribute specifies an initial value for an input field:
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
A read-only input field:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
A disabled input field:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
The input size attribute specifies the
visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute
works with the following input types: text, search, tel, url, email, and
password.
Set a width for an input field:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
The input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the
specified number of characters. However, this attribute does not provide any feedback.
So, if you want to alert the user,
you must write JavaScript code.
Set a maximum length for an input field:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
The input min and max attributes specify the minimum and maximum values for an
input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
The input multiple attribute specifies that the user is allowed to enter more than one value in
an input field.
The multiple attribute works with the following input types: email, and file.
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
The input pattern attribute specifies a regular expression that the
input field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text,
date, search, url, tel, email, and password.
Tip: Use the global attribute to describe the pattern to help the user.
Tip: Learn more about in our JavaScript tutorial.
An input field that can contain only three letters (no numbers or special characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
The input placeholder attribute specifies
a short hint that describes the expected value of an input field (a sample value or a short description of the
expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
A required input field:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
The input step attribute specifies the legal number intervals for an
input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!
The input autofocus attribute specifies that
an input field should automatically get focus when the page loads.
Let the "First name" input field automatically get focus when the page loads:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The input height and width attributes specify the height and width of an <input
type="image"> element.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
An <input> element with pre-defined values in a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The input autocomplete attribute specifies whether a form or
an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the
following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).
This chapter describes the different form* attributes for the HTML <input> element.
The input form attribute specifies the form
the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form> element it belongs to.
An input field located outside of the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">
The input formaction attribute specifies the URL of
the file that will process the input when the form is submitted.
Note: This attribute overrides the
action attribute of the <form> element.
The formaction attribute works with the
following input types: submit and image.
An HTML form with two submit buttons, with different actions:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").
Note: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the
following input types: submit and image.
A form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
Note: This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the
following input types: submit and image.
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
Notes on the "post" method:
A form with two submit buttons. The first sends the form-data with method="get". The second sends the form-data with method="post":
<form action="/action_page.php" method="get">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit using
GET">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
The input formtarget attribute specifies a name or a keyword that indicates where
to display the response that is received after submitting the form.
Note: This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the
following input types: submit and image.
A form with two submit buttons, with different target windows:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
The input formnovalidate attribute specifies
that an <input> element should not be validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form>
element.
The formnovalidate attribute works with the
following input types: submit.
A form with two submit buttons (with and without validation):
<form action="/action_page.php">
<label for="email">Enter your
email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formnovalidate="formnovalidate"
value="Submit without validation">
</form>
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be validated when submitted.
Specify that no form-data should be validated on submit:
<form action="/action_page.php" novalidate>
<label
for="email">Enter your email:</label>
<input type="email"
id="email" name="email"><br><br>
<input type="submit"
value="Submit">
</form>
| Tag | Description |
|---|---|
| Defines an HTML form for user input | |
| Defines an input control |
For a complete list of all available HTML tags, visit our .
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>
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
Here are some examples:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
<script>
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);
</script>
<script>
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);
</script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
To learn more about <canvas>, please
read our .
SVG defines vector-based graphics in XML format.
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>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg 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>
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 .
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, like images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and 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, fonts, images, and 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: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
 |
There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML. The MP4 format is recommended by YouTube. |
| Format | File | Description |
|---|---|---|
| MPEG | .mpg .mpeg |
MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML. |
| 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. |
| RealVideo | .rm .ram |
RealVideo. Developed by Real Media to allow video streaming with low bandwidths. 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 HTML. |
| WebM | .webm | WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML. |
| MPEG-4 or MP4 |
.mp4 | MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube. |
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.
MP3 is the best 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. 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 HTML. |
| Ogg | .ogg | Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. |
| 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. Supported by all browsers. |
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
The HTML <video> element is used to
show a video on a web page.
Courtesy of :
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>
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>
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after
autoplay to let your video start playing automatically (but muted):
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
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 |
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
The HTML DOM defines 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.
Video courtesy of .
For a full DOM reference, go to our .
| Tag | Description |
|---|---|
| Defines a video or movie | |
| Defines multiple media resources for media elements, such as <video> and <audio> | |
| Defines text tracks in media players |
The HTML <audio> element is used to
play an audio file on a web page.
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>
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.
To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after
autoplay to let your audio file start playing automatically (but muted):
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
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 |
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
*From Edge 79
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
The HTML DOM defines 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 .
| Tag | Description |
|---|---|
| Defines sound content | |
| Defines multiple media resources for media elements, such as <video> and <audio> |
Plug-ins are computer programs that extend the standard functionality of the browser.
Plug-ins were designed to be used for many different purposes:
Warning !
Most browsers no longer support Java Applets and Plug-ins.
ActiveX controls are no longer supported in any browsers.
The support for Shockwave Flash has also been turned off in modern browsers.
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.
It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:
<object width="100%" height="500px" data="snippet.html"></object>
Or images if you like:
<object data="audi.jpeg"></object>
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 src="audi.jpeg">
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">
The easiest way to play videos in HTML, is to use YouTube.
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 tgbNymZ7vqY), 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> element in your web pagesrc attribute point to the video URLwidth and
height attributes to specify the dimension of the player
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
You can let your video start playing automatically when a user visits the
page, by adding autoplay=1 to the YouTube URL.
However, automatically starting a video is annoying for your visitors!
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add mute=1 after
autoplay=1 to let your video start playing automatically (but muted).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
A comma separated list of videos to play (in addition to the original URL).
Add loop=1 to let your video loop forever.
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/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Add controls=0 to not display controls in the
video player.
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
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 smartphones.
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>
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;
}
}
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:
watchPosition() - Returns the current position of the user and continues to
return updated position as the user moves (like the GPS in a car).clearWatch() - Stops the watchPosition() method.The example below shows the watchPosition() method. You need an accurate GPS device to test this (like
smartphone):
<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>
In HTML, any element can be dragged and dropped.
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.
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>
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:
window.localStorage - stores data with no expiration datewindow.sessionStorage - stores data for one session (data is lost when the browser tab is closed)Before using web storage, check browser support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Example explained:
The example above could also be written like this:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
The syntax for removing the "lastname" localStorage item is as follows:
localStorage.removeItem("lastname");
Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!
The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
The sessionStorage object 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.";
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>
Since web workers are in external files, they do not have access to the following JavaScript objects:
Server-Sent Events (SSE) 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 | 79.0 | 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>";
};
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}nn";
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 |
With our online HTML editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser.
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a paragraph.
Click on the "Try it Yourself" button to see how it works.
If you want to save your HTML, CSS and JavaScript code, and create your own website, check out .
is a website-building tool that lets you make and share your own website.
You can change the website's look and how it works by editing the code right in your web browser.
It's easy to use and doesn't require any setup:
The code editor is packed with features to help you achieve more:
Practice is key to mastering coding, and the best way to put your HTML knowledge into practice is by getting practical with code.
Use to build, test and deploy code.
The code editor lets you write and practice different types of computer languages. It includes HTML/CSS/JavaScript, but you can use it for other languages too, such as PHP, Python, Node.js, etc.
If you don't know HTML, we suggest that you read our from scratch.
You can also use the code editor in to build frontend or full-stack websites from scratch.
Or you can use the 60+ templates available and save time:
Create your Spaces account today and explore them all!
Host and publish your websites in no time with .
W3Schools subdomain and SSL certificate are included for free with . An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online.
Want a custom domain for your website?
You can buy a domain or transfer an existing one and connect it to your space.
Get started in a few clicks with .
You can test your HTML skills with W3Schools' Quiz.
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!
If you don't know HTML, we suggest that you read our from scratch.
Get certified by completing the course
You can test your HTML skills with W3Schools' Exercises.
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!
If you don't know HTML, we suggest that you read our from scratch.
Get certified by completing the course
In this mini bootcamp, you will learn the foundational skills needed to create beautiful and functional websites, from writing HTML markup to styling your pages with CSS.
You will learn HTML and CSS over a 3 weeks period together with a live instructor and an interactive cohort of engaged learners!
Any student or professional within the digital industry.
Certifications are valuable assets to gain trust and demonstrate knowledge to your clients, current or future employers on a ever increasing competitive market.
W3Schools has over two decades of experience with teaching coding online.
Our certificates are recognized and valued by companies looking to employ skilled developers.
Show the world your coding skills by getting a certification.
The prices is a small fraction compared to the price of traditional education.
Document and validate your competence by getting certified!
Fee: 95 USD
Number of questions: 70
Requirement to pass: 75% correct answers
Time limit: 70 minutes
Number of attempts to pass: Two
Exam deadline: None
Certification Expiration: None
Format: Online, multiple choice
Getting a certificate proves your commitment to upgrading your skills.
The certificate can be added as credentials to your CV, Resume, LinkedIn profile, and so on.
It gives you the credibility needed for more responsibilities, larger projects, and a higher salary.
Knowledge is power, especially in the current job market.
Documentation of your skills enables you to advance your career or helps you to start a new one.
Example certificate:
Each certificate gets a unique link that can be shared with others.
Validate your certification with the link or QR code.
Check how it looks like in this .
Share your certificate on LinkedIn in the Certifications section in just one click!
Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary.
Are you an educator, manager or business owner looking for courses or certifications?
We are working with schools, companies and organizations from all over the world.
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 and our .
You can also test your HTML skills with and .
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 .
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 .
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.
Get certified by completing the course
Always write HTML code with accessibility in mind!
Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible.
Semantic HTML means using correct HTML elements for their correct purpose as
much as possible. Semantic elements are elements with a meaning; if you need a button, use the <button> element (and not a
<div> element).
<button>Report an Error</button>
<div>Report an Error</div>
Semantic HTML gives context to screen readers, which read the contents of a page out loud.
With the button example in mind:
A button is also accessible for people relying on keyboard-only navigation; it can be clickable with both mouse and keys, and it can be tabbed between (using the tab key on the keyboard).
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.
Headings are defined with the <h1> to <h6> tags:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
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 and the relationships between different sections.
Screen readers also use headings as a navigational
tool. The different types of heading specify the outline of the page.
<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.
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="A narrow city street with flowers in Chania">
If a browser cannot find an image, it will display the value of the alt
attribute:
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
You should always include the lang
attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Always use a clear language, that is easy to understand. Also try to avoid characters that cannot be read clearly by a screen reader. For example:
A link text should explain clearly what information the reader will get by clicking on that link.
Examples of good and bad links:
Read more about
Buy tickets to Mars
Note: This page is an introduction in web accessibility. Visit our for more details.