Learn HTML: Beginner's Guide
Uploaded by
fednand barasaLearn HTML: Beginner's Guide
Uploaded by
fednand barasaLearn HTML
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!
Start learning HTML now »
Easy Learning with HTML "Try it
Yourself"
With our "Try it Yourself" editor, you can edit the HTML code and view the
result:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Click on the "Try it Yourself" button to see how it works.
HTML Examples
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!
Go to HTML Examples!
HTML Exercises
Many chapters in this tutorial end with an exercise where you can check your
level of knowledge.
Exercise?
What is a correct syntax for an HTML hyperlink?
<a href='/[Link]'>Visit [Link]!</a>
<link href='/[Link]'>Visit [Link]!</link>
<alink href='/[Link]'>Visit [Link]!</alink>
Submit Answer »
See all HTML Exercises
HTML is the standard markup language for creating Web pages.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
Example Explained
The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
The <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.
The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End t
<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!
Web Browsers
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:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
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.
HTML History
Since the early days of the World Wide Web, there have been many versions
of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
This tutorial follows the latest HTML5 standard.
Exercise?
What does HTML stand for?
Hot Typing Markup Language
Home Typing Modern Language
Hyper Text Markup Language
Home Testing Mixed Language
A simple text editor is all you need to learn HTML.
Learn HTML Using Notepad or
TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).
We believe 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.
Step 1: Open Notepad (PC)
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
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files
correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as
HTML code instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "[Link]" 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.
In this chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned about yet.
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Try it Yourself »
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="[Link] is a link</a>
Try it Yourself »
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
Example
<img src="[Link]" alt="[Link]" width="104" height="
142">
Try it Yourself »
How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page and select "View
Page Source". This will open a new tab containing the HTML source code of
the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" to see what
elements are made up of (you will see both the HTML and the CSS). You can
also edit the HTML or CSS on-the-fly in the Elements or Styles panel that
opens.
Exercise?
What is a correct HTML markup for the document type declaration?
<!DOCTYPE html>
DOCTYPE html;
--DOCTYPE html;
Submit Answer »
An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End t
<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!
Nested HTML Elements
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>):
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
Example Explained
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>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Try it Yourself »
However, never rely on this! Unexpected results and errors may
occur if you forget the end tag!
Empty HTML Elements
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:
Example
<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »
HTML is Not Case Sensitive
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.
Exercise?
True or False. Empty elements must have a close tag.
True
False
Submit Answer »
HTML attributes provide additional information about HTML elements.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:
Example
<a href="[Link] W3Schools</a>
Try it Yourself »
You will learn more about links in our HTML Links chapter.
The src Attribute
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:
Example
<img src="img_girl.jpg">
Try it Yourself »
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="[Link]
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 width and height Attributes
The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
Try it Yourself »
The alt Attribute
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.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Try it Yourself »
Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
Try it Yourself »
You will learn more about images in our HTML Images chapter.
The style Attribute
The style attribute is used to add styles to an element, such as color, font,
size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
Try it Yourself »
You will learn more about styles in our HTML Styles chapter.
The lang Attribute
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 HTML Language Code Reference.
The title Attribute
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:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
Try it Yourself »
We Suggest: Always Use Lowercase
Attributes
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.
We Suggest: Always Quote Attribute
Values
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.
Good:
<a href="[Link] our HTML
tutorial</a>
Bad:
<a href=[Link] our HTML
tutorial</a>
Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:
Example
<p title=Description of W3Schools>
Try it Yourself »
At W3Schools we always use quotes around attribute values.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it
is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Try it Yourself »
Chapter Summary
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be
displayed
The width and height attributes of <img> provide size information for
images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color,
font, size, and more
The lang attribute of the <html> tag declares the language of the Web
page
The title attribute defines some extra information about an element
Exercise?
Which of the following is a correct syntax for using an HTML attribute?
<img src='img_girl.jpg'>
<img src('img_girl.jpg')>
<img src:'img_girl.jpg'>
Submit Answer »
HTML Attribute Reference
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Try it Yourself »
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
Note: Browsers automatically add some white space (a margin) before and
after a heading.
Headings Are Important
Search engines use the headings to index the structure and content of your
web pages.
Users often skim a page by its headings. It is important to use headings to
show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>
Try it Yourself »
Exercise?
Which of the following headers is the largest and most important header?
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Submit Answer »
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags
and their attributes.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
A paragraph always starts on a new line, and is usually a block of text.
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the 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:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Try it Yourself »
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML
page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Try it Yourself »
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
Try it Yourself »
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Try it Yourself »
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Try it Yourself »
Exercise?
True or False. HTML paragraphs always starts on a new line.
True
False
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
Example
I am Red
I am Blue
I am Big
Try it Yourself »
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property defines the background color for an
HTML element.
Example
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>
Try it Yourself »
Example
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>
Try it Yourself »
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself »
Fonts
The CSS font-family property defines the font to be used for an HTML
element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself »
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »
Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »
Chapter Summary
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Exercise?
What is a correct way to add a background color to an HTML document?
<body style='background-color:pink;'>
<body background-color='pink;'>
<body style='bgcolor:pink;'>
HTML Text Formatting
❮ PreviousNext ❯
HTML contains several elements for defining text with a special meaning.
Example
This text is bold
This text is italic
This is subscript and superscript
Try it Yourself »
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
Try it Yourself »
The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.
Example
<strong>This text is important!</strong>
Try it Yourself »
HTML <i> and <em> Elements
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.
Example
<i>This text is italic</i>
Try it Yourself »
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.
Example
<em>This text is emphasized</em>
Try it Yourself »
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>
Try it Yourself »
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
Try it Yourself »
HTML <del> Element
The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
Try it Yourself »
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
Try it Yourself »
HTML <sub> Element
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 H 2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
Try it Yourself »
HTML <sup> Element
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]:
Example
<p>This is <sup>superscripted</sup> text.</p>
Try it Yourself »
Exercise?
Two of the following HTML elements makes the text bold, which two?
<em> and <b>
<strong> and <b>
<big> and <b>
<mark> and <b>
Submit Answer »
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Quotation and
Citation Elements
❮ PreviousNext ❯
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.
Example
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.
Try it Yourself »
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
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>
Try it Yourself »
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
Try it Yourself »
HTML <abbr> for Abbreviations
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.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
Try it Yourself »
HTML <address> for Contact
Information
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.
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
Try it Yourself »
HTML <cite> for Work Title
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.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Try it Yourself »
HTML <bdo> for Bi-Directional
Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
Try it Yourself »
Exercise?
Which of the following is NOT a quotation element (in fact, not an HTML element at all)?
<q>
<quote>
<blockquote>
Submit Answer »
HTML Quotation and Citation
Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML comments are not displayed in the browser, but they can help
document your HTML source code.
HTML Comment Tag
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.
Add Comments
With comments you can place notifications and reminders in your HTML code:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Try it Yourself »
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
Example
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
Try it Yourself »
You can also hide more than one line. Everything between the <!-- and
the --> will be hidden from the display.
Example
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>
Try it Yourself »
Comments are also great for debugging HTML, because you can comment
out HTML lines of code, one at a time, to search for errors.
Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.
Example
Hide a part of a paragraph:
<p>This <!-- great text --> is a paragraph.</p>
Try it Yourself »
Exercise?
What is the correct syntax for adding a comment in HTML?
<-- This is a comment -->
<## This is a comment ##>
<--> This is a comment </-->
<!-- This is a comment -->
HTML Colors
❮ PreviousNext ❯
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Try it Yourself »
HTML supports 140 standard color names.
Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Try it Yourself »
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Try it Yourself »
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Try it Yourself »
Color Values
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:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
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):
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Try it Yourself »
Exercise?
Do you remember any legal HTML color names? Which one of the following is a legal
HTML color?
Apple
Banana
Tomato
HTML RGB and RGBA Colors
❮ PreviousNext ❯
An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel
(opacity).
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color 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).
Example
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Try it Yourself »
Experiment by mixing the RGB values below:
Shades of Gray
Shades of gray are often defined using equal values for all three parameters:
Example
rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)
Try it Yourself »
RGBA Color Values
RGBA color values are an extension of RGB color values with an Alpha
channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Example
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Try it Yourself »
Experiment by mixing the RGBA values below:
rgba(255, 99, 71, 0.5)
RED
255
GREEN
99
BLUE
71
ALPHA
0.5
Exercise?
What is the color of the following text:
Hello
color:rgb(0, 255, 0)
color:rgb(255, 0, 0)
color:rgb(0, 255, 255)
Submit Answer »
HTML HEX Colors
❮ PreviousNext ❯
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the
color.
HEX Color Values
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:
#ff6347
RED
ff
GREEN
63
BLUE
47
Example
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Try it Yourself »
Shades of Gray
Shades of gray are often defined using equal values for all three parameters:
Example
#404040
#686868
#a0a0a0
#bebebe
#dcdcdc
#f8f8f8
Try it Yourself »
Exercise?
What is the highest HEX number of the following:
#44
#AA
#BB
Submit Answer »
HTML HSL and HSLA Colors
❮ PreviousNext ❯
HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel
(opacity).
HSL Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in
the form:
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:
hsl(0, 100%, 50%)
HUE
SATURATION
100%
LIGHTNESS
50%
Example
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Try it Yourself »
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Try it Yourself »
Lightness
The lightness of a color can be described as how much light you want to give
the color, where 0% means no light (black), 50% means 50% light (neither
dark nor light), and 100% means full lightness (white).
Example
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Try it Yourself »
Shades of Gray
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:
Example
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
Try it Yourself »
HSLA Color Values
HSLA color values are an extension of HSL color values, with an Alpha
channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)
HUE
SATURATION
100%
LIGHTNESS
50%
ALPHA
0.5
Example
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
Try it Yourself »
Exercise?
Which one of the following color values will result in a black color?
hsl(0, 100%, 0%)
hsl(0, 0, 100%)
hsl(0, 100%, 100%)
Submit Answer »
HTML Styles - CSS
❮ PreviousNext ❯
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all
at once.
CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s
What is CSS?
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)!
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
The 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.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Try it Yourself »
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
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:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
External CSS
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:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
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 "[Link]" file looks like:
"[Link]":
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!
CSS Colors, Fonts and Sizes
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.
Example
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>
Try it Yourself »
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
p {
border: 2px solid powderblue;
}
Try it Yourself »
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
Example
Use of CSS border and padding properties:
p {
border: 2px solid powderblue;
padding: 30px;
}
Try it Yourself »
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p {
border: 2px solid powderblue;
margin: 50px;
}
Try it Yourself »
Link to External CSS
External style sheets can be referenced with a full URL or with a path relative
to the current web page.
Example
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="[Link]
[Link]">
Try it Yourself »
Example
This example links to a style sheet located in the html folder on the current
web site:
<link rel="stylesheet" href="/html/[Link]">
Try it Yourself »
Example
This example links to a style sheet located in the same folder as the current
page:
<link rel="stylesheet" href="[Link]">
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Tip: You can learn much more about CSS in our CSS Tutorial.
Exercise?
What is a correct syntax for linking to an external stylesheet?
<style rel='stylesheet' href='[Link]'>
<link rel='stylesheet' href='[Link]'>
<a rel='stylesheet' href='[Link]'>
HTML Links
❮ PreviousNext ❯
Links are found in nearly all web pages. Links allow users to click their
way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
Note: A link does not have to be text. A link can be an image or any other
HTML element!
HTML Links - Syntax
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> element is the href attribute, which
indicates the link's destination.
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.
Example
This example shows how to create a link to [Link]:
<a href="[Link] [Link]!</a>
Try it Yourself »
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute
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 window
Example
Use target="_blank" to open the linked document in a new browser window
or tab:
<a href="[Link] target="_blank">Visit
W3Schools!</a>
Try it Yourself »
Absolute URLs vs. Relative URLs
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 "[Link] part):
Example
<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>
Try it Yourself »
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):
Example
<a href="[Link] email</a>
Try it Yourself »
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a
click of a button:
Example
<button onclick="[Link]='[Link]'">HTML
Tutorial</button>
Try it Yourself »
Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.
Example
<a href="[Link] title="Go to W3Schools
HTML section">Visit our HTML Tutorial</a>
Try it Yourself »
More on Absolute URLs and Relative
URLs
Example
Use a full URL to link to a web page:
<a href="[Link]
tutorial</a>
Try it Yourself »
Example
Link to a page located in the html folder on the current web site:
<a href="/html/[Link]">HTML tutorial</a>
Try it Yourself »
Example
Link to a page located in the same folder as the current page:
<a href="[Link]">HTML tutorial</a>
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program
HTML Link Tags
Tag Description
<a> Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Exercise?
What is a correct syntax for an HTML hyperlink?
<a href='/[Link]'>Visit [Link]!</a>
<link href='/[Link]'>Visit [Link]!</link>
<alink href='/[Link]'>Visit [Link]!</alink>
HTML Links - Different
Colors
❮ PreviousNext ❯
An HTML link is displayed in a different color depending on whether it has
been visited, is unvisited, or is active.
HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the link state colors, by using CSS:
Example
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>
Try it Yourself »
Link Buttons
A link can also be styled as a button, by using CSS:
This is a link
Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Try it Yourself »
To learn more about CSS, go to our CSS Tutorial.
HTML Link Tags
Tag Description
<a> Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Exercise?
True or False. By default all hyperlinks are underlined.
HTML Links - Create
Bookmarks
❮ PreviousNext ❯
HTML links can be used to create bookmarks, so that readers can jump to
specific parts of a web page.
Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with
the bookmark.
Example
First, 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:
Example
<a href="#C4">Jump to Chapter 4</a>
Try it Yourself »
You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Chapter Summary
Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark
Exercise?
What HTML attribute is used to create a bookmark?
The bookmark attribute
The anchor attribute
The id attribute
Submit Answer »
HTML Link Tags
Tag Description
<a> Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Images
❮ PreviousNext ❯
Images can improve the design and the appearance of a web page.
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Try it Yourself »
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Try it Yourself »
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »
HTML Images Syntax
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:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
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.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »
The alt Attribute
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:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »
If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="[Link]" alt="Flowers in Chania">
Try it Yourself »
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.
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Try it Yourself »
Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
Try it Yourself »
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.
Width and Height, or Style?
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:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
<img src="[Link]" alt="HTML5
Icon" style="width:128px;height:128px;">
</body>
</html>
Try it Yourself »
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in
the src attribute:
Example
<img src="/images/[Link]" alt="HTML5
Icon" style="width:128px;height:128px;">
Try it Yourself »
Images on Another Server/Website
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:
Example
<img src="[Link] a
lt="[Link]">
Try it Yourself »
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.
Animated Images
HTML allows animated GIFs:
Example
<img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">
Try it Yourself »
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »
Image Floating
Use the CSS float property to let the image float to the right or to the left of
a text:
Example
<p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="[Link]" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Try it Yourself »
Tip: To learn more about CSS Float, read our CSS Float Tutorial.
Common Image Formats
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, .p
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Chapter Summary
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if
it cannot be displayed
Use the HTML width and height attributes or the
CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the
right
Note: Loading large images takes time, and can slow down your web page.
Use images carefully.
Exercise?
What is a correct HTML element for adding an image?
The <image> element
The <img> element
The <media> element
Submit Answer »
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Image Maps
❮ PreviousNext ❯
With HTML image maps, you can create clickable areas on an image.
Image Maps
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:
Example
Here is the HTML source code for the image map above:
<img src="[Link]" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="
[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="p
[Link]">
<area shape="circle" coords="337,300,44" alt="Coffee" href="cof
[Link]">
</map>
Try it Yourself »
How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:
<img src="[Link]" 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!
Create 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 .
The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of
these values:
rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
You must also define some coordinates to be able to place the clickable area
onto the image.
Shape="rect"
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:
Example
<area shape="rect" coords="34, 44, 270, 350" href="[Link]">
Try it Yourself »
This is the area that becomes clickable and will send the user to the page
"[Link]":
Shape="circle"
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:
Example
<area shape="circle" coords="337, 300, 44" href="[Link]">
Try it Yourself »
This is the area that becomes clickable and will send the user to the page
"[Link]":
Shape="poly"
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:
Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,27
0,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croi
[Link]">
Try it Yourself »
This is the area that becomes clickable and will send the user to the page
"[Link]":
Image Map and JavaScript
A clickable area can also trigger a JavaScript function.
Add a click event to the <area> element to execute a JavaScript function:
Example
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="[Link]" oncl
ick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Try it Yourself »
Chapter Summary
Use the HTML <map> element to define an image map
Use the HTML <area> element to define the clickable areas in the
image map
Use the HTML usemap attribute of the <img> element to point to an
image map
Exercise?
What is a correct HTML element for defining an image map?
The <imagemap> element
The <imgmap> element
The <map> element
Submit Answer »
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
❮ PreviousNext ❯
HTML Background Images
❮ PreviousNext ❯
A background image can be specified for almost any HTML element.
Background Image on an HTML
element
To add a background image on an HTML element, use the
HTML style attribute and the CSS background-image property:
Example
Add a background image on a <p> element:
<p style="background-image: url('img_girl.jpg');">
Try it Yourself »
You can also specify the background image in the <style> element, in
the <head> section:
Example
Specify the background image in the <style> element:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Background Image on a Page
If you want the entire page to have a background image, you must specify
the background image on the <body> element:
Example
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Background Repeat
If the background image is smaller than the element, the image will repeat
itself, horizontally and vertically, until it reaches the end of the element:
Example
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Try it Yourself »
To avoid the background image from repeating itself, set the background-
repeat property to no-repeat.
Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
Background Cover
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):
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it Yourself »
Background Stretch
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.
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »
Exercise?
What is a correct CSS property for defining background images?
The bg property
The image property
The background-image property
Submit Answer »
Learn More CSS
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 CSS Background
Tutorial.
HTML <picture> Element
❮ PreviousNext ❯
The HTML <picture> element allows you to display different pictures for
different devices or screen sizes.
The HTML <picture> Element
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.
Example
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>
Try it Yourself »
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do not
support the <picture> element, or if none of the <source> tags match.
When to use the Picture Element
There are two main purposes for the <picture> element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image
file. The browser will use the first <source> element with matching attribute
values, and ignore any of the following elements.
2. Format Support
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.
Example
The browser will use the first image format it recognizes:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Try it Yourself »
Note: The browser will use the first <source> element with matching attribute
values, and ignore any following <source> elements.
Exercise?
One of these elements is NOT a legal HTML element, which one?
The <image> element
The <picture> element
The <source> element
Submit Answer »
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Favicon
❮ PreviousNext ❯
A favicon is a small image displayed next to the page title in the browser
tab.
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your
own favicon on sites like [Link]
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 "[Link]".
Next, add a <link> element to your "[Link]" file, after
the <title> element, like this:
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/[Link]"
>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Now, save the "[Link]" file and reload it in your browser. Your browser
tab should now display your favicon image to the left of the page title.
Favicon File Format Support
The following table shows the file format support for a favicon image:
Browser ICO PNG GIF JPEG
Edge Yes Yes Yes Yes
Chrome Yes Yes Yes Yes
Firefox Yes Yes Yes Yes
Opera Yes Yes Yes Yes
Safari Yes Yes Yes Yes
Chapter Summary
Use the HTML <link> element to insert a favicon
Exercise?
In which HTML element is the Favicon defined?
The <img> element
The <body> element
The <link> element
The <style> element
Submit Answer »
HTML Link Tag
Tag Description
<link> Defines the relationship between a document and an external resource
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Page Title
❮ PreviousNext ❯
Every web page should have a page title to describe the meaning of the
page.
The Title Element
The <title> element adds a title to your page:
Example
<!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:
What is a Good Title?
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:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
HTML Title Tag
Tag Description
<title> Defines the title of the document
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Exercise?
In which HTML element is the page title defined?
The <title> element
The <body> element
The <link> element
The <page> element
Submit Answer »
HTML Tables
❮ PreviousNext ❯
HTML tables allow web developers to arrange data into rows and columns.
Example
Company Contact Co
Alfreds Futterkiste Maria Anders Ge
Centro comercial Moctezuma Francisco Chang Me
Ernst Handel Roland Mendel Aus
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Can
Magazzini Alimentari Riuniti Giovanni Rovelli Ital
Try it Yourself »
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
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>
Try it Yourself »
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> is the content of a table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Try it Yourself »
Note: A table cell can contain all sorts of HTML elements: text, images, lists,
links, other tables, etc.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »
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.
Table Headers
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.
Example
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>
Try it Yourself »
By default, the text in <th> elements are bold and centered, but you can
change that with CSS.
Exercise?
What is the correct tag name for a table-cell in HTML?
<tc>
<td>
<tr>
Submit Answer »
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> eleme
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Table Borders
❮ PreviousNext ❯
HTML tables can have borders of different styles and shapes.
How To Add a Border
To add a border, use the CSS border property on table, th, and td elements:
Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Collapsed Table Borders
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:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »
Style Table Borders
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:
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Try it Yourself »
Round Table Borders
With the border-radius property, the borders get rounded corners:
Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »
Skip the border around the table by leaving out table from the css selector:
Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »
Dotted Table Borders
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
Example
th, td {
border-style: dotted;
}
Try it Yourself »
Border Color
With the border-color property, you can set the color of the border.
Example
th, td {
border-color: #96D4D4;
}
Try it Yourself »
Exercise?
What is the correct CSS property for styling the border of a table?
table-border
table-style
border
Submit Answer »
HTML Table Sizes
❮ PreviousNext ❯
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.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
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>
Try it Yourself »
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.
HTML Table Column Width
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
Example
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>
Try it Yourself »
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row
element:
Example
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>
Try it Yourself »
Exercise?
What is the correct CSS property for styling the width of a table?
size
table-size
width
Submit Answer »
HTML Table Headers
❮ PreviousNext ❯
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
HTML Table Headers
Table headers are defined with th elements. Each th element represents a
table cell.
Example
<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>
Try it Yourself »
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as
a <th> element:
Example
<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>
Try it Yourself »
Align Table Headers
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:
Example
th {
text-align: left;
}
Try it Yourself »
Header for Multiple Columns
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:
Example
<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>
Try it Yourself »
You will learn more about colspan and rowspan in the Table colspan &
rowspan chapter.
Table Caption
You can add a caption that serves as a heading for the entire table.
Monthly savings
Month Savings
January $100
February $50
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »
Note: The <caption> tag should be inserted immediately after
the <table> tag.
Exercise?
What is the correct tag name for a table-header in HTML?
<table-header>
<td>
<th>
Submit Answer »
HTML Table Padding &
Spacing
❮ PreviousNext ❯
HTML tables can adjust the padding inside the cells, and also the space
between the cells.
With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello
HTML Table - Cell Padding
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:
Example
th, td {
padding: 15px;
}
Try it Yourself »
To add padding only above the content, use the padding-top property.
Add padding to the other sides with the padding-bottom, padding-left,
and padding-right properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Try it Yourself »
HTML Table - Cell Spacing
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:
Example
table {
border-spacing: 30px;
}
Try it Yourself »
Exercise?
What is the correct CSS property for styling the padding inside table cells?
padding
table-padding
cell-padding
Submit Answer »
❮ PreviousNext ❯
HTML Table Colspan &
Rowspan
❮ PreviousNext ❯
HTML tables can have cells that span over multiple rows and/or columns.
NAME
APRIL
2022
FIESTA
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example
<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>
Try it Yourself »
Note: The value of the colspan attribute represents the number of columns to
span.
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example
<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>
Try it Yourself »
Note: The value of the rowspan attribute represents the number of rows to
span.
Exercise?
What is the correct HTML attribute for specifying how many rows a cell should span?
span
rowspan
spanning
Submit Answer »
HTML Table Styling
❮ PreviousNext ❯
Use CSS to make your tables look better.
HTML Table - Zebra Stripes
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:
Example
tr:nth-child(even) {
background-color: #D6EEEE;
}
Try it Yourself »
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5
etc. instead of 2,4,6 etc.
HTML Table - Vertical Zebra Stripes
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:
Example
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
Try it Yourself »
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.
Combine Vertical and Horizontal
Zebra Stripes
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:
Example
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);
}
Try it Yourself »
Horizontal Dividers
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:
Example
tr {
border-bottom: 1px solid #ddd;
}
Try it Yourself »
Hoverable Table
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
Example
tr:hover {background-color: #D6EEEE;}
Try it Yourself »
HTML Table Colgroup
❮ PreviousNext ❯
The <colgroup> element is used to style specific columns of a table.
HTML Table Colgroup
If you want to style the first two 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 get the style.
The style attribute specifies the style to give the columns.
Note: There is a very limited selection of legal CSS properties for colgroups.
Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
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.
Legal CSS Properties
There is only a very limited selection of CSS properties that are allowed to be
used in the colgroup:
width property
visibility property
background properties
border properties
All other CSS properties will have no effect on your tables.
Multiple Col Elements
If you want to style multiple columns with different styles, use more than
one <col> element inside the <colgroup>:
Example
<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>
...
Try it Yourself »
Empty Colgroups
If you want to style columns in the middle of a table, insert an
"empty" <col> element (with no styles) for the columns before:
Example
<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>
...
Try it Yourself »
Hide Columns
You can hide columns with the visibility: collapse property:
Example
<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>
...
Try it Yourself »
HTML Lists
❮ PreviousNext ❯
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
Item
Item
Item
Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Try it Yourself »
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Unordered Lists
❮ PreviousNext ❯
The HTML <ul> tag defines an unordered (bulleted) list.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Unordered HTML List - Choose List
Item Marker
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
Disc
Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Circle
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Square
Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
No List Marker
Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it Yourself »
Tip: You can learn much more about CSS in our CSS Tutorial.
Chapter Summary
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
Use the CSS property float:left to display a list horizontally
Exercise?
What is the correct CSS property to use when defining the style of a list marker of
unordered lists?
list-style-type
style-type-list
type-list-style
Submit Answer »
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Ordered Lists
❮ PreviousNext ❯
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Ordered HTML List - The Type
Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Uppercase Letters
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Lowercase Letters
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Roman Numbers - Uppercase
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Roman Numbers - Lowercase
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Try it Yourself »
Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.
Chapter Summary
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
Exercise?
What is the correct HTML attribute to use when defining the type of the list item marker
of ordered lists?
list-style
list-type
marker-type
type
Submit Answer »
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Other Lists
❮ PreviousNext ❯
HTML also supports description lists.
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »
Chapter Summary
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Exercise?
What is the correct tag name for a description list?
<dl>
<list>
<definition>
Submit Answer »
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Block and Inline
Elements
❮ PreviousNext ❯
Every HTML element has a default display value, depending on what type
of element it is.
The two most common display values are block and inline.
Block-level Elements
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.
The <div> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
Try it Yourself »
Here are the block-level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
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.
Example
<span>Hello World</span>
Try it Yourself »
Here are the inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Note: An inline element cannot contain a block-level element!
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <div> element can be used to style blocks
of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
</div>
Try it Yourself »
You will learn more about the <div> element in the next chapter.
The <span> Element
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:
Example
<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>
Try it Yourself »
Chapter Summary
A block-level element always starts on a new line and takes up the full
width available
An inline element does not start on a new line and it only takes up as
much width as necessary
The <div> element is a block-level element and is often used as a
container for other HTML elements
The <span> element is an inline container used to mark up a part of a
text, or a part of a document
Exercise?
Which type of elements takes up the full width available?
Block elements
Inline elements
Submit Answer »
HTML Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Div Element
❮ PreviousNext ❯
The <div> element is used as a container for other HTML elements.
The <div> Element
The <div> element is by default a block element, meaning that it takes all
available width, and comes with line breaks before and after.
Example
A <div> element takes up all available width:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
Result
Lorem Ipsum
I am a div
dolor sit amet.
Try it Yourself »
The <div> element has no required attributes, but style, class and id are
common.
<div> as a container
The <div> element is often used to group sections of a web page together.
Example
A <div> element with HTML elements:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Try it Yourself »
Center align a <div> element
If you have a <div> element that is not 100% wide, and you want to center-
align it, set the CSS margin property to auto.
Example
<style>
div {
width:300px;
margin:auto;
}
</style>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Try it Yourself »
Multiple <div> elements
You can have many <div> containers on the same page.
Example
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
Try it Yourself »
Aligning <div> elements side by side
When building web pages, you often want to have two or
more <div> elements side by side, like this:
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
There are different methods for aligning elements side by side, all include
some CSS styling. We will look at the most common methods:
Float
The CSS float property was not originally meant to align <div> elements side-
by-side, but has been used for this purpose for many years.
The CSS float property is used for positioning and formatting content and
allows elements to be positioned horizontally, rather than vertically.
Example
How to use float to align div elements side by side:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
Try it Yourself »
Learn more about float in our CSS float tutorial.
Inline-block
If you change the <div> element's display property from block to inline-
block, the <div> elements will no longer add a line break before and after, and
will be displayed side by side instead of on top of each other.
Example
How to use display: inline-block to align div elements side by side:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
Try it Yourself »
Flex
The CSS Flexbox Layout Module was introduced to make it easier to design
flexible responsive layout structure without using float or positioning.
To make the CSS flex method work, surround the <div> elements with
another <div> element and give it the status as a flex container.
Example
How to use flex to align div elements side by side:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Result
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
Try it Yourself »
Learn more about flex in our CSS flexbox tutorial.
HTML class Attribute
❮ PreviousNext ❯
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
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:
Example
<!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>
Try it Yourself »
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:
Example
<!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>
Try it Yourself »
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 CSS Tutorial.
The Syntax For Class
To create a class; write a period (.) character, followed by a class name.
Then, define the CSS properties within curly braces {}:
Example
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>
Try it Yourself »
Multiple Classes
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:
Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Try it Yourself »
Different Elements Can Share Same
Class
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:
Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Try it Yourself »
Use of the class Attribute in
JavaScript
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:
Example
Click on a button to hide all elements with the class name "city":
<script>
function myFunction() {
var x = [Link]("city");
for (var i = 0; i < [Link]; i++) {
x[i].[Link] = "none";
}
}
</script>
Try it Yourself »
Don't worry if you don't understand the code in the example above.
You will learn more about JavaScript in our HTML JavaScript chapter, or you
can study our JavaScript Tutorial.
Chapter Summary
The HTML class attribute specifies one or more class names for an
element
Classes are used by CSS and JavaScript to select and access specific
elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with
the getElementsByClassName() method
Exercise?
True or False. The class name is case sensitive
True
False
Submit Answer »
HTML id Attribute
❮ PreviousNext ❯
The 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
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:
Example
<!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>
Try it Yourself »
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.).
Difference Between Class and ID
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:
Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 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>
Try it Yourself »
Tip: You can learn much more about CSS in our CSS Tutorial.
HTML Bookmarks with ID and Links
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.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
Example
<a href="#C4">Jump to Chapter 4</a>
Try it Yourself »
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>
Using the id Attribute in JavaScript
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:
Example
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
[Link]("myHeader").innerHTML = "Have a nice
day!";
}
</script>
Try it Yourself »
Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript
Tutorial.
Chapter Summary
The id attribute is used to specify 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 by CSS and JavaScript to style/select a specific
element
The value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with
the getElementById() method
Exercise?
True or False. The id name is case sensitive
True
False
HTML Iframes
❮ PreviousNext ❯
An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
Syntax
<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.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Ifr
ame Example"></iframe>
Try it Yourself »
Or you can add the style attribute and use the
CSS height and width properties:
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" t
itle="Iframe Example"></iframe>
Try it Yourself »
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the
CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>
Try it Yourself »
With CSS, you can also change the size, style and color of the iframe's
border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid
red;" title="Iframe Example"></iframe>
Try it Yourself »
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="[Link] target="iframe_a">W3School
[Link]</a></p>
Try it Yourself »
Chapter Summary
The HTML <iframe> tag specifies an inline frame
The src attribute defines the URL of the page to embed
Always include a title attribute (for screen readers)
The height and width attributes specify the size of the iframe
Use border:none; to remove the border around the iframe
Exercise?
In which IFRAME attribute can we specify an URL?
href
src
url
Submit Answer »
HTML JavaScript
❮ PreviousNext ❯
JavaScript makes HTML pages more dynamic and interactive.
Example
My First JavaScript
Click me to display Date and Time
Try it Yourself »
The HTML <script> Tag
The 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 [Link]() method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with
id="demo":
Example
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
Try it Yourself »
Tip: You can learn much more about JavaScript in our JavaScript Tutorial.
A Taste of JavaScript
Here are some examples of what JavaScript can do:
Example
JavaScript can change content:
[Link]("demo").innerHTML = "Hello JavaScript!";
Try it Yourself »
Example
JavaScript can change styles:
[Link]("demo").[Link] = "25px";
[Link]("demo").[Link] = "red";
[Link]("demo").[Link] = "yellow";
Try it Yourself »
Example
JavaScript can change attributes:
[Link]("image").src = "[Link]";
Try it Yourself »
The HTML <noscript> Tag
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:
Example
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!
</noscript>
Try it Yourself »
Exercise?
In which HTML element do we put JavaScripts?
<java>
<javascript>
<script>
Submit Answer »
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scri
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML File Paths
❮ PreviousNext ❯
A file path describes the location of a file in a web site's folder structure.
File Path Examples
Path Description
<img src="[Link]"> The "[Link]" file is located in the same folder as
<img src="images/[Link]"> The "[Link]" file is located in the images folder in
folder
<img src="/images/[Link]"> The "[Link]" file is located in the images folder a
current web
<img src="../[Link]"> The "[Link]" file is located in the folder one level
current folder
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
Web pages
Images
Style sheets
JavaScripts
Absolute File Paths
An absolute file path is the full URL to a file:
Example
<img src="[Link] al
t="Mountain">
Try it Yourself »
The <img> tag is explained in the chapter: HTML Images.
Relative File Paths
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:
Example
<img src="/images/[Link]" alt="Mountain">
Try it Yourself »
In the following example, the file path points to a file in the images folder
located in the current folder:
Example
<img src="images/[Link]" alt="Mountain">
Try it Yourself »
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:
Example
<img src="../images/[Link]" alt="Mountain">
Try it Yourself »
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your
current base URL. All links will work on your own computer (localhost) as well
as on your current public domain and your future public domains.
HTML - The Head Element
❮ PreviousNext ❯
The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed
on the page.
Metadata typically define the document title, character set, styles, scripts,
and other meta information.
The HTML <title> Element
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:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it Yourself »
The HTML <style> Element
The <style> element is used to define style information for a single HTML
page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Try it Yourself »
The HTML <link> Element
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:
Example
<link rel="stylesheet" href="[Link]">
Try it Yourself »
Tip: To learn all about CSS, visit our CSS Tutorial.
The HTML <meta> Element
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.
Examples
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:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Try it Yourself »
Setting The Viewport
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.
Without the viewport meta tag
With the viewport meta tag
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
The following JavaScript writes "Hello JavaScript!" into an HTML element with
id="demo":
Example
<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello
JavaScript!";
}
</script>
Try it Yourself »
Tip: To learn all about JavaScript, visit our JavaScript Tutorial.
The HTML <base> Element
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!
Example
Specify a default URL and a default target for all links on a page:
<head>
<base href="[Link] target="_blank">
</head>
<body>
<img src="images/[Link]" width="24" height="39" alt="Stickm
an">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Try it Yourself »
Chapter Summary
The <head> element is a container for metadata (data about data)
The <head> element is placed between the <html> tag and
the <body> tag
The <title> element is required and it defines the title of the
document
The <style> element is used to define style information for a single
document
The <link> tag is most often used to link to external style sheets
The <meta> element is typically used to specify the character set, page
description, keywords, author of the document, and viewport settings
The <script> element is used to define client-side JavaScripts
The <base> element specifies the base URL and/or target for all
relative URLs in a page
Exercise?
Which one of the following elements should NOT be placed in the head section?
<title>
<link>
<body>
Submit Answer »
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resou
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Layout Elements and
Techniques
❮ PreviousNext ❯
Websites often display content in multiple columns (like a magazine or a
newspaper).
Example
Cities
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
Footer
Try it Yourself »
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web
page:
<header> - Defines a header for a document or a sectio
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines independent, self-contained conte
<aside> - Defines content aside from the content (like
<footer> - Defines a footer for a document or a sectio
<details> - Defines additional details that the user ca
on demand
<summary> - Defines a heading for the <details> elem
You can read more about semantic elements in our HTML Sem
HTML Layout Techniques
There are four different techniques to create multicolumn layouts. Each
technique has its pros and cons:
CSS framework
CSS float property
CSS flexbox
CSS grid
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework,
like [Link] or Bootstrap.
Ever heard about W3Schools Spaces? Here you can create your website
from scratch or use a template, and host it for free.
Get started for free ❯
* no credit card required
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow,
which may harm the flexibility. Learn more about float in our CSS Float and
Clear chapter.
Example
Cities
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
Footer
Try it Yourself »
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page
layout must accommodate different screen sizes and different display
devices.
Learn more about flexbox in our CSS Flexbox chapter.
Example
Cities
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
Footer
Try it Yourself »
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats
and positioning.
Learn more about CSS grids in our CSS Grid Intro chapter.
HTML Responsive Web
Design
❮ PreviousNext ❯
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.
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize,
hide, shrink, or enlarge, a website, to make it look good on all devices
(desktops, tablets, and phones):
Try it Yourself »
Setting The Viewport
To create a responsive website, add the following <meta> tag to all your web
pages:
Example
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Try it Yourself »
This will set the viewport of your page, which will give the browser
instructions on how to control the page's dimensions and scaling.
Here is an example of a web page without the viewport meta tag, and the
same web page with the viewport meta tag:
Without the viewport meta tag:
With the viewport meta tag:
Tip: If you are browsing this page on a phone or a tablet, you can click on the
two links above to see the difference.
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and
scale up and down:
Example
<img src="img_girl.jpg" style="width:100%;">
Try it Yourself »
Notice that in the example above, the image can be scaled up to be larger
than its original size. A better solution, in many cases, will be to use the max-
width property instead.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to,
but never scale up to be larger than its original size:
Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Try it Yourself »
Show Different Images Depending on
Browser Width
The HTML <picture> element allows you to define different images for
different browser window sizes.
Resize the browser window to see how the image below changes depending
on the width:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="[Link]">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Try it Yourself »
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>
Try it Yourself »
Viewport is the browser window size. 1vw = 1% of viewport width. If the
viewport is 50cm wide, 1vw is 0.5cm.
Media Queries
In addition to resize text and images, it is also common to use media queries
in responsive web pages.
With media queries you can define completely different styles for different
browser sizes.
Example: resize the browser window to see that the three div elements below
will display horizontally on large screens and stack vertically on small
screens:
Left Menu
Main Content
Right Content
Example
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
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>
Try it Yourself »
Tip: To learn more about Media Queries and Responsive Web Design, read
our RWD Tutorial.
Responsive Web Page - Full Example
A responsive web page should look good on large desktop screens and on
small mobile phones.
Try it Yourself »
Ever heard about W3Schools Spaces? Here you can create your website
from scratch or use a template, and host it for free.
Get started for free ❯
* no credit card required
Responsive Web Design -
Frameworks
All popular CSS Frameworks offer responsive design.
They are free, and easy to use.
[Link]
[Link] is a modern CSS framework with support for desktop, tablet, and
mobile design by default.
[Link] is smaller and faster than similar CSS frameworks.
[Link] is designed to be independent of jQuery or any other JavaScript
library.
[Link] Demo
Resize the page to see the responsiveness!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more
than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.
Example
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="[Link]
.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in
Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Try it Yourself »
To learn more about [Link], read our [Link] Tutorial.
Bootstrap
Another popular CSS framework is Bootstrap:
Example
<!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="[Link]
/[Link]" rel="stylesheet">
<script src="[Link]
/[Link]"></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>
Try it Yourself »
To learn more about Bootstrap, go to our Bootstrap Tutorial.
Exercise?
There is a CSS font size unit that sizes text in percent of the viewport, what unit is that?
px
em
vw
vp
HTML Computer Code
Elements
❮ PreviousNext ❯
HTML contains several elements for defining user input and computer
code.
Example
<code>
x = 5;
y = 6;
z = x + y;
</code>
Try it Yourself »
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content
inside is displayed in the browser's default monospace font.
Example
Define some text as keyboard input in a document:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
Save the document by pressing Ctrl + S
Try it Yourself »
HTML <samp> For Program Output
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.
Example
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:
Message from my computer:
File not found.
Press F1 to continue
Try it Yourself »
HTML <code> For Computer Code
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.
Example
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;
Try it Yourself »
Preserve Line-Breaks
Notice that the <code> element does NOT preserve extra whitespace and
line-breaks.
To preserve extra whitespace and line-breaks, you can put
the <code> element inside a <pre> element:
Example
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
Result:
x = 5;
y = 6;
z = x + y;
Try it Yourself »
HTML <var> For Variables
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.
Example
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:
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical
height.
Try it Yourself »
Chapter Summary
The <kbd> element defines keyboard input
The <samp> element defines sample output from a computer program
The <code> element defines a piece of computer code
The <var> element defines a variable in programming or in a
mathematical expression
The <pre> element defines preformatted text
Exercise?
Which one of the following is NOT an HTML element?
<code>
<pre>
<kbd>
<xamp>
Submit Answer »
HTML Computer Code Elements
Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a variable
<pre> Defines preformatted text
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Semantic Elements
❮ PreviousNext ❯
Semantic elements = elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and
the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.
Examples of semantic elements: <img>, <table>, and <article> - Clearly
defines its content.
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header, and
footer.
In HTML there are several semantic elements that can be used to define
different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML <section> Element
The <section> element defines a section in a document.
According to W3C's HTML documentation: "A section is a thematic grouping
of content, typically with a heading."
Examples of where a <section> element can be used:
Chapters
Introduction
News items
Contact information
A web page could normally be split into sections for introduction, content,
and contact information.
Example
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>
Try it Yourself »
HTML <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to
distribute it independently from the rest of the web site.
Examples of where the <article> element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
Example
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>
Try it Yourself »
Example 2
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>
Try it Yourself »
Nesting <article> in <section> or
Vice Versa?
The <article> element specifies independent, self-contained content.
The <section> element defines section in a document.
Can we use the definitions to decide how to nest those elements? No, we
cannot!
So, you will find HTML pages with <section> elements
containing <article> elements, and <article> elements
containing <section> elements.
HTML <header> Element
The <header> element represents a container for introductory content or a set
of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.
Example
A header for an <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's
natural environment,
and build a future in which humans live in harmony with
nature.</p>
</article>
Try it Yourself »
HTML <footer> Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
Example
A footer section in a document:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="[Link]
</footer>
Try it Yourself »
HTML <nav> Element
The <nav> element defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major 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.
Example
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>
Try it Yourself »
HTML <aside> Element
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.
Example
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>
Try it Yourself »
Example 2
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>
Try it Yourself »
HTML <figure> and <figcaption>
Elements
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.
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Try it Yourself »
Why Semantic Elements?
According to the W3C: "A semantic Web allows data to be shared and reused
across applications, enterprises, and communities."
Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos,
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Exercise?
Which one of the following is NOT an HTML element?
<header>
<footer>
<content>
<main>
Submit Answer »
❮ PreviousNext ❯
HTML Style Guide
❮ PreviousNext ❯
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 Document Type
Always declare the document type as the first line in your document.
The correct document type for HTML is:
<!DOCTYPE html>
Use Lowercase Element Names
HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
Mixing uppercase and lowercase names looks bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to type
Good:
<body>
<p>This is a paragraph.</p>
</body>
Bad:
<BODY>
<P>This is a paragraph.</P>
</BODY>
Close All HTML Elements
In HTML, you do not have to close all elements (for example
the <p> element).
However, we strongly recommend closing all HTML elements, like this:
Good:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
Mixing uppercase and lowercase names looks bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to type
Good:
<a href="[Link] our HTML
tutorial</a>
Bad:
<a HREF="[Link] our HTML
tutorial</a>
Always Quote Attribute Values
HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
Developers normally quote attribute values
Quoted values are easier to read
You MUST use quotes if the value contains spaces
Good:
<table class="striped">
Bad:
<table class=striped>
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
Always Specify alt, width, and height
for Images
Always specify the alt attribute for images. This attribute is important if the
image for some reason cannot be displayed.
Also, always define the width and height of images. This reduces flickering,
because the browser can reserve space for the image before loading.
Good:
<img src="[Link]" alt="HTML5" style="width:128px;height:128px"
>
Bad:
<img src="[Link]">
Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and
groups entities better together.
Good:
<link rel="stylesheet" href="[Link]">
Bad:
<link rel = "stylesheet" href = "[Link]">
Avoid Long Code Lines
When using an HTML editor, it is NOT convenient to scroll right and left to
read the HTML code.
Try to avoid too long code lines.
Blank Lines and Indentation
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Good:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area, and the most populous metropolitan area in the world.</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>
Bad:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area, and the most populous metropolitan area in
the world.</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>
Good Table Example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Good List Example:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Never Skip the <title> Element
The <title> element is required in HTML.
The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
So, try to make the title as accurate and meaningful as possible:
<title>HTML Style Guide and Coding Conventions</title>
Omitting <html> and <body>?
An HTML page will validate without the <html> and <body> tags:
Example
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself »
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.
Omitting <head>?
The HTML <head> tag can also be omitted.
Browsers will add all elements before <body>, to a default <head> element.
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
However, we recommend using the <head> tag.
Close Empty HTML Elements?
In HTML, it is optional to close empty elements.
Allowed:
<meta charset="utf-8">
Also Allowed:
<meta charset="utf-8" />
If you expect XML/XHTML software to access your page, keep the closing
slash (/), because it is required in XML and XHTML.
Add the lang Attribute
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.
Example
<!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>
Try it Yourself »
Meta Data
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>
Setting The Viewport
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.
Without the viewport meta tag
With the viewport meta tag
HTML Comments
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.
Using Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not
necessary):
<link rel="stylesheet" href="[Link]">
Short CSS rules can be written compressed, like this:
[Link] {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces of indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not
necessary):
<script src="[Link]">
Accessing HTML Elements with
JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
Try it Yourself »
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names:
"[Link]" cannot be accessed as "[Link]".
Other web servers (Microsoft, IIS) are not case sensitive: "[Link]" can be
accessed as "[Link]".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small
errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like
"[Link] the server just adds a default filename, such
as "[Link]", "[Link]", "[Link]", or "[Link]".
If your server is configured only with "[Link]" as the default filename,
your file must be named "[Link]", and not "[Link]".
However, servers can be configured with more than one default filename;
usually you can set up as many default filenames as you want.
❮ PreviousNext ❯
HTML Entities
❮ PreviousNext ❯
Reserved characters in HTML must be replaced with entities:
< (less than) = <
> (greater than) = >
HTML Character Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your HTML text, the
browser might mix them with tags.
Entity names or entity numbers can be used to display reserved HTML
characters.
Entity names look like this:
&entity_name;
Entity numbers look like this:
&#entity_number;
To display a less than sign (<) we must write: < or <
Entity names are easier to remember than entity numbers.
Non-breaking Space
A commonly used HTML entity is the non-breaking space:
A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break
into a new line). This is handy when breaking the words might be disruptive.
Examples:
§ 10
10 km/h
10 PM
Another common use of the non-breaking space is to prevent browsers from
truncating spaces in HTML pages.
If you write 10 spaces in your text, the browser will remove 9 of them. To add
real spaces to your text, you can use the character entity.
The non-breaking hyphen (‑) is used to define a hyphen character (-)
that does not break into a new line.
Some Useful HTML Character Entities
Result Description Name Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
™ trademark ™ ™
Note
Entity names are case sensitive.
Combining Diacritical Marks
A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Diacritical marks can be used in combination with alphanumeric characters to
produce a character that is not present in the character set (encoding) used
in the page.
Here are some examples:
Mark Character Construct Result
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
There are more examples in the next chapter.
Exercise?
What is the entity name that represents a less than < sign?
<
&less;
Submit Answer »
HTML Symbols
❮ PreviousNext ❯
Symbols or letters that are not present on your keyboard can be added to
HTML using entities.
HTML Symbol Entities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the
entity number (a decimal or a hexadecimal reference) for the symbol:
Example
Display the euro sign:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
Will display as:
I will display €
I will display €
I will display €
Try it Yourself »
Some Mathematical Symbols
Supported by HTML
Char Number Entity Description
∀ ∀ ∀ For all
∂ ∂ ∂ Partial differential
∃ ∃ ∃ There exists
∅ ∅ ∅ Empty sets
∇ ∇ ∇ Nabla
∈ ∈ ∈ Element of
∉ ∉ ∉ Not an element of
∋ ∋ ∋ Contains as member
∏ ∏ ∏ N-ary product
∑ ∑ ∑ N-ary summation
Full Math Symbols Reference
Some Greek Letters Supported by
HTML
Char Number Entity Description
Α Α Α GREEK ALPHA
Β Β Β GREEK BETA
Γ Γ Γ GREEK GAMMA
Δ Δ Δ GREEK DELTA
Ε Ε Ε GREEK EPSILON
Ζ Ζ Ζ GREEK ZETA
Full Greek Reference
Some Other Entities Supported by
HTML
Char Number Entity Description
© © © COPYRIGHT
® ® ® REGISTERED TRADEMARK
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← LEFT ARROW
←
↑ ↑ UP ARROW
↑
→ → RIGHT ARROW
→
↓ ↓ DOWN ARROW
↓
♠ ♠ SPADE
♠
♣ ♣ CLUB
♣
♥ ♥ HEART
♥
♦ ♦ DIAMOND
♦
Using Emojis in HTML
❮ PreviousNext ❯
Emojis are characters from the UTF-8 character set: 😄 😍 💗
Emoji Value
🗻 Try it »
🗻
🗼 Try it »
🗼
🗽 Try it »
🗽
🗾 Try it »
🗾
🗿 Try it »
🗿
😀 😀 Try it »
😁 😁 Try it »
😂 😂 Try it »
😃 😃 Try it »
😄 😄 Try it »
😅 😅 Try it »
Full HTML Emoji Reference
HTML Emojis Examples
🚀🚁🚂🚃🚄
HTML Emoji Transport Symbols
💺💻💼💽💾
HTML Emoji Office Symbols
👮👯👰👱👲
HTML Emoji People Symbols
🐂🐃🐄🐅🐆
HTML Emoji Animals Symbols
What are Emojis?
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.
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character
set used in the page.
This is specified in the <meta> tag:
<meta charset="UTF-8">
If not specified, UTF-8 is the default character set in HTML.
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always
be displayed using numbers (called entity numbers):
A is 65
B is 66
C is 67
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
Try it Yourself »
Example Explained
The <meta charset="UTF-8"> element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
To let the browser understand that you are displaying a character, you must
start the entity number with &# and end it with ; (semicolon).
Emoji Characters
Emojis are also characters from the UTF-8 alphabet:
😄 is 128516
😍 is 128525
💗 is 128151
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>😀</p>
<p>😀</p><p>😀</p><p>😀</p>
</body>
</html>
Try it Yourself »
Since Emojis are characters, they can be copied, displayed, and sized just like
any other character in HTML.
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Try it Yourself »
HTML Encoding (Character
Sets)
❮ PreviousNext ❯
To display an HTML page correctly, a web browser must know which
character set to use.
The HTML charset Attribute
The character set is specified in the <meta> tag:
Example
<meta charset="UTF-8">
The HTML5 specification encourages web developers to use the UTF-8
character set.
UTF-8 covers almost all of the characters and symbols in the world!
Full UTF-8 Reference
The ASCII Character Set
ASCII was the first character encoding standard for the web. It defined 128
different characters that could be used on the internet:
English letters (A-Z)
Numbers (0-9)
Special characters like ! $ + - ( ) @ < >.
The ANSI Character Set
ANSI (Windows-1252) was the original Windows character set:
Identical to ASCII for the first 127 characters
Special characters from 128 to 159
Identical to UTF-8 from 160 to 255
<meta charset="Windows-1252">
The ISO-8859-1 Character Set
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.
Identical to ASCII for the first 127 characters
Does not use the characters from 128 to 159
Identical to ANSI and UTF-8 from 160 to 255
HTML 4 Example
<meta http-equiv="Content-Type" content="text/html;charset=ISO-
8859-1">
HTML 5 Example
<meta charset="ISO-8859-1">
The UTF-8 Character Set
is identical to ASCII for the values from 0 to 127
Does not use the characters from 128 to 159
Identical to ANSI and 8859-1 from 160 to 255
Continues from the value 256 to 10 000 characters
<meta charset="UTF-8">
Full HTML Character Set Reference.
Differences Between Character Sets
The following table displays the differences between the character sets
described above:
Numb ASCII ANSI 8859 UTF-8 Description
32 space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 - - - - hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less than
61 = = = = equals sign
62 > > > > greater than
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin A
66 B B B B Latin B
67 C C C C Latin C
68 D D D D Latin D
69 E E E E Latin E
70 F F F F Latin F
71 G G G G Latin G
72 H H H H Latin H
73 I I I I Latin I
74 J J J J Latin J
75 K K K K Latin K
76 L L L L Latin L
77 M M M M Latin M
78 N N N N Latin N
79 O O O O Latin O
80 P P P P Latin P
81 Q Q Q Q Latin Q
82 R R R R Latin R
83 S S S S Latin S
84 T T T T Latin T
85 U U U U Latin U
86 V V V V Latin V
87 W W W W Latin W
88 X X X X Latin X
89 Y Y Y Y Latin Y
90 Z Z Z Z Latin 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 a
98 b b b b Latin small b
99 c c c c Latin small c
100 d d d d Latin small d
101 e e e e Latin small e
102 f f f f Latin small f
103 g g g g Latin small g
104 h h h h Latin small h
105 i i i i Latin small i
106 j j j j Latin small j
107 k k k k Latin small k
108 l l l l Latin small l
109 m m m m Latin small m
110 n n n n Latin small n
111 o o o o Latin small o
112 p p p p Latin small p
113 q q q q Latin small q
114 r r r r Latin small r
115 s s s s Latin small s
116 t t t t Latin small t
117 u u u u Latin small u
118 v v v v Latin small v
119 w w w w Latin small w
120 x x x x Latin small x
121 y y y y Latin small y
122 z z z z Latin small 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 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 S with caron
139 ‹ single left-pointing angle quotation mark
140 ΠLatin capital ligature OE
141 NOT USED
142 Ž Latin 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 s with caron
155 › single right-pointing angle quotation mark
156 œ Latin small ligature oe
157 NOT USED
158 ž Latin small z with caron
159 Ÿ Latin 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 A with grave
193 Á Á Á Latin A with acute
194 Â Â Â Latin A with circumflex
195 Ã Ã Ã Latin A with tilde
196 Ä Ä Ä Latin A with diaeresis
197 Å Å Å Latin A with ring above
198 Æ Æ Æ Latin AE
199 Ç Ç Ç Latin C with cedilla
200 È È È Latin E with grave
201 É É É Latin E with acute
202 Ê Ê Ê Latin E with circumflex
203 Ë Ë Ë Latin E with diaeresis
204 Ì Ì Ì Latin I with grave
205 Í Í Í Latin I with acute
206 Î Î Î Latin I with circumflex
207 Ï Ï Ï Latin I with diaeresis
208 Ð Ð Ð Latin Eth
209 Ñ Ñ Ñ Latin N with tilde
210 Ò Ò Ò Latin O with grave
211 Ó Ó Ó Latin O with acute
212 Ô Ô Ô Latin O with circumflex
213 Õ Õ Õ Latin O with tilde
214 Ö Ö Ö Latin O with diaeresis
215 × × × multiplication sign
216 Ø Ø Ø Latin O with stroke
217 Ù Ù Ù Latin U with grave
218 Ú Ú Ú Latin U with acute
219 Û Û Û Latin U with circumflex
220 Ü Ü Ü Latin U with diaeresis
221 Ý Ý Ý Latin Y with acute
222 Þ Þ Þ Latin Thorn
223 ß ß ß Latin small sharp s
224 à à à Latin small a with grave
225 á á á Latin small a with acute
226 â â â Latin small a with circumflex
227 ã ã ã Latin small a with tilde
228 ä ä ä Latin small a with diaeresis
229 å å å Latin small a with ring above
230 æ æ æ Latin small ae
231 ç ç ç Latin small c with cedilla
232 è è è Latin small e with grave
233 é é é Latin small e with acute
234 ê ê ê Latin small e with circumflex
235 ë ë ë Latin small e with diaeresis
236 ì ì ì Latin small i with grave
237 í í í Latin small i with acute
238 î î î Latin small i with circumflex
239 ï ï ï Latin small i with diaeresis
240 ð ð ð Latin small eth
241 ñ ñ ñ Latin small n with tilde
242 ò ò ò Latin small o with grave
243 ó ó ó Latin small o with acute
244 ô ô ô Latin small o with circumflex
245 õ õ õ Latin small o with tilde
246 ö ö ö Latin small o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small o with stroke
249 ù ù ù Latin small u with grave
250 ú ú ú Latin small u with acute
251 û û û Latin small with circumflex
252 ü ü ü Latin small u with diaeresis
253 ý ý ý Latin small y with acute
254 þ þ þ Latin small thorn
255 ÿ ÿ ÿ Latin small y with diaeresis
HTML Uniform Resource
Locators
❮ PreviousNext ❯
A URL is another word for a web address.
A URL can be composed of words (e.g. [Link]), or an Internet
Protocol (IP) address (e.g. [Link]).
Most people enter the name when surfing, because names are easier to
remember than numbers.
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
A Uniform Resource Locator (URL) is used to address a document (or other
data) on the web.
A web address like [Link] follows these
syntax rules:
scheme://[Link]:port/path/filename
Explanation:
scheme - defines the type of Internet service (most common is http
or https)
prefix - defines a domain prefix (default for http is www)
domain - defines the Internet domain name (like [Link])
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the
site)
filename - defines the name of a document or resource
Common URL Schemes
The table below lists some common schemes:
Schem Short for Used for
e
http HyperText Transfer Protocol Common web pages. Not encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a
URL contains characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format that can be
transmitted over the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by
hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a
plus (+) sign, or %20.
Try It Yourself
Hello Günter Submit
If you click "Submit", the browser will URL encode the input before it is sent
to the server.
A page at the server will display the received input.
Try some other input and click Submit again.
ASCII Encoding Examples
Your browser will encode input, according to the character-set used in your
page.
The default character-set in HTML5 is UTF-8.
Character From Windows-1252 From UTF-8
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85
For a complete reference of all URL encodings, visit our URL Encoding
Reference.
HTML Versus XHTML
❮ PreviousNext ❯
XHTML is a stricter, more XML-based version of HTML.
What is XHTML?
XHTML stands for EXtensible HyperText Markup Language
XHTML is a stricter, more XML-based version of HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
Why XHTML?
XML is a markup language where all documents must be marked up correctly
(be "well-formed").
XHTML was developed to make HTML more extensible and flexible to work
with other data formats (such as XML). In addition, browsers ignore errors in
HTML pages, and try to display the website even if it has some errors in the
markup. So XHTML comes with a much stricter error handling.
If you want to study XML, please read our XML Tutorial.
The Most Important Differences from
HTML
<!DOCTYPE> is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
Elements must always be properly nested
Elements must always be closed
Elements must always be in lowercase
Attribute names must always be in lowercase
Attribute values must always be quoted
Attribute minimization is forbidden
XHTML - <!DOCTYPE ....> Is
Mandatory
An XHTML document must have an XHTML <!DOCTYPE> declaration.
The <html>, <head>, <title>, and <body> elements must also be present,
and the xmlns attribute in <html> must specify the xml namespace for the
document.
Example
Here is an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
XHTML Elements Must be Properly
Nested
In XHTML, elements must always be properly nested within each other, like
this:
Correct:
<b><i>Some text</i></b>
Wrong:
<b><i>Some text</b></i>
XHTML Elements Must Always be
Closed
In XHTML, elements must always be closed, like this:
Correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Wrong:
<p>This is a paragraph
<p>This is another paragraph
XHTML Empty Elements Must Always
be Closed
In XHTML, empty elements must always be closed, like this:
Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="[Link]" alt="Happy face" />
Wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="[Link]" alt="Happy face">
XHTML Elements Must be in
Lowercase
In XHTML, element names must always be in lowercase, like this:
Correct:
<body>
<p>This is a paragraph</p>
</body>
Wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
XHTML Attribute Names Must be in
Lowercase
In XHTML, attribute names must always be in lowercase, like this:
Correct:
<a href="[Link] our HTML
tutorial</a>
Wrong:
<a HREF="[Link] our HTML
tutorial</a>
XHTML Attribute Values Must be
Quoted
In XHTML, attribute values must always be quoted, like this:
Correct:
<a href="[Link] our HTML
tutorial</a>
Wrong:
<a href=[Link] our HTML
tutorial</a>
XHTML Attribute Minimization is
Forbidden
In XHTML, attribute minimization is forbidden:
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checke
d" />
<input type="text" name="lastname" disabled="disabled" />
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
Validate HTML With The W3C
Validator
Put your web address in the box below:
[Link] w w .w [Link]/html/html_validate.html
Validate the page
HTML Forms
❮ PreviousNext ❯
An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
Example
First name:
John
Last name:
Doe
Submit
Try it Yourself »
The <form> Element
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: HTML Form
Elements.
The <input> Element
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 choice
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
<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: HTML Input Types.
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of an
input field is 20 characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user 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.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bik
e">
<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="Boa
t">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The Submit Button
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.
Example
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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit
The Name Attribute for <input>
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.
Example
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>
Try it Yourself »
Exercise?
What is the correct HTML element for defining a form?
<schema>
<ff>
<form>
HTML Form Attributes
❮ PreviousNext ❯
This chapter describes the different attributes for the
HTML <form> element.
The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a 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:
Example
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>
Try it Yourself »
Tip: If the action attribute is omitted, the action is set to the current page.
The Target Attribute
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.
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
Try it Yourself »
The Method Attribute
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.
Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
Try it Yourself »
Example
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
Try it Yourself »
Notes on GET:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is
visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google
Notes on POST:
Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of
data.
Form submissions with POST cannot be bookmarked
Tip: Always use POST if the form data contains sensitive or personal
information!
The Autocomplete Attribute
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.
Example
A form with autocomplete on:
<form action="/action_page.php" autocomplete="on">
Try it Yourself »
The Novalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated
when submitted.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>
Try it Yourself »
Exercise?
What is the correct syntax for opening the form's result in a new browser tab?
<form action='/action_page.php' target='_blank'>
<form action='/action_page.php' target='_top'>
<form action='/action_page.php' target='_new'>
Submit Answer »
List of All <form> Attributes
Attribute Description
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for meth
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
HTML Form Elements
❮ PreviousNext ❯
This chapter describes all the different HTML form elements.
The 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>
The <input> Element
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.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Try it Yourself »
All the different values of the type attribute are covered in the next
chapter: HTML Input Types.
The <label> Element
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
The <select> element defines a drop-down list:
Example
<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>
Try it Yourself »
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:
Example
<option value="fiat" selected>Fiat</option>
Try it Yourself »
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<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>
Try it Yourself »
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<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>
Try it Yourself »
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself »
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Try it Yourself »
The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!
</button>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Click Me!
Note: Always specify the type attribute for the button element. Different
browsers may use different default types for the button element.
The <fieldset> and <legend>
Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<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><b
r>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Personalia:First name:
John
Last name:
Doe
Submit
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
The <output> Element
The <output> element represents the result of a calculation (like one
performed by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Try it Yourself »
Exercise?
What is the correct HTML element to group related data in a form and also, by default,
draw a border around it?
<group>
<fieldset>
<fence>
Submit Answer »
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Input Types
❮ PreviousNext ❯
This chapter describes the different types for the HTML <input> element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Tip: The default value of the type attribute is "text".
Input Type Text
<input type="text"> defines a single-line text input field:
Example
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example
<form>
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Username:
Password:
The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-
handler.
The form-handler is typically a server page with a script for processing input
data.
The form-handler is specified in the form's action attribute:
Example
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit
If you omit the submit button's value attribute, the button will get a default
text:
Example
<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>
Try it Yourself »
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to
their default values:
Example
<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" value="Reset">
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit Reset
If you change the input values and then click the "Reset" button, the form-
data will be reset to the default values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
HTML
CSS
JavaScript
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bik
e">
<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="Boa
t">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click
Me!">
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Try it Yourself »
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Try it Yourself »
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02">
</form>
Try it Yourself »
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with
no time zone.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" nam
e="birthdaytime">
</form>
Try it Yourself »
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail
address.
Depending on browser support, the e-mail address can be automatically
validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard
to match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Try it Yourself »
Input Type Image
The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
</form>
Try it Yourself »
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for
file uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Try it Yourself »
Input Type Hidden
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!
Example
<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>
Try it Yourself »
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Try it Yourself »
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a
value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max=
"5">
</form>
Try it Yourself »
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page lo
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:
Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max=
"100" step="10" value="30">
</form>
Try it Yourself »
Input Type Range
The <input type="range"> defines a control for entering a number whose
exact value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Try it Yourself »
Input Type Search
The <input type="search"> is used for search fields (a search field behaves
like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Try it Yourself »
Input Type Tel
The <input type="tel"> is used for input fields that should contain a
telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-
9]{2}-[0-9]{3}">
</form>
Try it Yourself »
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Try it Yourself »
Input Type Url
The <input type="url"> is used for input fields that should contain a URL
address.
Depending on browser support, the url field can be automatically validated
when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard
to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Try it Yourself »
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Try it Yourself »
Exercise?
What is the default value of the INPUT element's type attribute?
button
submit
text
Submit Answer »
HTML Input Type Attribute
Tag Description
<input type=""> Specifies the input type to display
HTML Input Attributes
❮ PreviousNext ❯
This chapter describes the different attributes for the
HTML <input> element.
The value Attribute
The input value attribute specifies an initial value for an input field:
Example
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>
Try it Yourself »
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example
A read-only input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonl
y><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Try it Yourself »
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disable
d><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Try it Yourself »
The size Attribute
The input size attribute specifies the visible width, in characters, of an input
field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search,
tel, url, email, and password.
Example
Set a width for an input field:
<form>
<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>
Try it Yourself »
The maxlength Attribute
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.
Example
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>
Try it Yourself »
The min and max Attributes
The input min and max attributes specify the minimum and maximum values
for an input field.
The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal
values.
Example
Set a max date, a min date, and a range of legal values:
<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>
Try it Yourself »
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Try it Yourself »
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's
value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search,
url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special
characters):
<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>
Try it Yourself »
The placeholder Attribute
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, number, tel, email, and password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Try it Yourself »
The required Attribute
The input required attribute specifies that an input field must be filled out
before submitting the form.
The required attribute works with the following input types: text, search, url,
tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
Try it Yourself »
The step Attribute
The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to
create a range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Try it Yourself »
Note: Input restrictions are not foolproof, and JavaScript provides many ways
to add illegal input. To safely restrict input, it must also be checked by the
receiver (the server)!
The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically
get focus when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
<form>
<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>
Try it Yourself »
The height and width Attributes
The input height and width attributes specify the height and width of
an <input type="image"> element.
Tip: Always specify both the height and width attributes for images. If height
and width are set, the space required for the image is reserved when the
page is loaded. Without these attributes, the browser does not know the size
of the image, and cannot reserve the appropriate space to it. The effect will
be that the page layout will change during loading (while the images load).
Example
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48
" height="48">
</form>
Try it Yourself »
The list Attribute
The input list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field
should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to
type in a field, the browser should display options to fill in the field, based on
earlier typed values.
The autocomplete attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on, and off for one input field:
<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>
Try it Yourself »
Tip: In some browsers you may need to activate an autocomplete function
for this to work (Look under "Preferences" in the browser's menu).
Exercise?
What is the default value of the INPUT element's size attribute?
10
15
20
Submit Answer »
HTML Form and Input Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Input form* Attributes
❮ PreviousNext ❯
This chapter describes the different form* attributes for the
HTML <input> element.
The form Attribute
The input form attribute specifies the form the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form>
element it belongs to.
Example
An input field located outside of the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
<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">
Try it Yourself »
The formaction Attribute
The input formaction attribute specifies the URL of the file that will process
the input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and
image.
Example
An HTML form with two submit buttons, with different actions:
<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="Subm
it as Admin">
</form>
Try it Yourself »
The formenctype Attribute
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.
Example
A form with two submit buttons. The first sends the form-data with default
encoding, the second sends the form-data encoded as "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<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>
Try it Yourself »
The formmethod Attribute
The input formmethod attribute defines the HTTP method for sending form-data
to the action URL.
Note: This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the following input types: submit and
image.
The form-data can be sent as URL variables (method="get") or as an HTTP
post transaction (method="post").
Notes on the "get" method:
This method appends the form-data to the URL in name/value pairs
This method is useful for form submissions where a user want to
bookmark the result
There is a limit to how much data you can place in a URL (varies
between browsers), therefore, you cannot be sure that all of the form-
data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or
other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
This method sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be bookmarked
The "post" method is more robust and secure than "get", and "post"
does not have size limitations
Example
A form with two submit buttons. The first sends the form-data with
method="get". The second sends the form-data with method="post":
<form action="/action_page.php" method="get">
<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>
Try it Yourself »
The formtarget Attribute
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.
Example
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>
Try it Yourself »
The formnovalidate Attribute
The input formnovalidate attribute specifies that an <input> element should
not be validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute works with the following input types: submit.
Example
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>
Try it Yourself »
The novalidate Attribute
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be
validated when submitted.
Example
Specify that no form-data should be validated on submit:
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Exercise?
What is not a legal form attribute for the INPUT element?
formaction
formtype
formtarget
Submit Answer »
HTML Form and Input Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Canvas Graphics
❮ PreviousNext ❯
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a
multicolor text.
What is HTML Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.
The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
Canvas is supported by all major browsers.
Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no
border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and
a width and height attribute to define the size of the canvas. To add a border,
use the style attribute.
Here is an example of a basic, empty canvas:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
</canvas>
Try it Yourself »
Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do
the drawing.
Here are some examples:
Draw a Line
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0, 0);
[Link](200, 100);
[Link]();
</script>
Try it Yourself »
Draw a Circle
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link]();
[Link](95, 50, 40, 0, 2 * [Link]);
[Link]();
</script>
Try it Yourself »
Draw a Text
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "30px Arial";
[Link]("Hello World", 10, 50);
</script>
Try it Yourself »
Stroke Text
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "30px Arial";
[Link]("Hello World", 10, 50);
</script>
Try it Yourself »
Draw Linear Gradient
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
// Create gradient
var grd = [Link](0, 0, 200, 0);
[Link](0, "red");
[Link](1, "white");
// Fill with gradient
[Link] = grd;
[Link](10, 10, 150, 80);
</script>
Try it Yourself »
Draw Circular Gradient
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
// Create gradient
var grd = [Link](75, 50, 5, 90, 60, 100);
[Link](0, "red");
[Link](1, "white");
// Fill with gradient
[Link] = grd;
[Link](10, 10, 150, 80);
</script>
Try it Yourself »
Draw Image
Example
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
var img = [Link]("scream");
[Link](img, 10, 10);
</script>
Try it Yourself »
HTML Canvas Tutorial
To learn more about <canvas>, please read our HTML Canvas Tutorial.
HTML SVG Graphics
❮ PreviousNext ❯
SVG (Scalable Vector Graphics)
SVG defines vector-based graphics in XML, which can be directly embedded
in HTML pages.
SVG graphics are scalable, and do not lose any quality if they are zoomed or
resized:
SVG
SVG is supported by all major browsers.
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines graphics in XML format
Each element and attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other standards, such as CSS, DOM, XSL and
JavaScript
The <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, rectangles, circles, polygons,
text, and much more.
SVG Circle
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
</body>
</html>
Try it Yourself »
SVG Rectangle
Example
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" strok
e-width="6" fill="blue" />
</svg>
Try it Yourself »
SVG Rectangle with Opacity and
Rounded Corners
Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »
SVG Star
Example
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-
rule:evenodd;" />
</svg>
Try it Yourself »
SVG Gradient Ellipse and Text
SVG
Example
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Try it Yourself »
Differences Between SVG and
Canvas
SVG is a language for describing 2D graphics in XML, while Canvas draws 2D
graphics, on the fly (with JavaScript).
SVG is XML based, which means that every element is available within the
SVG DOM. You can attach JavaScript event handlers to SVG graphics.
In SVG, each drawn shape is remembered as an object. If attributes of an
SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is
forgotten by the browser. If its position should be changed, the entire scene
needs to be redrawn, including any objects that might have been covered by
the graphic.
Comparison of SVG and Canvas
The table below shows some important differences between Canvas and SVG:
SVG Canvas
Resolution independent Resolution dependent
Support for event handlers No support for event handlers
Good text rendering capabilities Poor text rendering capabilities
Slow rendering if complex You can save the resulting ima
Not suited for game applications Well suited for graphic-intensiv
SVG Tutorial
To learn more about SVG, please read our SVG Tutorial.
HTML Multimedia
❮ PreviousNext ❯
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you
can hear or see, like images, music, sound, videos, records, films, animations,
and more.
Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.
Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
Common Video Formats
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. Developed by the Moving Pictures Expert Group. The first po
.mpeg on the web. Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly us
cameras and TV hardware. Plays well on Windows computers, but n
browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly u
cameras and TV hardware. Plays well on Windows computers, but n
browsers.
QuickTim .mov QuickTime. Developed by Apple. Commonly used in video cameras
e Plays well on Apple computers, but not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with
.ram Does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra compone
.flv in web browsers.
Ogg .ogg Theora Ogg. Developed by the [Link] Foundation. Supported by H
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly us
or MP4 cameras and TV hardware. Supported by all browsers and recomm
YouTube.
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.
Common Audio Formats
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 (Musical Instrument Digital Interface). Main format for all electro
.midi like synthesizers and PC sound cards. MIDI files do not contain sound,
that can be played by electronics. Plays well on all computers and mu
not in web browsers.
RealAudi .rm RealAudio. Developed by Real Media to allow streaming of audio with
o .ram Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on W
computers, but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default for
Plays well on Apple computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macint
operating systems. Supported by HTML.
Ogg .ogg Ogg. Developed by the [Link] Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most p
music players. Combines good compression (small files) with high qua
by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by a
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
HTML Video
❮ PreviousNext ❯
The HTML <video> element is used to show a video on a web page.
Video
Example
Courtesy of Big Buck Bunny:
Try it Yourself »
The HTML <video> Element
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
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):
Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports
the <video> element.
Element
<video> 4.0 9.0 3.5 4.0
HTML Video Formats
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
HTML Video - Media Types
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML Video - Methods, Properties,
and Events
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.
Example: Using JavaScript
Play/Pause Big Small Normal
Video courtesy of Big Buck Bunny.
Try it Yourself »
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
HTML Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <vid
<track> Defines text tracks in media players
HTML Audio
❮ PreviousNext ❯
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
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):
Example
<audio controls autoplay muted>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports
the <audio> element.
Element
<audio> 4.0 9.0 3.5 4.0
HTML Audio Formats
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
HTML Audio - Media Types
File Format Media Type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
HTML Audio - Methods, Properties,
and Events
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 HTML Audio/Video DOM Reference.
HTML Audio Tags
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video>
HTML Plug-ins
❮ PreviousNext ❯
Plug-ins are computer programs that extend the standard functionality of
the browser.
Plug-ins
Plug-ins were designed to be used for many different purposes:
To run Java applets
To run Microsoft ActiveX controls
To display Flash movies
To display maps
To scan for viruses
To verify a bank id
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
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:
Example
<object width="100%" height="500px" data="[Link]"></object>
Try it Yourself »
Or images if you like:
Example
<object data="[Link]"></object>
Try it Yourself »
The <embed> Element
The <embed> element is supported in all major browsers.
The <embed> element also defines an embedded object within an HTML
document.
Web browsers have supported the <embed> element for a long time.
However, it has not been a part of the HTML specification before HTML5.
Example
<embed src="[Link]">
Try it Yourself »
Note that the <embed> element does not have a closing tag. It can not
contain alternative text.
The <embed> element can also be used to include HTML in HTML:
Example
<embed width="100%" height="500px" src="[Link]">
Try it Yourself »
HTML YouTube Videos
❮ PreviousNext ❯
The easiest way to play videos in HTML, is to use YouTube.
Struggling with Video Formats?
Converting videos to different formats can be difficult and time-consuming.
An easier solution is to let YouTube play the videos in your web page.
YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.
You can use this id, and refer to your video in the HTML code.
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the
player
Add any other parameters to the URL (see below)
Example
<iframe width="420" height="315"
src="[Link]
</iframe>
Try it Yourself »
YouTube Autoplay + Mute
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).
YouTube - Autoplay + Muted
<iframe width="420" height="315"
src="[Link]
autoplay=1&mute=1">
</iframe>
Try it Yourself »
YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).
YouTube Loop
Add playlist=videoID and loop=1 to let your video loop forever.
loop=0 (default) - The video will play only once.
loop=1 - The video will loop (forever).
YouTube - Loop forever
<iframe width="420" height="315"
src="[Link]
playlist=tgbNymZ7vqY&loop=1">
</iframe>
Try it Yourself »
YouTube Controls
Add controls=0 to NOT display controls in the video player.
controls=0 - Player controls does not display.
controls=1 (default) - Player controls is displayed.
YouTube - Controls
<iframe width="420" height="315"
src="[Link]
</iframe>
Try it Yourself »
HTML - What is a Web API?
❮ PreviousNext ❯
A Web API is a developer's dream.
It can extend the functionality of the browser
It can greatly simplify complex functions
It can provide easy syntax to complex code
What is Web API?
API stands for Application Programming Interface. An API is some kind of
interface that includes a set of functions and subroutines that allow
programmers to access specific features or data of an application, operating
system or other services.
A Web API is an application programming interface for the Web.
HTML APIs
All browsers have a set of built-in Web APIs to support complex operations,
and to help accessing data.
Here are some of the main HTML5 APIs:
1. Geolocation API - This API is used to access the current location of a user
(with latitude and longitude).
2. Drag and Drop API - This API enables you to use drag-and-drop features
in browsers.
3. Web Storage API - This API has mechanisms to let browsers store
key/value pairs (in a more intuitive way than cookies).
4. Web Workers API - This API allows a JavaScript to run in the background,
without affecting the performance of the page. Users can continue to do
whatever they want: clicking, selecting things, etc., while the web worker
runs in the background.
5. Server-Sent Events API - This API allows a web page to automatically
get updates from a server.
6. Canvas API - This API lets you draw graphics, on the fly, via JavaScript.
Notes on Using HTML APIs
When implementing an HTML API, you should always:
Check Browser Capability - Always check that the target browsers support
the API. Always add script or message to be run if a browser does not support
it.
Add Robust Error Handling - Add robust error handling to take care of
scenarios where an API may not function as expected, to ensure a seamless
user experience.
Request User Permission - When using an API that accesses sensitive
data, like the Geolocation API (which will access the user's geographical
position), always prompt the user for consent before proceeding.
Third Party APIs
Third party APIs are not built into your browser.
To use these APIs, you will have to download the code from the Web.
Examples:
YouTube API - Allows you to display videos on a web site.
Twitter API - Allows you to display Tweets on a web site.
Facebook API - Allows you to display Facebook info on a web site.
HTML Geolocation API
❮ PreviousNext ❯
The Geolocation API is used to get the user's current location.
Locate the User's Position
The Geolocation API is used to access the user's current location.
Since this can compromise privacy, the location is not available unless the
user approves it.
Try It
Note: The Geolocation API is only available on secure contexts such as
HTTPS.
Tip: The Geolocation API is most accurate for devices with GPS, like
smartphones or smartwatches.
Browser Support
The numbers in the table specify the first browser version that fully supports
Geolocation.
API
Geolocation 5.0 12.0 3.5 5.0
Using HTML Geolocation API
The Geolocation API is accessed via a call to [Link]. This will
cause the browser to ask the user for permission to access their location
data. If the user accept, the browser will search for the best available
functionality on the device to access this information (for example GPS).
The getCurrentPosition() method is used to return the user's current location.
The example below returns the latitude and longitude of the user's current
location:
Example
<script>
const x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](success, error);
} else {
[Link] = "Geolocation is not supported by this
browser.";
}
}
function success(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
}
function error() {
alert("Sorry, no position available.");
}
</script>
Try it Yourself »
Example explained:
Check if Geolocation is supported
If Geolocation is supported, run the getCurrentPosition() method. If
not, display a message to the user
The success() function outputs the user's location in latitude and
longitude
The error() function alerts a text if the browser retrieves an error
in getCurrentPosition()
Error Handling and Rejections
The second parameter of the getCurrentPosition() method is used to handle
errors. It specifies a function to run if it fails to get the user's location.
Here is an example of a more specific error handling:
Example
function error(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
[Link] = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
[Link] = "Location information is unavailable."
break;
case [Link]:
[Link] = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
[Link] = "An unknown error occurred."
break;
}
}
Try it Yourself »
Location-specific Information
Geolocation is also very useful for location-specific information, like:
Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)
The getCurrentPosition() Method -
Return Data
The getCurrentPosition() method returns an object on success. The latitude,
longitude and accuracy properties are always returned. The other properties
are returned if available:
Property Returns
[Link] The latitude as a decimal number (always returned)
[Link] The longitude as a decimal number (always returned)
[Link] The accuracy of position (always returned)
[Link] The altitude in meters above the mean sea level (returned if av
[Link] The altitude accuracy of position (returned if available)
y
[Link] The heading as degrees clockwise from North (returned if avail
[Link] The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)
Geolocation Object - Other
interesting Methods
The Geolocation object also has other interesting methods:
watchPosition() - Returns the current location of the user and
continues to return updated location 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 a smartphone):
Example
<script>
const x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](success, error);
} else {
[Link] = "Geolocation is not supported by this
browser.";
}
}
function success(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
}
function error(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
[Link] = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
[Link] = "Location information is unavailable."
break;
case [Link]:
[Link] = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
[Link] = "An unknown error occurred."
break;
}
}
</script>
Try it Yourself »
HTML Drag and Drop API
❮ PreviousNext ❯
The HTML Drag and Drop API enables an element to be dragged and
dropped.
Example
Drag the W3Schools image into the second rectangle.
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and
drag it to a different location.
Browser Support
The numbers in the table specify the first browser version that fully supports
Drag and Drop.
API
Drag and Drop 4.0 9.0 3.5 6.0
HTML Drag and Drop API Example
The example below is a simple drag and drop example:
Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
[Link]("text", [Link]);
}
function dragoverHandler(ev) {
[Link]();
}
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHa
ndler(event)"></div>
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="d
ragstartHandler(event)" width="336" height="69">
</body>
</html>
Try it Yourself »
It might seem complicated, but lets go through all the different parts of a
drag and drop event.
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to true:
<img id="img1" draggable="true">
or:
<p id="p1" draggable="true">Draggable text</p>
What to Drag - ondragstart and
setData()
Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute of the <img> element calls a
function (dragstartHandler(ev)), that specifies what data to be dragged.
The [Link]() method sets the data type and the value of the
dragged data:
function dragstartHandler(ev) {
[Link]("text", [Link]);
}
In this case, the data type is "text" and the value is the id of the draggable
element ("img1").
Where to Drop - ondragover
The ondragover attrribute of the <div> element calls a function
(dragoverHandler(ev)), that 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 preventDefault() method for the ondragover event:
function dragoverHandler(ev) {
[Link]();
}
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute of the <div> element calls a
function, dropHandler(event):
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
}
Code explained:
Call preventDefault() to prevent the browser default handling of the
data (default is open as link on drop)
Get the dragged data with the [Link]() method.
This method will return any data that was set to the same type in
the setData() method
The dragged data is the id of the dragged element ("img1")
Append the dragged element into the drop element
More Examples
Example
How to drag and drop an <h1> element to a <div> element:
<script>
function dragstartHandler(ev) {
[Link]("text", [Link]);
}
function dragoverHandler(ev) {
[Link]();
}
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHa
ndler(event)"></div>
<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)
">[Link]</h1>
Try it Yourself »
Example
How to drag and drop an <a> element to a <div> element:
<script>
function dragstartHandler(ev) {
[Link]("text", [Link]);
}
function dragoverHandler(ev) {
[Link]();
}
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHa
ndler(event)"></div>
<a id="link1" href="[Link] draggable="true" ondra
gstart="dragstartHandler(event)">[Link]</a>
Try it Yourself »
Example
How to drag and drop an image back and forth between two <div> elements:
Try it Yourself »
HTML Web Storage API
❮ PreviousNext ❯
HTML Web Storage API; better than cookies.
What is HTML Web Storage?
With web storage, 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.
Web Storage API Objects
Web storage provides two objects for storing data in the browser:
[Link] - stores data with no expiration date (data is
not lost when the browser tab is closed)
[Link] - stores data for one session (data is lost
when the browser tab is closed)
Browser Support
The numbers in the table specify the first browser version that fully supports
Web Storage.
API
localStorage 4.0 8.0 3.5 4.0
sessionStorage 4.0 8.0 3.5 4.0
Test Web Storage API Support
Before using web storage, we can quickly check browser support for
localStorage and sessionStorage:
Example
Test browser support:
<script>
const x = [Link]("result");
if (typeof(Storage) !== "undefined") {
[Link] = "Your browser supports Web storage!";
} else {
[Link] = "Sorry, no Web storage support!";
}
</script>
Try it Yourself »
The localStorage Object
The localStorage object stores the data with no expiration date. The data will
not be lost when the browser is closed, and will be available the next day,
week, or year.
Example
Use localStorage to set and retrieve name and value pairs:
<script>
const x = [Link]("result");
if (typeof(Storage) !== "undefined") {
// Store
[Link]("lastname", "Smith");
[Link]("bgcolor", "yellow");
// Retrieve
[Link] = [Link]("lastname");
[Link] = [Link]("bgcolor");
} else {
[Link] = "Sorry, no Web storage support!";
}
</script>
Try it Yourself »
Example explained:
Use the [Link]() method to create name/value pairs
Use the [Link]() method to retrieve the values set
Retrieve the value of "lastname" and insert it into an element with
id="result"
Retrieve the value of "bgcolor" and insert it into the style
backgroundColor of the element with id="result"
The syntax for removing the "lastname" localStorage item is as follows:
[Link]("lastname");
Note: Name/value pairs are always stored as strings. Remember to convert
them to another format when needed!
Counting Clicks with localStorage
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:
Example
<script>
function clickCounter() {
const x = [Link]("result");
if (typeof(Storage) !== "undefined") {
if ([Link]) {
[Link] = Number([Link])
+1;
} else {
[Link] = 1;
}
[Link] = "You have clicked the button
" + [Link] + " time(s)!";
} else {
[Link] = "Sorry, no Web storage support!";
}
}
</script>
Try it Yourself »
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it
stores the data for only one session! The data is deleted when the user closes
the specific browser tab.
Counting Clicks with sessionStorage
The following example counts the number of times a user has clicked a
button, in the current session:
Example
<script>
function clickCounter() {
const x = [Link]("result");
if (typeof(Storage) !== "undefined") {
if ([Link]) {
[Link] =
Number([Link])+1;
} else {
[Link] = 1;
}
[Link] = "You have clicked the button
" + [Link] + " time(s) in this session!";
} else {
[Link] = "Sorry, no Web storage support!";
}
}
</script>
Try it Yourself »
HTML Web Workers API
❮ PreviousNext ❯
A web worker is an external JavaScript file that runs in the background,
without affecting the performance of the page.
What is a Web Worker?
When executing scripts in an HTML page, the page becomes unresponsive
until the script is finished.
A web worker is an external JavaScript file 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.
Web workers are useful for heavy code that can't be run on the main thread,
without causing long tasks that make the page unresponsive.
Browser Support
The numbers in the table specify the first browser version that fully support
the Web Workers API.
API
Web Workers 4.0 10.0 3.5 4.0
Web Workers API Example
The example below creates a simple web worker that count numbers in the
background:
Example
Count numbers:
Start Worker Stop Worker
Try it Yourself »
Note: Normally web workers are not used for such simple scripts, but for
more CPU intensive tasks!
Check Web Worker API Support
Before using web worker, we can quickly check browser support:
Example
Test browser support:
<script>
const x = [Link]("result");
if(typeof(Worker) !== "undefined") {
[Link] = "Your browser support Web Workers!";
} else {
[Link] = "Sorry, your browser does not support Web
Workers.";
}
</script>
Try it Yourself »
Create a .js Web Worker File
Now, let's create a web worker in an external JavaScript file.
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();
Note: The important part of the code above is the postMessage() method -
which is used to post messages back to the HTML page.
Create a Web Worker Object
Once we have created the .js web worker file, we can call it from an HTML
page.
The following lines checks if a worker (w) already exists, if not - it creates a
new web worker object and points to the .js file: "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Then we can SEND and RETRIEVE messages from the web worker.
Data is sent between web workers and the main thread via a system of
messages - both sides send their messages using the postMessage() method,
and respond to messages via the onmessage event handler.
Add an onmessage event listener to the web worker object.
[Link] = function(event){
[Link]("result").innerHTML = [Link];
};
When the web worker in the .js posts a message, the code within the event
listener is executed. The data from the web worker is stored in [Link].
Terminate a Web Worker
When a web worker object is created, it will continue to listen for messages
until it is terminated.
To terminate a web worker object, and free browser/computer resources, use
the terminate() method:
[Link]();
Reuse the Web Worker
If you set the web worker variable to undefined, after it has been terminated,
you can reuse the worker/code:
w = undefined;
Full Web Worker Example
We have already seen the Web Worker code in the .js file.
Below is the full code for the HTML page:
Example
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
const x = [Link]("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
[Link] = function(event) {
[Link] = [Link];
};
} else {
[Link] = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
[Link]();
w = undefined;
}
</script>
</body>
</html>
Try it Yourself »
Web Workers and the DOM
Since web workers are in external .js files, they do not have access to the
following JavaScript objects:
The window object
The document object
The parent object
HTML Server-Sent Events
API
❮ PreviousNext ❯
The Server-Sent Events (SSE) API enables pushing messages/updates from
a server to the web page via HTTP connection.
Server-Sent Events - One Way
Messaging
A server-sent event is when a web page automatically gets
messages/updates from a server.
Normally, a web page has to request data from the server, but with server-
sent events, the updates are pushed automatically.
Examples: Facebook/Twitter updates, stock market updates, news feeds,
sport results, etc.
Browser Support
The numbers in the table specify the first browser version that fully support
the Server-Sent Events API.
API
SSE 6.0 79.0 6.0 5.0
Receive Server-Sent Event
Notifications
The EventSource object is used to receive server-sent event notifications:
Example
<script>
const x = [Link]("result");
// Check browser support for SSE
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
[Link] = function(event) {
[Link] += [Link] + "<br>";
};
} else {
[Link] = "Sorry, no support for server-sent events.";
}
</script>
Try it Yourself »
Example explained:
Create a new EventSource object, and specify the URL of the page
sending the updates (in this example "demo_sse.php")
Each time an update is received, the onmessage event occurs
When an onmessage event occurs, put the received data into the
element with id="result"
Check Browser Support
In the tryit example above there were some extra lines of code to check
browser support for server-sent events:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
Server-Side Code Example
For the example above to work, you need a server capable of sending data
updates (like PHP or ASP).
The server-side event stream syntax is simple. Set the "Content-Type"
header to "text/event-stream". Now you can start sending event streams.
Code in PHP (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Code in ASP (VB) (demo_sse.asp):
<%
[Link] = "text/event-stream"
[Link] = -1
[Link]("data: The server time is: " & now())
[Link]()
%>
Code explained:
Set the "Content-Type" header to "text/event-stream"
Specify that the page should not cache
Output the data to send (Always start with "data: ")
Flush the output data back to the web page
The EventSource Object
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
You might also like
- Learn HTML & CSS Basics for Web DevelopmentNo ratings yetLearn HTML & CSS Basics for Web Development29 pages
- HTML Basics: Structure and Elements GuideNo ratings yetHTML Basics: Structure and Elements Guide117 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure11 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure74 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure99 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure155 pages
- Understanding HTML Elements and AttributesNo ratings yetUnderstanding HTML Elements and Attributes23 pages
- Filing KRA NIL Returns Without Spouse OptionNo ratings yetFiling KRA NIL Returns Without Spouse Option3 pages
- Understanding Multilevel Security ModelsNo ratings yetUnderstanding Multilevel Security Models4 pages
- Software Requirements for Food Express AppNo ratings yetSoftware Requirements for Food Express App20 pages
- Trellix DLP Endpoint 11.10.200 Release NotesNo ratings yetTrellix DLP Endpoint 11.10.200 Release Notes19 pages
- Java String Handling and Operations GuideNo ratings yetJava String Handling and Operations Guide193 pages
- Microsoft Defender for Endpoint OverviewNo ratings yetMicrosoft Defender for Endpoint Overview6 pages
- Thompson's Construction in Compiler DesignNo ratings yetThompson's Construction in Compiler Design4 pages
- Introduction to Artificial IntelligenceNo ratings yetIntroduction to Artificial Intelligence26 pages
- Learning TOGAF ADM Preliminary Phase in 5 MinsNo ratings yetLearning TOGAF ADM Preliminary Phase in 5 Mins25 pages
- Cybersecurity Professional Certificate ProgramNo ratings yetCybersecurity Professional Certificate Program22 pages
- Jupyter Kernel 'Python 3.11.5' Timeout ErrorNo ratings yetJupyter Kernel 'Python 3.11.5' Timeout Error5 pages