This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Replace with page name.

Make a change, Save a change, View a change.

This is a paragraph.

This is another paragraph.

This is a link W3Schools.com

An Unordered HTML List

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk
This is a link

The href Attribute

HTML links are defined with the a tag. The link address is specified in the href attribute:

The src Attribute

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

The alt Attribute

The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:

The style Attribute

The style attribute is used to specify the styling of an element, like color:

I am a paragraph.

The title Attribute

Mouse over this paragraph, to display the title attribute as a tooltip.

This is a link

About W3Schools

You cannot omit quotes around an attribute value if the value contains spaces.

If you move the mouse over the paragraph above, your browser will only display the first word from the title.

Single or Double Quotes?

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Move your mouse over the paragraphs below to see the effect:

John with double quotes

John with single quotes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

You can change the size of a heading with the style attribute, using the font-size property.

This is heading 1

This is some text.


This is heading 2

This is some other text.


This is heading 2

This is some other text.

My First HTML

This is a paragraph.

This is a paragraph.

This is a paragraph.

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Don't forget to close your HTML tags!

This is
a paragraph
with line breaks

In HTML, spaces and new lines are ignored:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

The pre tag preserves both spaces and line breaks:

   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.

I am normal

I am red

I am blue

I am big

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

Centered Heading

Centered paragraph.

This text is bold

This text is italic

This is subscript and superscript

This text is normal.

This text is bold.

This text is normal.

This text is strong.

This text is normal.

This text is italic.

This text is normal.

This text is emphasized.

HTML Small Formatting

HTML Marked Formatting

The del element represents deleted (removed) text.

My favorite color is blue red.

The ins element represent inserted (added) text.

My favorite color is red.

This is subscripted text.

This is superscripted text.

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Browsers usually insert quotation marks around the q element.

WWF's goal is to: Build a future where people live in harmony with nature.

Browsers usually indent blockquote elements.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

The WHO was founded in 1948.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

The HTML address element defines contact information (author/owner) of a document or article.

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

The HTML cite element defines the title of a work.

Browsers usually display cite elements in italic.

The Scream

The Scream by Edvard Munch. Painted in 1893.

If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):

This line will be written from right to left

This is a paragraph.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

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.

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.

Hello World

Hello World

Hello World

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

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

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

In HTML, you can specify colors using RGB values.

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

By using equal values for red, green, and blue, you will get different shades of gray.

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

In HTML, you can specify colors using Hex values.

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

By using equal values for red, green, and blue, you will get different shades of gray.

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

In HTML, you can specify colors using HSL values.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

With HSL colors, less saturation mean less color. 0% is completely gray.

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

With HSL colors, 0% lightness means black, and 100 lightness means white.

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness according to how dark/light the gray color should be.

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)

You can make transparent colors by using the HSLA color value.