HTML
Uploaded by
Krishno Jeet Sutra DharHTML
Uploaded by
Krishno Jeet Sutra DharHTML Documents
All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML
elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142
">
Try it Yourself »
HTML Buttons
HTML buttons are defined with the <button> tag:
Example
<button>Click me</button>
Try it Yourself »
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
HTML Elements
An HTML element usually consists of a start tag and an end tag, with the
content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
<p>My first paragraph.</p>
HTML elements with no content are called empty elements. Empty
elements do not have an end tag, such as the <br> element (which
indicates a line break).
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
Inside the <html> element is the <body> element.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
Inside the <body> element is two other HTML elements: <h1> and <p>.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Do Not Forget 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 »
The example above works in all browsers, because the closing tag is
considered optional.
Never rely on this. It might produce unexpected results and/or
errors if you forget the end tag.
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line
break):
Example
<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by
XML parsers, you must close all HTML elements properly.
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for
stricter document types like XHTML.
At W3Schools we always use lowercase tags.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
Example
<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »
You will learn more about links and the <a> tag later in this tutorial.
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
Try it Yourself »
The width and height Attributes
HTML images also have width and height attributes, which specifies the
width and height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
Try it Yourself »
The width and height are specified in pixels by default; so width="500"
means 500 pixels wide.
You will learn more about images in our HTML Images chapter.
The alt Attribute
The alt attribute specifies an alternative text to be used, if an image
cannot be displayed.
The value of the alt attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a vision impaired person, can
"hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Try it Yourself »
The alt attribute is also useful if the image cannot be displayed (e.g. if it
does not exist):
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 »
The style Attribute
The style attribute is used to specify the styling of an element, like color,
font, size etc.
Example
<p style="color:red">This is a paragraph.</p>
Try it Yourself »
You will learn more about styling later in this tutorial, and in our CSS
Tutorial.
The lang Attribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen
readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add
two more letters (US).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the
paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
Try it Yourself »
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase
like title or TITLE.
W3C recommends lowercase in HTML, and demands lowercase for
stricter document types like XHTML.
At W3Schools we always use lowercase attribute names.
We Suggest: Quote Attribute Values
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written without quotes:
Bad
<a href=https://www.w3schools.com>
Try it Yourself »
Good
<a href="https://www.w3schools.com">
Try it Yourself »
W3C recommends quotes in HTML, and demands quotes for stricter
document types like XHTML.
Sometimes it is necessary to use quotes. This example will not display
the title attribute correctly, because it contains a space:
Example
<p title=About W3Schools>
Try it Yourself »
Using quotes are the most common. Omitting quotes can produce errors.
At W3Schools we always use quotes around attribute values.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.
In some situations, when the attribute value itself contains double quotes,
it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Try it Yourself »
Chapter Summary
All HTML elements can have attributes
The title attribute provides additional "tool-tip" information
The href attribute provides address information for links
The width and height attributes provide size information for
images
The alt attribute provides text for screen readers
At W3Schools we always use lowercase attribute names
At W3Schools we always quote attribute values
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a "tooltip" to the paragraph below with the text "About W3Schools".
<p ="About W3Schools">W3Schools is a web developer's
site.</p>
Submit Answer »
Start the Exercise
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML, which you will learn
more about in this tutorial:
Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displ
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
A complete list of all attributes for each HTML element, is listed in
our: HTML Attribute Reference.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Try it Yourself »
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
Note: Browsers automatically add some white space (a margin) before
and after a heading.
Headings Are Important
Search engines use the headings to index the structure and content of
your web pages.
Users often skim a page by its headings. It is important to use headings
to show the document structure.
<h1> headings should be used for main headings, followed
by <h2> headings, then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>
Try it Yourself »
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an
HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Try it Yourself »
The HTML <head> Element
The HTML <head> element is a container for metadata. HTML metadata is
data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Try it Yourself »
Note: Metadata typically define the document title, character set, styles,
scripts, and other meta information.
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 Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML tag to add a heading with the text "London".
<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>
Submit Answer »
Start the Exercise
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags
and their attributes.
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta informa
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
For a complete list of all available HTML tags, visit our HTML Tag
Reference.
HTML Paragraphs
HTML Paragraphs
The HTML <p> element defines a paragraph:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
Note: Browsers automatically add some white space (a margin) before
and after a paragraph.
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 output by adding extra spaces or
extra lines in your HTML code.
The browser will remove any extra spaces and extra 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 »
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph.
<p>This is another paragraph.
Try it Yourself »
The example above will work in most browsers, but do not rely on it.
Note: Dropping the end tag can produce unexpected results or errors.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
Try it Yourself »
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Try it Yourself »
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Try it Yourself »
HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML tag to add a paragraph with the text "Hello World!".
<html>
<body>
</body>
</html>
Submit Answer »
Start the Exercise
HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and
their attributes.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
For a complete list of all available HTML tags, visit our HTML Tag
Reference.
HTML Styles
❮ PreviousNext ❯
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.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>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".
<p =" ;">This is a paragraph.</p>
Submit Answer »
HTML Text Formatting
❮ PreviousNext ❯
Text Formatting
This text is bold
This text is italic
This is subscript and superscript
Try it Yourself »
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a
special meaning.
HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
Try it Yourself »
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
Example
<strong>This text is strong</strong>
Try it Yourself »
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance.
Example
<i>This text is italic</i>
Try it Yourself »
The HTML <em> element defines emphasized text, with added semantic
importance.
Example
<em>This text is emphasized</em>
Try it Yourself »
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is
a difference in the meaning of these tags: <b> and <i> defines bold and
italic text, but <strong> and <em> means that the text is "important".
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
Try it Yourself »
HTML <mark> Element
The HTML <mark> element defines marked/highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
Try it Yourself »
HTML <del> Element
The HTML <del> element defines deleted/removed text.
Example
<p>My favorite color is <del>blue</del> red.</p>
Try it Yourself »
HTML <ins> Element
The HTML <ins> element defines inserted/added text.
Example
<p>My favorite <ins>color</ins> is red.</p>
Try it Yourself »
HTML <sub> Element
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
Try it Yourself »
HTML <sup> Element
The HTML <sup> element defines superscripted text.
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.
<p>
WWF's mission is to stop the degradation of our
planet's natural environment.
</p>
Submit Answer »
Start the Exercise
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Quotation and Citation
Elements
❮ PreviousNext ❯
Quotation
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 <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>
Try it Yourself »
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from
another source.
Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="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 <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation
systems and search-engines.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
Try it Yourself »
HTML <address> for Contact
Information
The HTML <address> element defines contact information (author/owner) of
a document or an article.
The <address> element is usually displayed in italic. Most browsers will 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 <cite> for Work Title
The HTML <cite> element defines the title of a work.
Browsers usually display <cite> elements in italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Try it Yourself »
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element 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".
<p>
I am so cool .
</p>
Submit Answer »
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
HTML Comments
❮ PreviousNext ❯
Comment tags are used to insert comments in the HTML source code.
HTML Comment Tags
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in
the closing tag.
Note: Comments are not displayed by the browser, but they can help
document your HTML source code.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
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:
Example
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
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.
<h1>This is a heading</h1>
This is a comment
<p>This is a paragraph.</p>
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Try it Yourself »
HTML supports 140 standard color names.
Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Try it Yourself »
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Try it Yourself »
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Try it Yourself »
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:
Same as color name "Tomato":
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Try it Yourself »
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255,
255).
Experiment by mixing the RGB values below:
Try it Yourself »
Shades of gray are often defined using equal values for all the 3 light
sources:
Example
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
Try it Yourself »
HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between
00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00).
Example
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Try it Yourself »
Shades of gray are often defined using equal values for all the 3 light sources:
Try it Yourself »
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness
(HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100%
is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
Try it Yourself »
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Try it Yourself »
Lightness
The lightness of a color can be described as how much light you want to give the color,
where 0% means no light (black), 50% means 50% light (neither dark nor light) 100%
means full lightness (white).
Try it Yourself »
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the
lightness from 0% to 100% to get darker/lighter shades:
Try it Yourself »
RGBA Value
RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):
Try it Yourself »
HSLA Value
HSLA color values are an extension of HSL color values with an alpha
channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):
Example
HTML Styles - CSS
CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages
all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS
files. However, here we will use inline and internal styling, because this is
easier to demonstrate, and easier for you to try it yourself.
Tip: You can learn much more about CSS in our CSS Tutorial.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Try it Yourself »
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire
web site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the
HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS Border
The CSS border property defines a border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
Try it Yourself »
CSS Padding
The CSS padding property defines a padding (space) between the text and
the border:
Example
p {
border: 1px solid powderblue;
padding: 30px;
}
Try it Yourself »
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p {
border: 1px solid powderblue;
margin: 50px;
}
Try it Yourself »
The id Attribute
To define a specific style for one special element, add an id attribute to
the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
Try it Yourself »
Note: The id of an element should be unique within a page, so the id
selector is used to select one unique element!
The class Attribute
To define a style for special types of elements, add a class attribute to the
element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
p.error {
color: red;
}
Try it Yourself »
External References
External style sheets can be referenced with a full URL or with a path
relative to the current web page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.c
ss">
Try it Yourself »
This example links to a style sheet located in the html folder on the
current web site:
Example
<link rel="stylesheet" href="/html/styles.css">
Try it Yourself »
This example links to a style sheet located in the same folder as the
current page:
Example
<link rel="stylesheet" href="styles.css">
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
HTML Exercises
Test Yourself With Exercises
Exercise:
Use CSS to set the background color of the document (body) to yellow.
<!DOCTYPE html>
<html>
<head>
<style>
:yellow;
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
Submit Answer »
Start the Exercise
HTML Style Tags
Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
HTML Links
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. It can be an image or any other
HTML element.
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML
tutorial</a>
Try it Yourself »
The href attribute specifies the destination address
(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you
might generate two requests to the server. Many servers will
automatically add a forward slash to the end of the address, and then
create a new request.
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL
(without https://www....).
Example
<a href="html_images.asp">HTML Images</a>
Try it Yourself »
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it
was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser
window/tab:
Example
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
Try it Yourself »
Tip: If your webpage is locked in a frame, you can use target="_top" to
break out of the frame:
Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5
tutorial!</a>
Try it Yourself »
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a
border around the image (when the image is a link).
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 »
External Paths
External pages can be referenced with a full URL or with a path relative to
the current web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.w3schools.com/html/default.asp">HTML
tutorial</a>
Try it Yourself »
This example links to a page located in the html folder on the current web
site:
Example
<a href="/html/default.asp">HTML tutorial</a>
Try it Yourself »
This example links to a page located in the same folder as the current
page:
Example
<a href="default.asp">HTML tutorial</a>
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked
document
Use the <img> element (inside <a>) to use an image as a link
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.
Submit Answer »
Start the Exercise
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Link Colors
❮ PreviousNext ❯
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 default colors, by using CSS:
Example
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Try it Yourself »
A links can also be styled as a button, by using CSS:
This is a link
Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Try it Yourself »
To learn more about CSS, go to our CSS Tutorial.
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Link Bookmarks
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a
Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a
link to it.
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:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another
page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Try it Yourself »
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 Link Tags
Tag Description
<a> Defines a hyperlink
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
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The 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 »
Note: The alt attribute is required. A web page will not validate correctly
without it.
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 defines 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 page might flicker while the image loads.
Width and Height, or Style?
The width, height, and style attributes are 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 not specified, the browser expects to find the image in the same folder
as the web page.
However, it is common to store images in a sub-folder. You must then
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
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt=
"W3Schools.com">
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Try it Yourself »
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a
border around the image (when the image is a link).
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.
HTML Screen Readers
A screen reader is a software program that reads the HTML code,
converts the text, and allows the user to "listen" to the content. Screen
readers are useful for people who are visually impaired or learning
disabled.
Chapter Summary
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image,
if it cannot be displayed
Use the HTML width and height attributes to define the size of the
image
Use the CSS width and height properties to define the size of the
image (alternatively)
Use the CSS float property to let the image float
Loading images takes time. Large images can slow down your 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.
<img src="scream.png" ="250" ="400">
Submit Answer »
Start the Exercise
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map
<picture> Defines a container for multiple image resources
HTML Image Maps
With image maps, you can add clickable areas on an image.
Image Maps
The <map> tag defines an image-map. An image-map is an image with
clickable areas.
Click on the computer, the phone, or the cup of coffee in the image
below:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="com
puter.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phon
e.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 a map containing some
rules that describe the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:
<img src="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.
Note: You can use any image as an image map.
The Map
Then add a <map> element.
The <map> element is used to create an image map, and is linked to the
image by using the name attribute:
<map name="workmap">
The name attribute must have the same value as the usemap attribute.
Note: You may insert the <map> element anywhere you like, it does not
have to be inserted right after the image.
The Areas
Then add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the 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
Coordinates
You must define some coordinates to be able to place the clickable area
onto the image.
The coordinates come in pairs, one for the x-axis and one for the y-axis.
The coordinates 34, 44 is located 34 pixels from the left margin and 44
pixels from the top:
The coordinates 270, 350 is located 270 pixels from the left margin and
350 pixels from the top:
Now you have enough data to create a clickable rectangular area:
<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:
Circle
To add a circle area, first locate the coordinates of the center of the
circle:
337, 300,..
Then specify the radius of the circle:
44 pixels
Now you have enough data to create a clickable circular area:
<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:
Image Map and JavaScript
A clickable area does not have to be a link to another page, it can also
trigger a JavaScript function.
Add a click event on the <area> element to execute a JavaScript function:
Example
You can use the onclick attribute to execute a JavaScript function when
the area is clicked
<area shape="circle" coords="337,300,44" onclick="myFunction()">
Try it Yourself »
Chapter Summary
Use the HTML <map> element to define an image-map
Use the HTML <area> element to define the clickable areas in the
image-map
Use the HTML <img>'s element usemap attribute to point to an image-
map
HTML Background Images
Background Images
A background image can be specified on almost any HTML element.
To add a background image in HTML, use the CSS property background-
image.
Background Image on a HTML element
To add a background image on an HTML element, you can use
the style attribute:
Example
Add a background image on a HTML element:
<div style="background-image: url('img_girl.jpg');">
Try it Yourself »
You can also specify the background image in the <style> element:
Example
Specify the background image in the style element:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Background Image on a Page
If you want the entire page to have a background image, then you must
specify the background image on the <body> element:
Example
Add a background image on a HTML page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Background Repeat
If the background image is smaller than the element, the image will
repeat itself, horizontally and vertically, until it has reach the end of the
element.
To explain, see what happens when we use a small image as a
background inside a large div element:
The background-image property will try to fill the div element with images
until it has reach the end.
Example
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Try it Yourself »
To avoid the background image from repeating itself, use the background-
repeat property.
Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
Background Cover
If you want the background image cover the entire element, you can set
the background-size property to cover.
Also, to make sure the entire element is always covered, set the
background-attachment property to fixed:
As you can see, the image will cover the entire element, with no
stretching, the image will keep its original proportions.
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it Yourself »
Background Stretch
If you want the background image stretch to fit the entire image in the
element, you can set the background-size property to 100% 100%:
Try resizing the browser window, and you will see that the image will
stretch, but always cover the entire element.
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »
Learn More CSS
From the examples above you have learned that background images can
be styled by using the CSS background properties.
HTML Picture Element
The picture element allows us to display different pictures for different
devices or screen sizes.
The HTML <picture> Element
HTML5 introduced the <picture> element to add more flexibility when
specifying image resources.
The <picture> element contains a number of <source> elements, each
referring to different image sources. This way the browser can choose the
image that best fits the current view and/or device.
Each <source> element have attributes describing when their image is the
most suitable.
Example
Show different images on different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Try it Yourself »
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do not
support the <picture> element, or if none of the <source> tags matched.
When to use the Picture Element
There are two main purposes for the <picture> element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large
image file. The browser will use the first <source> element with matching
attribute values, and ignore any of the following elements.
2. Format Support
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser
will use the first format it recognizes and ignore any of the following.
Example
The browser will use the first image format it recognizes:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Try it Yourself »
Note: The browser will use the first <source> element with matching
attribute values, and ignore any following <source> elements.
HTML Tables
❮ PreviousNext ❯
HTML Table Example
Company Contact
Alfreds Futterkiste Maria Anders
Centro comercial Moctezuma Francisco Chang
Ernst Handel Roland Mendel
Island Trading Helen Bennett
Laughing Bacchus Winecellars Yoshi Tannamuri
Magazzini Alimentari Riuniti Giovanni Rovelli
Try it Yourself »
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are bold and
centered. A table data/cell is defined with the <td> tag.
Example
<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: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed
without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the
CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its
borders.
If you do not specify a padding, the table cells will be displayed
without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
Try it Yourself »
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
Try it Yourself »
HTML Table - Adding Border
Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-
spacing property:
Example
table {
border-spacing: 5px;
}
Try it Yourself »
Note: If the table has collapsed borders, border-spacing has no
effect.
HTML Table - Cells that Span Many
Columns
To make a cell span more than one column, use
the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Try it Yourself »
HTML Table - Cells that Span Many
Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Try it Yourself »
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »
Note: The <caption> tag must be inserted immediately after
the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an id attribute to
the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Try it Yourself »
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Try it Yourself »
Chapter Summary
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell
borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing
between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise
HTML Table Tags
For a complete list of all available HTML tags, visit our HTML Tag
Reference.
HTML Lists
❮ PreviousNext ❯
HTML List Example
An Unordered List:
Item
Item
Item
Item
An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Try it Yourself »
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Unordered HTML List - Choose List Item
Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<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 »
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<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 »
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »
Nested HTML Lists
List can be nested (lists inside lists):
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: List items can contain new list, and other HTML elements, like
images and links, etc.
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 »
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation
menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it Yourself »
Tip: You can learn much more about CSS in our CSS Tutorial.
Chapter Summary
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a list
horizontally
HTML Block and Inline
Elements
Every HTML element has a default display value depending on what
type of element it is.
The two display values are: block and inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Example
<div>Hello World</div>
Try it Yourself »
Inline Elements
An inline element does not start on a new line and only takes up as much
width as necessary.
This is an inline <span> element inside a paragraph.
Example
<span>Hello World</span>
Try it Yourself »
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <div> element can be used to style
blocks of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
Try it Yourself »
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <span> element can be used to style
parts of the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
Try it Yourself »
HTML Grouping Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
For a complete list of all available HTML tags, visit our HTML Tag
Reference.
You might also like
- Elevator Voice Announcement User Manual V1.0No ratings yetElevator Voice Announcement User Manual V1.04 pages
- HTML Is The Standard Markup Language For Creating Web PagesNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages28 pages
- Operation Manual: Shoot Video For 7.5 Hours Nonstop, Expandable Memory Up To 32gb0% (2)Operation Manual: Shoot Video For 7.5 Hours Nonstop, Expandable Memory Up To 32gb4 pages
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pages
- Android Studio and SDK Tools - Android StudioNo ratings yetAndroid Studio and SDK Tools - Android Studio9 pages
- Mcafee Data Loss Prevention Endpoint For Windows 11.0.300 Release NotesNo ratings yetMcafee Data Loss Prevention Endpoint For Windows 11.0.300 Release Notes8 pages
- CPQ JET Deep Dive: Best Practices and CustomizationNo ratings yetCPQ JET Deep Dive: Best Practices and Customization47 pages
- Assignment 2 Front Sheet: Qualification BTEC Level 5 HND Diploma in Computing Unit Number and Title Submission DateNo ratings yetAssignment 2 Front Sheet: Qualification BTEC Level 5 HND Diploma in Computing Unit Number and Title Submission Date29 pages
- Tech Alert TA000123 Alpha Convert To HBS ProblemNo ratings yetTech Alert TA000123 Alpha Convert To HBS Problem4 pages
- 5 Free Alternatives To Microsoft Word - TechrepublicNo ratings yet5 Free Alternatives To Microsoft Word - Techrepublic3 pages
- Editors: Write HTML Using Notepad or TexteditNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pages
- List of Bloatware Apps Safe To Remove Samsung Galaxy S3 S2100% (1)List of Bloatware Apps Safe To Remove Samsung Galaxy S3 S22 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages
- Microsoft Toolkit 2.3.2 For Office 2010 and Windows Bobiras20090% (3)Microsoft Toolkit 2.3.2 For Office 2010 and Windows Bobiras20093 pages
- Lumion 8.0 Pro Serial Number Reading Tool UtorrentNo ratings yetLumion 8.0 Pro Serial Number Reading Tool Utorrent5 pages
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pages
- Previous Next Chapter : HTML IntroductionNo ratings yetPrevious Next Chapter : HTML Introduction32 pages
