ArmenianChinese (Traditional)EnglishGermanRussian
HTML 5/3 -

HTML 5/3

HTML Tutorial & Video Lessons

HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn – You will enjoy it!

HTML Tutorial

HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn – You will enjoy it!

HTML HOME

  • HTML is the standard markup language for Web pages.
  • With HTML you can create your own Website.
  • HTML is easy to learn – You will enjoy it!

Study our free HTML Tutorial »


 

Easy Learning with HTML “Try it Yourself”

With our “Try it Yourself” editor, you can edit the HTML code and view the result:

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Try it Yourself »

Click on the “Try it Yourself” button to see how it works.


 

HTML Examples

In this HTML tutorial, you will find more than 200 examples. With our online “Try it Yourself” editor, you can edit and test each example yourself!

Go to HTML Examples!


 

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Exercise:

Add a “tooltip” to the paragraph below with the text “About W3Schools”.

 

=”About W3Schools”>W3Schools is a web developer’s site.

Start the Exercise


 

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!


 

HTML References

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

HTML Introduction

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>

 

Example Explained

  • The  declaration defines that this document is an HTML5 document
  • The  element is the root element of an HTML page
  • The  element contains meta information about the HTML page
  • The 

HTML Editors

A simple text editor is all you need to learn HTML.


Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.


Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad


Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”

Then under “Open and Save”, check the box that says “Display HTML files as HTML code instead of formatted text”.

Then open a new document to place the code.


Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>


Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.


Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:


W3Schools Online Editor – “Try it Yourself”

With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

 

<h1>My first Heading</h1>
<p>This is a paragraph.</p>

 

</body>
</html>

Try it Yourself »

Click on the “Try it Yourself” button to see how it works.

HTML Basic Examples

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

The HTML document itself begins with  and ends with .

The visible part of the HTML document is between  and .

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Try it Yourself »


 

The Declaration

The  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  declaration is not case sensitive.

The  declaration for HTML5 is:

<!DOCTYPE html>

 

HTML Headings

HTML headings are defined with the 

 to 

 

 tags.

 defines the most important heading. 

 

 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 

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

Example

<a href="https://www.learnprosoft.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  tag.

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

Example

<img src="learnprosoft.jpg" alt="learnprosoft.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 Editors

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 tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note: Some HTML elements have no content (like the
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 (

 and 

 

):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Try it Yourself »

 

Example Explained

The  element is the root element and it defines the whole HTML document.

It has a start tag  and an end tag .

Then, inside the  element there is a  element:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

The  element defines the document’s body.

It has a start tag  and an end tag .

Then, inside the  element there are two other elements: 

 and 

 

:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

The 

 element defines a heading.

It has a start tag 

 and an end tag 

:

<h1>My First Heading</h1>

The 

 element defines a paragraph.

It has a start tag 

 and an end tag 

:

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

 means the same as 

.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

At Learnprosoft we always use lowercase tag names.


 

HTML Tag Reference

Learnprosoft tag reference contains additional information about these tags and their attributes.

TagDescription
<html>Defines the root of an HTML document
<body>Defines the document’s body
<h1> to <h6>Defines HTML headings

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Attributes

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  tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<a href="https://www.learnprosoft.com">Visit learnprosoft</a>

Try it Yourself »

You will learn more about links in our HTML Links chapter.


 

The src Attribute

The  tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

<img src="img_girl.jpg">

Try it Yourself »

There are two ways to specify the URL in the src attribute:

1. Absolute URL – Links to an external image that is hosted on another website. Example: src=”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  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  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  tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

You can see all the language codes in our HTML Language Code Reference.


 

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<p title="I'm a tooltip">This is a paragraph.</p>

Try it Yourself »


 

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

At learnprosoft 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.learnprosoft.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.learnprosoft.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 learnprosoft>

Try it Yourself »

 At learnprosoft 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  specifies the URL of the page the link goes to
  • The src attribute of  specifies the path to the image to be displayed
  • The width and height attributes of  provide size information for images
  • The alt attribute of  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  tag declares the language of the Web page
  • The title attribute defines some extra information about an element

HTML Exercises

Test Yourself With Exercises

Exercise:

Add a “tooltip” to the paragraph below with the text “About W3Schools”.

 

=”About W3Schools”>W3Schools is a web developer’s site.

Start the Exercise


 

HTML Attribute Reference

A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.

HTML Headings

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

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.

 headings should be used for main headings, followed by 

 

 headings, then the less important 

 

, and so on.

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.

 headings should be used for main headings, followed by 

 

 headings, then the less important 

 

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

Test Yourself With Exercises

Exercise:

Use the correct HTML tag to add a heading with the text “London”.

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Start the Exercise


 

HTML Tag Reference

W3Schools’ tag reference contains additional information about these tags and their attributes.

TagDescription
 Defines the root of an HTML document
 Defines the document’s body

 

to

 
Defines HTML headings

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text.


HTML Paragraphs

The HTML 

 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 


 tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The 


 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 


 tag is an empty tag, which means that it has no end tag.


 

HTML Line Breaks

The HTML 
 element defines a line break.

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

 Element

The HTML 

 element defines preformatted text.

The text inside a 

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


Start the Exercise


 

HTML Tag Reference

learnprosoft’ tag reference contains additional information about HTML elements and their attributes.

TagDescription

 

 

Defines a paragraph

 


 

Defines a thematic change in the content
 Inserts a single line break

 

 
Defines pre-formatted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.


Example

I am Red

I am Blue

I am Big

Try it Yourself »


 

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style=”property:value;>

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.


Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style=”background-color:powderblue;”>

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

</body>

Try it Yourself »

 

Example

Set background color for two different elements:

<body>

<h1 style=”background-color:powderblue;”>This is a heading</h1>
<p style=”background-color:tomato;”>This is a paragraph.</p>

</body>

Try it Yourself »


 

Text Color

The CSS color property defines the text color for an HTML element:

Example

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

Try it Yourself »


Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Try it Yourself »


Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

Try it Yourself »


Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

Try it Yourself »


Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML attribute, and CSS, to set the color of the paragraph to “blue”.

 

=”;”>This is a paragraph.

Start the Exercise

HTML Text Formatting

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:

  •  – Bold text
  •  – Important text
  •  – Italic text
  •  – Emphasized text
  •  – Marked text
  •  – Smaller text
  •  – Deleted text
  •  – Inserted text
  •  – Subscript text
  •  – Superscript text

HTML and Elements

The HTML  element defines bold text, without any extra importance.

Example

<b>This text is bold</b>

Try it Yourself »

The HTML  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 and Elements

The HTML  element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The  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  element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in  with an emphasis, using verbal stress.

Example

<em>This text is emphasized</em>

Try it Yourself »


HTML Element

The HTML  element defines smaller text:

Example

<small>This is some smaller text.</small>

Try it Yourself »


HTML Element

The HTML  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 Element

The HTML  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 Element

The HTML  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 Element

The HTML  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 Element

The HTML  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 Exercises

Test Yourself With Exercises

Exercise:

Add extra importance to the word “degradation” in the paragraph below.

WWF’s mission is to stop the degradation of our planet’s natural environment.

Start the Exercise


HTML Text Formatting Elements

TagDescription
 Defines bold text
 Defines emphasized text 
 Defines a part of text in an alternate voice or mood
 Defines smaller text
 Defines important text
 Defines subscripted text
 Defines superscripted text
 Defines inserted text
 Defines deleted text
 Defines marked/highlighted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Quotation and Citation Elements

In this chapter we will go through the 

,

, and  HTML elements.

Example

Here is a quote from WWF’s website:

For nearly 60 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.

Try it Yourself »


 

HTML

for Quotations

The HTML 

 element defines a section that is quoted from another source.

Browsers usually indent 

 elements.

Example

<p>Here is a quote from WWF’s website:</p>
<blockquote cite=”http://www.worldwildlife.org/who/index.html”>
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.
</blockquote>

Try it Yourself »


HTML for Short Quotations

The HTML  tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>

Try it Yourself »


 

HTML for Abbreviations

The HTML  tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.

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

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. 

Example

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

Try it Yourself »


HTML

for Contact Information

The HTML 

 tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the 

 element usually renders in italic, and browsers will always add a line break before and after the 
 
 element.

Example

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Try it Yourself »


HTML for Work Title

The HTML  tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person’s name is not the title of a work.

The text in the  element usually renders in italic.

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

Try it Yourself »


HTML for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML  tag is used to override the current text direction:

Example

<bdo dir=”rtl”>This text will be written from right to left</bdo>

Try it Yourself »


HTML Exercises

Test Yourself With Exercises

Exercise:

Use an HTML element to add quotation marks around the letters “cool”.

I am so cool.

Start the Exercise


HTML Quotation and Citation Elements

TagDescription
 Defines an abbreviation or acronym

 

 
Defines contact information for the author/owner of a document
 Defines the text direction

 

 

Defines a section that is quoted from another source
 Defines the title of a work
 Defines a short inline quotation

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Comments

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

Try it Yourself »


HTML Exercises

Test Yourself With Exercises

Exercise:

Use the HTML comment tag to make a comment out of the “This is a comment” text.

This is a heading

 This is a comment 

This is a paragraph.

Start the Exercise

HTML Links

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  tag defines a hyperlink. It has the following syntax:

<a href=”url>link text</a>

The most important attribute of the  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.w3.org/”>W3C</a></p>
<p><a href=”https://www.google.com/”>Google</a></p>

<h2>Relative URLs</h2>
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/default.asp”>CSS Tutorial</a></p>

Try it Yourself »


 

HTML Links – Use an Image as a Link

To use an image as a link, just put the  tag inside the  tag:

Example

<a href=”default.asp”>
<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  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  element (inside ) 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

TagDescription
 Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Links – Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.


 

HTML Link Colors

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

 

 

Try it Yourself »


 

Link Buttons

A link can also be styled as a button, by using CSS:

This is a link

Example

 

 

Try it Yourself »

To learn more about CSS, go to our CSS Tutorial.


HTML Link Tags

TagDescription
 Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Links – Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.


Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark – first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example

First, use the id attribute to create a bookmark:

<h2 id=”C4″>Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

Example

<a href=”#C4″>Jump to Chapter 4</a>

Try it Yourself »

You can also add a link to a bookmark on another page:

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>

 

Chapter Summary

  • Use the id attribute (id=”value“) to define bookmarks in a page
  • Use the href attribute (href=”#value“) to link to the bookmark

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML to make the text below into a link to “default.html”.

 >Visit our HTML tutorial.

Start the Exercise


HTML Link Tags

TagDescription
 Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Images

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  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  tag creates a holding space for the referenced image.

The  tag is empty, it contains attributes only, and does not have a closing tag.

The  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 widthheight, 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″>

<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

</body>
</html>

Try it Yourself »


Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example

<img src=”/images/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  tag inside the  tag:

Example

<a href=”default.asp”>
  <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):

AbbreviationFile FormatFile Extension
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

Chapter Summary

  • Use the HTML  element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
  • Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.


HTML Exercises

Test Yourself With Exercises

Exercise:

Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.

=”250″ =”400″>

Start the Exercise


HTML Image Tags

TagDescription
Defines an image
 Defines an image map
 Defines a clickable area inside an image map
 Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.


Image Maps

The HTML 

 tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more 

 tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Workplace

Sun Mercury Venus

Example

Here is the HTML source code for the image map above:

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>

<map name=”workmap”>
  <area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>
  <area shape=”rect” coords=”290,172,333,250″ alt=”Phone” href=”phone.htm”>
  <area shape=”circle” coords=”337,300,44″ alt=”Coffee” href=”coffee.htm”>
</map>

Try it Yourself »


How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.


 

The Image

The image is inserted using the  tag. The only difference from other images is that you must add a usemap attribute:

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Tip: You can use any image as an image map!


Create Image Map

Then, add a 

 element.

The 

 element is used to create an image map, and is linked to the image by using the required name attribute:

<map name=”workmap”>

The name attribute must have the same value as the ‘s usemap attribute .


The Areas

Then, add the clickable areas.

A clickable area is defined using an 

 element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

  • rect – defines a rectangular region
  • circle – defines a circular region
  • poly – defines a polygonal region
  • default – defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image. 


Shape=”rect”

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

 
 
 

Workplace

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

 
 
 

Workplace

Now we have enough data to create a clickable rectangular area:

Example

<area shape=”rect” coords=”34, 44, 270, 350″ href=”computer.htm”>

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “computer.htm”:

 

Workplace


Shape=”circle”

To add a circle area, first locate the coordinates of the center of the circle:

337,300

 
 
 

Workplace

Then specify the radius of the circle:

44 pixels

 
 

Workplace

Now you have enough data to create a clickable circular area:

Example

<area shape=”circle” coords=”337, 300, 44″ href=”coffee.htm”>

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “coffee.htm”:

 

Workplace


Shape=”poly”

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

French Food

We have to find the x and y coordinates for all edges of the croissant:

French Food

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example

<area shape=”poly” coords=”140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147″ href=”croissant.htm”>

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “croissant.htm”:

French Food


Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the 

 element to execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

<map name=”workmap”>
  <area shape=”circle” coords=”337,300,44″ href=”coffee.htm” onclick=”myFunction()”>
</map>

<script>
function myFunction() {
  alert(“You clicked the coffee cup!”);
}
</script>

Try it Yourself »


Chapter Summary

    • Use the HTML 

       

       element to define an image map

    • Use the HTML 
  •  element to define the clickable areas in the image map
  • Use the HTML usemap attribute of the  element to point to an image map

HTML Image Tags

TagDescription
Defines an image
 Defines an image map
 Defines a clickable area inside an image map
 Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Background Images

A background image can be specified for almost any HTML element.


Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

Add a background image on a HTML element:

<p style=”background-image: url(‘img_girl.jpg’);”>

Try it Yourself »

You can also specify the background image in the 

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.


How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

Example of favicon

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.

Next, add a  element to your “index.html” file, after the 

HTML Tables

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


Example

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

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 »


Video Introduction to HTML Tables

We have made a video tutorial that covers all the basics of HTML – in a new fun format :-}
Watch the chapter about HTML Tables for free!

More Videos

Subscribe to PRO for $4.99/month to access the full video with 22 chapters!

You also unlock powerful features, such as W3Schools ad-free and website hosting, and you can cancel the subscription at any time.

See the full details here.


Table Cells

Each table cell is defined by a 

 and a 

 tag.

td stands for table data.

Everything between 

 and 

 are the content of the table cell.

Example

<table>
  <tr>
    <td>Emil</td>
    <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 

 and end with a 

 tag.

tr stands for table row.

Example

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Try it Yourself »

You can have as many rows as you like in a table, just make sure that the number of cells are the same in each row.

Note: There are times 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 

 tag instead of the 

 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>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Try it Yourself »

By default, the text in 

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

 

Jill Smith50

Start the Exercise


HTML Table Tags

TagDescription
 Defines a table
 Defines a header cell in a table
 Defines a row in a table
  Defines a cell in a table
 Defines a table caption
 Specifies a group of one or more columns in a table for formatting
 

Specifies column properties for each column within a

element

 Groups the header content in a table
 Groups the body content in a table
 Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Table Borders

HTML tables can have borders of different styles and shapes.


How To Add a Border

When you add a border to a table, you also add borders around each table cell:

   
   
   

To add a border, use the CSS border property on tableth, and td elements:

Example

table, th, td {
  border: 1px solid black;
}

Try it Yourself »


Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

   
   
   

Example

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Try it Yourself »


 

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

   
   
   

Example

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Try it Yourself »


Round Table Borders

With the border-radius property, the borders get rounded corners:

   
   
   

Example

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Try it Yourself »


Skip the border around the table by leaving out table from the css selector:

   
   
   

Example

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Try it Yourself »


Dotted Table Borders

With the border-style property, you can set the appereance of the border.

   
   
   

The following values are allowed:

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Example

 th, td {
  border-style: dotted;
}

Try it Yourself »


Border Color

With the border-color property, you can set the color of the border.

   
   
   

Example

 th, td {
  border-color: #96D4D4;
}

Try it Yourself »

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.


   
   
   
   
   
   
   
   

Use the style attribute with the width or height properties to specify the size of a table, row or column.


HTML Table Width

To set the width of a table, add the style attribute to the 

 element:

Example

Set the width of the table to 100%:

<table style=”width:100%”>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the 

 element.

HTML Table Column WidthTo set the size of a specific column, add the style attribute on a 

 or 

 element:

Example

Set the width of the first column to 70%:

<table style=”width:100%”>
  <tr>
    <th style=”width:70%”>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »


 

HTML Table Row Height

   
   
   
   
   
   

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

<table style=”width:100%”>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style=”height:200px”>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »


HTML Exercises

Test Yourself With Exercises

Exercise:

Use CSS styles to make the table 300 pixels wide.

>  

    First Name    Last Name    Points  

 

    Jill    Smith    50  

 

Start the Exercise

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.


EMILTOBIASLINUS
   
   
   
   
   
8:00  
9:00  
10:00  
11:00  
12:00  
13:00  
 MONTUEWEDTHUFRI
8:00     
9:00     
10:00     
11:00     
12:00     
DECEMBER
   
   
   
   
   

HTML Table Headers

Table headers are defined with th elements, each th element represents a table cell.

Example

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »


Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a th element:

Example

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

Try it Yourself »


 

Align Table Headers

By default, table headers are bold and centered:

FirstnameLastnameAge
JillSmith50
EveJackson94

To left-align the table headers, use the CSS text-align property:

Example

th {
  text-align: left;
}

Try it Yourself »


Header for Multiple Columns

You can have a header that spans over two or more columns.

NameAge
JillSmith50
EveJackson94

To do this, use the colspan attribute on the 

 element:

Example

<table>
  <tr>
    <th colspan=”2″>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.


Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings
MonthSavings
January$100
February$50

To add a caption to a table, use the 

 tag:

Example

<table style=”width:100%”>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »

Note: The 

 tag should be inserted immediately after the  tag.


HTML Exercises

Test Yourself With Exercises

Exercise:

Add a table caption that says “Names”.

 

First NameLast NamePoints
JillSmith50

Start the Exercise

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.


With Padding
hellohellohello
hellohellohello
hellohellohello
With Spacing
hellohellohello
hellohellohello
hellohellohello

HTML Table – Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
  padding: 15px;
}

Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottompadding-left, and padding-right properties:

Example

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Try it Yourself »


HTML Table – Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

table {
  border-spacing: 30px;
}

Try it Yourself »

HTML Table Colspan & Rowspan

HTML tables can have cells that spans over multiple rows and/or columns.


NAME 
   
   
   
   
APRIL  
  
  
   
   
2022
   
FIESTA 
 
   

HTML Table – Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example

<table>
  <tr>
    <th colspan=”2″>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

Try it Yourself »

Note: The value of the colspan attribute represents the number of columns to span.


HTML Table – Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan=”2″>Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

Try it Yourself »

Note: The value of the rowspan attribute represents the number of rows to span.


 

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML attribute to make the first TH element span two columns.

      >Name

 

Age

Jill

Smith

50

Eve

Jackson

94

Start the Exercise

HTML Table Styling

Use CSS to make your tables look better.


HTML Table – Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1234
5678
9101112
13141516
17181920

To style every other table row element, use the :nth-child(even) selector like this:

Example

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Try it Yourself »

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.


HTML Table – Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

1234
5678
9101112
13141516
17181920

Set the :nth-child(even) for table data elements like this:

Example

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Try it Yourself »

Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells.


 

You can combine the styling from the two examples above and you will have stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

         
         
         
         
         

Use an rgba() color to specify the transparency of the color:

Example

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Try it Yourself »


Horizontal Dividers

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example

tr {
  border-bottom: 1px solid #ddd;
}

Try it Yourself »


Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

tr:hover {background-color: #D6EEEE;}

Try it Yourself »

HTML Table Colgroup

The 

 element is used to style specific columns of a table.


HTML Table Colgroup

If you want to style the two first columns of a table, use the 

 and 


 elements.

MONTUEWEDTHUFRISATSUN
1234567
891011121314
15161718192021
22232425262728

The 

 element should be used as a container for the column specifications.

Each group are specified with a 

 element.

The span attribute specifies how many columns that gets the style.

The style attribute specifies the style to give the columns.

Note: There is a very limited selection of legal CSS properties for colgroups.

Example

<table>
  <colgroup>
    <col span=”2″ style=”background-color: #D6EEEE”>
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>

Try it Yourself »

Note: The 

 tag must be a child of a 

 element and should be placed before any other table elements, like 

 etc., but after the 

 

 element, if present.


Legal CSS Properties

There are only a very limited selection of CSS properties that are allowed to be used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.


 

If you want to style more columns with different styles, use more 

 elements inside the 


:

Example

<table>
  <colgroup>
    <col span=”2″ style=”background-color: #D6EEEE”>
    <col span=”3″ style=”background-color: pink”>
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>

Try it Yourself »


Empty Colgroups

If you want to style columns in the middle of a table, insert a “empty” 

 element (with no styles) for the columns before:

Example

<table>
  <colgroup>
    <col span=”3″>
    <col span=”2″ style=”background-color: pink”>
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>

Try it Yourself »


Hide Columns

You can hide columns with the visibility: collapse property:

Example

<table>
  <colgroup>
    <col span=”2″>
    <col span=”3″ style=”visibility: collapse”>
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>

Try it Yourself »


HTML Lists

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 

    •  tag. Each list item starts with the 

  •  

 

    •  tag.

The list items will be marked with bullets (small black circles) by default:

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »


Ordered HTML List

An ordered list starts with the 

      1.  tag. Each list item starts with the 

  •  

 

      1.  tag.

The list items will be marked with numbers by default:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »


 

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The 

 tag defines the description list, the 

 tag defines the term (name), and the 

 

 

 tag describes each term:

Example

<dl>
  <dt>Coffee</dt>
  <dd>– black hot drink</dd>
  <dt>Milk</dt>
  <dd>– white cold drink</dd>
</dl>

Try it Yourself »


HTML List Tags

TagDescription

 

Defines an unordered list

 

Defines an ordered list

 

  •  
Defines a list item

 

Defines a description list

 

Defines a term in a description list

 

Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Unordered Lists

The HTML 

    •  tag defines an unordered (bulleted) list.

Unordered HTML List

An unordered list starts with the 

      •  tag. Each list item starts with the 

  •  

 

      •  tag.

The list items will be marked with bullets (small black circles) by default:

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »


Unordered HTML List – Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Example – Disc

<ul style=”list-style-type:disc;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example – Circle

<ul style=”list-style-type:circle;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example – Square

<ul style=”list-style-type:square;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example – None

<ul style=”list-style-type:none;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »


 

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 (

  • ) can contain a new list, and other HTML elements, like images and links, etc.

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href=”#home”>Home</a></li>
  <li><a href=”#news”>News</a></li>
  <li><a href=”#contact”>Contact</a></li>
  <li><a href=”#about”>About</a></li>
</ul>

</body>
</html>

Try it Yourself »

Tip: You can learn much more about CSS in our CSS Tutorial.


Chapter Summary

        • Use the HTML  element to define an unordered list
        • Use the CSS list-style-type property to define the list item marker
        • Use the HTML 
        •  
        •  element to define a list item
        • Lists can be nested
        • List items can contain other HTML elements
        • Use the CSS property float:left to display a list horizontally

HTML List Tags

TagDescription

 

Defines an unordered list

 

Defines an ordered list

 

  •  
Defines a list item

 

Defines a description list

 

Defines a term in a description list

 

Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Ordered Lists

The HTML 

        1.  tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List

An ordered list starts with the 

          1.  tag. Each list item starts with the 

  •  

 

          1.  tag.

The list items will be marked with numbers by default:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »


Ordered HTML List – The Type Attribute

The type attribute of the 

            1.  tag, defines the type of the list item marker:
TypeDescription
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:

<ol type=”1″>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Uppercase Letters:

<ol type=”A”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Lowercase Letters:

<ol type=”a”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Uppercase Roman Numbers:

<ol type=”I”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Lowercase Roman Numbers:

<ol type=”i”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »


Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example

<ol start=”50″>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »


Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Try it Yourself »

Note: A list item (

  • ) can contain a new list, and other HTML elements, like images and links, etc.

Chapter Summary

              • Use the HTML  element to define an ordered list
              • Use the HTML type attribute to define the numbering type
              • Use the HTML 
              •  
              •  element to define a list item
              • Lists can be nested
              • List items can contain other HTML elements

HTML List Tags

TagDescription

 

Defines an unordered list

 

Defines an ordered list

 

  •  
Defines a list item

 

Defines a description list

 

Defines a term in a description list

 

Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Other Lists

HTML also supports description lists.


HTML Description Lists

A description list is a list of terms, with a description of each term.

The 

 tag defines the description list, the 

 tag defines the term (name), and the 

 

 

 tag describes each term:

Example

<dl>
  <dt>Coffee</dt>
  <dd>– black hot drink</dd>
  <dt>Milk</dt>
  <dd>– white cold drink</dd>
</dl>

Try it Yourself »


Chapter Summary

  • Use the HTML 
     element to define a description list
  • Use the HTML  element to define the description term
  • Use the HTML  element to describe the term in a description list

HTML Exercises

Test Yourself With Exercises

Exercise:

Add a list item with the text “Coffee” inside the 

    •  element.
    • Coffee

Start the Exercise


HTML List Tags

TagDescription

 

Defines an unordered list

 

Defines an ordered list

 

  •  
Defines a list item

 

Defines a description list

 

Defines a term in a description list

 

Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Block and Inline Elements

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, and the browsers automatically add some space (a margin) before and after the element.

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

Two commonly used block elements are: 

 and 

.

The 

 element defines a paragraph in an HTML document.

The 

 element defines a division or a section in an HTML document.

The

element is a block-level element.

The

element is a block-level element.

Example

<p>Hello World</p>
<div>Hello World</div>

Try it Yourself »

Here are the block-level elements in HTML:


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

Element

The 

 element is often used as a container for other HTML elements.

The 

 element has no required attributes, but styleclass and id are common.

When used together with CSS, the 

 element can be used to style blocks of content:

Example

<div style=”background-color:black;color:white;padding:20px;”>
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Try it Yourself »


The Element

The  element is an inline container used to mark up a part of a text, or a part of a document.

The  element has no required attributes, but styleclass and id are common.

When used together with CSS, the  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 
     
     element is a block-level and is often used as a container for other HTML elements
  • The  element is an inline container used to mark up a part of a text, or a part of a document

HTML Tags

TagDescription

 

 
Defines a section in a document (block-level)
 Defines a section in a document (inline)

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML class Attribute

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.

In the following example we have three 

 elements with a class attribute with the value of “city”. All of the three 

 elements will be styled equally according to the .city style definition in the head section:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class=”city”>
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class=”city”>
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class=”city”>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Try it Yourself »

In the following example we have two  elements with a class attribute with the value of “note”. Both  elements will be styled equally according to the .note style definition in the head section:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>

</body>
</html>

Try it Yourself »

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.


 

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

Example

Create a class named “city”:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class=”city”>London</h2>
<p>London is the capital of England.</p>

<h2 class=”city”>Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class=”city”>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Try it Yourself »


Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g.

. The element will be styled according to all the classes specified.

In the following example, the first 

 element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: 

Example

<h2 class=”city main”>London</h2>
<h2 class=”city”>Paris</h2>
<h2 class=”city”>Tokyo</h2>

Try it Yourself »


Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both 

 and 

 

 points to the “city” class and will share the same style:

Example

<h2 class=”city”>Paris</h2>
<p class=”city”>Paris is the capital of France</p>

Try it Yourself »


Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

Click on a button to hide all elements with the class name “city”:

<script>
function myFunction() {
  var x = document.getElementsByClassName(“city”);
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = “none”;
  }
}
</script>

Try it Yourself »

Don’t worry if you don’t understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.


Chapter Summary

  • The HTML class attribute specifies one or more class names for an element
  • Classes are used by CSS and JavaScript to select and access specific elements
  • The class attribute can be used on any HTML element
  • The class name is case sensitive
  • Different HTML elements can point to the same class name
  • JavaScript can access elements with a specific class name with the getElementsByClassName() method

HTML Exercises

Test Yourself With Exercises

Exercise:

Create a class selector named “special”.

Add a color property with the value “blue” inside the “special” class.

 

 

My paragraph

 

Start the Exercise

HTML id Attribute

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

In the following example we have an 

 element that points to the id name “myHeader”. This 

 

 element will be styled according to the #myHeader style definition in the head section:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id=”myHeader”>My Header</h1>

</body>
</html>

Try it Yourself »

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).


Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example

<style>
/* Style the element with the id “myHeader” */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name “city” */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>


<h1 id=”myHeader”>My Cities</h1>


<h2 class=”city”>London</h2>
<p>London is the capital of England.</p>

<h2 class=”city”>Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class=”city”>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Try it Yourself »

Tip: You can learn much more about CSS in our CSS Tutorial.


HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id=”C4″>Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

Example

<a href=”#C4″>Jump to Chapter 4</a>

Try it Yourself »

Or, add a link to the bookmark (“Jump to Chapter 4”), from another page:

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

Example

Use the id attribute to manipulate text with JavaScript:

<script>
function displayResult() {
  document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;
}
</script>

Try it Yourself »

Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript Tutorial.


Chapter Summary

  • The id attribute is used to specify a unique id for an HTML element
  • The value of the id attribute must be unique within the HTML document
  • The id attribute is used by CSS and JavaScript to style/select a specific element
  • The value of the id attribute is case sensitive
  • The id attribute is also used to create HTML bookmarks
  • JavaScript can access an element with a specific id with the getElementById() method

HTML Exercises

Test Yourself With Exercises

Exercise:

Add the correct HTML attribute to make the H1 element red.

 

 

 

>My Home Page

 

Start the Exercise

HTML Iframes

An HTML iframe is used to display a web page within a web page.



HTML Iframe Syntax

The HTML 

Start the Exercise


HTML iframe Tag

TagDescription

HTML – The Head Element

The HTML  element is a container for the following elements: 

HTML Layout Elements and Techniques

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.


Responsive Web Design

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Try it Yourself »


Setting The Viewport

To create a responsive website, add the following  tag to all your web pages:

Example

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Try it Yourself »

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag:
With the viewport meta tag:

Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.


 

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example

<img src=”img_girl.jpg” style=”width:100%;”>

Try it Yourself »

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

<img src=”img_girl.jpg” style=”max-width:100%;height:auto;”>

Try it Yourself »


Show Different Images Depending on Browser Width

The HTML  element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below change depending on the width:

Flowers

Example

<picture>
  <source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”>
  <source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”>
  <source srcset=”flowers.jpg”>
  <img src=”img_smallflower.jpg” alt=”Flowers”>
</picture>

Try it Yourself »


Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the text size scales.

Example

<h1 style=”font-size:10vw>Hello World</h1>

Try it Yourself »

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.


Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:

Main Content

 

Right Content

 

Example

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  
}
}
</style>

Try it Yourself »

Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial.


Responsive Web Page – Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

 
 
 
 

Try it Yourself »

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required


Responsive Web Design – Frameworks

All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS

W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be a high quality alternative to Bootstrap.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<body>

<div class=”w3-container w3-green”>
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class=”w3-row-padding”>
  <div class=”w3-third”>
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class=”w3-third”>
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class=”w3-third”>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

Try it Yourself »

To learn more about W3.CSS, read our W3.CSS Tutorial.


Bootstrap

Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
  <div class=”jumbotron”>
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class=”row”>
    <div class=”col-sm-4″>
      …
    </div>
    <div class=”col-sm-4″>
      …
    </div>
    <div class=”col-sm-4″>
    …
    </div>
  </div>
</div>

</body>
</html>

Try it Yourself »

To learn more about Bootstrap, go to our Bootstrap Tutorial.

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.


Responsive Web Design

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Try it Yourself »


Setting The Viewport

To create a responsive website, add the following  tag to all your web pages:

Example

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Try it Yourself »

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag:
With the viewport meta tag:

Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.


Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example

<img src=”img_girl.jpg” style=”width:100%;”>

Try it Yourself »

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

<img src=”img_girl.jpg” style=”max-width:100%;height:auto;”>

Try it Yourself »


Show Different Images Depending on Browser Width

The HTML  element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below change depending on the width:

Flowers

Example

<picture>
  <source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”>
  <source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”>
  <source srcset=”flowers.jpg”>
  <img src=”img_smallflower.jpg” alt=”Flowers”>
</picture>

Try it Yourself »


Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the text size scales.

Example

<h1 style=”font-size:10vw>Hello World</h1>

Try it Yourself »

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.


Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:

Main Content

 

Right Content

 

Example

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  
}
}
</style>

Try it Yourself »

Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial.


Responsive Web Page – Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

 
 
 
 

Try it Yourself »

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required


Responsive Web Design – Frameworks

All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS

W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be a high quality alternative to Bootstrap.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<body>

<div class=”w3-container w3-green”>
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class=”w3-row-padding”>
  <div class=”w3-third”>
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class=”w3-third”>
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class=”w3-third”>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

Try it Yourself »

To learn more about W3.CSS, read our W3.CSS Tutorial.


Bootstrap

Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
  <div class=”jumbotron”>
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class=”row”>
    <div class=”col-sm-4″>
      …
    </div>
    <div class=”col-sm-4″>
      …
    </div>
    <div class=”col-sm-4″>
    …
    </div>
  </div>
</div>

</body>
</html>

Try it Yourself »

To learn more about Bootstrap, go to our Bootstrap Tutorial.

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.


Example

<code>
x = 5;
y = 6;
z = x + y;
</code>

Try it Yourself »


HTML For Keyboard Input

The HTML  element is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.

Example

Define some text as keyboard input in a document:

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Result:

Save the document by pressing Ctrl + S

Try it Yourself »


HTML For Program Output

The HTML  element is used to define sample output from a computer program. The content inside is displayed in the browser’s default monospace font.

Example

Define some text as sample output from a computer program in a document:

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

Result:

Message from my computer:

File not found.
Press F1 to continue

Try it Yourself »


HTML For Computer Code

The HTML  element  is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example

Define some text as computer code in a document:

<code>
x = 5;
y = 6;
z = x + y;
</code>

Result:

x = 5; y = 6; z = x + y;

Try it Yourself »

Notice that the  element does not preserve extra whitespace and line-breaks.

To fix this, you can put the  element inside a 

 element:

Example

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

Result:

x = 5;
y = 6;
z = x + y;

Try it Yourself »


HTML For Variables

The HTML  element  is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example

Define some text as variables in a document:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

Result:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Try it Yourself »


Chapter Summary

  • The  element defines keyboard input
  • The  element defines sample output from a computer program
  • The  element defines a piece of computer code
  • The  element defines a variable in programming or in a mathematical expression
  • The 
     
     element defines preformatted text

HTML Exercises

Test Yourself With Exercises

Exercise:

Define the text “var person;” as programming code.

Code example: var person;

Start the Exercise


HTML Computer Code Elements

TagDescription
Defines programming code
 Defines keyboard input 
 Defines computer output
 Defines a variable

 

 
Defines preformatted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Semantic Elements

Semantic elements = elements with a meaning.


What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: 

 and  – Tells nothing about its content.

Examples of semantic elements: 

, and  – Clearly defines its content.Semantic Elements in HTMLMany web sites contain HTML code like:
TagDescription

 

Defines independent, self-contained content

 

Defines content aside from the page content

 

Defines additional details that the user can view or hide

 

Defines a caption for a

element

 

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

 

Defines a footer for a document or section

 

Specifies a header for a document or section
 Specifies the main content of a document
 Defines marked/highlighted text

 

Defines navigation links

 

Defines a section in a document

 

Defines a visible heading for a

element
 Defines a date/time

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Style Guide

A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.


Always Declare Document Type

Always declare the document type as the first line in your document.

The correct document type for HTML is:

<!DOCTYPE html>

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

  • Mixing uppercase and lowercase names looks bad
  • Developers normally use lowercase names
  • Lowercase looks cleaner
  • Lowercase is easier to write

Good:

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

Bad:

<BODY>
<P>This is a paragraph.</P>
</BODY>

 

Close All HTML Elements

In HTML, you do not have to close all elements (for example the 

 element).

However, we strongly recommend closing all HTML elements, like this:

Good:

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

Bad:

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

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

  • Mixing uppercase and lowercase names looks bad
  • Developers normally use lowercase names
  • Lowercase look cleaner
  • Lowercase are easier to write

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>

Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

  • Developers normally quote attribute values
  • Quoted values are easier to read
  • You MUST use quotes if the value contains spaces

Good:

<table class=”striped”>

Bad:

<table class=striped>

Very bad:

This will not work, because the value contains spaces:

<table class=table striped>

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

<img src=”html5.gif” alt=”HTML5″ style=”width:128px;height:128px”>

Bad:

<img src=”html5.gif”>

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

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

Bad:

<link rel = “stylesheet” href = “styles.css”>

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too long code lines.


Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Good:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

Bad:

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>

Good Table Example:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Good List Example:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Never Skip the

HTML Entities

Reserved characters in HTML must be replaced with character entities.


HTML Entities

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name;

OR

&#entity_number;

To display a less than sign (<) we must write: &lt; or &#60;

Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for entity numbers is good.


Non-breaking Space

A commonly used entity in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

  • § 10
  • 10 km/h
  • 10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the &nbsp; character entity.

Tip: The non-breaking hyphen (&#8209;) is used to define a hyphen character (‑) that does not break into a new line.


Some Useful HTML Character Entities

ResultDescriptionEntity NameEntity NumberTry it
 non-breaking space&nbsp;&#160;Try it »
<less than&lt;&#60;Try it »
>greater than&gt;&#62;Try it »
&ampersand&amp;&#38;Try it »
double quotation mark&quot;&#34;Try it »
single quotation mark (apostrophe)&apos;&#39;Try it »
¢cent&cent;&#162;Try it »
£pound&pound;&#163;Try it »
¥yen&yen;&#165;Try it »
euro&euro;&#8364;Try it »
©copyright&copy;&#169;Try it »
®registered trademark&reg;&#174;Try it »

Note: Entity names are case sensitive.


Combining Diacritical Marks

A diacritical mark is a “glyph” added to a letter.

Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

MarkCharacterConstructResultTry it
 ̀aa&#768;Try it »
 ́aa&#769;Try it »
̂aa&#770;Try it »
 ̃aa&#771;Try it »
 ̀OO&#768;Try it »
 ́OO&#769;Try it »
̂OO&#770;Try it »
 ̃OO&#771;Try it »

You will see more HTML symbols in the next chapter of this tutorial.

HTML Symbols

Symbols that are not present on your keyboard can also be added by using entities.


HTML Symbol Entities

HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.

Example

Display the euro sign, €, with an entity name, a decimal, and a hexadecimal value:

<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>

Will display as:

I will display €
I will display €
I will display €

Try it Yourself »


Some Mathematical Symbols Supported by HTML

CharNumberEntityDescriptionTry it
FOR ALLTry it »
PARTIAL DIFFERENTIALTry it »
THERE EXISTSTry it »
EMPTY SETSTry it »
NABLATry it »
ELEMENT OFTry it »
NOT AN ELEMENT OFTry it »
CONTAINS AS MEMBERTry it »
N-ARY PRODUCTTry it »
N-ARY SUMMATIONTry it »

Full Math Reference


Some Greek Letters Supported by HTML

CharNumberEntityDescriptionTry it
ΑΑΑGREEK CAPITAL LETTER ALPHATry it »
ΒΒΒGREEK CAPITAL LETTER BETATry it »
ΓΓΓGREEK CAPITAL LETTER GAMMATry it »
ΔΔΔGREEK CAPITAL LETTER DELTATry it »
ΕΕΕGREEK CAPITAL LETTER EPSILONTry it »
ΖΖΖGREEK CAPITAL LETTER ZETATry it »

Full Greek Reference


Some Other Entities Supported by HTML

CharNumberEntityDescriptionTry it
©©©COPYRIGHT SIGNTry it »
®®®REGISTERED SIGNTry it »
EURO SIGNTry it »
TRADEMARKTry it »
LEFTWARDS ARROWTry it »
UPWARDS ARROWTry it »
RIGHTWARDS ARROWTry it »
DOWNWARDS ARROWTry it »
BLACK SPADE SUITTry it »
BLACK CLUB SUITTry it »
BLACK HEART SUITTry it »
BLACK DIAMOND SUITTry it »

Full Currency Reference

Full Arrows Reference

Full Symbols Reference

Using Emojis in HTML

Emojis are characters from the UTF-8 character set: 😄 😍 💗


What are Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost all of the characters and symbols in the world.


The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the  tag:

<meta charset=”UTF-8″>

If not specified, UTF-8 is the default character set in HTML.


UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

  • A is 65
  • B is 66
  • C is 67

Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<p>I will display A B C</p>
<p>I will display A B C</p>

</body>
</html>

Try it Yourself »

Example Explained

The  element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).


Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • 😄 is 128516
  • 😍 is 128525
  • 💗 is 128151

Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<h1>My First Emoji</h1>

<p>😀</p>

</body>
</html>

Try it Yourself »

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>

<h1>Sized Emojis</h1>

<p style=”font-size:48px”>
😀 😄 😍 💗
</p>

</body>
</html>

Try it Yourself »


 

Some Emoji Symbols in UTF-8

EmojiValueTry it
🗻🗻Try it »
🗼🗼Try it
🗽🗽Try it »
🗾🗾Try it »
🗿🗿Try it »
😀😀Try it »
😁😁Try it »
😂😂Try it »
😃😃Try it »
😄😄Try it »
😅😅Try it »

For a full list, please go to our HTML Emoji Reference.

HTML Encoding (Character Sets)

To display an HTML page correctly, a web browser must know which character set to use.


From ASCII to UTF-8

ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + – ( ) @ < > .

ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8.

ANSI (Windows-1252) was the original Windows character set. ANSI is identical to ISO-8859-1, except that ANSI has 32 extra characters.

The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!


The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the  tag:

<meta charset=”UTF-8″>

Differences Between Character Sets

The following table displays the differences between the character sets described above:

NumbASCIIANSI8859UTF-8Description
32    space
33!!!!exclamation mark
34quotation mark
35####number sign
36$$$$dollar sign
37%%%%percent sign
38&&&&ampersand
39apostrophe
40((((left parenthesis
41))))right parenthesis
42****asterisk
43++++plus sign
44,,,,comma
45hyphen-minus
46....full stop
47////solidus
480000digit zero
491111digit one
502222digit two
513333digit three
524444digit four
535555digit five
546666digit six
557777digit seven
568888digit eight
579999digit nine
58::::colon
59;;;;semicolon
60<<<<less-than sign
61====equals sign
62>>>>greater-than sign
63????question mark
64@@@@commercial at
65AAAALatin capital letter A
66BBBBLatin capital letter B
67CCCCLatin capital letter C
68DDDDLatin capital letter D
69EEEELatin capital letter E
70FFFFLatin capital letter F
71GGGGLatin capital letter G
72HHHHLatin capital letter H
73IIIILatin capital letter I
74JJJJLatin capital letter J
75KKKKLatin capital letter K
76LLLLLatin capital letter L
77MMMMLatin capital letter M
78NNNNLatin capital letter N
79OOOOLatin capital letter O
80PPPPLatin capital letter P
81QQQQLatin capital letter Q
82RRRRLatin capital letter R
83SSSSLatin capital letter S
84TTTTLatin capital letter T
85UUUULatin capital letter U
86VVVVLatin capital letter V
87WWWWLatin capital letter W
88XXXXLatin capital letter X
89YYYYLatin capital letter Y
90ZZZZLatin capital letter Z
91[[[[left square bracket
92\\\\reverse solidus
93]]]]right square bracket
94^^^^circumflex accent
95____low line
96````grave accent
97aaaaLatin small letter a
98bbbbLatin small letter b
99ccccLatin small letter c
100ddddLatin small letter d
101eeeeLatin small letter e
102ffffLatin small letter f
103ggggLatin small letter g
104hhhhLatin small letter h
105iiiiLatin small letter i
106jjjjLatin small letter j
107kkkkLatin small letter k
108llllLatin small letter l
109mmmmLatin small letter m
110nnnnLatin small letter n
111ooooLatin small letter o
112ppppLatin small letter p
113qqqqLatin small letter q
114rrrrLatin small letter r
115ssssLatin small letter s
116ttttLatin small letter t
117uuuuLatin small letter u
118vvvvLatin small letter v
119wwwwLatin small letter w
120xxxxLatin small letter x
121yyyyLatin small letter y
122zzzzLatin small letter z
123{{{{left curly bracket
124||||vertical line
125}}}}right curly bracket
126~~~~tilde
127DEL    
128   euro sign
129 NOT USED
130   single low-9 quotation mark
131 ƒ  Latin small letter f with hook
132   double low-9 quotation mark
133   horizontal ellipsis
134   dagger
135   double dagger
136 ˆ  modifier letter circumflex accent
137   per mille sign
138 Š  Latin capital letter S with caron
139   single left-pointing angle quotation mark
140 Œ  Latin capital ligature OE
141 NOT USED
142 Ž  Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145   left single quotation mark
146   right single quotation mark
147   left double quotation mark
148   right double quotation mark
149   bullet
150   en dash
151   em dash
152 ˜  small tilde
153   trade mark sign
154 š  Latin small letter s with caron
155   single right-pointing angle quotation mark
156 œ  Latin small ligature oe
157 NOT USED
158 ž  Latin small letter z with caron
159 Ÿ  Latin capital letter Y with diaeresis
160    no-break space
161 ¡¡¡inverted exclamation mark
162 ¢¢¢cent sign
163 £££pound sign
164 ¤¤¤currency sign
165 ¥¥¥yen sign
166 ¦¦¦broken bar
167 §§§section sign
168 ¨¨¨diaeresis
169 ©©©copyright sign
170 ªªªfeminine ordinal indicator
171 «««left-pointing double angle quotation mark
172 ¬¬¬not sign
173 ­­­soft hyphen
174 ®®®registered sign
175 ¯¯¯macron
176 °°°degree sign
177 ±±±plus-minus sign
178 ²²²superscript two
179 ³³³superscript three
180 ´´´acute accent
181 µµµmicro sign
182 pilcrow sign
183 ···middle dot
184 ¸¸¸cedilla
185 ¹¹¹superscript one
186 ºººmasculine ordinal indicator
187 »»»right-pointing double angle quotation mark
188 ¼¼¼vulgar fraction one quarter
189 ½½½vulgar fraction one half
190 ¾¾¾vulgar fraction three quarters
191 ¿¿¿inverted question mark
192 ÀÀÀLatin capital letter A with grave
193 ÁÁÁLatin capital letter A with acute
194 ÂÂÂLatin capital letter A with circumflex
195 ÃÃÃLatin capital letter A with tilde
196 ÄÄÄLatin capital letter A with diaeresis
197 ÅÅÅLatin capital letter A with ring above
198 ÆÆÆLatin capital letter AE
199 ÇÇÇLatin capital letter C with cedilla
200 ÈÈÈLatin capital letter E with grave
201 ÉÉÉLatin capital letter E with acute
202 ÊÊÊLatin capital letter E with circumflex
203 ËËËLatin capital letter E with diaeresis
204 ÌÌÌLatin capital letter I with grave
205 ÍÍÍLatin capital letter I with acute
206 ÎÎÎLatin capital letter I with circumflex
207 ÏÏÏLatin capital letter I with diaeresis
208 ÐÐÐLatin capital letter Eth
209 ÑÑÑLatin capital letter N with tilde
210 ÒÒÒLatin capital letter O with grave
211 ÓÓÓLatin capital letter O with acute
212 ÔÔÔLatin capital letter O with circumflex
213 ÕÕÕLatin capital letter O with tilde
214 ÖÖÖLatin capital letter O with diaeresis
215 ×××multiplication sign
216 ØØØLatin capital letter O with stroke
217 ÙÙÙLatin capital letter U with grave
218 ÚÚÚLatin capital letter U with acute
219 ÛÛÛLatin capital letter U with circumflex
220 ÜÜÜLatin capital letter U with diaeresis
221 ÝÝÝLatin capital letter Y with acute
222 ÞÞÞLatin capital letter Thorn
223 ßßßLatin small letter sharp s
224 àààLatin small letter a with grave
225 áááLatin small letter a with acute
226 âââLatin small letter a with circumflex
227 ãããLatin small letter a with tilde
228 äääLatin small letter a with diaeresis
229 åååLatin small letter a with ring above
230 æææLatin small letter ae
231 çççLatin small letter c with cedilla
232 èèèLatin small letter e with grave
233 éééLatin small letter e with acute
234 êêêLatin small letter e with circumflex
235 ëëëLatin small letter e with diaeresis
236 ìììLatin small letter i with grave
237 íííLatin small letter i with acute
238 îîîLatin small letter i with circumflex
239 ïïïLatin small letter i with diaeresis
240 ðððLatin small letter eth
241 ñññLatin small letter n with tilde
242 òòòLatin small letter o with grave
243 óóóLatin small letter o with acute
244 ôôôLatin small letter o with circumflex
245 õõõLatin small letter o with tilde
246 öööLatin small letter o with diaeresis
247 ÷÷÷division sign
248 øøøLatin small letter o with stroke
249 ùùùLatin small letter u with grave
250 úúúLatin small letter u with acute
251 ûûûLatin small letter with circumflex
252 üüüLatin small letter u with diaeresis
253 ýýýLatin small letter y with acute
254 þþþLatin small letter thorn
255 ÿÿÿLatin small letter y with diaeresis

The ASCII Character Set

ASCII uses the values from 0 to 31 (and 127) for control characters.

ASCII uses the values from 32 to 126 for letters, digits, and symbols.

ASCII does not use the values from 128 to 255.


The ANSI Character Set (Windows-1252)

ANSI is identical to ASCII for the values from 0 to 127.

ANSI has a proprietary set of characters for the values from 128 to 159.

ANSI is identical to UTF-8 for the values from 160 to 255.


The ISO-8859-1 Character Set

ISO-8859-1 is identical to ASCII for the values from 0 to 127.

ISO-8859-1 does not use the values from 128 to 159.

ISO-8859-1 is identical to UTF-8 for the values from 160 to 255.


The UTF-8 Character Set

UTF-8 is identical to ASCII for the values from 0 to 127.

UTF-8 does not use the values from 128 to 159. 

UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.

UTF-8 continues from the value 256 with more than 10 000 different characters.

For a closer look, study our Complete HTML Character Set Reference.

 

HTML Uniform Resource Locators

A URL is another word for a web address.

A URL can be composed of words (e.g. w3schools.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50).

Most people enter the name when surfing, because names are easier to remember than numbers.


URL – Uniform Resource Locator

Web browsers request pages from web servers by using a URL.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.

A web address like https://www.w3schools.com/html/default.asp follows these syntax rules:

scheme://prefix.domain:port/path/filename

Explanation:

  • scheme – defines the type of Internet service (most common is http or https)
  • prefix – defines a domain prefix (default for http is www)
  • domain – defines the Internet domain name (like w3schools.com)
  • port – defines the port number at the host (default for http is 80)
  • path – defines a path at the server (If omitted: the root directory of the site)
  • filename – defines the name of a document or resource

Common URL Schemes

The table below lists some common schemes:

SchemeShort forUsed for
httpHyperText Transfer ProtocolCommon web pages. Not encrypted
httpsSecure HyperText Transfer ProtocolSecure web pages. Encrypted
ftpFile Transfer ProtocolDownloading or uploading files
file A file on your computer

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.

URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.


Try It Yourself

 

If you click “Submit”, the browser will URL encode the input before it is sent to the server.

A page at the server will display the received input.

Try some other input and click Submit again.


ASCII Encoding Examples

Your browser will encode input, according to the character-set used in your page.

The default character-set in HTML5 is UTF-8.

CharacterFrom Windows-1252From UTF-8
%80%E2%82%AC
£%A3%C2%A3
©%A9%C2%A9
®%AE%C2%AE
À%C0%C3%80
Á%C1%C3%81
Â%C2%C3%82
Ã%C3%C3%83
Ä%C4%C3%84
Å%C5%C3%85

For a complete reference of all URL encodings, visit our URL Encoding Reference.

ArmenianChinese (Traditional)EnglishGermanRussian