Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
360 views

HTML Basic Examples

The document provides examples and explanations of basic HTML elements and tags, including: - HTML documents must start with <!DOCTYPE html> and contain <html>, <head>, and <body> tags. - Common text elements are headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). - Other elements include links (<a>), images (<img>), buttons (<button>), and lists (<ul>, <ol>). - Attributes like href, src, alt, width, and height provide additional information about elements.

Uploaded by

mdgrdskjhbfkjd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
360 views

HTML Basic Examples

The document provides examples and explanations of basic HTML elements and tags, including: - HTML documents must start with <!DOCTYPE html> and contain <html>, <head>, and <body> tags. - Common text elements are headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). - Other elements include links (<a>), images (<img>), buttons (<button>), and lists (<ul>, <ol>). - Attributes like href, src, alt, width, and height provide additional information about elements.

Uploaded by

mdgrdskjhbfkjd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 80

HTML Basic Examples

Don't worry if these examples use tags you have not learned.

You will learn about them in the next chapters.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

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>

HTML Links
HTML links are defined with the <a> tag:

Example

<a href="https://www.w3schools.com">This is a link</a>

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

HTML Buttons
HTML buttons are defined with the <button> tag:

Example

<button>Click me</button>
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>

HTML Attributes

Attributes provide additional information about HTML elements.

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>

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

The width and height Attributes


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

Example

<img src="img_girl.jpg" width="500" height="600">

The image size is specified in pixels: 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, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.

Example

<img src="img_girl.jpg" alt="Girl with a jacket">

The alt attribute is also useful if the image 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">


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">I am a paragraph</p>

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

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>

Good

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

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>

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

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 with double quotes

Test Yourself with Exercises!

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:

Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displayed
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.

HTML Headings
Headings

Heading 1
Heading 2
Heading 3

Heading 4

Heading 5

Heading 6

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>

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 skim your pages 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>

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>

The HTML <head> Element


The HTML <head> element has nothing to do with HTML headings.

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

Note: Metadata typically define the document title, character set, styles, links, 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 IE), 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.

Test Yourself with Exercises!

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 information, and more)
<h1> to <h6> Defines HTML headings

<hr> Defines a thematic change in the content

HTML Paragraphs

HTML Paragraphs
The HTML <p> element defines a paragraph:

Example

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

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>

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.

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>

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>

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>

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

HTML Styles
Example

I am Red

I am Blue

I am Big
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.

HTML Background Color


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

HTML Text Color


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

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

HTML Text Size


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

HTML Text Alignment


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

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

Test Yourself with Exercises!

HTML Text Formatting


Text Formatting

This text is bold

This text is italic


This is subscript and superscript

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>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra importance.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>

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>

HTML <mark> Element


The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element


The HTML <del> element defines deleted (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element


The HTML <ins> element defines inserted (added) text.

Example
<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element


The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element


The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

Test Yourself with Exercises!

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
Quotation

Here is a quote from WWF's website:

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

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>

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>

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>

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>

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>

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>

Test Yourself with Exercises!


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

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

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 at the moment


<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->

Test Yourself with Exercises!

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

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>

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>

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>

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

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

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

rgba(255, 99, 71, 0.5)

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

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>

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 the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255,
255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

Example

rgb(255, 0, 0)

rgb(0, 0, 255)
rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

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)

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

Shades of gray are often defined using equal values for all the 3 light sources:

Example

#000000

#3c3c3c

#787878

#b4b4b4
#f0f0f0

#ffffff

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

Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation
Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

Example

Lightness

The lightness of a color can be described as how much light you want to give the color, where
0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full
lightness (white).

Example

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the
lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

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

Example

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

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

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

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

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

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

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


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>


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>

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>

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>

CSS Border
The CSS border property defines a border around an HTML element:

Example

p{
border: 1px solid powderblue;
}

CSS Padding
The CSS padding property defines a padding (space) between the text and the border:

Example

p{
border: 1px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border:

Example

p{
border: 1px solid powderblue;
margin: 50px;
}

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

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

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

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

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

Example

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


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

Test Yourself with Exercises!

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


In HTML, links are defined with the <a> tag:

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

Example

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

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
http://www....).

Example

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

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>

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>

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>

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>

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>

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>

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>

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>

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

Example

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

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="#value") to link to the bookmark

Test Yourself with Exercises!

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

Example

<img src="img_girl.jpg" alt="Girl in a jacket">

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

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

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

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

Alternatively, you can use the width and height attributes:

Example

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

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

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>

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

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

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

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>

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>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.

In the image below, click on the computer, the phone, or the cup of coffee:
Example

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

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and
creates a relationship between the image and the map.

The <map> element contains a number of <area> tags, that define the clickable areas in the
image-map.

Background Image
To add a background image on an HTML element, use the CSS property background-image:

Example

To add a background image on a web page, specify the background-image property on the
BODY element:
<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

Example

To add a background image on a paragraph, specify the background-image property on the P


element:

<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>

To learn more about background images, study our CSS Background Tutorial.

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

The browser will use the first <source> element with matching attribute values, and ignore
any following <source> elements.

Example

Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another
image if not, but larger than 465 pixels.

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
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.

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 blind,
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
 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
 Use the HTML <picture> element to show different images for different devices

Note: Loading images takes time. Large images can slow down your page. Use images
carefully.

Test Yourself with Exercises!

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 Tables
HTML Table Example

Company Contact Country


Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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>

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

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

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

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

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

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>

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>

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>

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

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

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
Test Yourself with Exercises!

HTML Table Tags


Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

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

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>

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>

Example - Circle

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

Example - Square

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

Example - None
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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>

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>

Uppercase Letters:

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

Lowercase Letters:

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

Uppercase Roman Numbers:

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

Lowercase Roman Numbers:

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

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>

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>

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>

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>

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

Test Yourself with Exercises!

HTML List Tags


Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or 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</div>
<div>World</div>

Block level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

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

Inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

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>

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>

HTML Grouping Tags


Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

HTML The class Attribute

Using The class Attribute


The class attribute specifies one or more class names for an HTML element.

The class name can be used by CSS and JavaScript to perform certain tasks for elements with
the specified class name.

In CSS, to select elements with a specific class, write a period (.) character, followed by the
name of the class:

Example

Use CSS to style all elements with the class name "city":

<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

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

Result:

London
London is the capital of England.

Paris
Paris is the capital of France.

Tokyo
Tokyo is the capital of Japan.

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.

Using The class Attribute in JavaScript


JavaScript can access elements with a specified class name by using the
getElementsByClassName() method:

Example

When a user clicks on a button, 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>

Tip: Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.
Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a
space.

Example

Style elements with the class name "city", also style elements with the class name "main":

<h2 class="city main">London</h2>


<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

In the example above, the first <h2> element belongs to both the "city" class and the "main"
class.

Same Class, Different Tag


Different tags, like <h2> and <p>, can have the same class name and thereby share the same
style:

Example

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

Test Yourself with Exercises!

HTML The id Attribute

Using The id Attribute


The id attribute specifies a unique id for an HTML element (the value must be unique within
the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element
with the specified id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id
of the element:
Example

Use CSS to style an element with the id "myHeader":

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

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

Result:

My Header
Tip: The id attribute can be used on any HTML element.

Note: The id value is case-sensitive.

Note: The id value must contain at least one character, and must not contain whitespace
(spaces, tabs, etc.).

Difference Between Class and ID


An HTML element can only have one unique id that belongs to that single element, while a
class name can be used by multiple elements:

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>

<!-- A unique element -->


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

<!-- Multiple similar elements -->


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

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

Using The id Attribute in JavaScript


JavaScript can access an element with a specified id by using 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>

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

Bookmarks with ID and Links


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>

Test Yourself with Exercises!

HTML Iframes

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

Iframe Syntax
An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>

The src attribute specifies the URL (web address) of the inline frame page.

Iframe - Set Height and Width


Use the height and width attributes to specify the size of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like
"80%").

Example

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>


Or you can use CSS to set the height and width of the iframe:

Example

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

Iframe - Remove the Border


By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

Example

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

Iframe - Target for a Link


An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

HTML iframe Tag


Tag Description
<iframe> Defines an inline frame

Test Yourself with Exercises!


HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example

My First JavaScript

The HTML <script> Tag


The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script
file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes
of content.

To select an HTML element, JavaScript very often uses the document.getElementById()


method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

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

A Taste of JavaScript
Here are some examples of what JavaScript can do:

JavaScript can change HTML content

document.getElementById("demo").innerHTML = "Hello JavaScript!";

JavaScript can change HTML styles


document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

JavaScript can change HTML attributes

document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag


The <noscript> tag is used to provide an alternate content for users that have disabled scripts
in their browser or have a browser that doesn't support client-side scripts:

Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

HTML Script Tags


Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts

Test Yourself with Exercises!

HTML File Paths


Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
picture.jpg is located in the images folder in the current
<img src="images/picture.jpg">
folder
picture.jpg is located in the images folder at the root of the
<img src="/images/picture.jpg">
current web
picture.jpg is located in the folder one level up from the
<img src="../picture.jpg">
current folder
HTML File Paths
A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files like:

 Web pages
 Images
 Style sheets
 JavaScripts

Absolute File Paths


An absolute file path is the full URL to an internet file:

Example

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

The <img> tag and the src and alt attributes are explained in the chapter about HTML Images.

Relative File Paths


A relative file path points to a file relative to the current page.

In this example, the file path points to a file in the images folder located at the root of the
current web:

Example

<img src="/images/picture.jpg" alt="Mountain">

In this example, the file path points to a file in the images folder located in the current folder:

Example

<img src="images/picture.jpg" alt="Mountain">

In this example, the file path points to a file in the images folder located in the folder one
level above the current folder:

Example

<img src="../images/picture.jpg" alt="Mountain">


Best Practice
It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL.
All links will work on your own computer (localhost) as well as on your current public
domain and your future public domains.

HTML Head

The HTML <head> Element


The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, links, scripts, and other
meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and
<base>.

The HTML <title> Element


The <title> element defines the title of the document, and is required in all HTML/XHTML
documents.

The <title> element:

 defines a title in the browser tab


 provides a title for the page when it is added to favorites
 displays a title for the page in search engine results

A simple HTML document:

Example

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

<body>
The content of the document......
</body>

</html>

The HTML <style> Element


The <style> element is used to define style information for a single HTML page:

Example

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

The HTML <link> Element


The <link> element is used to link to external style sheets:

Example

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

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML <meta> Element


The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search engines (keywords), and
other web services.

Define the character set used:

<meta charset="UTF-8">
Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define keywords for search engines:

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

Define the author of a page:

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

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example of <meta> tags:

Example

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Setting The Viewport


HTML5 introduced a method to let web designers take control over the viewport, through the
<meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be
smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

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

A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.

Here is an example of a web page without the viewport meta tag, and the same web page with
the viewport <meta> tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links
below to see the difference.

Without the viewport meta tag

With the viewport meta tag


The HTML <script> Element
The <script> element is used to define client-side JavaScripts.

This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML <base> Element


The <base> element specifies the base URL and base target for all relative URLs in a page:

Example

<base href="https://www.w3schools.com/images/" target="_blank">

Omitting <html>, <head> and <body>?


According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be
omitted.

The following code will validate as HTML5:

Example

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

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

Note:

W3Schools does not recommend omitting the <html> and <body> tags. Omitting these tags
can crash DOM or XML software and produce errors in older browsers (IE9).

However, omitting the <head> tag has been a common practice for quite some time now.
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

HTML Layouts

HTML Layout Example

Cities
 London
 Paris
 Tokyo

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.

Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.

Footer

HTML Layout Elements


Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:
 <header> - Defines a header for a document or a
section
 <nav> - Defines a container for navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent self-contained
article
 <aside> - Defines content aside from the content
(like a sidebar)
 <footer> - Defines a footer for a document or a
section
 <details> - Defines additional details
 <summary> - Defines a heading for the <details>
element

HTML Layout Techniques


There are four different ways to create multicolumn layouts. Each way has its pros and cons:

 HTML tables (not recommended)


 CSS float property
 CSS flexbox
 CSS framework

Which One to Choose?


HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table> element
is to display tabular data. So, do not use tables for your page layout! They will bring a mess
into your code. And imagine how hard it will be to redesign your site after a couple of
months.

Tip: Do NOT use tables for your page layout!

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats
It is common to do entire web layouts using the CSS float property. Float is easy to learn -
you just need to remember how the float and clear properties work. Disadvantages: Floating
elements are tied to the document flow, which may harm the flexibility. Learn more about
float in our CSS Float and Clear chapter.

Float Example

Cities
 London
 Paris
 Tokyo

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.

Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.

Footer

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices. Disadvantages: Does not
work in IE10 and earlier.

Learn more about flexbox in our CSS Flexbox chapter.

Flexbox Example

Cities
 London
 Paris
 Tokyo

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.

Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.

Footer

100%, 64%, 1)

You might also like