0% found this document useful (0 votes)

9 views134 pages

HTML (Introduction)

Uploaded by

Kashi Koji

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views134 pages

HTML (Introduction)

Uploaded by

Kashi Koji

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 134

1.HTML Introduction  The <!

DOCTYPE html> declaration defines that this document

is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
HTML page
What is HTML?  The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's tab)
 HTML stands for Hyper Text Markup Language  The <body> element defines the document's body, and is a
 HTML is the standard markup language for creating Web container for all the visible contents, such as headings,
pages paragraphs, images, hyperlinks, tables, lists, etc.
 HTML describes the structure of a Web page  The <h1> element defines a large heading
 HTML consists of a series of elements  The <p> element defines a paragraph
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a What is an HTML Element?
heading", "this is a paragraph", "this is a link", etc.
An HTML element is defined by a start tag, some content, and an end
A Simple HTML Document tag:
Example
<tagname> Content goes here... </tagname>
<!DOCTYPE html>
The HTML element is everything from the start tag to the end tag:
<html>
<head>
<title>Page Title</title> <h1>My First Heading</h1>
</head> <p>My first paragraph.</p>
<body>
Start tag Element content End tag
<h1>My First Heading</h1>
<p>My first paragraph.</p> <h1> My First Heading </h1>

</body> <p> My first paragraph. </p>

</html>
<br> none none
My First Heading

My first paragraph.
Web Browsers
Example Explained
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to
read HTML documents and display them correctly.
HTML History

A browser does not display the HTML tags, but uses them to Since the early days of the World Wide Web, there have been many versions of HTML:
determine how to display the document:\

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

HTML Page Structure

Below is visualization of an HTML page structure. 1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Note: The content inside the <body> section (the white area above) will be
displayed in a browser. The content inside the <title> element will be shown in
the browser's title bar or in the page's tab.
The <!DOCTYPE> declaration represents the document type, and helps
2.HTML Basic Examples browsers to display web pages correctly.

In this chapter we will show some basic HTML examples. It must only appear once, at the top of the page (before any HTML
tags).
Don't worry if we use tags you have not learned about yet.
The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

HTML Documents <!DOCTYPE html>

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

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

The visible part of the HTML document is HTML headings are defined with the <h1> to <h6> tags.
between <body> and </body>.
<h1> defines the most important heading. <h6> defines the least
important heading:
Example

Examples:
<!DOCTYPE html>
<html>
<body> <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
This is heading 1
</html>

This is heading 2
The <!DOCTYPE> Declaration
This is heading 3
Table 1
2
The source file (src), alternative text (alt), width, and height are
provided as attributes:

HTML Paragraphs
Example
HTML paragraphs are defined with the <p> tag:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" heigh

Examplec t="142">

<p>This is a paragraph.</p> How to View HTML Source?

<p>This is another paragraph.</p>
Have you ever seen a Web page and wondered "Hey! How did they do
HTML Links that?"

HTML links are defined with the <a> tag: 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
Example
will open a window containing the HTML source code of the page.

Inspect an HTML Element:

<a href="https://www.w3schools.com">This is a link</a>
Right-click on an element (or a blank area), and choose "Inspect" or
The link's destination is specified in the href attribute. "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-
Attributes are used to provide additional information about HTML the-fly in the Elements or Styles panel that opens.
elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not have an
end tag!

3.HTML Elements
Nested HTML Elements

HTML elements can be nested (this means that elements can contain
An HTML element is defined by a start tag, some content, and an end other elements).
tag.
All HTML documents consist of nested HTML elements.

The following example contains four HTML elements

(<html>, <body>, <h1> and <p>):
HTML Elements

The HTML element is everything from the start tag to the end tag: Example

<tagname>Content goes here...</tagname>

<!DOCTYPE html>
<html>
<body>
Examples of some HTML elements<h1>My First Heading</h1>
<h1>My First Heading</h1>
<p>My first paragraph.</p> <p>My first paragraph.</p>

</body>
Start tag Element content End tag </html>

<h1> My First Heading </h1>

<p> My first paragraph. </p>

My First Heading
<br> none

My first paragraph.
It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Example Explained
Never Skip the End Tag
The <html> element is the root element and it defines the whole HTML
document. Some HTML elements will display correctly, even if you forget the end
tag:
It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element: Example

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

The <body> element defines the document's body. </body>

</html>
It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other This is a paragraph.
elements: <h1> and <p>:
This is a paragraph.
<h1>My First Heading</h1>
<p>My first paragraph.</p>

However, never rely on this! Unexpected results and errors

may occur if you forget the end tag!
The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

Empty HTML Elements
The <p> element defines a paragraph.
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a For a complete list of all available HTML tags, visit our HTML Tag Reference.
closing tag:

Example
HTML Attributes

<p>This is a <br> paragraph with a line break.</p>

HTML attributes provide additional information about HTML elements.

HTML is Not Case Sensitive

HTML Attributes
HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but  All HTML elements can have attributes
W3C recommends lowercase in HTML, and demands lowercase for  Attributes provide additional information about elements
stricter document types like XHTML.  Attributes are always specified in the start tag
 Attributes usually come in name/value pairs
like: name="value"

At W3Schools we always use lowercase tag names.

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL
HTML Tag Reference of the page the link goes to:

W3Schools' tag reference contains additional information about these

tags and their attributes. Example

Tag Description
<a href="https://www.w3schools.com">Visit W3Schools</a>
<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<!DOCTYPE html>
The src Attribute
<html>
<body>
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:
<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. Example

The link address is specified in the href attribute:</p>

<a href="https://www.w3schools.com">Visit <img src="img_girl.jpg">

W3Schools</a>
<!DOCTYPE html>
</body> <html> The src Attribute
<body>
</html>
HTML images are defined
<h2>The src Attribute</h2> with the img tag, and the
The href Attribute <p>HTML images are defined filename of the image
with the img tag, and the source is specified in the
HTML links are defined with the a tag. The link filename of the image source src attribute:
address is specified in the href attribute: is specified in the src
attribute:</p>
Visit W3Schools <img src="img_girl.jpg"
width="500"
height="600">

</body>

</html>

You will learn more about links in our HTML Links chapter.
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on Example
another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
See what happens if we try to display an image that does not exist:
Notes: External images might be under copyright. If you do not get
permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be
removed or changed. <img src="img_typo.jpg" alt="Girl with a jacket">

2. Relative URL - Links to an image that is hosted within the website. You will learn more about images in our HTML Images chapter.
Here, the URL does not include the domain name. If the URL begins
without a slash, it will be relative to the current page. Example: 4.HTML Headings
src="img_girl.jpg". If the URL begins with a slash, it will be relative to
the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if
you change domain. HTML headings are titles or subtitles that you want to display on a
webpage.

The width and height Attributes

The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels):
Heading 1
Example

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

Heading 2
The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This Heading 3
can be due to slow connection, or an error in the src attribute, or if
the user uses a screen reader.

Heading 4 Heading 5 Heading 6

Example

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

HTML Headings Note: Browsers automatically add some white space (a margin) before and
after a heading
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least
important heading

Headings Are Important

Example
Search engines use the headings to index the structure and content of
your web pages.
<h1>Heading 1</h1>
<h2>Heading 2</h2> Users often skim a page by its headings. It is important to use
<h3>Heading 3</h3> headings to show the document structure.
<h4>Heading 4</h4>
<h5>Heading 5</h5> <h1> headings should be used for main headings, followed
<h6>Heading 6</h6> by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to
<!DOCTYPE html> make text BIG or bold.
<html> Heading 1
<body>
You can change the size of a heading with
<h1 style="font- the style attribute, using the font-size
property. Bigger Headings
size:60px;">Heading 1</h1>
Each HTML heading has a default size. However, you can specify the
<p>You can change the size size for any heading with the style attribute, using the CSS font-
of a heading with the style size property:
attribute, using the font-
size property.</p>
Example
</body>
</html>
<h1 style="font-size:60px;">Heading 1</h1>
HTML Tag Reference
A paragraph always starts on a new line, and is usually a block of text.
W3Schools' tag reference contains additional information about these
tags and their attributes.

HTML Paragraphs

The HTML <p> element defines a paragraph.

Tag Description
A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
<html> Defines the root of an HTML document

Example
<body> Defines the document's body

<h1> to <h6> Defines HTML headings <!DOCTYPE html> This is a paragraph.

<html>
<body>
This is a paragraph.
For a complete list of all available HTML tags, visit our <p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
<p>This is a paragraph.</p>
HTML Tag Reference.
</body>
</html>

HTML Display
HTML Paragraphs
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different Example
results.

With HTML, you cannot change the display by adding extra spaces or <h1>This is heading 1</h1>
extra lines in your HTML code. <p>This is some text.</p>
<hr>
The browser will automatically remove any extra spaces and lines <h2>This is heading 2</h2>
when the page is displayed: <p>This is some other text.</p>
<hr>

Example
This is heading 1
<p>
This paragraph This is some text.
contains a lot of lines
in the source code,
but the browser
ignores it.
</p> This is heading 2
<p>
This paragraph This is some other text.
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
This is heading 2
This is some other text.

HTML Horizontal Rules

The <hr> tag is an empty tag, which means that it has no end tag.
The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
HTML Line Breaks
The <hr> element is used to separate content (or define a change) in
an HTML page: The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new Example
paragraph:

<pre>
Example My Bonnie lies over the ocean.

My Bonnie lies over the sea.

<p>This is<br>a paragraph<br>with line breaks.</p>
My Bonnie lies over the ocean.
The <br> tag is an empty tag, which means that it has no end tag.

Oh, bring back my Bonnie to me.

The Poem Problem </pre>

This poem will display on a single line:

Example
The pre tag preserves both spaces and line breaks:

<p> My Bonnie lies over the ocean.

My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.

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

Oh, bring back my Bonnie to me.

</p>

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

<!DOCTYPE html> I am normal

<html>
HTML Tag Reference <body>
I am red
W3Schools' tag reference contains additional information about HTML <p>I am normal</p>
elements and their attributes. <p style="color:red;"> I am blue
I am red</p>
<p style="color:blue;">I am

I am big
Tag Description
blue</p>
<p> Defines a paragraph <p style="font-size:50px;">I
am big</p>
<hr> Defines a thematic change in the content
</body>
<br> Inserts a single line break </html>

<pre> Defines pre-formatted text

The HTML Style Attribute

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

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

The HTML style attribute has the following syntax:

HTML Styles
<tagname style="property:value;">

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

The HTML style attribute is used to add styles to an element, such as

color, font, size, and more. You will learn more about CSS later in this tutorial.
<body>
Background Color
<h1 style="background-color:powderblue;">This is a
The CSS background-color property defines the background color for
heading</h1>
an HTML element.
<p style="background-color:tomato;">This is a paragraph.</p>

Example </body>

<!DOCTYPE html>
<!DOCTYPE html>
<html> This is a
<html>
<body style="background-
This is a <body>
heading
color:powderblue;"> heading <h1 style="background-
color:powderblue;">This is a
<h1>This is a heading</h1>
heading</h1> This is a paragraph.
<p>This is a paragraph.</p> This is a paragraph.
<p style="background-
color:tomato;">This is a
</body>
paragraph.</p>
</html>
</body>
</html>

Set the background color for a page to powderblue:

Text Color

The CSS color property defines the text color for an HTML element:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Example
</body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Example
This is a heading
<h1 style="color:blue;">This is a
Set background color for two different elements: heading</h1> This is a paragraph.
<p style="color:red;">This is a
paragraph.</p> Example

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

<!DOCTYPE html>
Fonts

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

<html>
<body> This is a
heading
HTML element:
<h1 style="font-size:300%;">This is a
heading</h1>
Example
<p style="font-size:160%;">This is a
paragraph.</p>

<h1 style="font-family:verdana;">This is a heading</h1> </body> This is a paragraph.

<p style="font-family:courier;">This is a paragraph.</p> </html>

This is a
<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This
heading
Text Alignment
is a heading</h1>
<p style="font-family:courier;">This is This is a The CSS text-align property defines the horizontal text alignment for
a paragraph.</p> paragraph. an HTML element:

</body>
</html> Example

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML Centered Heading
element:
Centered paragraph.
Chapter Summary

 Use the style attribute for styling HTML elements

 Use background-color for background color HTML Formatting Elements
 Use color for text colors
 Use font-family for text fonts Formatting elements were designed to display special types of text:
 Use font-size for text sizes
 Use text-align for text alignment  <b> - Bold text
 <strong> - Important text
HTML Text Formatting  <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
HTML contains several elements for defining text with a special  <ins> - Inserted text
meaning.  <sub> - Subscript text
 <sup> - Superscript text

Example HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra
importance.
This text is bold

Example
This text is italic

<b>This text is bold</b>

This is subscript and superscript
The HTML <strong> element defines text with strong importance. The
content inside is typically displayed in bold.

Example
<strong>This text is important!</strong> The HTML <small> element defines smaller text:

Example
HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or <small>This is some smaller text.</small>
mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc.
HTML <mark> Element

Example The HTML <mark> element defines text that should be marked or
highlighted:

<i>This text is italic</i>

Example
The HTML <em> element defines emphasized text. The content inside
is typically displayed in italic.
<p>Do not forget to buy <mark>milk</mark> today.</p>
Tip: A screen reader will pronounce the words in <em> with an
emphasis, using verbal stress.

Example HTML <del> Element

The HTML <del> element defines text that has been deleted from a
<em>This text is emphasized</em> document. Browsers will usually strike a line through deleted text:

Example

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

HTML <ins> Element

HTML <small> Element

The HTML <ins> element defines a text that has been inserted into a Here is a quote from WWF's website:
document. Browsers will usually underline inserted text:

For nearly 60 years, WWF has been protecting the future of

Example 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
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p> million globally.

<!DOCTYPE html> Here is a quote from WWF's website:

<html>
HTML <sub> Element
<body> For 60 years, WWF
<p>Here is a quote from
has worked to help
The HTML <sub> element defines subscript text. Subscript text
appears half a character below the normal line, and is sometimes WWF's website:</p> people and nature
rendered in a smaller font. Subscript text can be used for chemical thrive. As the world's
formulas, like H2O: Example <blockquote leading conservation
cite="http://www.worldwildlif organization, WWF
<p>This is <sub>subscripted</sub> text.</p> e.org/who/index.html"> works in nearly 100
For 60 years, WWF has worked countries. At every
to help people and nature
level, we collaborate
thrive. As the world's leading
HTML Quotation and Citation Elements conservation organization,
with people around the
WWF works in nearly 100 world to develop and
countries. At every level, we deliver innovative
collaborate with people solutions that protect
around the world to develop communities, wildlife,
and deliver innovative and the places in
solutions that protect which they live.
In this chapter we will go through
communities, wildlife, and the
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements. places in which they live.
</blockquote>

</body>
</html>

Example
Marking abbreviations can give useful information to browsers,
HTML <blockquote> for Quotations translation systems and search-engines.

The HTML <blockquote> element defines a section that is quoted Tip: Use the global title attribute to show the description for the
from another source. abbreviation/acronym when you mouse over the element.

Browsers usually indent <blockquote> elements.

Example

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<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. HTML <address> for Contact Information
The world's leading conservation organization,
WWF works in 100 countries and is supported by The HTML <address> tag defines the contact information for the
1.2 million members in the United States and author/owner of a document or an article.
close to 5 million globally.
</blockquote> The contact information can be an email address, URL, physical
address, phone number, social media handle, etc.
HTML <q> for Short Quotations
The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after
The HTML <q> tag defines a short quotation. the <address> element.

Browsers normally insert quotation marks around the quotation.

Example

Example
<address>
Written by John Doe.<br>
<p>WWF's goal is to: <q>Build a future where people live in Visit us at:<br>
harmony with nature.</q></p> Example.com<br>
Box 564, Disneyland<br>
USA
HTML <abbr> for Abbreviations </address>

The HTML <abbr> tag defines an abbreviation or an acronym, like

"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
HTML Comments
HTML <cite> for Work Title
Tag Description
The HTML <cite> tag defines the title of a creative work (e.g. a book,
a poem, a song, a movie, a painting, a sculpture, etc.).

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

<abbr> Defines an abbreviation or acronym
The text in the <cite> element usually renders in italic.

Example <address> Defines contact information for the author/owner of a

document

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

<bdo> Defines the text direction

HTML <bdo> for Bi-Directional Override

<blockquote> Defines a section that is quoted from another source
BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:
<cite> Defines the title of a work

Example

<bdo dir="rtl">This text will be written from right to <q> Defines a short inline quotation
left</bdo>

If your browser supports bi-directional override (bdo), the

next line will be written from right to left (rtl):

This line will be written from right to left

HTML comments are not displayed in the browser, but they can help
document your HTML source code.
Comments can be used to hide content.
HTML Comment Tag
Which can be helpful if you hide content temporarily:
You can add comments to your HTML source by using the following
syntax:
Example

Notice that there is an exclamation point (!) in the start tag, but not in
the end tag. <p>This is a paragraph.</p>

Note: Comments are not displayed by the browser, but they can help document
your HTML source code. <p>This is a paragraph too.</p>

You can also hide more than one line, everything between
the  will be hidden from the display.

Add Comments Example

With comments you can place notifications and reminders in your

HTML code: Hide a section of HTML code:

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

<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
<p>This is a paragraph.</p>
Comments are also great for debugging HTML, because you can
 comment out HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Hide Content
Comments can be used to hide parts in the middle of the HTML code.
Example

Hide a part of a paragaph:

Orange

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

DodgerBlue
HTML Colors

MediumSeaGreen
HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.

Gray

Color Names

In HTML, a color can be specified by using a color name:

SlateBlue

Violet

HTML supports 140 standard color names.

Tomato
Background Color

You can set the background color for HTML elements:

Hello World <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Border Color
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo You can set the color of borders:
consequat.

Hello World
Example
Hello World

Hello World
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

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>
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 Color Values
erat volutpat.
In HTML, colors can also be specified using RGB values, HEX values,
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper HSL values, RGBA values, and HSLA values.
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The following three <div> elements have their background color set
with RGB, HEX, and HSL values:
Example

rgb(255, 99, 71)

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel

#ff6347 (opacity).

RGB Color Values

hsl(9, 100%, 64%) In HTML, a color can be specified as an RGB value, using this formula:

The following two <div> elements have their background rgb(red, green, blue)
color set with RGBA and HSLA values, which add an Alpha
channel to the color (here we have 50% transparency) Each parameter (red, green, and blue) defines the intensity of the
color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible
Example
colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to

<h1 style="background-color:rgb(255, 99, its highest value (255), and the other two (green and blue) are set to
71);">...</h1> 0.
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, Another example, rgb(0, 255, 0) is displayed as green, because green
is set to its highest value (255), and the other two (red and blue) are
64%);">...</h1> set to 0.

<h1 style="background-color:rgba(255, 99, 71, To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
0.5);">...</h1>
To display white, set all color parameters to 255, like this: rgb(255,
<h1 style="background-color:hsla(9, 100%, 64%, 255, 255).
0.5);">...</h1>
Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED 255 GREEN 99 BLUE 71

HTML RGB and RGBA Colors

Example
rgb(255, 0, 0) ,rgb(0, 0, 255), rgb(60, 179, 113),rgb(238, Example
130, 238) rgb(255, 165, 0),rgb(106, 90, 205)

#ff0000,#0000ff,#3cb371,#ee82ee,

#ffa500,#6a5acd

HTML HEX Colors HTML HSL and HSLA Color

HSL stands for hue, saturation, and lightness.

A hexadecimal color is specified with: #RRGGBB, where the RR (red),
GG (green) and BB (blue) hexadecimal integers specify the HSLA color values are an extension of HSL with an Alpha channel
components of the color. (opacity).

HEX Color Values HSL Color Values

In HTML, a color can be specified using a hexadecimal value in the In HTML, a color can be specified using hue, saturation, and lightness
form: (HSL) in the form:

#rrggbb hsl(hue, saturation, lightness)

Where rr (red), gg (green) and bb (blue) are hexadecimal values Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
between 00 and ff (same as decimal 0-255). green, and 240 is blue.

For example, #ff0000 is displayed as red, because red is set to its Saturation is a percentage value, 0% means a shade of gray, and
highest value (ff), and the other two (green and blue) are set to 00. 100% is the full color.

Another example, #00ff00 is displayed as green, because green is set Lightness is also a percentage value, 0% is black, and 100% is white.
to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.
Saturation
To display white, set all color parameters to ff, like this: #ffffff.
Saturation can be described as the intensity of a color. What is CSS?

100% is pure color, no shades of gray Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
50% is 50% gray, but you can still see the color.
With CSS, you can control the color, font, the size of text, the spacing
0% is completely gray, you can no longer see the color. between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> Tip: The word cascading means that a style applied to a parent element
will also apply to all children elements within the parent. So, if you set the
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
color of the body text to "blue", all headings, paragraphs, and other text
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> elements within the body will also get the same color (unless you specify
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> something else)!
</body>
</html>

HTML Styles - CSS

Using CSS

CSS can be added to HTML documents in 3 ways:

CSS stands for Cascading Style Sheets.
 Inline - by using the style attribute inside HTML elements
CSS saves a lot of work. It can control the layout of multiple web  Internal - by using a <style> element in the <head> section
pages all at once.  External - by using a <link> element to link to an external
CSS file

The most common way to add CSS, is to keep the styles in external
CSS files. However, in this tutorial we will use inline and internal
styles, because this is easier to demonstrate, and easier for you to try
it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. </style>
</head>
An inline CSS uses the style attribute of an HTML element. <body>

The following example sets the text color of the <h1> element to blue, <h1>This is a heading</h1>
and the text color of the <p> element to red: <p>This is a paragraph.</p>

</body>
Example </html>

<h1 style="color:blue;">A Blue Heading</h1> External CSS

An external style sheet is used to define the style for many HTML
<p style="color:red;">A red paragraph.</p>
pages.

To use an external style sheet, add a link to it in the <head> section of

each HTML page:
Internal CSS

An internal CSS is used to define a style for a single HTML page. Example

An internal CSS is defined in the <head> section of an HTML page,

within a <style> element. <!DOCTYPE html>
<html>
<head>
The following example sets the text color of ALL the <h1> elements <link rel="stylesheet" href="styles.css">
</head>
(on that page) to blue, and the text color of ALL the <p> elements to <body>
red. In addition, the page will be displayed with a "powderblue"
background color: <h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Example </html>

The external style sheet can be written in any text editor. The file
<!DOCTYPE html>
must not contain any HTML code, and must be saved with a .css
<html>
extension.
<head>
<style>
body {background-color: powderblue;} Here is what the "styles.css" file looks like:
h1 {color: blue;}
p {color: red;}
"styles.css": <style>
h1 {
color: blue;
font-family: verdana;
body {
font-size: 300%;
background-color: powderblue;
}
}
p {
h1 {
color: red;
color: blue;
font-family: courier;
}
font-size: 160%;
p {
}
color: red;
</style>
}
</head>
<body>

Tip: With an external style sheet, you can change the look of an entire web site, <h1>This is a heading</h1>
by changing one file! <p>This is a paragraph.</p>

</body>
</html>
CSS Colors, Fonts and Sizes

Result;
Here, we will demonstrate some commonly used CSS properties. You
will learn more about them later.
This is a heading
The CSS color property defines the text color to be used.
This is a paragraph.
The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used. CSS Border

The CSS border property defines a border around an HTML element.

Example
Tip: You can define a border for nearly all HTML elements.

Use of CSS color, font-family and font-size properties:

Example

<!DOCTYPE html>
Use of CSS border property:
<html>
<head>
p { This is a heading
border: 2px solid powderblue;
}
This is a paragraph.
<!DOCTYPE html>
This is a paragraph.
<html>
This is a paragraph.
<head>

<style>

p {
CSS Padding
border: 2px solid powderblue;
The CSS padding property defines a padding (space) between the text
} and the border.

</style>
Example
</head>

<body> Use of CSS border and padding properties:

<h1>This is a heading</h1> p {
border: 2px solid powderblue;
padding: 30px;
}
<p>This is a paragraph.</p>
CSS Margin
<p>This is a paragraph.</p>
The CSS margin property defines a margin (space) outside the border.
<p>This is a paragraph.</p>

Example
</body>

</html> Use of CSS border and margin properties:

p {
border: 2px solid powderblue;
margin: 50px; This is a paragraph.
}

<!DOCTYPE html>

<html>
This is a paragraph.
<head>

<style>

p { border: 2px solid powderblue;

This is a paragraph.
padding: 30px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p> Link to External CSS

<p>This is a paragraph.</p> External style sheets can be referenced with a full URL or with a path
relative to the current web page.
<p>This is a paragraph.</p>

</body>
Example

This example uses a full URL to link to a style sheet:

Result;
<link rel="stylesheet" href="https://www.w3schools.com/html/  Use the CSS font-family property for text fonts
styles.css">  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
Example  Use the CSS margin property for space outside the border

This example links to a style sheet located in the html folder on the current
web site: HTML Links

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

Links are found in nearly all web pages. Links allow users to click their
way from page to page.
Example

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

HTML links are hyperlinks.

When you move the mouse over a link, the mouse arrow will turn into
You can read more about file paths in the chapter HTML File Paths. a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML
element!

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 HTML Links - Syntax
 Use the HTML <head> element to store <style> and <link>
elements
The HTML <a> tag defines a hyperlink. It has the following syntax:
 Use the CSS color property for text colors
<a href="url">link text</a> </body>
</html>
The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
Tip: Links can of course be styled with CSS, to get another look!
The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL
address.

HTML Links - The target Attribute

Example
By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.
This example shows how to create a link to W3Schools.com
The target attribute specifies where to open the linked document.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a> The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab

as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

By default, links will appear as follows in all browsers:

Example

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red Use target="_blank" to open the linked document in a new browser window
or tab:
<!DOCTYPE html>
<html>
<body>
HTML Links <a href="https://www.w3schools.com/" target="_blank">Visit
<h1>HTML Links</h1> W3Schools!</a>
Visit W3Schools.com!
<p><a
href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>
Absolute URLs vs. Relative URLs
</body>
<html>
Both examples above are using an absolute URL (a full web address)
in the href attribute.
HTML Links - Use an Image as a Link
A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):
To use an image as a link, just put the <img> tag inside the <a> tag:

Example
Example

<h2>Absolute URLs</h2>
<a href="default.asp">
<p><a href="https://www.w3.org/">W3C</a></p>
<img src="smiley.gif" alt="HTML
<p><a href="https://www.google.com/">Google</a></p>
tutorial" style="width:42px;height:42px;">
</a>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

<!DOCTYPE html>
<html>
Image as a Link
<!DOCTYPE html> Absolute URLs <body>
<html>
The image below is a link. Try to
<body> W3C <h2>Image as a Link</h2>
click on it.
<p>The image below is a link. Try to click on
<h2>Absolute URLs</h2>
Google it.</p>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a <a href="default.asp"><img src="smiley.gif"

href="https://www.google.com/">Google</a></p> Relative URLs alt="HTML tutorial"

style="width:42px;height:42px;"></a>

<h2>Relative URLs</h2> HTML Images </body>

</html>
<p><a href="html_images.asp">HTML
Images</a></p> CSS Tutorial
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Link to an Email Address <button onclick="document.location='default.asp'">HTML
Tutorial</button>
Use mailto: inside the href attribute to create a link that opens the
user's email program (to let them send a new email): <!DOCTYPE html>
<html>
Button as a
Example <body> Links
<a href="mailto:someone@example.com">Send email</a> <h2>Button as a Links</h2>
Click the button to
<!DOCTYPE html>
<html>
Link to an Email <p>Click the button to go to the HTML go to the HTML
<body> Address tutorial.</p> tutorial.
<h2>Link to an Email Address</h2> <button
To create a link that opens in
onclick="document.location='default.asp'">HTML
<p>To create a link that opens in the user's the user's email program (to let HTML
email program (to let them send a new Tutorial</button>
them send a new email), use Tutorial
email), use mailto: inside the href
attribute:</p> mailto: inside the href attribute: </body>
<p><a </html>
href="mailto:someone@example.com">Send Send email
email</a></p>

</body> Tip: Learn more about JavaScript in our JavaScript Tutorial.

</html>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript

code. Link Titles

JavaScript allows you to specify what happens at certain events, such The title attribute specifies extra information about an element. The
as a click of a button: information is most often shown as a tooltip text when the mouse
moves over the element.

Example <!DOCTYPE html>

Link Titles <html lang="en-US">
<body>
Use a full URL to link to a web page:

The title attribute <h2>Link Titles</h2>

<p>The title attribute specifies extra
specifies extra information about an element. The <a href="https://www.w3schools.com/html/default.asp">HTML
information about an information is most often shown as a tutorial</a>
element. The tooltip text when the mouse moves over
the element.</p>
information is most <a <!DOCTYPE html>
often shown as a tooltip href="https://www.w3schools.com/html/" <html>
External
text when the mouse title="Go to W3Schools HTML <body> Paths
moves over the element. section">Visit our HTML Tutorial</a>
<h2>External Paths</h2>
</body>
This example
Visit our HTML Tutorial </html> <p>This example uses a full URL to link to a web page:</p> uses a full URL
<p><a to link to a web
href="https://www.w3schools.com/html/default.asp">HTML
tutorial</a></p> page:

</body> HTML tutorial

</html>
Example

Example
<a href="https://www.w3schools.com/html/" title="Go to
W3Schools HTML section">Visit our HTML Tutorial</a>

Link to a page located in the html folder on the current web site:

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

Example
More on Absolute URLs and Relative URLs

Link 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.  An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

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

Example
Chapter Summary

 Use the <a> element to define a link Here, an unvisited link will be green with no underline. A visited link will be
 Use the href attribute to define the link address pink with no underline. An active link will be yellow and underlined. In
 Use the target attribute to define where to open the linked addition, when mousing over a link (a:hover) it will become red and
document underlined:
 Use the <img> element (inside <a>) to use an image as a link
 Use the mailto: scheme inside the href attribute to create a
link that opens the user's email program
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
HTML Link Tags }
For a complete list of all available HTML tags, visit our HTML a:visited {
Tag Reference. color: pink;
background-color: transparent;
text-decoration: none;
HTML Links - Different Colors }

a:hover {
color: red;
background-color: transparent;
An HTML link is displayed in a different color depending on whether it text-decoration: underline;
has been visited, is unvisited, or is active. }

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
HTML Link Colors
}
</style>
By default, a link will appear like this (in all browsers):
To create a bookmark - first create the bookmark, then add a link to it.

Tag Description When the link is clicked, the page will scroll down or up to the location
with the bookmark.
<a> Defines a hyperlink

Example
<head>
<style>
a:link, a:visited {
Link Button First, use the id attribute to create a bookmark:
background-color: #f44336;
color: white; <h2 id="C4">Chapter 4</h2>
padding: 15px 25px;
text-align: center;
A link styled as a button:
text-decoration: none; Then, add a link to the bookmark ("Jump to Chapter 4"), from within
display: inline-block;
} This is a link the same page:

a:hover, a:active { Example

background-color: red;
}
</style> <a href="#C4">Jump to Chapter 4</a>
</head>
<body>
You can also add a link to a bookmark on another page:
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a> <a href="html_demo.html#C4">Jump to Chapter 4</a>
</body>
</html>

HTML Links - Create Bookmarks

<!DOCTYPE html>
<html>
Jump to Chapter 4
<body> Jump to Chapter 10
<p><a href="#C4">Jump to Chapter 4</a></p> Chapter 1
HTML links can be used to create bookmarks, so that readers can jump <p><a href="#C10">Jump to Chapter 10</a></p> This chapter explains ba bla bla
to specific parts of a web page. <h2>Chapter 1</h2> Chapter 2
<p>This chapter explains ba bla bla</p>
This chapter explains ba bla bla
<h2>Chapter 2</h2> Chapter 3
<p>This chapter explains ba bla bla</p>
Create a Bookmark in HTML This chapter explains ba bla bla
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p> Chapter 4
Bookmarks can be useful if a web page is very long. This chapter explains ba bla bla
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p> Chapter 5
This chapter explains ba bla bla Example
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p> Chapter 6
<h2>Chapter 6</h2> This chapter explains ba bla bla
<p>This chapter explains ba bla bla</p>
Chapter 7 <img src="img_chania.jpg" alt="Flowers in Chania">
<h2>Chapter 7</h2> This chapter explains ba bla bla
<p>This chapter explains ba bla bla</p>
Chapter 8 <img src="img_chania.jpg" alt="Flowers in Chania" width="460"
height="345">
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
This chapter explains ba bla bla
Chapter 9
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p> This chapter explains ba bla bla
<h2 id="C10">Chapter 10</h2>
Chapter 10
<p>This chapter explains ba bla bla</p>
HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Chapter Summary Images are not technically inserted into a web page; images are linked
to web pages. The <img> tag creates a holding space for the
referenced image.
 Use the id attribute (id="value") to define bookmarks in a
page
 Use the href attribute (href="#value") to link to the bookmark The <img> tag is empty, it contains attributes only, and does not have
a closing tag.

HTML Images The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image
Images can improve the design and the appearance of a web page.
Syntax

Example <img src="url" alt="alternatetext">

<img src="pic_trulli.jpg" alt="Italian Trulli">

The src Attribute

Example
The required src attribute specifies the path (URL) to the image.

<img src="img_girl.jpg" alt="Girl in a jacket"> Note: When a web page loads, it is the browser, at that moment, that
gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in who are visually impaired or learning disabled
relation to the web page, otherwise your visitors will get a broken link
icon. The broken link icon and the alt text are shown if the browser
cannot find the image.

Example Image Size - Width and Height

You can use the style attribute to specify the width and height of an
<img src="img_chania.jpg" alt="Flowers in Chania"> image.

Example
The alt Attribute

The required alt attribute provides an alternate text for an image, if

the user for some reason cannot view it (because of slow connection, <img src="img_girl.jpg" alt="Girl in a
an error in the src attribute, or if the user uses a screen reader). jacket" style="width:500px;height:600px;">

The value of the alt attribute should describe the image: Alternatively, you can use the width and height attributes:

Example Example

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

jacket" width="500" height="600">
If a browser cannot find an image, it will display the value of
the alt attribute: The width and height attributes always define the width and height
of the image in pixels.

Example
Note: Always specify the width and height of an image. If width and height are
not specified, the web page might flicker while the image loads.
<img src="wrongname.gif" alt="Flowers in Chania">

Tip: A screen reader is a software program that reads the HTML code, and
allows the user to "listen" to the content. Screen readers are useful for people
If you have your images in a sub-folder, you must include the folder
name in the src attribute:

Width and Height, or Style?

Example
The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles <img src="/images/html5.gif" alt="HTML5
sheets from changing the size of images: Icon" style="width:128px;height:128px;"

Example

Images on Another Server/Website

<!DOCTYPE html>
<html> Some web sites point to an image on another server.
<head>
<style> To point to an image on another server, you must specify an absolute
img { (full) URL in the src attribute:
width: 100%;
}
</style>
</head> Example
<body>

<img src="html5.gif" alt="HTML5 <img src="https://www.w3schools.com/images/w3schools_green.jpg"

Icon" width="128" height="128"> alt="W3Schools.com">

Notes on external images: External images might be under

<img src="html5.gif" alt="HTML5 copyright. If you do not get permission to use it, you may be in
Icon" style="width:128px;height:128px;"> violation of copyright laws. In addition, you cannot control external
images; it can suddenly be removed or changed.
</body>
</html>
Animated Images

HTML allows animated GIFs:

Images in Another Folder

Example
<img src="programming.gif" alt="Computer src="smiley.gif" alt="HTML
Man" style="width:48px;height:48px;"> tutorial" style="width:42px;height:42px;">
</a>

Image as a Link
Image Floating
To use an image as a link, put the <img> tag inside the <a> tag:
Use the CSS float property to let the image float to the right or to the
left of a text:
Example

Example
<
Abbreviatio File Format File Extension a
n <p><img src="smiley.gif" alt="Smiley
h face" style="float:right;width:42px;height:42px;">
r The image will float to the right of the text.</p>
APNG Animated .apng e
Portable Network f
Graphics <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>
GIF Graphics .gif d
Interchange e
Format f
a Tip: To learn more about CSS Float, read our CSS Float Tutorial.
ICO Microsoft Icon .ico, .cur u
l
t
.
JPEG Joint Photographic .jpg, .jpeg, .jfif, .pjpeg, .pjp a
Expert Group s
Common Image Formats
image p
"
> Here are the most common image file types, which are supported in
PNG Portable Network .png all browsers (Chrome, Edge, Firefox, Safari, Opera):
Graphics
<
SVG Scalable Vector .svg i
Graphics m
g
Example

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

Chapter Summary

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

 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 <map name="workmap">
image, if it cannot be displayed <area shape="rect" coords="34,44,270,350" alt="Computer" href=
 Use the HTML width and height attributes or the "computer.htm">
CSS width and height properties to define the size of the <area shape="rect" coords="290,172,333,250" alt="Phone" href="
image phone.htm">
 Use the CSS float property to let the image float to the left or <area shape="circle" coords="337,300,44" alt="Coffee" href="co
to the right ffee.htm">
</map>

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

How Does it Work?

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

To create an image map you need an image, and some HTML code
that describes the clickable areas.
With HTML image maps, you can create clickable areas on an image.
The Image

The image is inserted using the <img> tag. The only difference from
other images is that you must add a usemap attribute:
Image Maps
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The HTML <map> tag defines an image map. An image map is an
image with clickable areas. The areas are defined with one or The usemap value starts with a hash tag # followed by the name of the
more <area> tags. image map, and is used to create a relationship between the image
and the image map.
Try to click on the computer, phone, or the cup of coffee in the image
below:
Tip: You can use any image as an image map!

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis
and one for the y-axis.
Create Image Map
So, the coordinates 34,44 is located 34 pixels from the left margin and
Then, add a <map> element.
44 pixels from the top:

The <map> element is used to create an image map, and is linked to

The coordinates 270,350 is located 270 pixels from the left margin
the image by using the required name attribute:
and 350 pixels from the top:

The name attribute must have the same value as

Now we have enough data to create a clickable rectangular area:
the <img>'s usemap attribute .

Example

The Areas
<area shape="rect" coords="34, 44, 270,
Then, add the clickable areas. 350" href="computer.htm">

A clickable area is defined using an <area> element. This is the area that becomes clickable and will send the user to the
page "computer.htm":
Shape

You must define the shape of the clickable area, and you can choose
one of these values:
Shape="circle"
 rect - defines a rectangular region
 circle - defines a circular region To add a circle area, first locate the coordinates of the center of the
 poly - defines a polygonal region circle:
 default - defines the entire region
337,300
You must also define some coordinates to be able to place the
clickable area onto the image. Then specify the radius of the circle:

44 pixels
Example

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

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

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

Image Map and JavaScript

Shape="poly"
A clickable area can also trigger a JavaScript function.
The shape="poly" contains several coordinate points, which creates a
shape formed with straight lines (a polygon). Add a click event to the <area> element to execute a JavaScript
function:
This can be used to create any shape.

Like maybe a croissant shape! Example

How can we make the croissant in the image below become a

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

We have to find the x and y coordinates for all edges of the croissant:
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onc
lick="myFunction()">
The coordinates come in pairs, one for the x-axis and one for the y- </map>
axis:
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Example

Chapter Summary
Add a background image on a HTML element:
 Use the HTML <map> element to define an image map
 Use the HTML <area> element to define the clickable areas in
the image map <p style="background-image: url('img_girl.jpg');">
 Use the HTML usemap attribute of the <img> element to point
to an image map

HTML Image Tags

For a complete list of all available HTML tags, visit our HTML Tag
Tag Description
Reference
<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

<!DOCTYPE html> Background Image

<html>
HTML Background Images <body>
A background image for a p element:
<h2>Background Image</h2>

<p>A background image for a p element:</p> You can specify background images
for any visible HTML element.
A background image can be specified for almost any HTML element. <p style="background-image: url('img_girl.jpg');"> In this example, the background image
You can specify background images<br>
is specified for a p element.
for any visible HTML element.<br>
In this example, the background image<br> By default, the background-image
is specified for a p element.<br> will repeat itself in the direction(s)
By default, the background-image<br> where it is smaller than the element
will repeat itself in the direction(s)<br> where it is specified. (Try resizing the
Background Image on a HTML element where it is smaller than the element<br> browser window to see how the
where it is specified. (Try resizing the<br> background image behaves.
browser window to see how the<br>
To add a background image on an HTML element, use the background image behaves.
</p>
HTML style attribute and the CSS background-image property:
</body> <style>
</html>
body {
background-image: url('img_girl.jpg');
}
</style>

You can also specify the background image in the <style> element,

in the <head> section:

Example

Background Repeat
Specify the background image in the <style> element:
If the background image is smaller than the element, the image will
repeat itself, horizontally and vertically, until it reaches the end of the
<style> element:
p {
background-image: url('img_girl.jpg');
} Example
</style>

Example
Example

Add a background image for the entire page:

Example

This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):
Learn More CSS

Example From the examples above you have learned that background images
can be styled by using the CSS background properties.

There are two main purposes for the <picture> element:

The HTML <picture> Element
1. Bandwidth
The HTML <picture> element gives web developers more flexibility in
specifying image resources. 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
The <picture> element contains one or more <source> elements, matching attribute values, and ignore any of the following elements.
each referring to different images through the srcset attribute. This
way the browser can choose the image that best fits the current view 2. Format Support
and/or device.
Some browsers or devices may not support all image formats. By
Each <source> element has a media attribute that defines when the using the <picture> element, you can add images of all formats, and
image is the most suitable. the browser will use the first format it recognizes, and ignore any of
the following elements.

Example
Example

Show different images for different screen sizes:

The browser will use the first image format it recognizes:

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg"> <picture>
<source media="(min-width: 465px)" srcset="img_car.jpg"> <source srcset="img_avatar.png">
<img src="img_girl.jpg"> <source srcset="img_girl.jpg">
</picture> <img src="img_beatles.gif" alt="Beatles" 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 match. Note: The browser will use the first <source> element with matching attribute
values, and ignore any following <source> elements.

HTML Image Tags

To add a favicon to your website, either save your favicon image to
Tag Description the root directory of your webserver, or create a folder in the root
<img> Defines an image directory called images, and save your favicon image in this folder. A
<map> Defines an image map common name for a favicon image is "favicon.ico".
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources Next, add a <link> element to your "index.html" file, after
the <title> element, like this:

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

HTML Favicon Example

<!DOCTYPE html>
<html>
<head>
A favicon is a small image displayed next to the page title in the
<title>My Page Title</title>
browser tab.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico
">
</head>
<body>

How To Add a Favicon in HTML

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
You can use any image you like as your favicon. You can also create
your own favicon on sites like https://www.favicon.cc.
</body>
</html>

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

Now, save the "index.html" file and reload it in your browser. Your
contrast.
browser tab should now display your favicon image to the left of the
page title.

A favicon image is displayed to the left of the page title in the browser Favicon File Format Support
tab, like this:
The following table shows the file format support for a favicon
image:
HTML Page Title Define an HTML Table

Company Company Country

Alfreds Futterkiste Alfreds Futterkiste Germany
Every web page should have a page title to describe the meaning of Centro comercial Centro comercial Mexico
the page. Moctezuma Moctezuma
Ernst Handel Ernst Handel Austria
Island Trading Island Trading UK
The <title> element adds a title to your page: Laughing Bacchus Laughing Bacchus Canada
Winecellars Winecellars
The title should describe the content and the meaning of the page.
Magazzini Alimentari Magazzini Alimentari Italy
The page title is very important for search engine optimization (SEO).
Riuniti Riuniti
The text is used by search engine algorithms to decide the order when
listing pages in search results. A table in HTML consists of table cells inside rows and columns

The <title> element:

Example
 defines a title in the browser toolbar
 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 table:

So, try to make the title as accurate and meaningful as possible!

<table>
<tr>
Browser ICO PNG GIF JPEG SVG <th
HTML Tables > Edge Yes Yes Yes Yes Yes Compan
y </th>
Chrome Yes Yes Yes Yes Yes
<th
> Firefox Yes Yes Yes Yes Yes Contac
t Opera Yes Yes Yes Yes Yes </th>
HTML tables allow web developers to arrange data into rows and
Safari Yes Yes Yes Yes Yes <th
columns.
> Countr
y</th>
</tr>
Example <tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
Centro comercial Francisco
<td>Francisco Chang</td> Mexico
<td>Mexico</td> Moctezuma Chang
</tr>
</table>

To understand the example better, we have added borders

to the table.

Table Cells

Each table cell is defined by a <td> and a </td> tag.

A basic HTML table
td stands for table data.

Company Contact Country Everything between <td> and </td> are the content of the table cell.

Example

Alfreds Futterkiste Maria Anders Germany <table>

<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.
Collapsed Table Borders

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

This will make the borders collapse into a single border:

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

Example
When you add a border to a table, you also add borders around each
table cell:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

To add a border, use the CSS border property on table, th,

and td elements:
Style Table Borders

Example If you set a background color of each cell, and give the border a white
color (the same as the document background), you get the impression
of an invisible border
table, th, td {
border: 1px solid black;
}
Example Example

table, th, td { th, td {

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

Dotted Table Borders

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

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

The following values are allowed:

 dotted
Example
 dashed
 solid
 double
table, th, td {  groove
border: 1px solid black;  ridge
border-radius:  inset
 outset
 none
 hidden
Skip the border around the table by leaving out table from the css
selector:

Example
th, td { How To Add a Border
border-style: dotted;
} When you add a border to a table, you also add borders around each
table cell:

To add a border, use the CSS border property on table, th,

and td elements:

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

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

Example Collapsed Table Borders

To avoid having double borders like in the example above, set the
th, td { CSS border-collapse property to collapse.
border-color: #96D4D4;
} This will make the borders collapse into a single border:

HTML Table Borders

HTML tables can have borders of different styles and shapes.

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

Example

Style Table Borders

table, th, td {
If you set a background color of each cell, and give the border a white border: 1px solid black;
color (the same as the document background), you get the impression border-radius: 10px;
of an invisible border: }

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

Example

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

Round Table Borders

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

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

Example

th, td {
border-color: #96D4D4;
The following values are allowed:
}

 dotted
 dashed
 solid
 double
HTML Table Borders
 groove
 ridge
 inset
 outset
 none HTML tables can have borders of different styles and shapes.
 hidden

Example
How To Add a Border

th, td { When you add a border to a table, you also add borders around each
border-style: dotted; table cell:
}

Border Color
To add a border, use the CSS border property on table, th,
and td elements:
With the border-color property, you can set the color of the border.

Example
table, th, td { If you set a background color of each cell, and give the border a white
border: 1px solid black; color (the same as the document background), you get the impression
} of an invisible border:

Example
Collapsed Table Borders

To avoid having double borders like in the example above, set the table, th, td {
CSS border-collapse property to collapse. border: 1px solid white;
border-collapse: collapse;
This will make the borders collapse into a single border: }
th, td {
background-color: #96D4D4;
}

Round Table Borders

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

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

table, th, td {
Style Table Borders
border: 1px solid black;
border-radius: 10px;
}
 inset
 outset
 none
Skip the border around the table by leaving out table from the css  hidden
selector:

Example

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

Border Color

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

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

Example

The following values are allowed:

th, td {
border-color: #96D4D4;
 dotted }
 dashed
 solid HTML Table Padding & Spacing
 double
 groove
 ridge
HTML tables can adjust the padding inside the cells, and also the th, td {
space between the cells. padding: 15px;
}

To add padding only above the content, use the padding-

top property.

And the others sides with the padding-bottom, padding-left,

and padding-right properties:

Example
With Padding

hello hello hello

th, td {
padding-top: 10px;
hello hello hello padding-bottom: 20px;
padding-left: 30px;
hello hello hello padding-right: 40px;
}
With Spacing
hello hello hello Try it Yourself »
hello hello hello
hello hello hello

HTML Table - Cell Spacing

HTML Table - Cell Padding Cell spacing is the space between each cell.

Cell padding is the space between the cell edges and the cell content. By default the space is set to 2 pixels.

By default the padding is set to 0. To change the space between table cells, use the CSS border-
spacing property on the table element:
To add padding on table cells, use the CSS padding property:

Example
Example
table {
border-spacing: 30px;
}
HTML Table - Colspan

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

HTML Table Colspan & Rowspan Example

<table>
<tr>
HTML tables can have cells that spans over multiple rows and/or <th colspan="2">Name</th>
columns. <th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
NAME <td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
APRIL

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

FIESTA

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:
Example 13 14 15 16
17 18 19 20

<table> To style every other table row element, use the :nth-
<tr> child(even) selector like this:
<th>Name</th>
<td>Jill</td>
</tr>
<tr> Example
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr> tr:nth-child(even) {
<tr> background-color: #D6EEEE;
<td>555-8745</td> }
</tr>
</table>

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc.
instead of 2,4,6 etc.
Note: The value of the rowspan attribute represents the number of rows
to span.

HTML Table Styling

HTML Table - Vertical Zebra Stripes

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

every other row.
Use CSS to make your tables look better.
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
HTML Table - Zebra Stripes
17 18 19 20
If you add a background color on every other table row, you will get a
nice zebra stripes effect. Set the :nth-child(even) for table data elements like this:

1 2 3 4
5 6 7 8 Example
9 10 11 12
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Note: Put the :nth-child() selector on both th and td elements if you

want to have the styling on both headers and regular table cells.
Horizontal Dividers

If you specify borders only at the bottom of each table row, you will
Combine Vertical and Horizontal Zebra Stripes have a table with horizontal dividers.

You can combine the styling from the two examples above and you Add the border-bottom property to all tr elements to get horizontal
will have stripes on every other row and every other column. dividers:

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

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

tr {
border-
First bottom: 1px
Last Name Savings solid #ddd;
Name
Peter Griffin $100 }
Lois Griffin $150
Joe Swanson $300

Example
Hoverable Table

tr:nth-child(even) { Use the :hover selector on tr to highlight table rows on mouse over:
background-color: rgba(150, 212, 212, 0.4);
}
First Name Last Name
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4); Peter Griffin
}
Lois Griffin
Example
Joe Swanson

<table>
Example <colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
tr:hover {background-color: #D6EEEE;} <th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
HTML Table Colgroup

Note: The <colgroup> tag must be a child of a <table> element and should be
placed before any other table elements, like <thead>, <tr>, <td> etc., but after
the <caption> element, if present.
The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup Legal CSS Properties

If you want to style the two first columns of a table, use There are only a very limited selection of CSS properties that are
the <colgroup> and <col> elements. allowed to be used in the colgroup:

The <colgroup> element should be used as a container for the column width property
specifications.
MON TUE WED THU FRI SAT SUN
Each group are specified with a <col> element. 1 2 3 4 5 6 7

The span attribute specifies how many columns that gets the style. 8 9 10 11 12 13 14

15 16 17 18 19 20 21
The style attribute specifies the style to give the columns.
22 23 24 25 26 27 28
visibility property
background properties
Note: There is a very limited selection of legal CSS properties for border properties
colgroups.
All other CSS properties will have no effect on your tables. <tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
Multiple Col Elements
<th>THU</th>
…
If you want to style more columns with different styles, use
more <col> elements inside the <colgroup>:

Example

Hide Columns
<table>
<colgroup> You can hide columns with the visibility: collapse property:
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr> Example
<th>MON</th>
<th>TUE</th>
<th>WED</th> <table>
<th>THU</th> <colgroup>
... <col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
Empty Colgroups <th>TUE</th>
<th>WED</th>
<th>THU</th>
If you want to style columns in the middle of a table, insert a ...
"empty" <col> element (with no styles) for the columns before:
HTML Lists

Example

<table> HTML lists allow web developers to group a set of related items in lists.
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
Example : An unordered HTML list:Item

Ordered HTML List

 Item
 Item An ordered list starts with the <ol> tag. Each list item starts with
 Item the <li> tag.

The list items will be marked with numbers by default:

An ordered HTML list:

Example

1. First item
2. Second item <ol>
<li>Coffee</li>
3. Third item <li>Tea</li>
4. Fourth item <li>Milk</li>
</ol>

Unordered HTML List

HTML Description Lists
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag. HTML also supports description lists.

The list items will be marked with bullets (small black circles) by A description list is a list of terms, with a description of each term.
default:
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
Example

Example
<ul>
<li>Coffee</li>
<li>Tea</li> <dl>
<li>Milk</li> <dt>Coffee</dt>
</ul> <dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML Unordered Lists

HTML List Tags

The HTML <ul> tag defines an unordered (bulleted) list.
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list Unordered HTML List

<li> Defines a list item An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
<dl> Defines a description list
The list items will be marked with bullets (small black circles) by
default:
<dt> Defines a term in a description list

<dd> Describes the term in a description list

Example

For a complete list of all available HTML tags, visit our HTML Tag <ul>
Reference. <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Milk</li>
</ul>

Example - Circle

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

Example - Square

Unordered HTML List - Choose List Item Marker

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>M
ilk</li Value Description
>
</ul> 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

The CSS list-style-type property is used to define the style of the

list item marker. It can have one of the following values: Example - None

Example - Disc <ul style="list-style-type:none;">

<li>Coffee</li>
<li>Tea</li>
<ul style="list-style-type:disc;"> <li>Milk</li>
<li>Coffee</li> </ul>
<li>Tea</li>
<!DOCTYPE html>
<html>
<head>
Nested HTML Lists <style>
ul {
Lists can be nested (list inside list): list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
Example background-color: #333333;
}

<ul> li {
<li>Coffee</li> float: left;
<li>Tea }
<ul>
<li>Black tea</li> li a {
<li>Green tea</li> display: block;
</ul> color: white;
</li> text-align: center;
<li>Milk</li> padding: 16px;
</ul> text-decoration: none;
}

li a:hover {
Note: A list item (<li>) can contain a new list, and other HTML elements, background-color: #111111;
like images and links, etc. }
</style>
</head>
<body>

<ul>
Horizontal List with CSS <li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
HTML lists can be styled in many different ways with CSS. <li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
One popular way is to style a list horizontally, to create a navigation </ul>
menu:
</body>
</html>
Example
Tip: You can learn much more about CSS in our CSS Tutorial.

The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.

Chapter Summary

 Use the HTML <ul> element to define an unordered list

Ordered HTML List
 Use the CSS list-style-type property to define the list item
marker
 Use the HTML <li> element to define a list item An ordered list starts with the <ol> tag. Each list item starts with
 Lists can be nested the <li> tag.
 List items can contain other HTML elements
 Use the CSS property float:left to display a list horizontally The list items will be marked with numbers by default:

Example

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Tag Description
<ul> Defines an unordered list
HTML List Tags
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
For a complete list of all available HTML tags, visit our HTML Tag <dt> Defines a term in a description list
Reference.
<dd> Describes the term in a description list

HTML Ordered Lists

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item <ol type="a">
marker: <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Type Description </ol>

type="1" The list items will be numbered with numbers (default)

Uppercase Roman Numbers:
type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

<ol type="I">
<li>Coffee</li>
type="I" The list items will be numbered with uppercase roman numbers
<li>Tea</li>
<li>Milk</li>
type="i" The list items will be numbered with lowercase roman numbers
</ol>

Lowercase Roman Numbers:

Numbers:

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

Uppercase Letters:
Control List Counting

<ol type="A"> By default, an ordered list will start counting from 1. If you want to
<li>Coffee</li> start counting from a specified number, you can use
<li>Tea</li> the start attribute:
<li>Milk</li>
</ol>

Example

Lowercase Letters:

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML List Tags

Tag Description
<ul> Defines an unordered list
Nested HTML Lists <ol> Defines an ordered list
<li> Defines a list item
Lists can be nested (list inside list): <dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Example
For a complete list of all available HTML tags, visit our HTML Tag
Reference.
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol> Tag Description
</li>
<li>Milk</li> <ul> Defines an unordered list
</ol> <ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
Note: A list item (<li>) can contain a new list, and other HTML
elements, like images and links, etc. <dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML Other Lists

Chapter Summary

 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 HTML also supports description lists.
 Lists can be nested
 List items can contain other HTML elements
For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Description Lists

HTML Block and Inline Elements
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:
Every HTML element has a default display value, depending on what
type of element it is.
Example
There are two display values: block and inline.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt> Block-level Elements
<dd>- white cold drink</dd>
</dl> A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.

A block-level element always takes up the full width available

(stretches out to the left and right as far as it can).
Chapter Summary
Two commonly used block elements are: <p> and <div>.
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
The <p> element defines a paragraph in an HTML document.
 Use the HTML <dd> element to describe the term in a
description list
The <div> element defines a division or a section in an HTML
document.

The <p> element is a block-level element.

The <div> element is a block-level element.

HTML List Tags Example

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

Here are the block-level elements in HTML:

Inline Elements <cite>

An inline element does not start on a new line.

<code>
An inline element only takes up as much width as necessary.

<dfn>
This is a <span> element inside a paragraph.

<em>
Example

<i>
<span>Hello World</span>
<img>
Try it Yourself »
<input>
Here are the inline elements in HTML:

<q>
<big>
The <div> element is often used as a container for other HTML
<samp> elements.

The <div> element has no required attributes,

<select> When used together with CSS, the <div> element can be used to style
blocks of content:

<small>
Example
<span>

<div style="background-color:black;color:white;padding:20px;">
<strong> <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
<sub> of over 13 million inhabitants.</p>
</div>

<sup>

<textarea>
The <span> Element

<time> The <span> element is an inline container used to mark up a part of a

text, or a part of a document.

<tt> The <span> element has no required attributes,

but style, class and id are common.

<var> When used together with CSS, the <span> element can be used to
style parts of the text:

Note: An inline element cannot contain a block-level element!

Example

The <div> Element

<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p> The HTML class attribute is used to specify a class for an HTML
element.

Multiple HTML elements can share the same class.

Chapter Summary

 There are two display values: block and inline

 A block-level element always starts on a new line and takes up Using The class Attribute
the full width available
 An inline element does not start on a new line and it only The class attribute is often used to point to a class name in a style
takes up as much width as necessary sheet. It can also be used by a JavaScript to access and manipulate
 The <div> element is a block-level and is often used as a elements with the specific class name.
container for other HTML elements
 The <span> element is an inline container used to mark up a In the following example we have three <div> elements with
part of a text, or a part of a document a class attribute with the value of "city". All of the
three <div> elements will be styled equally according to
the .city style definition in the head section:

Example

HTML Tags
<!DOCTYPE html>
Tag Description <html>
<head>
<div> Defines a section in a document (block-level) <style>
.city {
background-color: tomato;
<span> Defines a section in a document (inline)
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
For a complete list of all available HTML tags, visit our HTML Tag Reference. }
</style>
</head>
<body>
HTML class Attribute
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p> </body>
</html>
</div>

<div class="city">
<h2>Paris</h2> Tip: The class attribute can be used on any HTML element.
<p>Paris is the capital of France.</p>
</div>
Note: The class name is case sensitive!
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div> Tip: You can learn much more about CSS in our CSS Tutorial.

</body>
</html>

In the following example we have two <span> elements with

a class attribute with the value of "note". Both <span> elements will
be styled equally according to the .note style definition in the head
section:

Example

HTML id Attribute
<!DOCTYPE html>
<html>
<head>
<style>
.note { The HTML id attribute is used to specify a unique id for an HTML
font-size: 120%; element.
color: red;
} You cannot have more than one element with the same id in an HTML
</style> document.
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p> Using The id Attribute
The id attribute specifies a unique id for an HTML element. The value </body>
of the id attribute must be unique within the HTML document. </html>

The id attribute is used to point to a specific style declaration in a

style sheet. It is also used by JavaScript to access and manipulate the
Note: The id name is case sensitive!
element with the specific id.

The syntax for id is: write a hash character (#), followed by an id

name. Then, define the CSS properties within curly braces {}. Note: The id name must contain at least one character, cannot start with
a number, and must not contain whitespaces (spaces, tabs, etc.).
In the following example we have an <h1> element that points to the
id name "myHeader". This <h1> element will be styled according to
the #myHeader style definition in the head section:

Example Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id

<!DOCTYPE html> name must only be used by one HTML element within the page:
<html>
<head>
<style> Example
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;

}
<style>
/* Style the element with the id "myHeader" */
</style> #myHeader {
background-color: lightblue;
color: black;
padding: 40px;
</head> text-align: center;
}
<body>
/* Style all elements with the class name "city" */
.city {
<h1 id="myHeader">My Header</h1> background-color: tomato;
color: white;
padding: 10px; To use a bookmark, you must first create it, and then add a link to it.
}
</style> Then, when the link is clicked, the page will scroll to the location with
the bookmark.

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

First, create a bookmark with the id attribute:

<h2 class="city">London</h2>
<p>London is the capital of England.</p> <h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within
<h2 class="city">Paris</h2> the same page:
<p>Paris is the capital of France.</p>

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

<p>Tokyo is the capital of Japan.</p>

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

Tip: You can learn much more about CSS in our CSS Tutorial.
Or, add a link to the bookmark ("Jump to Chapter 4"), from another
page:

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

HTML Bookmarks with ID and Links Using The id Attribute in JavaScript

HTML bookmarks are used to allow readers to jump to specific parts of The id attribute can also be used by JavaScript to perform some tasks
a webpage. for that specific element.

Bookmarks can be useful if your page is very long.

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

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

Example

Use the id attribute to manipulate text with JavaScript: HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript <iframe src="url" title="description"></iframe>
Tutorial.
Tip: It is a good practice to always include a title attribute for
the <iframe>. This is used by screen readers to read out what the
content of the iframe is.

Chapter Summary

 The id attribute is used to specify a unique id for an HTML

element
 The value of the id attribute must be unique within the HTML
document
 The id attribute is used by CSS and JavaScript to style/select a
specific element
 The value of the id attribute is case sensitive Iframe - Set Height and Width
 The id attribute is also used to create HTML bookmarks
 JavaScript can access an element with a specific id with
Use the height and width attributes to specify the size of the iframe.
the getElementById() method

The height and width are specified in pixels by default:

HTML Iframes
Example Example

<iframe src="demo_iframe.htm" height="200" width="300" title="If <iframe src="demo_iframe.htm" style="border:2px solid

rame Example"></iframe> red;" title="Iframe Example"></iframe>

Or you can add the style attribute and use the

CSS height and width properties:

Iframe - Target for a Link

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

Example

Iframe - Remove the Border

To remove the border, add the style attribute and use the <p><a href="https://www.w3schools.com" target="iframe_a">W3Sch
CSS border property: ools.com</a></p>

Example

Chapter Summary
<iframe src="demo_iframe.htm" style="border:none;" title="Ifra
me Example"></iframe>  The HTML <iframe> tag specifies an inline frame
 The src attribute defines the URL of the page to embed
With CSS, you can also change the size, style and color of the iframe's  Always include a title attribute (for screen readers)
border:  The height and width attributes specifies the size of the
iframe
 Use border:none; to remove the border around the iframe The HTML <script> Tag

The HTML <script> tag is used to define a client-side script

(JavaScript).

HTML iframe Tag The <script> element either contains script statements, or it points to
an external script file through the src attribute.
Tag Description
Common uses for JavaScript are image manipulation, form validation,
<iframe> Defines an inline frame and dynamic changes of content.

To select an HTML element, JavaScript most often uses

the document.getElementById() method.
For a complete list of all available HTML tags, visit our HTML Tag Reference.
This JavaScript example writes "Hello JavaScript!" into an HTML
element with id="demo":
HTML JavaScript

Example

JavaScript makes HTML pages more dynamic and interactive. <script>

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

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

Example

My First JavaScript A Taste of JavaScript

Here are some examples of what JavaScript can do:

Click me to display Date and Time

Example
JavaScript can change content: File Path Examples

Path Description
document.getElementById("demo").innerHTML = "Hello JavaScript!";
<img src="picture.jpg"> The "picture.jpg" file is located in the
same folder as the current page

Example <img The "picture.jpg" file is located in the

src="images/picture.jpg"> images folder in the current folder

JavaScript can change styles: <img The "picture.jpg" file is located in the
src="/images/picture.jpg"> images folder at the root of the current
web
<img src="../picture.jpg"> The "picture.jpg" file is located in the
document.getElementById("demo").style.fontSize = "25px"; folder one level up from the current
document.getElementById("demo").style.color = "red"; folder
document.getElementById("demo").style.backgroundColor = "yellow"
;

Example

HTML File Paths

JavaScript can change attributes:
A file path describes the location of a file in a web site's folder
structure.
document.getElementById("image").src = "picture.gif";
File paths are used when linking to external files, like:

 Web pages
HTML File Paths  Images
 Style sheets
 JavaScripts

A file path describes the location of a file in a web site's folder

structure.
Absolute File Paths

An absolute file path is the full URL to a file:

Example Example

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

t="Mountain">

The <img> tag is explained in the chapter: HTML Images.

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
Relative File Paths (localhost) as well as on your current public domain and your future
public domains.
A relative file path points to a file relative to the current page.
HTML - The Head Element
In the following example, the file path points to a file in the images
folder located at the root of the current web:

Example The HTML <head> element is a container for the following

elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

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

In the following example, the file path points to a file in the images
folder located in the current folder: 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.

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

<img src="images/picture.jpg" alt="Mountain"> Metadata typically define the document title, character set, styles,
scripts, and other meta information.
In the following example, the file path points to a file in the images
folder located in the folder one level up from the current folder:
The HTML <title> Element

The <title> element defines the title of the document. The title must
be text-only, and it is shown in the browser's title bar or in the page's The HTML <style> Element
tab.
The <style> element is used to define style information for a single
The <title> element is required in HTML documents! HTML page:

The contents of a page title is very important for search engine

optimization (SEO)! The page title is used by search engine algorithms Example
to decide the order when listing pages in search results.

The <title> element: <style>

body {background-color: powderblue;}
 defines a title in the browser toolbar h1 {color: red;}
 provides a title for the page when it is added to favorites p {color: blue;}
 displays a title for the page in search engine-results </style>

So, try to make the title as accurate and meaningful as possible! The HTML <link> Element

A simple HTML document: The <link> element defines the relationship between the current
document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example

Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title> <link rel="stylesheet" href="mystyle.css">
</head>
<body>
Tip: To learn all about CSS, visit our CSS Tutorial.
The content of the document......

</body>
</html>
The HTML <meta> Element
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
The <meta> element is typically used to specify the character set,
page description, keywords, author of the document, and viewport
settings. Example of <meta> tags:

The metadata will not be displayed on the page, but are used by
browsers (how to display content or reload page), by search engines
Example
(keywords), and other web services.

Examples
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
Define the character set used:
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta charset="UTF-8">

Define keywords for search engines:

Setting The Viewport
<meta name="keywords" content="HTML, CSS, JavaScript">
The viewport is the user's visible area of a web page. It varies with the
device - it will be smaller on a mobile phone than on a computer
Define a description of your web page: screen.

You should include the following <meta> element in all your web
<meta name="description" content="Free Web tutorials"> pages:

Define the author of a page: <meta name="viewport" content="width=device-width, initial-

scale=1.0">
<meta name="author" content="John Doe">
This gives the browser instructions on how to control the page's
dimensions and scaling.
Refresh document every 30 seconds:
The width=device-width part sets the width of the page to follow the
<meta http-equiv="refresh" content="30"> 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
Setting the viewport to make your website look good on all is first loaded by the browser.
devices:
Here is an example of a web page without the viewport meta tag, and document.getElementById("demo").innerHTML = "Hello
the same web page with the viewport meta tag: JavaScript!";
}
</script>

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.
Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML <base> Element

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

The <base> tag must have either an href or a target attribute present,
or both.

There can only be one single <base> element in a document!

With the viewport meta tag

Example
The HTML <script> Element

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

Specify a default URL and a default target for all links on a page:
The following JavaScript writes "Hello JavaScript!" into an HTML
element with id="demo":
<head>
<base href="https://www.w3schools.com/" target="_blank">
Example </head>

Chapter Summary

 The <head> element is a container for metadata (data about

data)
 The <head> element is placed between the <html> tag and HTML Layout Elements and Techniques
the <body> tag
 The <title> element is required and it defines the title of the
document
 The <style> element is used to define style information for a
single document
 The <link> tag is most often used to link to external style Websites often display content in multiple columns (like a magazine or
sheets a newspaper).
 The <meta> element is typically used to specify the character
set, page description, keywords, author of the document, and
viewport settings
 The <script> element is used to define client-side JavaScripts
 The <base> element specifies the base URL and/or target for
all relative URLs in a page Example

Cities

HTML head Elements

 London
Tag Description

<head> Defines information about the document

For a complete list of all available HTML tags, visit our HTML Tag Reference. <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

 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

 <header> - Defines a header for a document or a section

 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
HTML Layout Elements  <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
HTML has several semantic elements that define the different parts of  <details> - Defines additional details that the user can open
a web page:  and close on demand
 <summary> - Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts.

Each technique has its pros and cons:

 CSS framework
 CSS float property London is the capital city of England. It is the most populous city in the United Kingdom,
 CSS flexbox with a metropolitan area of over 13 million inhabitants.
 CSS grid

CSS Frameworks 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.
If you want to create your layout fast, you can use a CSS framework,
like W3.CSS or Bootstrap.

Footer

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

* no credit card required CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the

page layout must accommodate different screen sizes and different
display devices.
CSS Float Layout
Learn more about flexbox in our CSS Flexbox chapter.
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.

Example
Example

Cities
Cities

 London
 Paris
 London  Tokyo
 Paris
 Tokyo

London
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

Try it Yourself »
What is Responsive Web Design?

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

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without
having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

Setting The Viewport

HTML Responsive Web Design
To create a responsive website, add the following <meta> tag to all your web pages:

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

A responsive web design will automatically adjust for different screen sizes and <meta name="viewport" content="width=device-width, initial-
viewports. scale=1.0">
This will set the viewport of your page, which will give the browser instructions on how
to control the page's dimensions and scaling.

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

page with the viewport meta tag:

Without the viewport meta tag:

With the viewport meta tag:

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

Responsive Images

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

Using the width Property Example

If the CSS width property is set to 100%, the image will be responsive and scale up
and down: <img src="img_girl.jpg" style="max-width:100%;height:auto;">

Show Different Images Depending on Browser Width

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

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

Example

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

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

Using the max-width Property

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

In addition to resize text and images, it is also common to use media queries in
<picture> responsive web pages.
<source srcset="img_smallflower.jpg" media="(max-width:
600px)"> With media queries you can define completely different styles for different browser
<source srcset="img_flowers.jpg" media="(max-width: 1500px)"> sizes.
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers"> Example: resize the browser window to see that the three div elements below will
</picture> display horizontally on large screens and stacked vertically on small screens:

Left Menu

Responsive Text Size Main Content

The text size can be set with a "vw" unit, which means the "viewport width".
Right Content
That way the text size will follow the size of the browser window:

Hello World

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

Example

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

Example

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm <style>
wide, 1vw is 0.5cm. .left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left; Example
width: 60%; /* The width is 60%, by default */
}
<code>
/* Use a media query to add a breakpoint at 800px: */
x = 5;
@media screen and (max-width: 800px) {
y = 6;
.left, .main, .right {
z = x + y;
width: 100%; /* The width is 100%, when the viewport is
</code>
800px or smaller */
}
}
</style>

HTML <kbd> For Keyboard Input

Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial. The HTML <kbd> element is used to define keyboard input. The
content inside is displayed in the browser's default monospace font.

Example

Define some text as keyboard input in a document:

Responsive Web Page - Full Example

A responsive web page should look good on large desktop screens and on small mobile
phones. <p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Result:
HTML Computer Code Elements

Save the document by pressing Ctrl + S

HTML contains several elements for defining user input and computer
code.
HTML <samp> For Program Output The HTML <code> element is used to define a piece of computer code.
The content inside is displayed in the browser's default monospace
The HTML <samp> element is used to define sample output from a font.
computer program. The content inside is displayed in the browser's
default monospace font.
Example

Example
Define some text as computer code in a document:

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

<code>
x = 5;
<p>Message from my computer:</p> y = 6;
<p><samp>File not found.<br>Press F1 to continue</samp></p> z = x + y;
</code>

Result:
Result:

Message from my computer:

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

File not found. Notice that the <code> element does not preserve extra whitespace
Press F1 to continue and line-breaks.

To fix this, you can put the <code> element inside a <pre> element:

Example
HTML <code> For Computer Code
<pre> The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical
<code> height.
x = 5;
y = 6;
z = x + y;
</code>
</pre>
Chapter Summary

 The <kbd> element defines keyboard input

Result:  The <samp> element defines sample output from a computer
program
 The <code> element defines a piece of computer code
x = 5;  The <var> element defines a variable in programming or in a
y = 6; mathematical expression
z = x + y;  The <pre> element defines preformatted text

HTML Computer Code Elements

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming Tag Description
or in a mathematical expression. The content inside is typically <code> Defines programming code
displayed in italic.
<kbd> Defines keyboard input
<samp> Defines computer output
Example <var> Defines a variable
<pre> Defines preformatted text

Define some text as variables in a document:

For a complete list of all available HTML tags, visit our HTML Tag Reference.
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,
where <var>b</var> is the base, and <var>h</var> is the vertical
height.</p>
HTML Semantic Elements

Result:
Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser

and the developer.

Examples of non-semantic elements: <div> and <span> - Tells

nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - HTML <section> Element
Clearly defines its content.
The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic

grouping of content, typically with a heading."
Semantic Elements in HTML
Examples of where a <section> element can be used:
Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header,  Chapters
and footer.  Introduction
 News items
In HTML there are some semantic elements that can be used to define  Contact information
different parts of a web page:
A web page could normally be split into sections for introduction,
 <article> content, and contact information.
 <aside>
 <details>
 <figcaption>
 <figure> Example
 <footer>
 <header>
 <main> Two sections in a document:
 <mark>
 <nav>
 <section> <section>
 <summary> <h1>WWF</h1>
 <time> <p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation, <p>Google Chrome is a web browser developed by Google,
research and restoration of the environment, formerly named the released in 2008. Chrome is the world's most popular web
World Wildlife Fund. WWF was founded in 1961.</p> browser today!</p>
</section> </article>

<section> <article>
<h1>WWF's Panda symbol</h1> <h2>Mozilla Firefox</h2>
<p>The Panda has become the symbol of WWF. The well-known panda <p>Mozilla Firefox is an open-source web browser developed by
logo of WWF originated from a panda named Chi Chi that was Mozilla. Firefox has been the second most popular web browser
transferred from the Beijing Zoo to the London Zoo in the same since January, 2018.</p>
year of theestablishment of WWF.</p> </article>
</section>
<article>
HTML <article> Element <h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
The <article> element specifies independent, self-contained content. released in 2015. Microsoft Edge replaced Internet
Explorer.</p>
An article should make sense on its own, and it should be possible to </article>
distribute it independently from the rest of the web site.

Examples of where the <article> element can be used: Example 2

 Forum posts
 Blog posts
 User comments Use CSS to style the <article> element:
 Product cards
 Newspaper articles
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
Example
background-color: lightgray;
}

Three articles with independent, self-contained content: .all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
<article>
<h2>Google Chrome</h2> .browser {
background: white; The <article> element specifies independent, self-contained content.
}
The <section> element defines section in a document.
.browser > h2, p {
margin: 4px; Can we use the definitions to decide how to nest those elements? No,
font-size: 90%; we cannot!
}
</style>
</head> So, you will find HTML pages with <section> elements
<body> containing <article> elements, and <article> elements
containing <section> elements.

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
HTML <header> Element
<p>Google Chrome is a web browser developed by Google,
released in 2008. Chrome is the world's most popular web
browser today!</p> The <header> element represents a container for introductory content
</article> or a set of navigational links.
<article class="browser">
<h2>Mozilla Firefox</h2> A <header> element typically contains:
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web  one or more heading elements (<h1> - <h6>)
browser since January, 2018.</p>  logo or icon
</article>  authorship information
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, Note: You can have several <header> elements in one HTML
released in 2015. Microsoft Edge replaced Internet document. However, <header> cannot be placed within
Explorer.</p> a <footer>, <address> or another <header> element.
</article>
</article>
Example
</body>
</html>
A header for an <article>:

<article>
<header>
<h1>What Does WWF Do?</h1>
Nesting <article> in <section> or Vice Versa? <p>WWF's mission:</p>
</header> HTML <nav> Element
<p>WWF's mission is to stop the degradation of our planet's
natural environment, The <nav> element defines a set of navigation links.
and build a future in which humans live in harmony with
nature.</p>
</article>
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major block of navigation links.

HTML <footer> Element Browsers, such as screen readers for disabled users, can use this element
to determine whether to omit the initial rendering of this content.
The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

Example

 authorship information
 copyright information
 contact information A set of navigation links:
 sitemap
 back to top links
 related documents
<nav>
<a href="/html/">HTML</a> |
You can have several <footer> elements in one document. <a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
Example </nav>

A footer section in a document:

HTML <aside> Element

<footer> The <aside> element defines some content aside from the content it
<p>Author: Hege Refsnes</p> is placed in (like a sidebar).
<p><a href="mailto:hege@example.com">hege@example.com</a></p
> The <aside> content should be indirectly related to the surrounding
</footer> content.

Example
Display some content aside from the content it is placed in:
<aside>

<p>My family and I visited The Epcot center this summer. The <p>The Epcot center is a theme park at Walt Disney World
weather was nice, and Epcot was amazing! I had a great summer Resort featuring exciting attractions, international
together with my family!</p> pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring <p>My family and I visited The Epcot center this summer. The
exciting attractions, international pavilions, award-winning weather was nice, and Epcot was amazing! I had a great summer
fireworks and seasonal special events.</p> together with my family!</p>
</aside> <p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
Example 2
</body>
</html>
Use CSS to style the <aside> element:

<html> HTML <figure> and <figcaption> Elements

<head>
<style> The <figure> tag specifies self-contained content, like illustrations,
aside { diagrams, photos, code listings, etc.
width: 30%;
padding-left: 15px;
margin-left: 15px; The <figcaption> tag defines a caption for a <figure> element.
float: right; The <figcaption> element can be placed as the first or as the last
font-style: italic; child of a <figure> element.
background-color: lightgray;
} The <img> element defines the actual image/illustration.
</style>

</head>
<body>

<p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
Example For a complete list of all available HTML tags, visit our HTML Tag Reference.

<figure> HTML Style Guide

<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

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

Why Semantic Elements?

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

According to the W3C: "A semantic Web allows data to be shared and
reused across applications, enterprises, and communities."

Always Declare Document Type

Always declare the document type as the first line in your document.
Semantic Elements in HTML
The correct document type for HTML is:
Below is a list of some of the semantic elements in HTML.
<!DOCTYPE html>

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
Use Lowercase Element Names
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
HTML allows mixing uppercase and lowercase letters in element
<header> Specifies a header for a document or section
names.
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
However, we recommend using lowercase element names, because:
<nav> Defines navigation links
<section> Defines a section in a document  Mixing uppercase and lowercase names looks bad
<summary> Defines a visible heading for a <details> element  Developers normally use lowercase names
<time> Defines a date/time  Lowercase looks cleaner
 Lowercase is easier to write
Good:

<body> Use Lowercase Attribute Names

<p>This is a paragraph.</p>
</body> HTML allows mixing uppercase and lowercase letters in attribute
names.

Bad: However, we recommend using lowercase attribute names, because:

 Mixing uppercase and lowercase names looks bad

 Developers normally use lowercase names
<BODY>
 Lowercase look cleaner
<P>This is a paragraph.</P>
</BODY>
 Lowercase are easier to write

Close All HTML Elements

Good:
In HTML, you do not have to close all elements (for example
the <p> element).
<a href="https://www.w3schools.com/html/">Visit our HTML
However, we strongly recommend closing all HTML elements, like this: tutorial</a>

Good: Bad:

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

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

Bad: Always Quote Attribute Values

HTML allows attribute values without quotes.

<section>
<p>This is a paragraph. However, we recommend quoting attribute values, because:
<p>This is a paragraph.
</section>  Developers normally quote attribute values
 Quoted values are easier to read
 You MUST use quotes if the value contains spaces Good:

Good: <img src="html5.gif" alt="HTML5" style="width:128px;height:128

px">

<table class="striped">
Bad:

Bad:
<img src="html5.gif">

Very bad: Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to

read and groups entities better together.
This will not work, because the value contains spaces:

Good:
<table class=table striped>

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

Always Specify alt, width, and height for Images Bad:

Always specify the alt attribute for images. This attribute is important
if the image for some reason cannot be displayed. <link rel = "stylesheet" href = "styles.css">

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

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left
to read the HTML code.
Try to avoid too long code lines. <body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of
the Greater Tokyo Area, and the most populous metropolitan area
in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is
Blank Lines and Indentation
the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area
Do not add blank lines, spaces, or indentations without a reason. is one of the largest population centers in Europe.</p>
</body>
For readability, add blank lines to separate large or logical code
blocks.
Good Table Example:
For readability, add two spaces of indentation. Do not use the tab key.

<table>
Good: <tr>
<th>Name</th>
<th>Description</th>
<body> </tr>
<tr>
<td>A</td>
<h1>Famous Cities</h1> <td>Description of A</td>
</tr>
<h2>Tokyo</h2> <tr>
<p>Tokyo is the capital of Japan, the center of the Greater <td>B</td>
Tokyo Area, and the most populous metropolitan area in the <td>Description of B</td>
world.</p> </tr>
</table>

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

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

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

However, we strongly recommend to always add

the <html> and <body> tags!
Never Skip the <title> Element
Omitting <body> can produce errors in older browsers.
The <title> element is required in HTML.
Omitting <html> and <body> can also crash DOM and XML software.
The contents of a page title is very important for search engine
optimization (SEO)! The page title is used by search engine algorithms
to decide the order when listing pages in search results.

The <title> element: Omitting <head>?

 defines a title in the browser toolbar The HTML <head> tag can also be omitted.
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results Browsers will add all elements before <body>, to a
default <head> element.
So, try to make the title as accurate and meaningful as possible:

<title>HTML Style Guide and Coding Conventions</title> Example

<!DOCTYPE html>
<html>
Omitting <html> and <body>? <title>Page Title</title>
<body>
An HTML page will validate without the <html> and <body> tags:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Example
</body>
</html>
<!DOCTYPE html>
<head> However, we recommend using the <head> tag.
<title>Page Title</title>
</head>
Close Empty HTML Elements? <p>This is a paragraph.</p>

In HTML, it is optional to close empty elements. </body>

</html>

Allowed:

<meta charset="utf-8"> Meta Data

To ensure proper interpretation and correct search engine indexing,

Also Allowed: both the language and the character encoding <meta
charset="charset"> should be defined as early as possible in an
HTML document:
<meta charset="utf-8" />
<!DOCTYPE html>
<html lang="en-us">
If you expect XML/XHTML software to access your page, keep the <head>
closing slash (/), because it is required in XML and XHTML. <meta charset="UTF-8">
<title>Page Title</title>
</head>

Add the lang Attribute

You should always include the lang attribute inside the <html> tag, to Setting The Viewport
declare the language of the Web page. This is meant to assist search
engines and browsers. The viewport is the user's visible area of a web page. It varies with the
device - it will be smaller on a mobile phone than on a computer
screen.
Example
You should include the following <meta> element in all your web
pages:
<!DOCTYPE html>
<html lang="en-us">
<meta name="viewport" content="width=device-width, initial-
<head>
scale=1.0">
<title>Page Title</title>
</head>
<body> This gives the browser instructions on how to control the page's
dimensions and scaling.
<h1>This is a heading</h1>
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.

With the viewport meta tag

HTML Comments

Short comments should be written on one line, like this:

Comments that spans more than one line, should be written like this:

Use simple syntax for loading external scripts (the type attribute is
not necessary):
Long comments are easier to observe if they are indented with two
spaces. <script src="myscript.js">

Using Style Sheets Accessing HTML Elements with JavaScript

Use simple syntax for linking to style sheets (the type attribute is not Using "untidy" HTML code can result in JavaScript errors.
necessary):
These two JavaScript statements will produce different results:
<link rel="stylesheet" href="styles.css">

Short CSS rules can be written compressed, like this:

Example

p.intro {font-family:Verdana;font-size:16em;}
getElementById("Demo").innerHTML = "Hello";
Long CSS rules should be written over multiple lines:
getElementById("demo").innerHTML = "Hello";
body {
background-color: lightgrey;
Visit the JavaScript Style Guide.
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

 Place the opening bracket on the same line as the selector Use Lower Case File Names
 Use one space before the opening bracket
 Use two spaces of indentation Some web servers (Apache, Unix) are case sensitive about file names:
 Use semicolon after each property-value pair, including the "london.jpg" cannot be accessed as "London.jpg".
last
 Only use quotes around values if the value contains spaces Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg"
 Place the closing bracket on a new line, without leading can be accessed as "London.jpg".
spaces
If you use a mix of uppercase and lowercase, you have to be aware of
this.
If you move from a case-insensitive to a case-sensitive server, even However, servers can be configured with more than one default
small errors will break your web! filename; usually you can set up as many default filenames as you
want.
To avoid these problems, always use lowercase file names!

HTML Style Guide

File Extensions

HTML files should have a .html extension (.htm is allowed). A consistent, clean, and tidy HTML code makes it easier for others to
read and understand your code.
CSS files should have a .css extension.
Here are some guidelines and tips for creating good HTML code.
JavaScript files should have a .js extension.

Always Declare Document Type

Differences Between .htm and .html?
Always declare the document type as the first line in your document.
There is no difference between the .htm and .html file extensions!
The correct document type for HTML is:
Both will be treated as HTML by any web browser and web server.
<!DOCTYPE html>

Default Filenames
Use Lowercase Element Names
When a URL does not specify a filename at the end (like
"https://www.w3schools.com/"), the server just adds a default HTML allows mixing uppercase and lowercase letters in element
filename, such as "index.html", "index.htm", "default.html", or names.
"default.htm".
However, we recommend using lowercase element names, because:
If your server is configured only with "index.html" as the default
filename, your file must be named "index.html", and not
"default.html".  Mixing uppercase and lowercase names looks bad
 Developers normally use lowercase names
 Lowercase looks cleaner
 Lowercase is easier to write
Good: Bad:

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

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

<BODY>
<P>This is a paragraph.</P>
</BODY> Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute

names.

Close All HTML Elements However, we recommend using lowercase attribute names, because:

In HTML, you do not have to close all elements (for example  Mixing uppercase and lowercase names looks bad
the <p> element).  Developers normally use lowercase names
 Lowercase look cleaner
However, we strongly recommend closing all HTML elements, like this:  Lowercase are easier to write

Good: Good:

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

<p>This is a paragraph.</p> tutorial</a>
<p>This is a paragraph.</p>
</section>
Bad:

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

tutorial</a>
Always Quote Attribute Values Always Specify alt, width, and height for Images

HTML allows attribute values without quotes. Always specify the alt attribute for images. This attribute is important
if the image for some reason cannot be displayed.
However, we recommend quoting attribute values, because:
Also, always define the width and height of images. This reduces
 Developers normally quote attribute values flickering, because the browser can reserve space for the image
 Quoted values are easier to read before loading.
 You MUST use quotes if the value contains spaces

Good:
Good:

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

Bad: Bad:

<table class=striped> <img src="html5.gif">

Very bad:
Spaces and Equal Signs

This will not work, because the value contains spaces: HTML allows spaces around equal signs. But space-less is easier to
read and groups entities better together.

<table class=table striped>

Good:

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

<p>Tokyo is the capital of Japan, the center of the Greater
Tokyo Area, and the most populous metropolitan area in the
world.</p>
Bad:
<h2>London</h2>
<p>London is the capital city of England. It is the most
<link rel = "stylesheet" href = "styles.css"> populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>
Avoid Long Code Lines
</body>
When using an HTML editor, it is NOT convenient to scroll right and left
to read the HTML code.
Bad:
Try to avoid too long code lines.

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of
Blank Lines and Indentation the Greater Tokyo Area, and the most populous metropolitan
area in the world.</p>
Do not add blank lines, spaces, or indentations without a reason. <h2>London</h2><p>London is the capital city of England. It is
the most populous city in the United Kingdom.</p>
For readability, add blank lines to separate large or logical code <h2>Paris</h2><p>Paris is the capital of France. The Paris
blocks. area is one of the largest population centers in Europe.</p>
</body>
For readability, add two spaces of indentation. Do not use the tab key.

Good Table Example:

Good:

<table>
<body> <tr>
<th>Name</th>
<th>Description</th>
<h1>Famous Cities</h1> </tr>
<tr>
<td>A</td>
<h2>Tokyo</h2>
<td>Description of A</td>
</tr> Omitting <html> and <body>?
<tr>
<td>B</td> An HTML page will validate without the <html> and <body> tags:
<td>Description of B</td>
</tr>
</table>

Good List Example:

Example

<ul>
<li>London</li> <!DOCTYPE html>
<li>Paris</li> <head>
<li>Tokyo</li> <title>Page Title</title>
</ul> </head>

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

Never Skip the <title> Element However, we strongly recommend to always add
the <html> and <body> tags!
The <title> element is required in HTML.
Omitting <body> can produce errors in older browsers.
The contents of a page title is very important for search engine
optimization (SEO)! The page title is used by search engine algorithms Omitting <html> and <body> can also crash DOM and XML software.
to decide the order when listing pages in search results.

The <title> element:

 defines a title in the browser toolbar Omitting <head>?

 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results The HTML <head> tag can also be omitted.

So, try to make the title as accurate and meaningful as possible: Browsers will add all elements before <body>, to a
default <head> element.
<title>HTML Style Guide and Coding Conventions</title>

Example
<!DOCTYPE html> You should always include the lang attribute inside the <html> tag, to
<html> declare the language of the Web page. This is meant to assist search
<title>Page Title</title> engines and browsers.
<body>

<h1>This is a heading</h1> Example

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

</body> <!DOCTYPE html>

</html> <html lang="en-us">
<head>
<title>Page Title</title>
However, we recommend using the <head> tag.
</head>
<body>

<h1>This is a heading</h1>
Close Empty HTML Elements? <p>This is a paragraph.</p>

In HTML, it is optional to close empty elements. </body>

</html>

Allowed:

<meta charset="utf-8"> Meta Data

To ensure proper interpretation and correct search engine indexing,

both the language and the character encoding <meta
Also Allowed: charset="charset"> should be defined as early as possible in an
HTML document:

<meta charset="utf-8" /> <!DOCTYPE html>

<html lang="en-us">
If you expect XML/XHTML software to access your page, keep the <head>
closing slash (/), because it is required in XML and XHTML. <meta charset="UTF-8">
<title>Page Title</title>
</head>

Add the lang Attribute

Setting The Viewport 
You should include the following <meta> element in all your web
pages: Long comments are easier to observe if they are indented with two
spaces.

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

scale=1.0">

This gives the browser instructions on how to control the page's Using Style Sheets
dimensions and scaling.
Use simple syntax for linking to style sheets (the type attribute is not
The width=device-width part sets the width of the page to follow the necessary):
screen-width of the device (which will vary depending on the device).
<link rel="stylesheet" href="styles.css">
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser. Short CSS rules can be written compressed, like this:

Here is an example of a web page without the viewport meta tag, and p.intro {font-family:Verdana;font-size:16em;}
the same web page with the viewport meta tag:
Long CSS rules should be written over multiple lines:

body {
Tip: If you are browsing this page with a phone or a tablet, you can click on the
background-color: lightgrey;
two links below to see the difference.
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

 Place the opening bracket on the same line as the selector

HTML Comments  Use one space before the opening bracket
 Use two spaces of indentation
Short comments should be written on one line, like this:  Use semicolon after each property-value pair, including the
last
  Only use quotes around values if the value contains spaces
 Place the closing bracket on a new line, without leading
Comments that spans more than one line, should be written like this: spaces
If you use a mix of uppercase and lowercase, you have to be aware of
this.

Loading JavaScript in HTML If you move from a case-insensitive to a case-sensitive server, even
small errors will break your web!
Use simple syntax for loading external scripts (the type attribute is
not necessary): To avoid these problems, always use lowercase file names!

File Extensions

Accessing HTML Elements with JavaScript HTML files should have a .html extension (.htm is allowed).

Using "untidy" HTML code can result in JavaScript errors. CSS files should have a .css extension.

These two JavaScript statements will produce different results: JavaScript files should have a .js extension.

Example

Differences Between .htm and .html?

getElementById("Demo").innerHTML = "Hello";
There is no difference between the .htm and .html file extensions!
getElementById("demo").innerHTML = "Hello";
Both will be treated as HTML by any web browser and web server.
Visit the JavaScript Style Guide.

Default Filenames
Use Lower Case File Names
When a URL does not specify a filename at the end (like
Some web servers (Apache, Unix) are case sensitive about file names: "https://www.w3schools.com/"), the server just adds a default
"london.jpg" cannot be accessed as "London.jpg". filename, such as "index.html", "index.htm", "default.html", or
"default.htm".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg"
can be accessed as "London.jpg". If your server is configured only with "index.html" as the default
filename, your file must be named "index.html", and not
"default.html".
However, servers can be configured with more than one default Advantage of using an entity name: An entity name is easy to remember.
filename; usually you can set up as many default filenames as you Disadvantage of using an entity name: Browsers may not support all entity
want. names, but the support for entity numbers is good.

HTML Entities

Non-breaking Space
Reserved characters in HTML must be replaced with character entities.
A commonly used entity in HTML is the non-breaking space:  

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

Two words separated by a non-breaking space will stick together (not

break into a new line). This is handy when breaking the words might
HTML Entities be disruptive.

Some characters are reserved in HTML. Examples:

If you use the less than (<) or greater than (>) signs in your text, the  § 10
browser might mix them with tags.  10 km/h
 10 PM
Character entities are used to display reserved characters in HTML.
Another common use of the non-breaking space is to prevent browsers
A character entity looks like this: from truncating spaces in HTML pages.

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

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

&#entity_number;

To display a less than sign (<) we must write: < or < Some Useful HTML Character Entities
Result Description Entity Name Entity
Number
non-breaking space    
< less than < <
> greater than > >
Note: Entity names are case sensitive. & ampersand & &
" double quotation mark " "
' single quotation mark ' '
(apostrophe)
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
Combining Diacritical Marks € euro € €
© copyright © ©
A diacritical mark is a "glyph" added to a letter. ® registered trademark ® ®

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
HTML Symbols
Diacritical marks can appear both above and below a letter, inside a
letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric

characters to produce a character that is not present in the character Symbols that are not present on your keyboard can also be added by
set (encoding) used in the page. using entities.

Here are some examples:

HTML Symbol Entities

Mark Character Construct Result
̀ a à à HTML entities were described in the previous chapter.
́ a á á
̂ a â â Many mathematical, technical, and currency symbols, are not present
̃ a ã ã on a normal keyboard.
̀ O Ò Ò
́ O Ó Ó To add such symbols to an HTML page, you can use the entity name or
̂ O Ô Ô the entity number (a decimal or a hexadecimal reference) for the
̃ O Õ Õ symbol.

You will see more HTML symbols in the next chapter of this tutorial.
Example
Display the euro sign, €, with an entity name, a decimal, and a hexadecimal
value:

Some Greek Letters Supported by HTML

<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p> Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Will display as:

I will display €
I will display € Full Greek Reference
I will display €

Some Other Entities Supported by HTML

Some Mathematical Symbols Supported by HTML

Char Number Entity Description Char Number Entity Description

© © © COPYRIGHT SIGN
∀ ∀ ∀ FOR ALL
® ® ® REGISTERED SIGN
∂ ∂ ∂ PARTIAL DIFFERENTIAL € € € EURO SIGN
∃ ∃ ∃ THERE EXISTS ™ ™ ™ TRADEMARK
∅ ∅ ∅ EMPTY SETS ← ← ← LEFTWARDS ARROW
∇ ∇ ∇ NABLA ↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
∈ ∈ ∈ ELEMENT OF ↓ ↓ ↓ DOWNWARDS ARROW
∉ ∉ ∉ NOT AN ELEMENT OF ♠ ♠ &spades BLACK SPADE SUIT
∋ ∋ &ni; CONTAINS AS MEMBER ;
∏ ∏ ∏ N-ARY PRODUCT ♣ ♣ &clubs; BLACK CLUB SUIT
♥ ♥ &hearts; BLACK HEART SUIT
∑ ∑ ∑ N-ARY SUMMATION
♦ ♦ &diams; BLACK DIAMOND SUIT

Full Math Reference

Using Emojis in HTML UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can

always be displayed using numbers (called entity numbers):

Emojis are characters from the UTF-8 character set:  A is 65

 B is 66
 C is 67

What are Emojis? Example

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

<!DOCTYPE html>
They are letters (characters) from the UTF-8 (Unicode) character set. <html>
<head>
<meta charset="UTF-8">
</head>
UTF-8 covers almost all of the characters and symbols in the world. <body>

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

The HTML charset Attribute </body>

</html>
To display an HTML page correctly, a web browser must know the
character set used in the page. Example Explained

This is specified in the <meta> tag: The <meta charset="UTF-8"> element defines the character set.

To let the browser understand that you are displaying a character, you
If not specified, UTF-8 is the default character set in HTML. must start the entity number with &# and end it with ; (semicolon).
Emoji Characters

Emojis are also characters from the UTF-8 alphabet: </head>


 <body>


<h1>Sized Emojis</h1>
Example
<p style="font-size:48px">
😀 😄 😍 💗
<!DOCTYPE html> </p>
<html>
<head> </body>
<meta charset="UTF-8"> </html>
</head>
<body>

<h1>My First Emoji</h1>

Some Emoji Symbols in UTF-8

Emoji Value
</body>
🗻
</html>
🗼
Since Emojis are characters, they can be copied, displayed, and sized 🗽
just like any other character in HTML. 🗾
🗿

Example 😀
😁
😂
<!DOCTYPE html> 😃
<html>
<head> 😄
<meta charset="UTF-8"> 😅
For a full list, please go to our HTML Emoji Reference. This is specified in the <meta> tag:

HTML Encoding (Character Sets)

Differences Between Character Sets

The following table displays the differences between the character

To display an HTML page correctly, a web browser must know which sets described above:
character set to use.
Numb ASCII AN 88 UT Description
SI 59 F-8
32 space
33 ! ! ! ! exclamation mark
From ASCII to UTF-8
34 " " " " quotation mark
ASCII was the first character encoding standard. ASCII defined 128
different characters that could be used on the internet: numbers (0-9), 35 # # # # number sign
English letters (A-Z), and some special characters like ! $ + - ( ) @ < > 36 $ $ $ $ dollar sign
. 37 % % % % percent sign

ISO-8859-1 was the default character set for HTML 4. This character 38 & & & & ampersand
set supported 256 different character codes. HTML 4 also supported 39 ' ' ' ' apostrophe
UTF-8. 40 ( ( ( ( left parenthesis

ANSI (Windows-1252) was the original Windows character set. ANSI is 41 ) ) ) ) right parenthesis
identical to ISO-8859-1, except that ANSI has 32 extra characters.
42 * * * * asterisk
The HTML5 specification encourages web developers to use the UTF-8 43 + + + + plus sign
character set, which covers almost all of the characters and symbols
44 , , , , comma
in the world!
45 - - - - hyphen-minus

46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
The HTML charset Attribute
49 1 1 1 1 digit one
50 2 2 2 2 digit two
To display an HTML page correctly, a web browser must know the
character set used in the page. 51 3 3 3 3 digit three
52 4 4 4 4 digit four 72 H H H H Latin capital letter H
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven 73 I I I I Latin capital letter I
56 8 8 8 8 digit eight 74 J J J J Latin capital letter J
57 9 9 9 9 digit nine 75 K K K K Latin capital letter K
58 : : : : colon 76 L L L L Latin capital letter L
59 ; ; ; ; semicolon 77 M M M M Latin capital letter M
60 < < < < less-than sign 78 N N N N Latin capital letter N
79 O O O O Latin capital letter O
61 = = = = equals sign 80 P P P P Latin capital letter P
62 > > > > greater-than sign 81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
63 ? ? ? ? question mark
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
64 @ @ @ @ commercial at
85 U U U U Latin capital letter U
65 A A A A Latin capital letter A 86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
66 B B B B Latin capital letter B 89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
67 C C C C Latin capital letter C 92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
94 ^ ^ ^ ^ circumflex accent
68 D D D D Latin capital letter D 95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
69 E E E E Latin capital letter E
98 b b b b Latin small letter b
99 c c c c Latin small letter c
70 F F F F Latin capital letter F 100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
71 G G G G Latin capital letter G 103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l 141 NOT USED
109 m m m m Latin small letter m 142 Ž Latin capital letter Z with
110 n n n n Latin small letter n caron
111 o o o o Latin small letter o 143 NOT USED
112 p p p p Latin small letter p 144 NOT USED
113 q q q q Latin small letter q 145 ‘ left single quotation mark
114 r r r r Latin small letter r 146 ’ right single quotation mark
115 s s s s Latin small letter s 147 “ left double quotation mark
116 t t t t Latin small letter t 148 ” right double quotation
mark
117 u u u u Latin small letter u
149 • bullet
118 v v v v Latin small letter v
150 – en dash
119 w w w w Latin small letter w
151 — em dash
120 x x x x Latin small letter x
152 ˜ small tilde
121 y y y y Latin small letter y
153 ™ trade mark sign
122 z z z z Latin small letter z
154 š Latin small letter s with
123 { { { { left curly bracket
caron
124 | | | | vertical line 155 › single right-pointing angle
125 } } } } right curly bracket quotation mark
126 ~ ~ ~ ~ tilde 156 œ Latin small ligature oe
127 DEL 157 NOT USED
128 € euro sign 158 ž Latin small letter z with
129 NOT USED caron
130 ‚ single low-9 quotation 159 Ÿ Latin capital letter Y with
mark diaeresis
131 ƒ Latin small letter f with 160 no-break space
hook 161 ¡ ¡ ¡ inverted exclamation mark
132 „ double low-9 quotation 162 ¢ ¢ ¢ cent sign
mark 163 £ £ £ pound sign
133 … horizontal ellipsis 164 ¤ ¤ ¤ currency sign
134 † dagger 165 ¥ ¥ ¥ yen sign
135 ‡ double dagger 166 ¦ ¦ ¦ broken bar
136 ˆ modifier letter circumflex 167 § § § section sign
accent
168 ¨ ¨ ¨ diaeresis
137 ‰ per mille sign
169 © © © copyright sign
138 Š Latin capital letter S with
caron 170 ª ª ª feminine ordinal indicator
139 ‹ single left-pointing angle 171 « « « left-pointing double angle
quotation mark quotation mark
140 Œ Latin capital ligature OE 172 ¬ ¬ ¬ not sign
173 soft hyphen circumflex
174 ® ® ® registered sign 203 Ë Ë Ë Latin capital letter E with
175 ¯ ¯ ¯ macron diaeresis
176 ° ° ° degree sign 204 Ì Ì Ì Latin capital letter I with
grave
177 ± ± ± plus-minus sign
205 Í Í Í Latin capital letter I with
178 ² ² ² superscript two acute
179 ³ ³ ³ superscript three 206 Î Î Î Latin capital letter I with
180 ´ ´ ´ acute accent circumflex
181 µ µ µ micro sign 207 Ï Ï Ï Latin capital letter I with
182 ¶ ¶ ¶ pilcrow sign diaeresis
183 · · · middle dot 208 Ð Ð Ð Latin capital letter Eth
184 ¸ ¸ ¸ cedilla 209 Ñ Ñ Ñ Latin capital letter N with
tilde
185 ¹ ¹ ¹ superscript one
210 Ò Ò Ò Latin capital letter O with
186 º º º masculine ordinal indicator grave
187 » » » right-pointing double angle 211 Ó Ó Ó Latin capital letter O with
quotation mark acute
188 ¼ ¼ ¼ vulgar fraction one quarter 212 Ô Ô Ô Latin capital letter O with
189 ½ ½ ½ vulgar fraction one half circumflex
190 ¾ ¾ ¾ vulgar fraction three 213 Õ Õ Õ Latin capital letter O with
quarters tilde
191 ¿ ¿ ¿ inverted question mark 214 Ö Ö Ö Latin capital letter O with
192 À À À Latin capital letter A with diaeresis
grave 215 × × × multiplication sign
193 Á Á Á Latin capital letter A with 216 Ø Ø Ø Latin capital letter O with
acute stroke
194 Â Â Â Latin capital letter A with 217 Ù Ù Ù Latin capital letter U with
circumflex grave
195 Ã Ã Ã Latin capital letter A with 218 Ú Ú Ú Latin capital letter U with
tilde acute
196 Ä Ä Ä Latin capital letter A with 219 Û Û Û Latin capital letter U with
diaeresis circumflex
197 Å Å Å Latin capital letter A with 220 Ü Ü Ü Latin capital letter U with
ring above diaeresis
198 Æ Æ Æ Latin capital letter AE 221 Ý Ý Ý Latin capital letter Y with
199 Ç Ç Ç Latin capital letter C with acute
cedilla 222 Þ Þ Þ Latin capital letter Thorn
200 È È È Latin capital letter E with 223 ß ß ß Latin small letter sharp s
grave 224 à à à Latin small letter a with
201 É É É Latin capital letter E with grave
acute 225 á á á Latin small letter a with
202 Ê Ê Ê Latin capital letter E with
acute stroke
226 â â â Latin small letter a with 249 ù ù ù Latin small letter u with
circumflex grave
227 ã ã ã Latin small letter a with 250 ú ú ú Latin small letter u with
tilde acute
228 ä ä ä Latin small letter a with 251 û û û Latin small letter with
diaeresis circumflex
229 å å å Latin small letter a with 252 ü ü ü Latin small letter u with
ring above diaeresis
230 æ æ æ Latin small letter ae 253 ý ý ý Latin small letter y with
231 ç ç ç Latin small letter c with acute
cedilla 254 þ þ þ Latin small letter thorn
232 è è è Latin small letter e with 255 ÿ ÿ ÿ Latin small letter y with
grave diaeresis
233 é é é Latin small letter e with
acute
234 ê ê ê Latin small letter e with
circumflex
235 ë ë ë Latin small letter e with
diaeresis
236 ì ì ì Latin small letter i with
The ASCII Character Set
grave
237 í í í Latin small letter i with
acute ASCII uses the values from 0 to 31 (and 127) for control characters.
238 î î î Latin small letter i with
circumflex ASCII uses the values from 32 to 126 for letters, digits, and symbols.
239 ï ï ï Latin small letter i with
diaeresis ASCII does not use the values from 128 to 255.
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with
tilde
242 ò ò ò Latin small letter o with
grave The ANSI Character Set (Windows-1252)
243 ó ó ó Latin small letter o with
acute ANSI is identical to ASCII for the values from 0 to 127.
244 ô ô ô Latin small letter o with
circumflex
ANSI has a proprietary set of characters for the values from 128 to
245 õ õ õ Latin small letter o with
159.
tilde
246 ö ö ö Latin small letter o with
diaeresis ANSI is identical to UTF-8 for the values from 160 to 255.
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with
Most people enter the name when surfing, because names are easier
to remember than numbers.

The ISO-8859-1 Character Set

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

URL - Uniform Resource Locator
ISO-8859-1 does not use the values from 128 to 159.
Web browsers request pages from web servers by using a URL.
ISO-8859-1 is identical to UTF-8 for the values from 160 to 255.
A Uniform Resource Locator (URL) is used to address a document (or
other data) on the web.

A web address
The UTF-8 Character Set like https://www.w3schools.com/html/default.asp follows these syntax
rules:
UTF-8 is identical to ASCII for the values from 0 to 127.
scheme://prefix.domain:port/path/filename
UTF-8 does not use the values from 128 to 159.
Explanation:
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to
255.  scheme - defines the type of Internet service (most common
is http or https)
UTF-8 continues from the value 256 with more than 10 000 different  prefix - defines a domain prefix (default for http is www)
characters.  domain - defines the Internet domain name (like
w3schools.com)
For a closer look, study our Complete HTML Character Set Reference.  port - defines the port number at the host (default for http
is 80)
 path - defines a path at the server (If omitted: the root
directory of the site)
 filename - defines the name of a document or resource
HTML Uniform Resource Locators

Common URL Schemes

A URL is another word for a web address.
The table below lists some common schemes:
A URL can be composed of words (e.g. w3schools.com), or an Internet
Protocol (IP) address (e.g. 192.68.20.50).
Scheme Short for Used for ASCII Encoding Examples
http HyperText Transfer Protocol Common web pages.
Not encrypted Your browser will encode input, according to the character-set used in
https Secure HyperText Transfer Secure web pages. your page.
Protocol Encrypted
ftp File Transfer Protocol Downloading or The default character-set in HTML5 is UTF-8.
uploading files
file A file on your
computer Character From From UTF-8
Windows-
1252
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
URL Encoding ® %AE %C2%AE
À %C0 %C3%80
URLs can only be sent over the Internet using the ASCII character-set. Á %C1 %C3%81
If a URL contains characters outside the ASCII set, the URL has to be Â %C2 %C3%82
converted. Ã %C3 %C3%83
Ä %C4 %C3%84
URL encoding converts non-ASCII characters into a format that can be Å %C5 %C3%85
transmitted over the Internet.

URL encoding replaces non-ASCII characters with a "%" followed by

hexadecimal digits. For a complete reference of all URL encodings, visit our URL Encoding
Reference.
URLs cannot contain spaces. URL encoding normally replaces a space
with a plus (+) sign, or %20.窗体顶端

If you click "Submit", the browser will URL encode the input before it is
sent to the server.
HTML Versus XHTML
A page at the server will display the received input.
XHTML is a stricter, more XML-based version of HTML.
Try some other input and click Submit again.

What is XHTML?
 XHTML stands for EXtensible HyperText Markup Language An XHTML document must have an XHTML <!DOCTYPE> declaration.
 XHTML is a stricter, more XML-based version of HTML
 XHTML is HTML defined as an XML application The <html>, <head>, <title>, and <body> elements must also be
 XHTML is supported by all major browsers present, and the xmlns attribute in <html> must specify the xml
namespace for the document.

Example
Why XHTML?

XML is a markup language where all documents must be marked up

correctly (be "well-formed"). Here is an XHTML document with a minimum of required tags:

XHTML was developed to make HTML more extensible and flexible to

work with other data formats (such as XML). In addition, browsers <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
ignore errors in HTML pages, and try to display the website even if it "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
has some errors in the markup. So XHTML comes with a much stricter <html xmlns="http://www.w3.org/1999/xhtml">
error handling. <head>
<title>Title of document</title>
If you want to study XML, please read our XML Tutorial. </head>
<body>

some content here...

The Most Important Differences from HTML

</body>
</html>
 <!DOCTYPE> is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory
 Elements must always be properly nested
 Elements must always be closed
 Elements must always be in lowercase
 Attribute names must always be in lowercase
 Attribute values must always be quoted XHTML Elements Must be Properly Nested
 Attribute minimization is forbidden
In XHTML, elements must always be properly nested within each
other, like this:

XHTML - <!DOCTYPE ....> Is Mandatory Correct:

<b><i>Some text</i></b> A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
Wrong:

Wrong:
<b><i>Some text</b></i>

A break: <br>
A horizontal rule: <hr>
XHTML Elements Must Always be Closed An image: <img src="happy.gif" alt="Happy face">

In XHTML, elements must always be closed, like this:

Correct: XHTML Elements Must be in Lowercase

In XHTML, element names must always be in lowercase, like this:

<p>This is a paragraph</p>
<p>This is another paragraph</p>
Correct:

Wrong:
<body>
<p>This is a paragraph</p>
<p>This is a paragraph </body>
<p>This is another paragraph

XHTML Empty Elements Must Always be Closed

Wrong:
In XHTML, empty elements must always be closed, like this:

<BODY>
Correct:
<P>This is a paragraph</P>
</BODY>
Wrong:

XHTML Attribute Names Must be in Lowercase <a href=https://www.w3schools.com/html/>Visit our HTML

tutorial</a>
In XHTML, attribute names must always be in lowercase, like this:

Correct:
XHTML Attribute Minimization is Forbidden

<a href="https://www.w3schools.com/html/">Visit our HTML In XHTML, attribute minimization is forbidden:

tutorial</a>

Correct:
Wrong:

<input type="checkbox" name="vehicle" value="car" checked="che

<a HREF="https://www.w3schools.com/html/">Visit our HTML cked" />
tutorial</a> <input type="text" name="lastname" disabled="disabled" />

Wrong:

XHTML Attribute Values Must be Quoted

<input type="checkbox" name="vehicle" value="car" checked />
In XHTML, attribute values must always be quoted, like this: <input type="text" name="lastname" disabled />

Correct:

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

tutorial</a>

What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
133 pages
Untitled Document
No ratings yet
Untitled Document
175 pages
HTML Basics for Beginners
100% (4)
HTML Basics for Beginners
108 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
HTML
No ratings yet
HTML
61 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
HTML Tutorial for Beginners
100% (1)
HTML Tutorial for Beginners
22 pages
HTML
No ratings yet
HTML
14 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
50 pages
HTML Basics: Structure & Elements
No ratings yet
HTML Basics: Structure & Elements
23 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
03 HTML
No ratings yet
03 HTML
113 pages
HTML With CSS Programming
No ratings yet
HTML With CSS Programming
177 pages
HTML Introduction 254
No ratings yet
HTML Introduction 254
81 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 pages
HTML Tutorial
No ratings yet
HTML Tutorial
22 pages
Lecture 02 - HTML Basics1
No ratings yet
Lecture 02 - HTML Basics1
74 pages
Document 2
No ratings yet
Document 2
102 pages
Hướng dẫn lập trình web - HTML
No ratings yet
Hướng dẫn lập trình web - HTML
296 pages
What Is HTML?
No ratings yet
What Is HTML?
19 pages
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
01 HTML
No ratings yet
01 HTML
96 pages
Introduction To HTML
No ratings yet
Introduction To HTML
99 pages
Com 225
No ratings yet
Com 225
9 pages
HTML Css Js
No ratings yet
HTML Css Js
491 pages
W3school (HTML Notes)
0% (1)
W3school (HTML Notes)
13 pages
What Is HTML
No ratings yet
What Is HTML
64 pages
HTML5 Tutorial
No ratings yet
HTML5 Tutorial
32 pages
HTML Tutorial
No ratings yet
HTML Tutorial
63 pages
HTML Unit-1 PDF
No ratings yet
HTML Unit-1 PDF
6 pages
Lesson 2
No ratings yet
Lesson 2
35 pages
Web Development
No ratings yet
Web Development
32 pages
What Is HTML?
No ratings yet
What Is HTML?
9 pages
HTML Css Notes
No ratings yet
HTML Css Notes
49 pages
HTML Introduction
No ratings yet
HTML Introduction
36 pages
HTML Intro
No ratings yet
HTML Intro
137 pages
Example: Mainpage - HTM Page1.htm Page2.htm
No ratings yet
Example: Mainpage - HTM Page1.htm Page2.htm
19 pages
Bcac501 - It - Part-1-Html
No ratings yet
Bcac501 - It - Part-1-Html
117 pages
A Complete Reference of HTML
No ratings yet
A Complete Reference of HTML
160 pages
HTML
No ratings yet
HTML
100 pages
HTML Basics and Structure Guide
No ratings yet
HTML Basics and Structure Guide
86 pages
Lecture 2
No ratings yet
Lecture 2
26 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
52 pages
What Is HTML?
No ratings yet
What Is HTML?
10 pages
HTML Basics and Structure Guide
No ratings yet
HTML Basics and Structure Guide
30 pages
My HTML Notes
100% (1)
My HTML Notes
43 pages
HTML Tutorial
No ratings yet
HTML Tutorial
79 pages
What Is HTML?
No ratings yet
What Is HTML?
36 pages
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
No ratings yet
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
80 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
HTML Basics and Examples Guide
No ratings yet
HTML Basics and Examples Guide
39 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
11 pages
Coumuter Project For Class 10
No ratings yet
Coumuter Project For Class 10
16 pages
HTML Tutorial (Vizzy)
No ratings yet
HTML Tutorial (Vizzy)
112 pages
What Is HTML?
No ratings yet
What Is HTML?
55 pages
SOC 201 Unit 11 Lesson 3 Tracing One's Roots II
No ratings yet
SOC 201 Unit 11 Lesson 3 Tracing One's Roots II
2 pages
SOC 201 Unit 9 Lesson 2 Ways of Showing Attraction, Love and Commitment
No ratings yet
SOC 201 Unit 9 Lesson 2 Ways of Showing Attraction, Love and Commitment
2 pages
CSS Demo - One HTML Page - Multiple Styles!
No ratings yet
CSS Demo - One HTML Page - Multiple Styles!
18 pages
Mathematics of Investments
No ratings yet
Mathematics of Investments
4 pages
Winter 2022 Adj
No ratings yet
Winter 2022 Adj
1 page
MIMO ZF and MMSE Channel Estimation
No ratings yet
MIMO ZF and MMSE Channel Estimation
7 pages
Advanced LTE Radio Planning Course
No ratings yet
Advanced LTE Radio Planning Course
4 pages
Assignment 1 Winter2025
No ratings yet
Assignment 1 Winter2025
9 pages
CV - Ahmed - Abbassi - Python-Data Engineer Senior - EN
No ratings yet
CV - Ahmed - Abbassi - Python-Data Engineer Senior - EN
3 pages
India and SEA Infra Startups - Lightspeed, Google and Github Report (8th Sept 2022)
No ratings yet
India and SEA Infra Startups - Lightspeed, Google and Github Report (8th Sept 2022)
12 pages
500+ Nature-Inspired Metaheuristics Analysis
No ratings yet
500+ Nature-Inspired Metaheuristics Analysis
25 pages
Lp140wh2 Tle2 LG
No ratings yet
Lp140wh2 Tle2 LG
27 pages
CSIT561 Module8 Network Security
No ratings yet
CSIT561 Module8 Network Security
62 pages
Emt 11 - 12 Q1 0403 FD
No ratings yet
Emt 11 - 12 Q1 0403 FD
20 pages
Zoho Analytics Plan Comparison
No ratings yet
Zoho Analytics Plan Comparison
3 pages
Panorama Francophone 1 Student Book IB Diploma Danièle Bourdais Sample
100% (4)
Panorama Francophone 1 Student Book IB Diploma Danièle Bourdais Sample
100 pages
Chapter5 Probability
No ratings yet
Chapter5 Probability
31 pages
56
No ratings yet
56
2 pages
Full Stack Development
No ratings yet
Full Stack Development
27 pages
M2 SS7 Protocol
No ratings yet
M2 SS7 Protocol
25 pages
Inggris Pas Gasal 22 23
No ratings yet
Inggris Pas Gasal 22 23
8 pages
Pp-Ocrv3: More Attempts For The Improvement of Ultra Lightweight Ocr System
No ratings yet
Pp-Ocrv3: More Attempts For The Improvement of Ultra Lightweight Ocr System
9 pages
Boolean Logic Truth Table Worksheet
No ratings yet
Boolean Logic Truth Table Worksheet
2 pages
Vinafix - VN - Tra Ma IC Richtek 1
No ratings yet
Vinafix - VN - Tra Ma IC Richtek 1
42 pages
Line Follower Robot Thesis
100% (2)
Line Follower Robot Thesis
5 pages
ECE: Introduction To Computer Systems Instructor: Maria Striki Spring 2021
No ratings yet
ECE: Introduction To Computer Systems Instructor: Maria Striki Spring 2021
127 pages
Grade 10 - Algebra Worksheet 2020
100% (1)
Grade 10 - Algebra Worksheet 2020
15 pages
Intelligent Document Processing Guide
No ratings yet
Intelligent Document Processing Guide
26 pages
Embedded System Design Course Intro
No ratings yet
Embedded System Design Course Intro
13 pages
Rulesets Connectors
No ratings yet
Rulesets Connectors
15 pages
Custodians and Midwives
No ratings yet
Custodians and Midwives
184 pages
Geoscience Data Management Logs
No ratings yet
Geoscience Data Management Logs
18 pages
4b0 S4hana2023 Set-Up en XX
No ratings yet
4b0 S4hana2023 Set-Up en XX
74 pages
SCSC Notes
No ratings yet
SCSC Notes
4 pages