Playing

play

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

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

This is a paragraph.

This is another paragraph.

This is a link W3Schools.com

An Unordered HTML List

An Ordered HTML List

My First Heading

My first paragraph.

This is a paragraph

This is a paragraph

The href Attribute

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

This is a link

The src Attribute

HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:

img girl

Size Attributes

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

girl

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:

Girl with a jacket Girl with a jacket

If we try to display an image that does not exist, the value of the alt attribute will be displayed instead.

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 This is a link

About W3Schools

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

The HTML head element contains meta data.

Meta data is data about the HTML document.

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

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.