0% found this document useful (0 votes)

84 views175 pages

Untitled Document

HTML is the standard markup language for creating web pages. It consists of elements that tell the browser how to display content like headings, paragraphs, images, and links. A basic HTML document structure includes an <html> element wrapping <head> and <body> elements. The <head> contains the <title> and the <body> contains visible content like <h1> headings and <p> paragraphs. HTML elements are defined with start and end tags and can be nested within each other.

Uploaded by

Ayush Singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

84 views175 pages

Untitled Document

Uploaded by

Ayush Singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 175

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 tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!

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 (the white area above) 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 Basic Examples

❮ PreviousNext ❯

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="https://www.w3schools.com">This is a link</a>

Try it Yourself »

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

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

Example

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

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:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.

Inspect an HTML Element:

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

HTML Elements
❮ PreviousNext ❯

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 tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!

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>

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

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

HTML Attributes
❮ PreviousNext ❯

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="https://www.w3schools.com">Visit 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

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="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash, it will
be relative to the current page. Example: src="img_girl.jpg". If the URL begins
with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you
change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which
specifies 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
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>

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

<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="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:

Example

<p title=About 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

HTML Headings
❮ PreviousNext ❯
HTML headings are titles or subtitles that you want to display on a webpage.

Example

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 »

HTML Paragraphs
❮ PreviousNext ❯

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 »

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML tag to add a paragraph with the text "Hello World!".

<html>

<body>

</body>
</html>

Submit Answer »

Start the Exercise

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements
and their attributes.

Tag Description

<p> Defines a paragraph

<hr> Defines a thematic change in the content

<br> Inserts a single line break

<pre> Defines pre-formatted text

HTML Styles
❮ PreviousNext ❯

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:

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:

<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

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

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 »

HTML Comments
❮ PreviousNext ❯

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:

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

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

Try it Yourself »

Hide Content
Comments can be used to hide content.

Which can be helpful if you hide content temporarily:

Example

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

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

Try it Yourself »

You can also hide more than one line, everything between 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 paragaph:

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

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>

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 adds 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:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Try it Yourself »

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.

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

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

BLUE

Example

rgb(255, 0, 0)
rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Try it Yourself »
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):

Experiment by mixing the RGBA values below:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

99
BLUE

ALPHA

0.5

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)

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

GREEN

BLUE

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

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

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

Manipulate Text

Colors, Boxes

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="styles.css">

</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 "styles.css" file looks like:

"styles.css":

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="https://www.w3schools.com/html/styles.css">

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/styles.css">

Try it Yourself »
Example

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

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

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.

HTML Exercises
Test Yourself With Exercises

Exercise:

Use CSS to set the background color of the document (body) to yellow.

<!DOCTYPE html>

<html>

<head>

<style>

:yellow;

</style>

</head>

</body>

</html>

Submit Answer »

Start the Exercise

HTML Style Tags

Tag Description

<style> Defines style information for an HTML document

<link> Defines a link between a document and an external resource

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 W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</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="https://www.w3schools.com/" 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 "https://www" part):

Example

<h2>Absolute URLs</h2>

<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

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

<img src="smiley.gif" 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="mailto:[email protected]">Send 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="document.location='default.asp'">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="https://www.w3schools.com/html/" 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="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Try it Yourself »

Example

Link to a page located in the html folder on the current web site:

<a href="/html/default.asp">HTML tutorial</a>

Try it Yourself »

Example

Link to a page located in the same folder as the current page:

<a href="default.asp">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

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="wrongname.gif" 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="html5.gif" alt="HTML5 Icon" width="128" height="128">

</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/html5.gif" 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="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">

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; it can suddenly be removed or
changed.

Animated Images
HTML allows animated GIFs:

Example

<img src="programming.gif" 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

<img src="smiley.gif" 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="smiley.gif" alt="Smiley face"

style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face"

style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>

Try it Yourself »

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):
Abbreviati File Format File Extension
on

APNG Animated Portable Network .apng

Graphics

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,

image .pjp

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

HTML Tables
❮ PreviousNext ❯

HTML tables allow web developers to arrange data into rows and columns.

Example

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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> are the content of the table cell.

Example

<table>

<tr>

<td>Tobias</td>

<td>Linus</td>

</tr>

</table>

Try it Yourself »

Note: table data elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Table Rows
Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Example

<table>

<tr>

<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

</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 where 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 headers, in those cases use the <th> tag
instead of the <td> tag:

Example

Let the first row be table headers:

<table>

<tr>

<th>Person 1</th>

<th>Person 2</th>

<th>Person 3</th>

</tr>

<tr>

<td>Tobias</td>
<td>Linus</td>

</tr>

<tr>

</tr>

</table>

Try it Yourself »

By default, the text in <th> elements are bold and centered, but you can
change that with CSS.

HTML Exercises

Test Yourself With Exercises

Exercise:

Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".
<table>

<tr>

<td>Jill Smith</td>

</tr>

</table>

Submit Answer »

Start the Exercise

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

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>

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

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

<dd>- white cold drink</dd>

</dl>

Try it Yourself »

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

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

Example - Disc

<li>Coffee</li>

</ul>

Try it Yourself »

Example - Circle

<li>Coffee</li>

</ul>

Try it Yourself »

Example - Square

<li>Coffee</li>

</ul>

Try it Yourself »

Example - None
<ul style="list-style-type:none;">

<li>Coffee</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="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

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>

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

<li>Coffee</li>

</ol>

Try it Yourself »

Uppercase Letters:

<li>Coffee</li>

</ol>

Try it Yourself »

Lowercase Letters:
<ol type="a">

<li>Coffee</li>

</ol>

Try it Yourself »

Uppercase Roman Numbers:

<li>Coffee</li>

</ol>

Try it Yourself »

Lowercase Roman Numbers:

<li>Coffee</li>

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

<li>Coffee</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>

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

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>

<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

HTML Block and Inline Elements

❮ PreviousNext ❯
Every HTML element has a default display value, depending on what type of
element it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to
the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element
does not.

The <div> element is a block-level element.

Example

<div>Hello World</div>

Try it Yourself »

Here are the block-level elements in HTML:

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:

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

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city

in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>

</div>
Try it Yourself »

The <span> Element

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
● There are two display values: block and inline
● 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 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
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 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.

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

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

Using 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 {}.

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

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="mystyle.css">

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 are used by browsers (how
to display content or reload page), by search engines (keywords), and other
web services.

Examples
Define the character set used:

Define keywords for search engines:

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 name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="author" content="John Doe">

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:

Last name:

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 Displays a radio button (for selecting one of many

type="radio"> choices)

<input Displays a checkbox (for selecting zero or more of

type="checkbox"> many choices)

<input Displays a submit button (for submitting the form)

type="submit">

<input Displays a clickable button

type="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 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.

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

<input type="radio" id="css" name="fav_language" value="CSS">

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

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label>

</form>

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:

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

Last name:

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>

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

</select>

Try it Yourself »

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

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

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>

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

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

<legend>Personalia:</legend>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

Try it Yourself »

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

Personalia:
First name:

Last name:

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

<option value="Internet Explorer">

</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="x.value=parseInt(a.value)+parseInt(b.value)">

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

</form>

Try it Yourself »

HTML Exercises

Test Yourself With Exercises

Exercise:

In the form below, add an empty drop down list with the name "cars".
<form action="/action_page.php">

</>

</form>

Submit Answer »

Start the Exercise

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:

Last name:

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

Example

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

Try it Yourself »

Input Type Reset

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

Example

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

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

<input type="radio" id="css" name="fav_language" value="CSS">

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

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label>

</form>

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" name="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 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 let 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 loads (for type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input

field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value

against

readonly Specifies that an input field is read only (cannot be

changed)
required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:

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 »

HTML Exercises

Test Yourself With Exercises

Exercise:

In the form below, add an input field for text, with the name "username" .

</form>
Submit Answer »

Start the Exercise

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

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

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

HTML (Introduction)
No ratings yet
HTML (Introduction)
134 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
133 pages
HTML Tutorial for Beginners
100% (1)
HTML Tutorial for Beginners
22 pages
Document 2
No ratings yet
Document 2
102 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
03 HTML
No ratings yet
03 HTML
113 pages
Hướng dẫn lập trình web - HTML
No ratings yet
Hướng dẫn lập trình web - HTML
296 pages
HTML
100% (4)
HTML
108 pages
HTML Tutorial
No ratings yet
HTML Tutorial
63 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
97 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
HTML Is The Standard Markup Language For Web Pages
No ratings yet
HTML Is The Standard Markup Language For Web Pages
5 pages
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
HTML With CSS Programming
No ratings yet
HTML With CSS Programming
177 pages
HTML
No ratings yet
HTML
61 pages
01 HTML
No ratings yet
01 HTML
96 pages
What Is HTML
No ratings yet
What Is HTML
64 pages
HTML Course
No ratings yet
HTML Course
107 pages
HTML Introduction 254
No ratings yet
HTML Introduction 254
81 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 pages
HTML Basics: Structure and Elements
100% (1)
HTML Basics: Structure and Elements
9 pages
HTML
No ratings yet
HTML
68 pages
What Is HTML?
No ratings yet
What Is HTML?
19 pages
HTML Css Notes
No ratings yet
HTML Css Notes
49 pages
Comprehensive HTML5 Tutorial Guide
No ratings yet
Comprehensive HTML5 Tutorial Guide
32 pages
Lecture 02 - HTML Basics1
No ratings yet
Lecture 02 - HTML Basics1
74 pages
HTML Tutorial
No ratings yet
HTML Tutorial
22 pages
HTML Introduction
No ratings yet
HTML Introduction
36 pages
W3school (HTML Notes)
0% (1)
W3school (HTML Notes)
13 pages
Understanding Empty HTML Elements
No ratings yet
Understanding Empty HTML Elements
4 pages
What Is HTML?
No ratings yet
What Is HTML?
9 pages
HTML N HTML 5 Tutorial
100% (1)
HTML N HTML 5 Tutorial
143 pages
HTML N HTML 5 Tutorial
No ratings yet
HTML N HTML 5 Tutorial
143 pages
HTML Notes
No ratings yet
HTML Notes
73 pages
Write HTML Using Notepad or Textedit: Example
No ratings yet
Write HTML Using Notepad or Textedit: Example
23 pages
HTML Introduction
No ratings yet
HTML Introduction
92 pages
PGDM 2010-12 HTML Tutorial
No ratings yet
PGDM 2010-12 HTML Tutorial
43 pages
Tutorial: Examples in Each Chapter
No ratings yet
Tutorial: Examples in Each Chapter
59 pages
HTML Tutorial W3schools
80% (5)
HTML Tutorial W3schools
59 pages
HTML Basic
No ratings yet
HTML Basic
92 pages
What Is HTML?
No ratings yet
What Is HTML?
10 pages
Understanding HTML Tags and Attributes
No ratings yet
Understanding HTML Tags and Attributes
80 pages
What Is HTML?: My First Heading
No ratings yet
What Is HTML?: My First Heading
43 pages
HTML Basics and Example Code
No ratings yet
HTML Basics and Example Code
19 pages
What Is HTML?: Example
No ratings yet
What Is HTML?: Example
21 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
Web Development
No ratings yet
Web Development
32 pages
A Complete Reference of HTML
No ratings yet
A Complete Reference of HTML
160 pages
Lesson 2
No ratings yet
Lesson 2
35 pages
Web Development Lec 2
No ratings yet
Web Development Lec 2
31 pages
HTML Basics: Structure & Elements
No ratings yet
HTML Basics: Structure & Elements
23 pages
Previous Next Chapter : HTML Introduction
No ratings yet
Previous Next Chapter : HTML Introduction
32 pages
HTML Tutorial (Vizzy)
No ratings yet
HTML Tutorial (Vizzy)
112 pages
Webtechnologies - CIE-356 T - Unit 1 Notes
No ratings yet
Webtechnologies - CIE-356 T - Unit 1 Notes
60 pages
XISAD Topic3 Software Architecture Design
No ratings yet
XISAD Topic3 Software Architecture Design
3 pages
Computer Software: Mcgraw-Hill/Irwin
No ratings yet
Computer Software: Mcgraw-Hill/Irwin
49 pages
Data Management Systems: Database Architectures and The Web Transparencies
No ratings yet
Data Management Systems: Database Architectures and The Web Transparencies
27 pages
Rockwell in Roboguide v3
No ratings yet
Rockwell in Roboguide v3
11 pages
880 Series User Manual - MAN-027.2023
No ratings yet
880 Series User Manual - MAN-027.2023
88 pages
ALU40 Roll-Up Door for Vehicles
No ratings yet
ALU40 Roll-Up Door for Vehicles
4 pages
Uppcl Bill
No ratings yet
Uppcl Bill
1 page
Library User Orientation 2016
No ratings yet
Library User Orientation 2016
1 page
Senior Java Developer Resume Profile
No ratings yet
Senior Java Developer Resume Profile
9 pages
Eee Prospectus
No ratings yet
Eee Prospectus
8 pages
Arabic Oud Manual
No ratings yet
Arabic Oud Manual
11 pages
ETAGs as EADs Under EU Regulation 305/2011
No ratings yet
ETAGs as EADs Under EU Regulation 305/2011
13 pages
AWS Cost Breakdown for IT Teams
100% (1)
AWS Cost Breakdown for IT Teams
1 page
DevOps and Linux Basics Tutorial
No ratings yet
DevOps and Linux Basics Tutorial
24 pages
Reduced Harmonics Technologyin Altivar 212 Adjustable Speed Drive Controllers
No ratings yet
Reduced Harmonics Technologyin Altivar 212 Adjustable Speed Drive Controllers
8 pages
Group 4 Stem12m Scaffold 1 Task Designation
No ratings yet
Group 4 Stem12m Scaffold 1 Task Designation
2 pages
Using App Accounts and Virtual NIC in HPE ILO 7-A00147207enw
No ratings yet
Using App Accounts and Virtual NIC in HPE ILO 7-A00147207enw
6 pages
Spe-35189-Ms Folger Paper
No ratings yet
Spe-35189-Ms Folger Paper
13 pages
IIT Jodhpur Recruitment 2023 PDF
No ratings yet
IIT Jodhpur Recruitment 2023 PDF
7 pages
Nature Events Impact on Business
No ratings yet
Nature Events Impact on Business
1 page
Acon (Polymer Thru-Hole) RS Series
No ratings yet
Acon (Polymer Thru-Hole) RS Series
3 pages
2024-2025 S2 SB Assignment
No ratings yet
2024-2025 S2 SB Assignment
3 pages
17 Bid BUYDMD031617 Section II
No ratings yet
17 Bid BUYDMD031617 Section II
4 pages
Data Analysis for Researchers
No ratings yet
Data Analysis for Researchers
28 pages
附件 MP三杆阀
No ratings yet
附件 MP三杆阀
5 pages
CS10-8L: Computer Programming Laboratory Machine Problem #9: Conditional Statements
No ratings yet
CS10-8L: Computer Programming Laboratory Machine Problem #9: Conditional Statements
5 pages
How To Create An As - Net Addin
No ratings yet
How To Create An As - Net Addin
3 pages
Strategic Product Development Goals
No ratings yet
Strategic Product Development Goals
12 pages
Student Entrepreneurship Report
No ratings yet
Student Entrepreneurship Report
10 pages
8942 Tampa Ave 2ND Review 060324
No ratings yet
8942 Tampa Ave 2ND Review 060324
27 pages