0% found this document useful (0 votes)

211 views

What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages

This document provides an introduction to HTML, including: - HTML is the standard markup language used to create web pages and describes the structure of web page content. - Key HTML elements like <h1>, <p>, <a>, and <img> are used to define headings, paragraphs, links, and images. - A basic HTML document structure includes <html>, <head>, and <body> elements, with visible content placed within the <body>. - The document also explains concepts like HTML tags, elements, attributes, and nested elements.

Uploaded by

Asare Enock

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)

211 views

What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages

Uploaded by

Asare Enock

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

HTML LESSONS NOTES

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.

A Simple HTML Document

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

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Example Explained
 The <!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
 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)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tag name>Content goes here...</tag name>

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

<h1>My First Heading</h1>

<p>My first paragraph.</p>

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

A browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

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

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

</body>

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

HTML History
Since the early days of the World Wide Web, there have been many versions of
HTML:

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

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

This tutorial follows the latest HTML5 standard.

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.

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

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

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

heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

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

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

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

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

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

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

attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:

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

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start Element End

tag content tag

<h1> My First Heading </h1>

<p> My first </p>

paragraph.

<br> none none

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!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.

The following example contains four HTML elements

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

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
The <html> element is the root element and it defines the whole HTML document.

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

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

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

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

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

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <h1> element defines a heading.

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

<h1>My First Heading</h1>

The <p> element defines a paragraph.

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

<p>My first paragraph.</p>

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

However, never rely on this! Unexpected results and errors may occur if
you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing

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

HTML is Not Case Sensitive

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

The HTML standard does not require lowercase tags, but

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

HTML Tag Reference

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

Tag Description

<html> Defines the root of an

HTML document

<body> Defines the document's

body

<h1> to Defines HTML headings

<h6>
HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

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

Example
<a href="https://www.CodeWeb.com">Visit W3Schools</a>

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

The src Attribute

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:

Example
<img src="img_girl.jpg">

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

1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission

to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. If the URL begins without a slash, it
will be relative to the current page. Example: src="img_girl.jpg". If the URL
begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you
change domain.

The width and height Attributes

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

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

The alt Attribute

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 can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:

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

You will learn more about images in our HTML Images chapter.

The style Attribute

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

Example
<p style="color:red;">This is a red paragraph.</p>

You will learn more about styles in our HTML Styles chapter.

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

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

Country codes can also be added to the language code in the lang attribute. So,
the first two characters define the language of the HTML page, and the last two
characters define the country.
The following example specifies English as the language and United States as
the country:

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

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

The title Attribute

The title attribute defines some extra information about an element.

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

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

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

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

However, W3C recommends lowercase attributes in HTML,

and demands lowercase attributes for stricter document types like XHTML.

At Codeweb we always use lowercase attribute names.

We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter

document types like XHTML.

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

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

Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:

Example
<p title=About CodeWeb Africa>

At CodeWeb Africa we always use quotes around attribute values.

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

Chapter Summary
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for
images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color,
font, size, and more
 The lang attribute of the <html> tag declares the language of the Web
page
 The title attribute defines some extra information about an element

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

Example

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

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

heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and

after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to

show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then

the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs

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

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

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

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

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines
in your HTML code.

The browser will automatically remove any extra spaces and lines when the
page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

HTML Horizontal Rules

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

The <hr> element is used to separate content (or define a change) in an HTML

page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

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

The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

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
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

HTML Styles

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

font, size, and more.

Example
I am Red

I am Blue

I am Big

The HTML Style Attribute

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

The HTML style attribute has the following syntax:

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

You will learn more about CSS later in this tutorial.

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

Example
Set the background color for a page to powderblue:

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

</body>

Example
Set background color for two different elements:

<body>

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

</body>
Text Color
The CSS color property defines the text color for an HTML element:

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

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

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

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

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

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

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

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example
This text is bold

This text is italic

This is subscript and superscript
HTML Formatting Elements
Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

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

Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content

inside is typically displayed in bold.

Example
<strong>This text is important!</strong>
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or 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.

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

The HTML <em> element defines emphasized text. The content inside is typically

displayed in italic.

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

Example
<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

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

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

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H 2O:

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

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half
a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW [1]:

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

HTML Quotation and Citation Elements

In this chapter we will go through

the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.

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

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

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

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

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of
a document or an article.

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

The text in the <address> element usually renders in italic, and browsers will

always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

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

The text in the <cite> element usually renders in italic.

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

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

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

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

HTML Comments

HTML comments are not displayed in the browser, but they can help
document your HTML source code.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

Note: Comments are not displayed by the browser, but they can help document
your HTML source code.

With comments you can place notifications and reminders in your HTML code:

Example

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

Example

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

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

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet
LightGray

Try it Yourself »

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

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

Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color
You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB,
HEX, and HSL values:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with RGBA
and HSLA values, which adds an Alpha channel to the color (here we have 50%
transparency):

rgba(255, 99, 71, 0.5)

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

Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Learn more about Color Values
You will learn more about RGB, HEX and HSL in the next chapters.

HTML RGB and RGBA Colors

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

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.

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

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.

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 set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG

(green) and BB (blue) hexadecimal integers specify the components of the
color.

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value
(ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set 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.

To display white, set all color parameters to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

HTML HSL and HSLA Color

HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values

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

hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the

full color.

Lightness is also a percentage value, 0% is black, and 100% is white.

Experiment by mixing the HSL values below:

hsl(0, 100%, 50%)

HUE

SATURATION

100%

LIGHTNESS

50%
Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Try it Yourself »

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

100% is pure color, no shades of gray

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

Example

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

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

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

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

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

Try it Yourself »

HSLA Color Values

HSLA color values are an extension of HSL color values with an Alpha channel -
which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):

Experiment by mixing the HSLA values below:

Example

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

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

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

HTML Links
❮ PreviousNext ❯

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

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
handheld.
Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

The most important attribute of the <a> element is the href attribute, which

indicates the link's destination.

The link text is the part that will be visible to the reader.

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

Example
This example shows how to create a link to W3Schools.com:

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

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

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

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

Example
Use target="_blank" to open the linked document in a new browser window or
tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in
the href attribute.

A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):

Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

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

Try it Yourself »

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

Try it Yourself »

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):

Example
<a href="mailto:someone@example.com">Send email</a>

Try it Yourself »

Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click
of a button:

Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>

Try it Yourself »

Tip: Learn more about JavaScript in our JavaScript Tutorial.

Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.

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

Try it Yourself »

More on Absolute URLs and Relative URLs

Example
Use a full URL to link to a web page:

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

Try it Yourself »

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

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

Try it Yourself »

Example
Link to a page located in the same folder as the current page:

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

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program

HTML Images
❮ PreviousNext ❯

Images can improve the design and the appearance of a web page.

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

Try it Yourself »

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

Try it Yourself »
Example
<img src="img_chania.jpg" alt="Flowers in Chania">

Try it Yourself »

HTML Images Syntax

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

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

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

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

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

The src Attribute

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

Note: When a web page loads; it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

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

Try it Yourself »

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Try it Yourself »

Tip: A screen reader is a software program that reads the HTML code, and
allows the user to "listen" to the content. Screen readers are useful for people
who are visually impaired or learning disabled.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Try it Yourself »

Alternatively, you can use the width and height attributes:

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

Try it Yourself »

The width and height attributes always define the width and height of the image

in pixels.

Note: Always specify the width and height of an image. If width and height are
not specified, the web page might flicker while the image loads.

Width and Height, or Style?

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

However, we suggest using the style attribute. It prevents styles sheets from

changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

Try it Yourself »

Images in Another Folder

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

Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">

Try it Yourself »

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL
in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sc
hools.com">

Try it Yourself »

Notes on external images: External images might be under copyright. If you

do not get permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be removed or
changed.

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

HTML Image Maps
❮ PreviousNext ❯

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

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:

Try it Yourself »

How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.

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

The usemap value starts with a hash tag # followed by the name of the image

map, and is used to create a relationship between the image and the image
map.

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

Create Image Map

Then, add a <map> element.

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

using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

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

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

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

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

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

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

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

Try it Yourself »

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

HTML Image Maps
❮ PreviousNext ❯

With HTML image maps, you can create clickable areas on an image.
Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

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

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

How Does it Work?

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

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

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

The usemap value starts with a hash tag # followed by the name of the image

map, and is used to create a relationship between the image and the image
map.

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

Create Image Map

Then, add a <map> element.

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

using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

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

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

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

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

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:
Now we have enough data to create a clickable rectangular area:

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

Try it Yourself »

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

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

337,300
Then specify the radius of the circle:

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

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

Try it Yourself »

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

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

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?
HTML Image Maps
❮ PreviousNext ❯

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

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

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

Example
Here is the HTML source code for the image map above:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Try it Yourself »

How Does it Work?

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

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

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

The usemap value starts with a hash tag # followed by the name of the image

map, and is used to create a relationship between the image and the image
map.

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

Create Image Map
Then, add a <map> element.

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

using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

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

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

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

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

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

Try it Yourself »

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

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

337,300
Then specify the radius of the circle:

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

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

Try it Yourself »

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

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

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?
Chapter Summary
 Use the HTML <map> element to define an image map
 Use the HTML <area> element to define the clickable areas in the image
map
 Use the HTML usemap attribute of the <img> element to point to an image
map

HTML <picture> Element
❮ PreviousNext ❯

The HTML <picture> element allows you to display different pictures for

different devices or screen sizes.
The HTML <picture> Element
The HTML <picture> element gives web developers more flexibility in specifying
image resources.

The <picture> element contains one or more <source> elements, each referring to

different images through the srcset attribute. This way the browser can choose
the image that best fits the current view and/or device.

Each <source> element has a media attribute that defines when the image is the

most suitable.

Example
Show different images for different screen sizes:

Try it Yourself »
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do not
support the <picture> element, or if none of the <source> tags match.

When to use the Picture Element

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

1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image
file. The browser will use the first <source> element with matching attribute
values, and ignore any of the following elements.

2. Format Support
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser will
use the first format it recognizes, and ignore any of the following elements.

Example
The browser will use the first image format it recognizes:

Try it Yourself »

Note: The browser will use the first <source> element with matching attribute

values, and ignore any following <source> elements.
HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

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

Example
Company Contact Country

Alfreds Maria
Germany
Futterkiste Anders

Centro
Francisco
comercial Mexico
Chang
Moctezuma

Roland
Ernst Handel Austria
Mendel

Helen
Island Trading UK
Bennett

Laughing
Yoshi
Bacchus Canada
Tannamuri
Winecellars

Magazzini
Giovanni
Alimentari Italy
Rovelli
Riuniti

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example
A simple HTML table:

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

Note: The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.

HTML Table - Add a Border

To add a border to a table, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-
collapse property:

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

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without
padding.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.

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

Example
th {
text-align: left;
}

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
HTML Table - Add a Caption
To add a caption to a table, use the <caption> tag:

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

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the
table:

Example
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

#t01 {
width: 100%;
background-color: #f1f1c1;
}

And add more styles:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

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

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

Ordered HTML List

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

The list items will be marked with numbers by default:

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

Try it Yourself »

HTML Description Lists

HTML also supports description lists.

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

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description

list

<dd> Describes the term in a

description list

HTML Unordered Lists

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

Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

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

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

Unordered HTML List - Choose List Item Marker

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

Value Description

disc Sets the list item marker to a

bullet (default)

circle Sets the list item marker to a

circle

squar Sets the list item marker to a

e square
none The list items will not be
marked

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

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

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

Example - None
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):

Example
<ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

HTML Unordered Lists

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

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:
Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker

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

Value Description

disc Sets the list item marker to a

bullet (default)

circle Sets the list item marker to a

circle

squar Sets the list item marker to a

e square

none The list items will not be

marked

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

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

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

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

Nested HTML Lists

Lists can be nested (list inside list):
Example
<ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

Horizontal List with CSS

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

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

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

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

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

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

</body>
</html>

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

Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements
 Use the CSS property float:left to display a list horizontally
HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML Ordered Lists

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

or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

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

Try it Yourself »

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be

numbered with numbers
(default)

type="A The list items will be

" numbered with uppercase
letters

type="a" The list items will be

numbered with lowercase
letters

type="I" The list items will be

numbered with uppercase
roman numbers

type="i" The list items will be

numbered with lowercase
roman numbers

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

Try it Yourself »

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

Try it Yourself »

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

Try it Yourself »
Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Lowercase Roman Numbers:

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

Try it Yourself »

Control List Counting

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

Example
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »
Nested HTML Lists
Lists can be nested (list inside list):

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

Try it Yourself »

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

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
 Lists can be nested
 List items can contain other HTML elements

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description

list

<dd> Describes the term in a

description list

HTML Other Lists
❮ PreviousNext ❯

HTML also supports description lists.

HTML Description Lists

A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

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

Try it Yourself »

Chapter Summary
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list

HTML Block and Inline Elements

❮ PreviousNext ❯

Every HTML element has a default display value, depending on what type of
element it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line.

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

A block level element has a top and a bottom margin, whereas an inline
element does not.

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

Example
<div>Hello World</div>

Try it Yourself »

Here are the block-level elements in HTML:

<aside>

<dd>

<div>

<dl>

<dt>

<form>

<hr>

<li>

<main>

<nav>

<ol>

<p>

<pre>

<table>

<tfoot>

<ul>

<video>

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example
<span>Hello World</span>

Try it Yourself »

Here are the inline elements in HTML:

<a>

<abbr>

<b>

<bdo>

<big>

<br>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<samp>

<small>

<span>

<sub>

<sup>

<time>

<tt>

<var>

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

The <div> Element

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

The <div> element has no required attributes, but style, class and id are

common.

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

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

Try it Yourself »

The <span> Element

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

The <span> element has no required attributes, but style, class and id are

common.

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

Example
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>

Try it Yourself »

Chapter Summary
 There are two display values: block and inline
 A block-level element always starts on a new line and takes up the full
width available
 An inline element does not start on a new line and it only takes up as
much width as necessary
 The <div> element is a block-level and is often used as a container for
other HTML elements
 The <span> element is an inline container used to mark up a part of a
text, or a part of a document
HTML File Paths
❮ PreviousNext ❯

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

File Path Examples

Path Descriptio
n

<img src="picture.jpg"> The

"picture.jpg
" file is
located in
the same
folder as
the current
page

<img The
src="images/picture.jpg" "picture.jpg
> " file is
located in
the images
folder in
the current
folder
<img The
src="/images/picture.jpg "picture.jpg
"> " file is
located in
the images
folder at
the root of
the current
web

<img The
src="../picture.jpg"> "picture.jpg
" file is
located in
the folder
one level
up from
the current
folder

HTML File Paths

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

File paths are used when linking to external files, like:

 Web pages
 Images
 Style sheets
 JavaScripts
Absolute File Paths
An absolute file path is the full URL to a file:

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

Try it Yourself »

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

Relative File Paths

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

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

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

Try it Yourself »

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

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

Try it Yourself »

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:

Example
<img src="../images/picture.jpg" alt="Mountain">
Try it Yourself »

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

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

HTML Layout Elements and Techniques

❮ PreviousNext ❯

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

newspaper).

Example

Cities
 London
 Paris
 Tokyo

London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.

Footer

Try it Yourself »

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web
page:

<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
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on
demand
<summary> - Defines a heading for the <details> element

HTML Responsive Web Design

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

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

What is Responsive Web Design?

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

Try it Yourself »

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web
pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Try it Yourself »

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

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

Without the viewport meta tag:

With the viewport meta tag:

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

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

Using the width Property

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

Try it Yourself »

Notice that in the example above, the image can be scaled up to be larger than
its original size. A better solution, in many cases, will be to use the max-
width property instead.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to,
but never scale up to be larger than its original size:

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

Try it Yourself »
Show Different Images Depending on Browser Width
The HTML <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
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Try it Yourself »

Responsive Text Size

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

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

Hello World
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>

Try it Yourself »

Viewport is the browser window size. 1vw = 1% of viewport width. If the

viewport is 50cm wide, 1vw is 0.5cm.

HTML Computer Code Elements

❮ PreviousNext ❯

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

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

Try it Yourself »

HTML <kbd> For Keyboard Input

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:

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

Result:

Save the document by pressing Ctrl + S

Try it Yourself »

HTML <samp> For Program Output

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

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

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

Result:

Message from my computer:

File not found.

Press F1 to continue

Try it Yourself »

HTML <code> For Computer Code

The HTML <code> element is used to define a piece of computer code. The
content inside is displayed in the browser's default monospace font.
Example
Define some text as computer code in a document:

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

Try it Yourself »

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

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

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

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

Try it Yourself »

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or in a
mathematical expression. The content inside is typically displayed in italic.
Example
Define some text as variables in a document:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,

where <var>b</var> is the base, and <var>h</var> is the vertical
height.</p>

Result:

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

Try it Yourself »

Chapter Summary
 The <kbd> element defines keyboard input
 The <samp> element defines sample output from a computer program
 The <code> element defines a piece of computer code
 The <var> element defines a variable in programming or in a
mathematical expression
 The <pre> element defines preformatted text

HTML Semantic Elements
❮ PreviousNext ❯

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

defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header">
<div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different
parts of a web page:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
HTML <section> Element
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."

A web page could normally be split into sections for introduction, content, and
contact information.

Example
Two sections in a document:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of
the environment, formerly named the World Wildlife Fund. WWF was founded
in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>

Try it Yourself »

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

its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header">
<div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different
parts of a web page:

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

content, typically with a heading."

A web page could normally be split into sections for introduction, content, and
contact information.

Example
Two sections in a document:

Try it Yourself »

Nesting <article> in <section> or Vice Versa?

The <article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we
cannot!

So, you will find HTML pages with <section> elements

containing <article> elements, and <article> elements
containing <section> elements.

HTML <header> Element

The <header> element represents a container for introductory content or a set of
navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document.

However, <header> cannot be placed within a <footer>, <address> or
another <header> element.

Example
A header for an <article>:
<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>

Try it Yourself »

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

Example
A footer section in a document:

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Try it Yourself »
HTML <nav> Element
The <nav> element defines a set of navigation links.

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.

Browsers, such as screen readers for disabled users, can use this element to
determine whether to omit the initial rendering of this content.

Example
A set of navigation links:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Try it Yourself »

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in
(like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

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

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

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and
seasonal special events.</p>
</aside>

Try it Yourself »

Example 2
Use CSS to style the <aside> element:

<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</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>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks
and seasonal special events.</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>
<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>

</body>
</html>
Try it Yourself »

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or as the last child of
a <figure> element.

The <img> element defines the actual image/illustration.

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

Try it Yourself »

Why Semantic Elements?

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

Semantic Elements in HTML

Below is a list of some of the semantic elements in 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

<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

<header> Specifies a header for a

document or section

<main> Specifies the main

content of a document
<mark> Defines
marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a

document

<summary> Defines a visible

heading for a <details>
element

<time> Defines a date/time

Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
Userbouquet - Ilu XXX Adult
67% (3)
Userbouquet - Ilu XXX Adult
9 pages
Untitled Document
No ratings yet
Untitled Document
175 pages
HTML
100% (4)
HTML
108 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
What Is HTML
No ratings yet
What Is HTML
32 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
HTML Introduction 254
No ratings yet
HTML Introduction 254
81 pages
HTML With CSS Programming
No ratings yet
HTML With CSS Programming
177 pages
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
W3school (HTML Notes)
No ratings yet
W3school (HTML Notes)
13 pages
HTML Introduction
No ratings yet
HTML Introduction
4 pages
01 HTML (1)
No ratings yet
01 HTML (1)
96 pages
HTML
No ratings yet
HTML
5 pages
HTML Tutorial
No ratings yet
HTML Tutorial
63 pages
HTML5 Tutorial
No ratings yet
HTML5 Tutorial
32 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 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
HTML Tutorial
No ratings yet
HTML Tutorial
22 pages
Intro2 HTML
No ratings yet
Intro2 HTML
5 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
03 HTML
No ratings yet
03 HTML
113 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML Tutorial: Examples in Each Chapter
100% (1)
HTML Tutorial: Examples in Each Chapter
22 pages
HTML1
No ratings yet
HTML1
76 pages
Learning Material 2 HTML INTRODUCTION
No ratings yet
Learning Material 2 HTML INTRODUCTION
4 pages
1-html Introduction
No ratings yet
1-html Introduction
7 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
HTML Notes
No ratings yet
HTML Notes
23 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
HTML Introduction
No ratings yet
HTML Introduction
36 pages
HTML Css Js
No ratings yet
HTML Css Js
491 pages
HTML Intro
No ratings yet
HTML Intro
137 pages
_Lecture 02_HTML Basics1
No ratings yet
_Lecture 02_HTML Basics1
74 pages
HTML Introduction To Attributes
No ratings yet
HTML Introduction To Attributes
19 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
113 pages
HTML
No ratings yet
HTML
14 pages
What Is HTML?
No ratings yet
What Is HTML?
9 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
Bcac501 - It - Part-1-Html
No ratings yet
Bcac501 - It - Part-1-Html
117 pages
Lesson 1 Introduction To HTML
No ratings yet
Lesson 1 Introduction To HTML
4 pages
A Complete Reference of HTML
No ratings yet
A Complete Reference of HTML
160 pages
Example: Mainpage - HTM Page1.htm Page2.htm
No ratings yet
Example: Mainpage - HTM Page1.htm Page2.htm
19 pages
1
No ratings yet
1
5 pages
HTML Course
No ratings yet
HTML Course
107 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
What Is HTML?
No ratings yet
What Is HTML?
19 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
No ratings yet
HTML
61 pages
Lecture1 HTML
No ratings yet
Lecture1 HTML
70 pages
HTML w3 Schools
No ratings yet
HTML w3 Schools
30 pages
HTML
No ratings yet
HTML
84 pages
Coumuter Project For Class 10
No ratings yet
Coumuter Project For Class 10
16 pages
What Is HTML?
No ratings yet
What Is HTML?
10 pages
1 - HTML Notes
No ratings yet
1 - HTML Notes
86 pages
HTML Notes
No ratings yet
HTML Notes
179 pages
HTML SYlABUS
No ratings yet
HTML SYlABUS
50 pages
What Is HTML
No ratings yet
What Is HTML
12 pages
HTML Data
No ratings yet
HTML Data
39 pages
HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
HTML Is The Standard Markup Language For Creating Web Pages
12 pages
Web development
No ratings yet
Web development
32 pages
Canteen Management System Using The E-Wallet: ISSN: 2454-132X Impact Factor: 4.295
No ratings yet
Canteen Management System Using The E-Wallet: ISSN: 2454-132X Impact Factor: 4.295
4 pages
Best Website Design Agency
No ratings yet
Best Website Design Agency
4 pages
Practcal HTML Notes o Level PDF
No ratings yet
Practcal HTML Notes o Level PDF
7 pages
Css Shorthand Cheat Sheet
100% (3)
Css Shorthand Cheat Sheet
4 pages
02 HTML
No ratings yet
02 HTML
31 pages
Aioseo Giftsshackcom
No ratings yet
Aioseo Giftsshackcom
13 pages
Science of Computer Programming
No ratings yet
Science of Computer Programming
19 pages
Website Development Brief Template
No ratings yet
Website Development Brief Template
24 pages
How To Add ExpressJS Server To NextJS Application
No ratings yet
How To Add ExpressJS Server To NextJS Application
16 pages
Nikhil's Resume (1)
No ratings yet
Nikhil's Resume (1)
1 page
Angular 8
100% (1)
Angular 8
98 pages
John Ryan B. Lorca Instructor I: (An Introduction)
No ratings yet
John Ryan B. Lorca Instructor I: (An Introduction)
18 pages
PROJECT
No ratings yet
PROJECT
4 pages
Web Sites Do It Yourself For Dummies 2nd Edition Janine Warner download
100% (1)
Web Sites Do It Yourself For Dummies 2nd Edition Janine Warner download
63 pages
Semester 2 January 2025 Computer Science UG Study Abroad V2
No ratings yet
Semester 2 January 2025 Computer Science UG Study Abroad V2
9 pages
How To Code in React - Js
100% (1)
How To Code in React - Js
962 pages
Web Design Sample Proposal Template
100% (1)
Web Design Sample Proposal Template
8 pages
Instagram - Software Dev
No ratings yet
Instagram - Software Dev
13 pages
Chapter 2-Part 1
No ratings yet
Chapter 2-Part 1
18 pages
Lecture-1.1. 2
No ratings yet
Lecture-1.1. 2
13 pages
Codeigniter4 Github Io Userguide
No ratings yet
Codeigniter4 Github Io Userguide
5 pages
DFT40163 - Sesi 1 2023 2024 Project 1
No ratings yet
DFT40163 - Sesi 1 2023 2024 Project 1
8 pages
Introduction To HTML: Student - Feedback@sti - Edu
No ratings yet
Introduction To HTML: Student - Feedback@sti - Edu
4 pages
Prelim Quiz 1 - Mail and Web Services
No ratings yet
Prelim Quiz 1 - Mail and Web Services
7 pages
Apache Tomcat - Tutorial: Lars Vogel
No ratings yet
Apache Tomcat - Tutorial: Lars Vogel
6 pages
Acunetix Web Application Vulnerability Report 2019 PDF
No ratings yet
Acunetix Web Application Vulnerability Report 2019 PDF
27 pages
Nguyễn Huy Hoàng
No ratings yet
Nguyễn Huy Hoàng
2 pages
Javascript
No ratings yet
Javascript
148 pages
Skills Build
No ratings yet
Skills Build
1 page