0% found this document useful (0 votes)

5 views123 pages

HTML Tags

The document provides an overview of HTML elements, including their definitions and usage, as well as examples of various tags such as <a>, <abbr>, and <address>. It emphasizes the importance of the <!DOCTYPE> declaration in HTML documents and discusses how to use comments in the code. Additionally, it highlights deprecated tags like <applet> and offers alternatives for embedding content.

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)

5 views123 pages

HTML Tags

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

1

HTML 29.
30.
<data>
<datalist>
60.
61.
<kbd>
<label>
91.
92.
<select>
<small>
ELEMENTS 31. <dd> 62. <legend> 93. <source>
1. <!--> 32. <del> 63. <li> 94. <span>
2. <!DOCTYPE> 33. <details> 64. <link> 95. <strike>
3. <a> 34. <dfn> 65. <main> 96. <strong>
4. <abbr> 35. <dialog> 66. <map> 97. <style>
5. <acronym> 36. <dir> 67. <mark> 98. <sub>
6. <address> 37. <div> 68. <meta> 99. <summary>
7. <applet> 38. <dl> 69. <meter> 100. <sup>
8. <area> 39. <dt> 70. <nav> 101. <svg>
9. <article> 40. <em> 71. <noframes> 102. <table>
10. <aside> 41. <embed> 72. <noscript> 103. <tbody>
11. <audio> 42. <fieldset> 73. <object> 104. <td>
12. <b> 43. <figcaption> 74. <ol> 105. <template>
13. <base> 44. <figure> 75. <optgroup> 106. <textarea>
14. <basefont> 45. <font> 76. <option> 107. <tfoot>
15. <bdi> 46. <footer> 77. <output> 108.
16. <bdo> 47. <form> 78. <p> 109. <th>
17. <big> 48. <frame> 79. <param> 110. <thead>
18. <blockquote> 49. <frameset> 80. <picture> 111. <time>
19. <body> 50. <h1> - <h6> 81. <pre> 112. <title>
20. <br> 51. <head> 82. <progress> 113. <tr>
21. <button> 52. <header> 83. <q> 114. <track>
22. <canvas> 53. <hr> 84. <rp> 115. <tt>
23. <caption> 54. <html> 85. <rt> 116. <u>
24. <center> 55. <i> 86. <ruby> 117. <ul>
25. <cite> 56. <iframe> 87. <s> 118. <var>
26. <code> 57. <img> 88. <samp> 119. <video>
27. <col> 58. <input> 89. <script> 120. <wbr>
28. <colgroup> 59. <ins> 90. <section>

Definition and Usage
<p>This is a paragraph.</p>
All HTML documents must start with a <!
Definition and Usage DOCTYPE> declaration.

The comment tag is used to insert comments in the source code. The declaration is not an HTML tag. It is an
Comments are not displayed in the browsers. "information" to the browser about what document
type to expect. In HTML 5, the declaration is simple: <!
You can use comments to explain your code, which can help you
when you edit the source code at a later date. This is especially
DOCTYPE html>
useful if you have a lot of code.

Tips and Notes

Older HTML Documents
You can use the comment tag to "hide" scripts from browsers
without support for scripts (so they don't show them as plain text): In older documents (HTML 4 or XHTML), the declaration
is more complicated because the declaration must
refer to a DTD (Document Type Definition).
<script type="text/javascript">
 Transitional//EN"
</script>
"http://www.w3.org/TR/html4/loose.dtd">
3
XHTML 1.1: <a
href="https://www.w3schools.com">Visit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" W3Schools.com!</a>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
</body>
</html>
HTML Elements and Doctypes Example

Look at our table of all HTML elements, and what Create a link to W3Schools.com:
Doctype each element appears in.
<a href="https://www.w3schools.com">Visit W3Schools.com!
Tips and Notes </a>

Tip: The <!DOCTYPE> declaration is NOT case More "Try it Yourself" examples below.
sensitive.
Definition and Usage

The <a> tag defines a hyperlink, which is used to link from one
page to another.

The most important attribute of the <a> element is

Examples the href attribute, which indicates the link's destination.

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

<!DOCTYPE html>
 An unvisited link is underlined and blue
<!DocType html>  A visited link is underlined and purple
 An active link is underlined and red
<!Doctype html>
Tips and Notes
<!doctype html>
Tip: If the <a> tag has no href attribute, it is only a placeholder
for a hyperlink.
HTML <a> Tag
Tip: A linked page is normally displayed in the current browser
<!DOCTYPE html> The a window, unless you specify another target.
<html>
<body> element Tip: Use CSS to style links: CSS Links and CSS Buttons.

<h1>The a element</h1> Visit W3Schools.com!

Attributes
4
Attribute Value Attribute Example
download filename download
href URL href
hreflang language_code hreflang How to open a link in a new browser window:
media media_query media
ping list_of_URLs ping
referrerpolicy no-referrer referrerpolicy
no-referrer-when- <a href="https://www.w3schools.com" target="_blank">Visit
downgrade W3Schools.com!</a>
origin
origin-when-cross-
origin Example
same-origin
strict-origin-when-
cross-origin How to link to an email address:
unsafe-url
rel alternate rel
author
bookmark <a href="mailto:someone@example.com">Send email</a>
external
help
license Example
next
nofollow
noreferrer How to link to a phone number:
noopener
prev
search
tag <a href="tel:+4733378901">+47 333 78 901</a>
target _blank target
_parent
_self Example
_top
type media_type type
Example How to link to another section on the same page:

How to use an image as a link: <a href="#section2">Go to Section 2</a>

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

<img border="0" alt="W3Schools" src="logo_w3s.gif" width="
100" height="100">
</a> How to link to a JavaScript:
5
<a href="javascript:alert('Hello World!');">Execute Definition and Usage
JavaScript</a>
The <abbr> tag defines an abbreviation or an acronym,
Default CSS Settings
like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Most browsers will display the <a> element with the following
default values: Tip: Use the global title attribute to show the
description for the abbreviation/acronym when you
a:link, a:visited { mouse over the element.
color: (internal value);
text-decoration: underline; More Examples
cursor: auto;
}

a:link:active, a:visited:active { Example

color: (internal value);
}

<abbr> can also be used with <dfn> to define an

HTML <abbr> Tag abbreviation:

<!DOCTYPE html> The abbr element

<html>
<body>
<p><dfn><abbr title="Cascading Style
The WHO was founded in 1948. Sheets">CSS</abbr>
<h1>The abbr element</h1>
</dfn> is a language that describes the style of
<p>The <abbr title="World Health an HTML document.</p>
Organization">WHO</abbr> was founded
in 1948.</p>

</body>
</html>

Default CSS Settings

Example
Most browsers will display the <abbr> element with the
following default values:
An abbreviation is marked up as follows:

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

More "Try it Yourself" examples below.

6
abbr { <!DOCTYPE html> The address
display: inline; <html>
} <body>
element
Written by Jon Doe.
HTML <acronym> Tag <h1>The address element</h1> Visit us at:
Example.com
<!DOCTYPE html> The abbr element
<html> <address> Box 564, Disneyland
<body> USA
The WHO was founded in 1948. Written by <a
<h1>The abbr element</h1> href="mailto:webmaster@example.
<p>The <abbr title="World Health com">Jon Doe</a>.<br>
Organization">WHO</abbr> was
founded in 1948.</p>
Visit us at:<br>
Example.com<br>
</body>
</html>
Box 564, Disneyland<br>
USA
</address>
Not Supported in HTML5.
</body>
The <acronym> tag was used in HTML 4 to define an </html>
acronym.

What to Use Instead? Example

Example Contact information for Example.com:

An acronym or abbreviation should be marked up with <address>

the <abbr> tag: Written
by <a href="mailto:webmaster@example.com">Jon
Doe</a>.<br>
The <abbr title="World Health Visit us at:<br>
Organization">WHO</abbr> was founded in 1948. Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <address> Tag
Definition and Usage
7
The <address> tag defines the contact information for the  Run ActiveX controls
author/owner of a document or an article.  Display Flash movies
 Display maps
The contact information can be an email address, URL, physical  Scan for viruses
address, phone number, social media handle, etc.  Verify a bank id

The text in the <address> element usually renders in italic, and Most browsers no longer support Java Applets and Plug-
browsers will always add a line break before and after ins.
the <address> element. ActiveX controls are no longer supported in any
browsers.
Default CSS Settings The support for Shockwave Flash has also been turned
off in modern browsers.
Most browsers will display the <address> element with the
following default values:\

Example What to Use Instead?

address { If you want to embed a video, use the <video> tag:

display: block;
font-style: italic;
Example
}

HTML <applet> Tag <video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
Not Supported in HTML5.
<source src="movie.ogg" type="video/ogg">
The <applet> tag was used in HTML 4 to define an Your browser does not support the video tag.
embedded applet (Plug-in). </video>

Plug-ins

Plug-ins are a computer programs that extend the If you want to embed audio, use the <audio> tag:
standard functionality of the browser.
Example

Plug-ins have been used for many different purposes:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
 Run Java applets
<source src="horse.mp3" type="audio/mpeg">
8
Your browser does not support the audio tag. <object data="pic_trulli.jpg"></object>
</audio>

To embed objects, you can use both the <embed> tag Tip: To embed a picture, it is better to use the <img> tag. To
and the <object> tags: embed a document, it is better to use the <iframe> tag.

Example
HTML <area> Tag
<!DOCTYPE html> The map and area elements
Embed a document with the <embed> element: <html>
<body> Click on the computer, the phone,
or the cup of coffee to go to a new
<h1>The map and area elements</h1>
<embed src="snippet.html"> page and read more about the topic:
<p>Click on the computer, the phone, or
the cup of coffee to go to a new page and
Example read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace"

usemap="#workmap" width="400"
Embed a picture with the <embed> element: height="379">

<map name="workmap">
<area shape="rect"
embed src="pic_trulli.jpg"> coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect"
Example coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Cup of coffee" href="coffee.htm">
Embed a document with the <object> element: </map> Wikipedia says:

</body> A computer is a
device that can
<object data="snippet.html"></object> </html> be instructed to
carry out
arbitrary
sequences of
arithmetic or
Example logical operations
automatically.

<area shape="rect" coords="0,0,82,126" href="s <h2>Mozilla Firefox</h2>

<p>Mozilla Firefox is an open- Microsoft Edge
un.htm" alt="Sun">
source web browser developed by
<area shape="circle" coords="90,58,3" href="me Microsoft Edge is a web browser developed by
Mozilla. Firefox has been the second Microsoft, released in 2015. Microsoft Edge
rcur.htm" alt="Mercury"> most popular web browser since
replaced Internet Explorer.

<area shape="circle" coords="124,58,8" href="v January, 2018.</p>

enus.htm" alt="Venus"> </article>

</map> <article>
<h2>Microsoft Edge</h2>
Default CSS Settings <p>Microsoft Edge is a web browser
developed by Microsoft, released in
Most browsers will display the <area> element with the 2015. Microsoft Edge replaced
following default values: Internet Explorer.</p>
</article>
area {
display: none; </body>
} </html>

Example
Three articles with independent, self-contained content:

<article>
HTML <article> Tag <h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released
<!DOCTYPE html> The article element in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<html>
<body> Google Chrome
<article>
<h1>The article element</h1> Google Chrome is a web browser developed by <h2>Mozilla Firefox</h2>
Google, released in 2008. Chrome is the world's
most popular web browser today! <p>Mozilla Firefox is an open-source web browser developed by
<article> Mozilla. Firefox has been the second most popular web browser since
11
January, 2018.</p> <style>
</article> .all-browsers {
margin: 0;
padding: 5px;
<article>
background-color: lightgray;
<h2>Microsoft Edge</h2>
}
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet Explorer.</p>
.all-browsers > h1, .browser {
</article>
margin: 10px;
padding: 5px;
More "Try it Yourself" examples below. }

Definition and Usage .browser {

background: white;
The <article> tag specifies independent, self-contained content. }

An article should make sense on its own and it should be possible .browser > h2, p {
to distribute it independently from the rest of the site. margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
Potential sources for the <article> element:
<article class="all-browsers">
 Forum post <h1>Most Popular Browsers</h1>
 Blog post <article class="browser">
 News story <h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google,
Note: The <article> element does not render as anything special released in 2008. Chrome is the world's most popular web browser
in a browser. However, you can use CSS to style today!</p>
the <article> element (see example below). </article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
More Examples Mozilla. Firefox has been the second most popular web browser since
Example January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
Use CSS to style the <article> element: <p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<html> </article>
<head>
12
international pavilions, award-
</body> winning fireworks and seasonal
</html> special events.</p>
</aside>

Default CSS Settings </body>

</html>
Most browsers will display the <article> element with the Example
following default values:

article {
display: block;
}

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

<p>My family and I visited The Epcot center this summer. The
HTML <aside> Tag weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<!DOCTYPE html> The aside element
<html> <aside>
My family and I visited The Epcot
<body> center this summer. The weather was <h4>Epcot Center</h4>
nice, and Epcot was amazing! I had a <p>Epcot is a theme park at Walt Disney World Resort featuring
great summer together with my family! exciting attractions, international pavilions, award-winning fireworks
<h1>The aside element</h1>
and seasonal special events.</p>
Epcot Center
</aside>
<p>My family and I visited The
Epcot is a theme park at Walt Disney
Epcot center this summer. The World Resort featuring exciting More "Try it Yourself" examples below.
weather was nice, and Epcot attractions, international pavilions, award-
winning fireworks and seasonal special
was amazing! I had a great events. Definition and Usage
summer together with my
The <aside> tag defines some content aside from the content it is
family!</p> placed in.

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

<h4>Epcot Center</h4> content.
<p>Epcot is a theme park at Tip: The <aside> content is often placed as a sidebar in a
Walt Disney World Resort document.
featuring exciting attractions,
13
Note: The <aside> element does not render as anything special together with my family!</p>
in a browser. However, you can use CSS to style
the <aside> element (see example below)..
</body>
</html>
Example

Default CSS Settings

Use CSS to style the <aside> element:
Most browsers will display the <aside> element with the following
default values:
<html>
<head> aside {
<style> display: block;
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body> HTML <audio> Tag
<!DOCTYPE html>
<html> The audio element
<h1>The aside element</h1> <body>
Click on the play button to play a
<h1>The audio element</h1>
<p>My family and I visited The Epcot center this summer. The sound:
weather was nice, and Epcot was amazing! I had a great summer <p>Click on the play button to
together with my family!</p> play a sound:</p>

<audio controls>
<aside> <source src="horse.ogg"
type="audio/ogg">
<p>The Epcot center is a theme park at Walt Disney World Resort <source src="horse.mp3"
featuring exciting attractions, international pavilions, award-winning type="audio/mpeg">
fireworks and seasonal special events.</p> Your browser does not support
</aside> the audio element.
</audio>

</body>
<p>My family and I visited The Epcot center this summer. The </html>
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
Example
weather was nice, and Epcot was amazing! I had a great summer
14
Play a sound file: Attribute Value Description
autoplay autoplay Specifies that the
audio will start
<audio controls> playing as soon as
<source src="horse.ogg" type="audio/ogg"> it is ready
<source src="horse.mp3" type="audio/mpeg"> controls controls Specifies that audio
Your browser does not support the audio tag. controls should be
</audio> displayed (such as
a play/pause
button etc)
Definition and Usage
loop loop Specifies that the
audio will start over
The <audio> tag is used to embed sound content in a document, again, every time it
such as music or other audio streams. is finished
muted muted Specifies that the
The <audio> tag contains one or more <source> tags with audio output
different audio sources. The browser will choose the first source it should be muted
supports. preload auto Specifies if and
metadata how the author
The text between the <audio> and </audio> tags will only be none thinks the audio
displayed in browsers that do not support the <audio> element. should be loaded
when the page
There are three supported audio formats in HTML: MP3, WAV, and loads
OGG. src URL Specifies the URL
of the audio file
Audio Format and Browser Support
Default CSS Settings
Browser MP3 WAV OGG
Edge / IE YES YES* YES* None.
Chrome YES YES YES
Firefox YES YES YES HTML <b> Tag
Safari YES YES NO
Opera YES YES YES <!DOCTYPE html> The b element
<html>
<body> This is normal text - and this is bold text.
*From Edge 79
<h1>The b element</h1>
Tips and Notes

Tip: For video files, look at the <video> tag.

<p>This is normal text - <b>and
this is bold text</b>.</p>
Attributes
</body>
15
</html>
new window, even if it has no target="_blank"
<p><img src="images/stickman.gif" attribute. This is because the target attribute of
width="24" height="39" alt="Stickman"> -
Notice that we have only specified a relative
the base element is set to "_blank".
Example address for the image. Since we have
specified a base URL in the head section, the
browser will look for the image at
"https://www.w3schools.com/images/stickman
.gif".</p>
Make some text bold (without marking it as important):

<p><a href="tags/tag_base.asp">HTML base

tag</a> - Notice that the link opens in a new
window, even if it has no target="_blank"
<p>This is normal text - <b>and this is bold text</b>.</p> attribute. This is because the target attribute
of the base element is set to "_blank".</p>

More "Try it Yourself" examples below.

</body>
Definition and Usage </html>

The <b> tag specifies bold text without any extra importance.

Tips and Notes Example

Note: According to the HTML5 specification, the <b> tag should

be used as a LAST resort when no other tag is more appropriate. Specify a default URL and a default target for all links on a
The specification states that headings should be denoted with page:
the <h1> to <h6> tags, emphasized text should be denoted with
the <em> tag, important text should be denoted with
the <strong> tag, and marked/highlighted text should be denoted <head>
with the <mark> tag. <base href="https://www.w3schools.com/" target="_blank">
</head>
Tip: You can also use the following CSS to set bold text: "font-
weight: bold;".
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stick
HTML <base> Tag man">
<a href="tags/tag_base.asp">HTML base Tag</a>
<!DOCTYPE html> The base element </body>
<html>

<head>
Definition and Usage
<base href="https://www.w3schools.com/" - Notice that we have only specified a
target="_blank"> relative address for the image. Since we have The <base> tag specifies the base URL and/or target for all
specified a base URL in the head section, the relative URLs in a document.
</head>
browser will look for the image at
"https://www.w3schools.com/images/stickman.g
<body>
if".
The <base> tag must have either an href or a target attribute
<h1>The base element</h1> present, or both.
HTML base tag - Notice that the link opens in a
16
There can only be one single <base> element in a document, and
it must be inside the <head> element.
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Attributes
Attribut Value Description </body>
e </html>
href URL Specifies the base URL for all
relative URLs in the page
Example
target _blank, Specifies the default target for all
_parent hyperlinks and forms in the page
_self , _top Specify a default font-family for a page (with CSS):

Default CSS Settings <html>

<head>
None. <style>
body {
HTML <basefont> Tag }
font-family: courier, serif;

Not Supported in HTML5. </style>

</head>
The <basefont> tag was used in HTML 4 to specify a default text- <body>
color, font-size or font-family for all the text in an HTML document.
<h1>This is a heading</h1>
What to Use Instead? <p>This is a paragraph.</p>

</body>
Example
</html>

Specify a default text-color for a page (with CSS):

<html> Example
<head>
<style>
body {
color: red; Specify a default font-size for a page (with CSS):
}
</style>
</head>
<body>
17
<html> <li>User <bdi>jdoe</bdi>: 80 points</li>
<head> <li>User <bdi>‫<إيان‬/bdi>: 90 points</li>
<style> </ul>

body { </body>
font-size: 50px; </html>
}

</style> Example
</head>
<body>
Isolate the usernames from the surrounding text-direction settings:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<ul>
</body> <li>User <bdi>hrefs</bdi>: 60 points</li>
</html> <li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>‫<إيان‬/bdi>: 90 points</li>
Tip: In our CSS tutorial you can find more information about CSS </ul>
text color and CSS fonts
Definition and Usage

BDI stands for Bi-Directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a

different direction from other text outside it.
HTML <bdi> Tag
<!DOCTYPE html> This element is useful when embedding user-generated content
<html>
The bdi element with an unknown text direction.
<body>
In the example below, usernames are
<h1>The bdi element</h1> shown along with the number of points in
a contest. If the bdi element is not HTML <bdo> Tag
supported in the browser, the username of
<p>In the example below, usernames are
the Arabic user would confuse the text (the <!DOCTYPE html> The bdo element
shown along with the number of points in <html>
bidirectional algorithm would put the
a contest. If the bdi element is not colon and the number "90" next to the <body>
supported in the browser, the username word "User" rather than next to the word This paragraph will go left-to-right.
of the Arabic user would confuse the text "points"). <h1>The bdo element</h1>
(the bidirectional algorithm would put This paragraph will go right-to-left.
the colon and the number "90" next to <p>This paragraph will go left-to-right.</p>
 User hrefs: 60 points <p><bdo dir="rtl">This paragraph will go right-
the word "User" rather than next to the
 User jdoe: 80 points to-left.</bdo></p>
word "points").</p>  User 90 :‫ إيان‬points
</body>
<ul> </html>
<li>User <bdi>hrefs</bdi>: 60 points</li>
18
Example Example: Specify different font-sizes for HTML elements (with CSS):

Specify the text direction: <html>

<head>
<style>
p.ex1 {
<bdo dir="rtl"> font-size: 30px;
This text will go right-to-left. }
</bdo> p.ex2 {
font-size: 50px;
Definition and Usage }
</style>
BDO stands for Bi-Directional Override. </head>
<body>
The <bdo> tag is used to override the current text direction.
<p>This is a normal paragraph.</p>
Attributes <p class="ex1">This is a bigger paragraph.</p>
<p class="ex2">This is a much bigger paragraph.</p>
Attribute Value Description
</body>
dir ltr Required. Specifies the text </html>
rtl direction of the text inside the
<bdo> element
In our CSS tutorial you can find more information about CSS Font
Default CSS Settings Size.

Most browsers will display the <bdo> element with the following
default values:
HTML <blockquote> Tag
bdo {
unicode-bidi: bidi-override;
}

HTML <big> Tag

Not Supported in HTML5.

The <big> tag was used in HTML 4 to define bigger text.

What to Use Instead?

19
<!DOCTYPE html>
The blockquote element Tip: Use <q> for inline (short) quotations.
<html>
<body>
Here is a quote from WWF's website: Attributes
<h1>The blockquote element</h1>
Attribut Value Description
<p>Here is a quote from WWF's For 50 years, WWF e
website:</p> has been protecting
the future of nature.
cite URL Specifies the source of the quotation
<blockquote The world's leading
cite="http://www.worldwildlife.org/who/in
dex.html">
conservation .More Examples
For 50 years, WWF has been protecting
organization, WWF
the future of nature. The world's leading works in 100
conservation organization, WWF works in countries and is
100 countries and is supported by 1.2 supported by 1.2
million members in the United States and million members in
close to 5 million globally. the United States and
</blockquote> close to 5 million
globally. Example
</body>
</html>

Use CSS to remove the indentation from the blockquote element:

<html>
Example : A section that is quoted from another source:
<head>
<style>
blockquote {
<blockquote cite="http://www.worldwildlife.org/who/index.html"> margin-left: 0;
For 50 years, WWF has been protecting the future of nature. The }
world's leading conservation organization, WWF works in 100 </style>
countries and is supported by 1.2 million members in the United </head>
States and close to 5 million globally. <body>
</blockquote> <p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
Definition and Usage For 50 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100
The <blockquote> tag specifies a section that is quoted from countries and is supported by 1.2 million members in the United
another source. States and close to 5 million globally.
</blockquote>
Browsers usually indent <blockquote> elements (look at example
below to see how to remove the indentation). </body>
</html>
Tips and Notes
Default CSS Settings
20
Most browsers will display the <blockquote> element with the Definition and Usage
following default values:
The <body> tag defines the document's body.

Example The <body> element contains all the contents of an HTML

document, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
blockquote {
display: block; Note: There can only be one <body> element in an HTML
margin-top: 1em; document.
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

More Examples

Example: Add a background image to a document (with CSS):

<html>
HTML <body> Tag <head>
<style>
body {
Example : A simple HTML document: background-image: url(w3s.png);
}
</style>
</head>
<html> <body>
<head>
<title>Title of the document</title>
</head> <h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!
</a></p>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> </body>
</body>

</html> Example : Set the background color of a document (with CSS):

More "Try it Yourself" examples below.

<html>
<head>
21
<style> <html>
body { <head>
background-color: #E6E6FA; <style>
} a:link {
</style> color:#0000FF;
</head> }
<body> </style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!
</a></p> <p><a href="https://www.w3schools.com">W3Schools.com</a></p
>
<p><a href="https://www.w3schools.com/html/">HTML
</body>
Tutorial</a></p>

Example: Set the color of text in a document (with CSS): </body>

</html>

<html>
<head> Example
<style>
body {
color: green; Set the color of active links in a document (with CSS):
}
</style>
</head>
<body> <html>
<head>
<style>
<h1>Hello world!</h1> a:active {
<p>This is some text.</p> color:#00FF00;
<p><a href="https://www.w3schools.com">Visit W3Schools.com! }
</a></p> </style>
</head>
</body> <body>
</html>
<p><a href="https://www.w3schools.com">W3Schools.com</a></p
>
Example <p><a href="https://www.w3schools.com/html/">HTML
Tutorial</a></p>

Set the color of unvisited links in a document (with CSS): </body>

</html>
22
Example outline: none;
}

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

>
<p><a href="https://www.w3schools.com/html/">HTML
Tutorial</a></p>
Insert single line breaks in a text:

</body>
</html>
<p>To force<br> line breaks<br> in a text,<br> use the
br<br> element.</p>

More "Try it Yourself" examples below.

Default CSS Settings

Most browsers will display the <body> element with the following
Definition and Usage
default values:
The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

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

Tips and Notes

body {
display: block; Note: Use the <br> tag to enter line breaks, not to add space
margin: 8px; between paragraphs..
}
More Examples
body:focus {
23
Example : A clickable button is marked up as follows:

<button type="button">Click Me!</button>

Definition and Usage

Example
The <button> tag defines a clickable button.

Use <br> in a poem: Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible
with a button created with the <input> element!
<p>Be not afraid of greatness.<br> Tip: Always specify the type attribute for a <button> element, to
Some are born great,<br> tell browsers what type of button it is.
some achieve greatness,<br>
and others have greatness thrust upon them.</p>
Tip: You can easily style buttons with CSS! Look at the examples
below or visit our CSS Buttons tutorial.
<p><em>-William Shakespeare</em></p>
Attributes
Default CSS Settings
Attribute Value Attribute
None. autofocus autofocus autofocus
disabled disabled disabled
form form_id form
HTML <button> Tag formaction URL formaction
formenctype application/x-www- formenctype
<!DOCTYPE html> The button Element form-urlencoded
<html> multipart/form-data
<body> Click Me! text/plain
formmethod get Specifies how to send
post the form-data (which
<h1>The button Element</h1> HTTP method to use).
Only for
<button type="button" type="submit"
onclick="alert('Hello formnovalidate formnovalidate Specifies that the
form-data should not
world!')">Click Me!</button> be validated on
submission. Only for
</body> type="submit"
</html> formtarget _blank Specifies where to
_self display the response
_parent after submitting the
_top form. Only for
24
framename type="submit"
name name Specifies a name for
the button Definition and Usage
type button Specifies the type of
reset button The <canvas> tag is used to draw graphics, on the fly, via scripting
submit (usually JavaScript).
value text value
The <canvas> tag is transparent, and is only a container for
graphics, you must use a script to actually draw the graphics.

HTML <canvas> Tag Any text inside the <canvas> element will be displayed in
browsers with JavaScript disabled and in browsers that do not
<!DOCTYPE html> HTML5 Canvas support <canvas>.
<html>
<body> Tips and Notes
<h1>HTML5 Canvas</h1>
Tip: Learn more about the <canvas> element in our HTML Canvas
<canvas id="myCanvas" width="300" Tutorial.
height="150" style="border:1px solid
grey"></canvas>
Tip: For a complete reference of all the properties and methods,
</body>
please visit our HTML Canvas Reference.
</html>
Attributes
Attribut Valu Description
e e
Example height pixels Specifies the height of the
canvas. Default value is 150
width pixels Specifies the width of the canvas
Draw a red rectangle on the fly, and show it inside the <canvas> Default value is 300
element:
More Examples

<canvas id="myCanvas">
Your browser does not support the canvas tag. Example : Another <canvas> example:
</canvas>

<canvas id="myCanvas">
<script> Your browser does not support the canvas tag.
let canvas = document.getElementById("myCanvas"); </canvas>
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80); <script>
</script> let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
25
ctx.fillStyle = "red"; <td>January</td>
ctx.fillRect(20, 20, 75, 50); <td>$100</td>
//Turn transparency on </tr>
ctx.globalAlpha = 0.2; <tr>
ctx.fillStyle = "blue"; <td>February</td>
ctx.fillRect(50, 50, 75, 50); <td>$50</td>
ctx.fillStyle = "green"; </tr>
</table>
ctx.fillRect(80, 80, 75, 50);
</body>
</script>
</html>
Default CSS Settings

Most browsers will display the <canvas> element with the

following default values: Example

Example A table with a caption:

canvas { <table>
height: 150px; <caption>Monthly savings</caption>
width: 300px; <tr>
} <th>Month</th>
<th>Savings</th>
HTML <caption> Tag </tr>
<tr>
<!DOCTYPE html> The caption <td>January</td>
<html> <td>$100</td>
<head>
element
</tr>
<style> </table>
table, th, td { Monthly
savings
border: 1px solid black;
Saving More "Try it Yourself" examples below.
} Month
s
</style>
January $100
</head> Definition and Usage
February $50
<body>
The <caption> tag defines a table caption.
<h1>The caption element</h1>
The <caption> tag must be inserted immediately after
<table> the <table> tag.
<caption>Monthly savings</caption>
<tr>
<th>Month</th> Tip: By default, a table caption will be center-aligned above a
<th>Savings</th> table. However, the CSS properties text-align and caption-side can
</tr> be used to align and place the caption.
<tr>
26
<!DOCTYPE html> The cite element
<html>
<body>
HTML <center> Tag <h1>The cite element</h1>
Not Supported in HTML5. <img src="img_the_scream.jpg"
width="220" height="277" alt="The
The <center> tag was used in HTML4 to center-align text. Scream">
<p><cite>The Scream</cite> by
Edward Munch. Painted in 1893.</p>
What to Use Instead?
</body> The Scream by Edward Munch. Painted in
</html> 1893.

Example

Center-align text (with CSS): Example

<html> Define the title of a work with the <cite> tag:

<head>
<style>
h1 {text-align: center;}
<p><cite>The Scream</cite> by Edward Munch. Painted in
p {text-align: center;}
1893.</p>
div {text-align: center;}
</style>
Definition and Usage
</head>
<body>
The <cite> tag defines the title of a creative work (e.g. a book, a
poem, a song, a movie, a painting, a sculpture, etc.).
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Note: A person's name is not the title of a work.
<div>This is a div.</div>
The text in the <cite> element usually renders in italic.
</body>
</html> Default CSS Settings

Most browsers will display the <cite> element with the following
default values:
HTML <cite> Tag
Example
27
cite { The <code> tag is used to define a piece of computer code. The
font-style: italic; content inside is displayed in the browser's default monospace
} font.

Tip: This tag is not deprecated. However, it is possible to achieve

richer effect by using CSS (see example below).

Also look at:

Tag Description
HTML <code> Tag <samp> Defines sample output from a
computer program
<!DOCTYPE html> <kbd> Defines keyboard input
<html> The code element <var> Defines a variable
<body>

<h1>The code element</h1>

<pre> Defines preformatted text
The HTML button tag defines a
<p>The HTML <code>button</code> clickable button. Example
tag defines a clickable button.</p>

<p>The CSS <code>background- The CSS background-color property

color</code> property defines the defines the background color of an
background color of an element.</p>
element. Use CSS to style the <code> element:
</body>
</html>

<html>
<head>
Example <style>
code {
font-family: Consolas,"courier new";
color: crimson;
Define some text as computer code in a document: background-color: #f1f1f1;
padding: 2px;
font-size: 105%;
<p>The HTML <code>button</code> tag defines a clickable }
button.</p> </style>
</head>
<body>
<p>The CSS <code>background-color</code> property defines
the background color of an element.</p>
<p>The HTML <code>button</code> tag defines a clickable
More "Try it Yourself" examples below. button.</p>
<p>The CSS <code>background-color</code> property defines
the background color of an element.</p>
Definition and Usage
</body>
</html>
28
<td>$53</td>
</tr>
Default CSS Settings </table>

Most browsers will display the <code> element with the following Definition and Usage
default values:
The <col> tag specifies column properties for each column within
a <colgroup> element.
Example
The <col> tag is useful for applying styles to entire columns,
instead of repeating the styles for each cell, for each row.
code {
font-family: monospace;
}

Attributes

Attribut Value Description

e
span numbe Specifies the number
r of columns a <col>
2. HTML <col> Tag element should span
Default CSS Settings
Example
Most browsers will display the <col> element with the following
default values:
Set the background color of the three columns with the <colgroup>
and <col> tags:
Example

<table>
<colgroup> col {
<col span="2" style="background-color:red"> display: table-column;
<col style="background-color:yellow"> }
</colgroup>
<tr>
<th>ISBN</th>
27. HTML <colgroup> Tag
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
29
<!DOCTYPE html> The colgroup element <table>
<html> <colgroup>
<head> <col span="2" style="background-color:red">
<style> ISBN Title Price <col style="background-color:yellow">
table, th, td { </colgroup>
border: 1px solid black; 3476896 My first HTML $53 <tr>
} <th>ISBN</th>
</style>
<th>Title</th>
</head> 5869207 My first CSS $49
<th>Price</th>
<body>
</tr>
<h1>The colgroup element</h1> <tr>
<td>3476896</td>
<table> <td>My first HTML</td>
<colgroup> <td>$53</td>
<col span="2" style="background- </tr>
color:red"> </table>
<col style="background-
color:yellow"> Definition and Usage
</colgroup>
<tr> The <colgroup> tag specifies a group of one or more columns in a
<th>ISBN</th> table for formatting.
<th>Title</th>
<th>Price</th>
The <colgroup> tag is useful for applying styles to entire columns,
</tr>
<tr>
instead of repeating the styles for each cell, for each row.
<td>3476896</td>
<td>My first HTML</td> Note: The <colgroup> tag must be a child of a <table> element,
<td>$53</td> after any <caption> elements and before any <thead>, <tbody>,
</tr> <tfoot>, and <tr> elements.
<tr>
<td>5869207</td> Tip: To define different properties to a column within
<td>My first CSS</td> a <colgroup>, use the <col> tag within the <colgroup> tag.
<td>$49</td>
</tr>
</table> HTML <data> Tag
</body>
</html> <!DOCTYPE html>
<html>
<body>
The data
<h1>The data element</h1> element
Example <p>The following example displays
product names but also associates each The following example displays
name with a product number:</p> product names but also
<ul>
associates each name with a
Set the background color of the three columns with the <colgroup>
<li><data value="21053">Cherry
and <col> tags:
30
Tomato</data></li>
<li><data value="21054">Beef
HTML <datalist> Tag
Tomato</data></li> product number:
<li><data value="21055">Snack
<!DOCTYPE html>
Tomato</data></li>
</ul>  Cherry Tomato <html>
<body>
 Beef Tomato
</body>  Snack Tomato <h1>The datalist element</h1>
</html>
<form action="/action_page.php"
method="get">
<label for="browser">Choose your
browser from the list:</label>
<input list="browsers"
Example name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
The following example displays product names but also associates <option value="Opera">
each name with a product number: <option value="Safari">
</datalist>
<input type="submit">
</form>
<ul> <p><strong>Note:</strong> The
<li><data value="21053">Cherry Tomato</data></li> datalist tag is not supported in Safari
<li><data value="21054">Beef Tomato</data></li> 12.0 (or earlier).</p>
<li><data value="21055">Snack Tomato</data></li> </body>
</ul> </html>

Definition and Usage

The <data> tag is used to add a machine-readable translation of a

given content.
Example
This element provides both a machine-readable value for data
processors, and a human-readable value for rendering in a
browser.
A datalist with pre-defined options (connected to an <input>
Tip: If the content is time- or date-related, use element):
the <time> element instead.

Attributes <label for="browser">Choose your browser from the

list:</label>
Attribute Value Description <input list="browsers" name="browser" id="browser">
value machine- Specifies the machine-
readable readable translation of
format the content of the <datalist id="browsers">
element <option value="Edge">
<option value="Firefox">
<option value="Chrome">
31
<option value="Opera"> <!DOCTYPE html> The dl, dd, and dt
<option value="Safari"> <html>
</datalist> <body> elements
<h1>The dl, dd, and dt elements</h1> These three elements are used to
create a description list:
<p>These three elements are used to
Definition and Usage
create a description list:</p> Coffee
Black hot drink
The <datalist> tag specifies a list of pre-defined options for an <dl> Milk
<input> element. <dt>Coffee</dt> White cold drink
<dd>Black hot drink</dd>
The <datalist> tag is used to provide an "autocomplete" feature <dt>Milk</dt>
for <input> elements. Users will see a drop-down list of pre- <dd>White cold drink</dd>
defined options as they input data. </dl>

The <datalist> element's id attribute must be equal to the </body>

<input> element's list attribute (this binds them together). </html>

Default CSS Settings

Most browsers will display the <datalist> element with the

following default values:

datalist {
display: none;
}
Example
HTML <dd> Tag
A description list, with terms and descriptions:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
32
Definition and Usage Example
A text with a deleted part, and a new, inserted part:
The <dd> tag is used to describe a term/name in a description list.
<p>My favorite color
The <dd> tag is used in conjunction with <dl> (defines a is <del>blue</del> <ins>red</ins>!</p>
description list) and <dt> (defines terms/names).
More "Try it Yourself" examples below.
Inside a <dd> tag you can put paragraphs, line breaks, images,
links, lists, etc.

.
Definition and Usage
Default CSS Settings
The <del> tag defines text that has been deleted from a
Most browsers will display the <dd> element with the following document. Browsers will usually strike a line through deleted text.
default values:
Tips and Notes

<!DOCTYPE html> The del element

<html>
<body>
HTML <details> Tag
My favorite color
<h1>The del element</h1> is blue red!
<!DOCTYPE html> The details element
<p>My favorite color is <html>
<del>blue</del> <ins>red</ins>! <body>
Epcot Center
</p>
<h1>The details element</h1>
</body> (click the button)
</html> <details>
<summary>Epcot
Center</summary>
33
<p>Epcot is a theme park at Walt details should be
Disney World Resort featuring
The details element visible (open) to
exciting attractions, international
pavilions, award-winning fireworks the user
and seasonal special events.</p> Epcot Center
</details>
Epcot is a theme park at Walt
</body> Disney World Resort featuring HTML <dfn> Tag
</html> exciting attractions, international
pavilions, award-winning fireworks
and seasonal special events.
<!DOCTYPE html> The dfn element
<html>
<body>
HTML is the standard
Example <h1>The dfn element</h1> markup language for
Specify details that the user can open and close on <p><dfn>HTML</dfn> is the creating web pages.
demand: standard markup language for
creating web pages.</p>

<details> </body>
<summary>Epcot Center</summary> </html>
<p>Epcot is a theme park at Walt Disney World Resort
featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p> Example
</details>
Mark up a term with <dfn>:
More "Try it Yourself" examples below.
<p><dfn>HTML</dfn> is the standard markup language for
Definition and Usage creating web pages.</p>

The <details> tag specifies additional details that the user can More "Try it Yourself" examples below.
open and close on demand.
Definition and Usage
The <details> tag is often used to create an interactive widget
that the user can open and close. By default, the widget is closed. The <dfn> tag stands for the "definition element", and it specifies
When open, it expands, and displays the content within. a term that is going to be defined within the content.
Any sort of content can be put inside the <details> tag. The nearest parent of the <dfn> tag must also contain the
definition/explanation for the term.
Tip: The <summary> tag is used in conjunction with <details> to
specify a visible heading for the details. The term inside the <dfn> tag can be any of the following:
Attributes

Attribute Value Description 1. Just as the content of the <dfn> element:

open open Specifies that the
HTML is the standard markup language for creating web pages.
34
Example Example

<p><dfn>HTML</dfn> is the standard markup language for <p><dfn id="html-def">HTML</dfn> is the standard markup
creating web pages.</p> language for creating web pages.</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>Learn <a href="#html-def">HTML</a> now.</p>

HTML is the standard markup language for creating web pages.

HTML is the standard markup language for creating
web pages.

This is some text...

2. Or, with the title attribute added:

This is some text...

Example
Learn HTML now.

<p><dfn title="HyperText Markup Language">HTML</dfn> is

the standard markup language for creating web pages.</p>

HTML <dialog> Tag

HTML is the standard markup language for creating web pages.. <!DOCTYPE html> The dialog element
<html>
<body>
This is some text.
<h1>The dialog
element</h1> This is some text.
3. Or, with an <abbr> tag inside the <dfn> element:
<p>This is some text.</p> This is an open dialog
This is some text. window
<p>This is some text.</p>
Example This is some text.
<dialog open>This is an
open dialog
window</dialog>
<p><dfn><abbr title="HyperText Markup
<p>This is some text.</p>
Language">HTML</abbr></dfn> is the standard markup
language for creating web pages.</p> <p>This is some text.</p>

</body>
</html>

4. Or, with the id attribute added. Then, whenever a term

is used, it can refer back to the definition with an <a> tag:
Example
35
Using the <dialog> element: <!DOCTYPE html>
<html>
<body>
 html
<ul style="line-height:80%">  xhtml
<dialog open>This is an open dialog window</dialog> <li>html</li>  css
<li>xhtml</li>
Definition and Usage <li>css</li>
</ul>
The <dialog> tag defines a dialog box or subwindow. </body>
</html>
The <dialog> element makes it easy to create popup dialogs and
modals on a web page.

Example
Attributes
Attribute Value Description Reduce line-height in a list (with CSS):
open open Specifies that the dialog element is
active and that the user can interact
with it <ul style="line-height:80%">
<li>html</li>
HTML <dir> Tag <li>xhtml</li>
<li>css</li>
Not Supported in HTML5. </ul>

The <dir> tag was used in HTML 4 to list directory titles. Tip: In our CSS tutorial you can find more details about styling
lists.
What to Use Instead?
Example

Use <ul> to create a directory list:

<ul>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</ul>
36
A <div> section in a document that is styled with CSS:

<html>
<head>
<style>
HTML <div> Tag .myDiv {
border: 5px outset red;
<!DOCTYPE html> background-color: lightblue;
<html> text-align: center;
<head> }
<style>
The div element
</style>
.myDiv {
border: 5px outset red; This is a heading in a div
</head>
background-color: lightblue; element <body>
text-align: center;
}
This is some text in a div element.
</style> <div class="myDiv">
</head> <h2>This is a heading in a div element</h2>
<body> This is some text outside the div
element. <p>This is some text in a div element.</p>
<h1>The div element</h1> </div>
<div class="myDiv">
<h2>This is a heading in a div </body>
element</h2> </html>
<p>This is some text in a div
element.</p>
</div> More "Try it Yourself" examples below.

<p>This is some text outside the

div element.</p>
Definition and Usage
</body> The <div> tag defines a division or a section in an HTML
</html>
document.

The <div> tag is used as a container for HTML elements - which is

then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and

after the <div> element.

Default CSS Settings

Most browsers will display the <div> element with the following
default values:
Example
37
Example Definition and Usage

The <dl> tag defines a description list.

div {
display: block; The <dl> tag is used in conjunction with <dt> (defines
} terms/names) and <dd> (describes each term/name).

Default CSS Settings

HTML <dl> Tag Most browsers will display the <dl> element with the following
default values:
<!DOCTYPE html> The dl, dd, and dt elements
<html>
<body>
These three elements are used Example
<h1>The dl, dd, and dt
elements</h1> to create a description list:
<p>These three elements are used dl {
to create a description list:</p> Coffee display: block;
<dl>
Black hot drink margin-top: 1em;
<dt>Coffee</dt> Milk margin-bottom: 1em;
<dd>Black hot drink</dd>
<dt>Milk</dt>
White cold drink margin-left: 0;
margin-right: 0;
<dd>White cold drink</dd>
</dl> }

</body>
</html> HTML <dt> Tag

Example

Example
A description list, with terms and descriptions:

A description list, with terms and descriptions:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dl>
<dt>Milk</dt>
<dt>Coffee</dt>
<dd>White cold drink</dd>
<dd>Black hot drink</dd>
</dl>
<dt>Milk</dt>
<dd>White cold drink</dd>
Definition and Usage
</dl>
The <dt> tag defines a term/name in a description list.
38
The <dt> tag is used in conjunction with <dl> (defines a The <em> tag is used to define emphasized text. The content
description list) and <dd> (describes each term/name). inside is typically displayed in italic.

Default CSS Settings A screen reader will pronounce the words in <em> with an
emphasis, using verbal stress.
Most browsers will display the <dt> element with the following
default values: Default CSS Settings

Most browsers will display the <em> element with the following
Example default values:

dt {
display: block; Example
}
em {
HTML <em> Tag font-style: italic;
}
<!DOCTYPE html>
<html> The em element
<body> HTML <embed> Tag
You have to hurry up! Example
<h1>The em element</h1>

<p>You <em>have</em> to We cannot live like this.

hurry up!</p>
An embedded image:
<p>We <em>cannot</em> live
like this.</p>

</body>
</html>
<embed type="image/jpg" src="pic_trulli.jpg" width="300" h
eight="200">

Example

Example : Mark up emphasized text in a document:

An embedded HTML page:
<p>You <em>have</em> to hurry up!</p>

<embed type="text/html" src="snippet.html" width="500" hei

<p>We <em>cannot</em> live like this.</p> ght="200">

Definition and Usage

Example
39
An embedded video: Attributes

<embed type="video/webm" src="video.mp4" width="400" heigh

Attribute Value Description
t="300">
height pixels Specifies the height
of the embedded
Definition and Usage content
src URL Specifies the
The <embed> tag defines a container for an external resource, such address of the
as a web page, a picture, a media player, or a plug-in application. external file to
embed
Warning! type media_type Specifies the media
type of the
embedded content
Most browsers no longer support Java Applets and Plug-ins.
width pixels Specifies the width
ActiveX controls are no longer supported in any browsers. of the embedded
The support for Shockwave Flash has also been turned off in content
modern browsers.

Suggestion Default CSS Settings

Most browsers will display the <embed> element with the following
To display a picture, it is better to use the <img> tag. default values:

embed:focus {
outline: none;
To display HTML, it is better to use the <iframe> tag.
}

To display video or audio, it is better to use the <video>

and <audio> tags.

HTML <fieldset> Tag

Example
40
Group related elements in a form: belongs to
name text Specifies a name
for the fieldset
<form action="/action_page.php"> More Examples
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
Example
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label> Use CSS to style <fieldset> and <legend>:
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br> <html>
<input type="submit" value="Submit"> <head>
</fieldset> <style>
</form> fieldset {
background-color: #eeeeee;
More "Try it Yourself" examples below. }

Definition and Usage legend {

background-color: gray;
The <fieldset> tag is used to group related elements in a form. color: white;
padding: 5px 10px;
The <fieldset> tag draws a box around the related elements. }

input {
margin: 5px;
}
</style>
Tips and Notes
</head>
<body>
Tip: The <legend> tag is used to define a caption for
the <fieldset> element.
<form action="/action_page.php">
Attributes <fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
Attribute Value Description <input type="text" id="fname" name="fname"><br><br>
disabled disabled Specifies that a <label for="lname">Last name:</label>
group of related <input type="text" id="lname" name="lname"><br><br>
form elements <label for="email">Email:</label>
should be disabled <input type="email" id="email" name="email"><br><br>
form form_id Specifies which <label for="birthday">Birthday:</label>
form the fieldset <input type="date" id="birthday" name="birthday"><br><br>
41
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>
Definition and Usage

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

The <figcaption> element can be placed as the first or last child

of the <figure> element.
Default CSS Settings
More Examples
Most browsers will display the <fieldset> element with the
following default values:
Example
fieldset {
display: block;
margin-left: 2px;
Use CSS to style <figure> and <figcaption>:
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em; <html>
padding-right: 0.75em; <head>
border: 2px groove (internal value); <style>
figure {
HTML <figcaption> Tag border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
Example
figcaption {
background-color: black;
Use a <figure> element to mark up a photo in a document, and a color: white;
<figcaption> element to define a caption for the photo: font-style: italic;
padding: 2px;
text-align: center;
}
<figure>
</style>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%
</head>
">
<body>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure>
42
<img src="pic_trulli.jpg" alt="Trulli" style="width:100% While the content of the <figure> element is related to the main
"> flow, its position is independent of the main flow, and if removed it
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption> should not affect the flow of the document.
</figure>
</body> Tip: The <figcaption> element is used to add a caption for
</html> the <figure> element.

Default CSS Settings

Most browsers will display the <figcaption> element with the More Examples
following default values:

figcaption { Example
display: block;
}
Use CSS to style <figure> and <figcaption>:
HTML <figure> Tag

<html>
Example
<head>
<style>
figure {
Use a <figure> element to mark up a photo in a document, and a border: 1px #cccccc solid;
<figcaption> element to define a caption for the photo: padding: 4px;
margin: auto;
}
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100% figcaption {
"> background-color: black;
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> color: white;
</figure> font-style: italic;
padding: 2px;
text-align: center;
More "Try it Yourself" examples below.
}
</style>
</head>
<body>

<figure>
Definition and Usage <img src="pic_trulli.jpg" alt="Trulli" style="width:100%
">
The <figure> tag specifies self-contained content, like <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
illustrations, diagrams, photos, code listings, etc. </figure>
43
<p style="color:red">This is a paragraph.</p>
<p style="color:blue">This is another paragraph.</p>
</body>
</html>

Default CSS Settings Example

Most browsers will display the <figure> element with the

following default values: Set the font of text (with CSS):

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

<p style="font-family:'Courier New'">This is another
paragraph.</p>
figure {
display: block;
margin-top: 1em; Example
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
} Set the size of text (with CSS):

<p style="font-size:30px">This is a paragraph.</p>

<p style="font-size:11px">This is another paragraph.</p>

In our CSS tutorial you can find more information about CSS
HTML <font> Tag Text and CSS Fonts.

Not Supported in HTML5.

HTML <footer> Tag
The <font> tag was used in HTML 4 to specify the font face, font
size, and color of text.
Example
What to Use Instead?

A footer section in a document:

Example

<footer>
Set the color of text (with CSS): <p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a
></p>
</footer>
44
More "Try it Yourself" examples below.
<footer>
Definition and Usage <p>Author: Hege Refsnes<br>
<a href="mailto:hege@example.com">hege@example.com</a></p>
The <footer> tag defines a footer for a document or section. </footer>

A <footer> element typically contains:

</body>
</html>
 authorship information
 copyright information Default CSS Settings
 contact information
 sitemap
Most browsers will display the <footer> element with the
 back to top links
following default values:
 related documents
footer {
You can have several <footer> elements in one document. display: block;
}
Tips and Notes

Tip: Contact information inside a <footer> element should go

inside an <address> tag. HTML <form> Tag
More Examples
\Example

Example
\An HTML form with two input fields and one submit button:

Use CSS to style <footer>:

<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<html> <input type="text" id="fname" name="fname"><br><br>
<head> <label for="lname">Last name:</label>
<style> <input type="text" id="lname" name="lname"><br><br>
footer { <input type="submit" value="Submit">
text-align: center; </form>
padding: 3px;
background-color: DarkSalmon; More "Try it Yourself" examples below.
color: white;
}
</style>
</head>
<body>
45
method="post")
method get Specifies the HTTP
post method to use
when sending form-
data
name text Specifies the name
Definition and Usage of a form
novalidate novalidate Specifies that the
The <form> tag is used to create an HTML form for user input. form should not be
validated when
The <form> element can contain one or more of the following form submitted
elements: rel external Specifies the
help relationship
 <input> license between a linked
 <textarea> next resource and the
 <button> nofollow current document
 <select> noopener
 <option> noreferrer
 <optgroup> opener
 <fieldset> prev
 <label> search
 <output> target _blank Specifies where to
_self display the
Attributes _parent response that is
_top received after
submitting the form
Attribute Value Description
accept-charset character_set Specifies the
character
encodings that are
to be used for the
form submission
action URL Specifies where to
send the form-data
when a form is
More Examples
submitted
autocomplete on Specifies whether a
off form should have
autocomplete on or Example
off
enctype application/x-www- Specifies how the
form-urlencoded form-data should An HTML form with checkboxes:
multipart/form-data be encoded when
text/plain submitting it to the
server (only for
46
<form action="/action_page.php" method="get"> margin-top: 0em;
<input type="checkbox" name="vehicle1" value="Bike"> }
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked HTML <frame> Tag
>
<label for="vehicle3"> I have a boat</label><br><br> Not Supported in HTML5.
<input type="submit" value="Submit">
</form> The <frame> tag was used in HTML 4 to define one particular
window (frame) within a <frameset>.

Example What to Use Instead?

An HTML form with radiobuttons: Example

<form action="/action_page.php" method="get"> Use the <iframe> tag to embed another document within the current
<input type="radio" id="html" name="fav_language" value= HTML document:
"HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value=" <iframe src="https://www.w3schools.com"></iframe>
CSS" checked="checked">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript"> <HTML <frameset> Tag
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit"> Not Supported in HTML5.
</form>
The <frameset> tag was used in HTML 4 to define a frameset.

Default CSS Settings What to Use Instead?

Most browsers will display the <form> element with the following
default values: Example

Example Use the <iframe> tag to embed another document within the current
HTML document:

form {
display: block;
<iframe src="https://www.w3schools.com"></iframe>
47
ame src="https://www.w3schools.com"></iframe> Set the alignment of headings (with CSS):

<h1 style="text-align:center">This is heading 1</h1>

<h2 style="text-align:left">This is heading 2</h2>
HTML <h1> to <h6> Tags <h3 style="text-align:right">This is heading 3</h3>
<h4 style="text-align:justify">This is heading 4</h4>
Example : The six different HTML headings:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4> Default CSS Settings
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> Most browsers will display the <h1> element with the following
default values:
More "Try it Yourself" examples below.

Definition and Usage Example

The <h1> to <h6> tags are used to define HTML headings.

h1 {
<h1> defines the most important heading. <h6> defines the least display: block;
important heading. font-size: 2em;
margin-top: 0.67em;
Note: Only use one <h1> per page - this should represent the margin-bottom: 0.67em;
main heading/subject for the whole page. Also, do not skip margin-left: 0;
heading levels - start with <h1>, then use <h2>, and so on. margin-right: 0;
font-weight: bold;
More Examples }

Most browsers will display the <h2> element with the following
Example default values:

Example
Set the background color and text color of headings (with CSS):

h2 {
<h1 style="background-color:DodgerBlue;">Hello World</h1> display: block;
<h2 style="color:Tomato;">Hello World</h2> font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
Example margin-left: 0;
margin-right: 0;
48
font-weight: bold; Most browsers will display the <h5> element with the following
} default values:

Most browsers will display the <h3> element with the following
default values: Example

h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
Example margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
h3 { font-weight: bold;
display: block; }
font-size: 1.17em;
margin-top: 1em; Most browsers will display the <h6> element with the following
margin-bottom: 1em; default values:
margin-left: 0;
margin-right: 0;
font-weight: bold; Example
}

Most browsers will display the <h4> element with the following h6 {
default values: display: block;
font-size: .67em;
margin-top: 2.33em;
Example margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
h4 { font-weight: bold;
display: block; }
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold; HTML <head> Tagg
}

Example
49
A simple HTML document, with a <title> tag inside the head section: The <base> tag (specifies a default URL and target for all links on a
page) goes inside <head>:

<!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<title>Title of the document</title> <base href="https://www.w3schools.com/" target="_blank">
</head> </head>
<body> <body>

<h1>This is a heading</h1> <img src="images/stickman.gif" width="24" height="39" alt="St

<p>This is a paragraph.</p> ickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html> </body>
</html>
More "Try it Yourself" examples below.

Definition and Usage

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

and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not

displayed. Example

Metadata typically define the document title, character set, styles,

scripts, and other meta information. The <style> tag (adds style information to a page) goes inside
<head>:
The following elements can go inside the <head> element:

 <title> (required in every HTML document) <html>

 <style> <head>
 <base> <style>
 <link> h1 {color:red;}
 <meta> p {color:blue;}
 <script> </style>
 <noscript> </head>
<body>

Example
<h1>A heading</h1>
<p>A paragraph.</p>
50
<article>
<header>
</body>
<h1>A heading here</h1>
</html>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
Example <p>Lorem Ipsum dolor set amet....</p>
</article>

The <link> tag (links to an external style sheet) goes inside <head>:

More "Try it Yourself" examples below.

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"
> Definition and Usage
</head>
<body> The <header> element represents a container for introductory content or a set of
navigational links.
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p> A <header> element typically contains:

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

</body>
 logo or icon
</html>
 authorship information
Default CSS Settings
Note: You can have several <header> elements in one HTML document.
Most browsers will display the <head> element with the following However, <header> cannot be placed within a <footer>, <address> or
default values: another <header> element.

head {
display: none; Example : A page header:
}

HTML <header> Tag <header>

<h1>Main page heading here</h1>
<p>Posted by John Doe</p>
</header>
Example
Default CSS Settings

A header for an <article>: Most browsers will display the <header> element with the
following default values:
51
header { More "Try it Yourself" examples below.
display: block;
} Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.
HTML <hr> Tag
Example:

Align a <hr> element (with CSS):

Example <hr style="width:50%;text-align:left;margin-left:0">

Example
Use the <hr> tag to define thematic changes in the content:

A noshaded <hr> (with CSS):

<h1>The Main Languages of the Web</h1>
hr style="height:2px;border-width:0;color:gray;background-
<p>HTML is the standard markup language for creating Web color:gray">
pages. HTML describes the structure of a Web page, and
consists of a series of elements. HTML elements tell the
Example
browser how to display the content.</p>

Set the height of a <hr> element (with CSS):

<hr>

<p>CSS is a language that describes how HTML elements are to <hr style="height:30px">
be displayed on screen, paper, or in other media. CSS saves a
lot of work, because it can control the layout of multiple
web pages all at once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Example

Web. JavaScript can change HTML content and attribute values.
JavaScript can change CSS. JavaScript can hide and show HTML Set the width of a <hr> element (with CSS):
elements, and more.</p>
<hr style="width:50%">

Try it Yourself »
52
Default CSS Settings The <html> tag is the container for all other HTML elements
(except for the <!DOCTYPE> tag).
Most browsers will display the <hr> element with the following default values:
Note: You should always include the lang attribute inside
Example the <html> tag, to declare the language of the Web page. This is
meant to assist search engines and browsers.
hr {
display: block; Attributes
margin-top: 0.5em;
margin-bottom: 0.5em; Attribute Value Description Attribute
margin-left: auto; xmlns http:// Specifies the XML xmlns
margin-right: auto; www.w3.org/1999/ namespace attribute (If
border-style: inset; xhtml you need your content to
border-width: 1px; conform to XHTML)
}
Default CSS Settings
HTML <html> Tag Most browsers will display the <html> element with the following
default values:

Example html {
display: block;
}
A simple HTML document:
html:focus {
outline: none;
<!DOCTYPE html>
<html lang="en"> HTML <i> Tag
<head>
<title>Title of the document</title>
</head>
<body>
Example
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Mark up text that is set off from the normal prose in a document:
</body>
</html>
<p><i>Lorem ipsum</i> is the most popular filler text in
Definition and Usage history.</p>

The <html> tag represents the root of an HTML document.

<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April
15, 1912 after striking an iceberg.</p>
53
Definition and Usage

The <i> tag defines a part of text in an alternate voice or mood.

Definition and Usage
The content inside is typically displayed in italic.
The <iframe> tag specifies an inline frame.
The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc. An inline frame is used to embed another document within the
current HTML document.
Use the <i> element only when there is not a more appropriate
semantic element, such as: Tip: Use CSS to style the <iframe> (see example below).

Tip: It is a good practice to always include a title attribute for

 <em> (emphasized text)
the <iframe>. This is used by screen readers to read out what the
 <strong> (important text)
content of the <iframe> is.
 <mark> (marked/highlighted text)
 <cite> (the title of a work)
 <dfn> (a definition term) Attributes

Default CSS Settings Attribute Value Description

allow Specifies a feature
Most browsers will display the <i> element with the following policy for the
default values: <iframe>
allowfullscreen true Set to true if the
false <iframe> can
Example activate fullscreen
mode by calling the
requestFullscreen()
i{ method
font-style: italic; allowpaymentreques true Set to true if a
} t false cross-origin
<iframe> should
be allowed to
invoke the
HTML <iframe> Tag Payment Request
API
height pixels Specifies the height
of an <iframe>.
Example Default height is
150 pixels
loading eager Specifies whether a
An inline frame is marked up as follows: lazy browser should
load an iframe
immediately or to
defer loading of
<iframe src="https://www.w3schools.com" title="W3Schools Free
iframes until some
Online Web Tutorials"></iframe>
54
conditions are met
name text Specifies the name <iframe src="/default.asp" width="100%" height="300" style="b
of an <iframe> order:none;">
referrerpolicy no-referrer Specifies which </iframe>
no-referrer-when- referrer information
downgrade to send when
origin fetching the iframe
origin-when-
cross-origin Default CSS Settings
same-origin
strict-origin-when- Most browsers will display the <iframe> element with the
cross-origin following default values:
unsafe-url
sandbox allow-forms Enables an extra iframe:focus {
allow-pointer-lock set of restrictions outline: none;
allow-popups for the content in }
allow-same-origin an <iframe>
allow-scripts iframe[seamless] {
allow-top- display: block;
navigation
src URL Specifies the
address of the }
document to
embed in the
<iframe> HTML <img> Tag
srcdoc HTML_code Specifies the HTML
content of the page
to show in the
<iframe> Example
width pixels Specifies the width
of an <iframe>.
Default width is How to insert an image:
300 pixels

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

Example jacket" width="500" height="600">

More "Try it Yourself" examples below.

Add and remove iframe borders (with CSS):
Definition and Usage

Example
Attributes

Align image (with CSS):

Attribute Value Description
alt text Specifies an alternate
text for an image
crossorigin anonymous Allow images from <img src="smiley.gif" alt="Smiley
use-credentials third-party sites that face" width="42" height="42" style="vertical-
allow cross-origin align:bottom">
access to be used <img src="smiley.gif" alt="Smiley
with canvas
face" width="42" height="42" style="vertical-
height pixels Specifies the height
of an image
align:middle">
ismap ismap Specifies an image as <img src="smiley.gif" alt="Smiley
a server-side image face" width="42" height="42" style="vertical-align:top">
map <img src="smiley.gif" alt="Smiley
loading eager Specifies whether a face" width="42" height="42" style="float:right">
lazy browser should load <img src="smiley.gif" alt="Smiley
an image face" width="42" height="42" style="float:left">
immediately or to
defer loading of
images until some
conditions are met Example
longdesc URL Specifies a URL to a
detailed description
of an image
Add image border (with CSS):
referrerpolicy no-referrer Specifies which
no-referrer-when- referrer information
downgrade to use when fetching
56
<img src="smiley.gif" alt="Smiley How to add a hyperlink to an image:
face" width="42" height="42" style="border:5px solid
black">
<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" heig
Example ht="132">
</a>

Add left and right margins to image (with CSS):

Example

<img src="smiley.gif" alt="Smiley

face" width="42" height="42" style="vertical- How to create an image map, with clickable regions. Each region is a
align:middle;margin:0px 50px"> hyperlink:

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

width="400" height="379">

Add top and bottom margins to image (with CSS): <map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<img src="smiley.gif" alt="Smiley <area shape="rect" coords="290,172,333,250" alt="Phone"
face" width="42" height="42" style="vertical- href="phone.htm">
align:middle;margin:50px 0px"> <area shape="circle" coords="337,300,44" alt="Cup of
coffee" href="coffee.htm">
</map>
Example

How to insert images from another folder or from another web site: Default CSS Settings

Most browsers will display the <img> element with the following
default values:
<img src="/images/stickman.gif" alt="Stickman" width="24" hei
ght="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lam
p" width="32" height="32">

Example
57
Example  <input type="datetime-local">
 <input type="email">
 <input type="file">
img {  <input type="hidden">
display: inline-block;  <input type="image">
}  <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
HTML <input> Tag  <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
Example
 <input type="tel">
 <input type="text"> (default value)
 <input type="time">
An HTML form with three input fields; two text fields and one submit  <input type="url">
button:  <input type="week">

Tips and Notes

<form action="/action_page.php">
<label for="fname">First name:</label> Tip: Always use the <label> tag to define labels for <input
<input type="text" id="fname" name="fname"><br><br> type="text">, <input type="checkbox">, <input
<label for="lname">Last name:</label> type="radio">, <input type="file">, and <input
<input type="text" id="lname" name="lname"><br><br> type="password">.
<input type="submit" value="Submit">
</form

Definition and Usage

The <input> tag specifies an input field where the user can enter
data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending

on the type attribute.

The different input types are as follows: Attributes

Attribute Value Description
 <input type="button"> accept file_extension Specifies a filter for
 <input type="checkbox"> audio/* what file types the
 <input type="color"> video/* user can pick from
 <input type="date"> image/* the file input dialog
58
media_type box (only for type="submit" and
type="file") type="image")
alt text Specifies an formmethod get Defines the HTTP
alternate text for post method for sending
images (only for data to the action
type="image") URL (for
autocomplete on Specifies whether type="submit" and
off an <input> type="image")
element should formnovalidate formnovalidate Defines that form
have autocomplete elements should
enabled not be validated
autofocus autofocus Specifies that an when submitted
<input> element formtarget _blank Specifies where to
should _self display the
automatically get _parent response that is
focus when the _top received after
page loads framename submitting the form
checked checked Specifies that an (for type="submit"
<input> element and type="image")
should be pre- height pixels Specifies the height
selected when the of an <input>
page loads (for element (only for
type="checkbox" type="image")
or type="radio") list datalist_id Refers to a
dirname inputname.dir Specifies that the <datalist> element
text direction will that contains pre-
be submitted defined options for
disabled disabled Specifies that an an <input>
<input> element element
should be disabled max number Specifies the
form form_id Specifies the form date maximum value for
the <input> an <input>
element belongs to element
formaction URL Specifies the URL of maxlength number Specifies the
the file that will maximum number
process the input of characters
control when the allowed in an
form is submitted <input> element
(for type="submit" min number Specifies a
and type="image") date minimum value for
formenctype application/x-www- Specifies how the an <input>
form-urlencoded form-data should element
multipart/form- be encoded when minlength number Specifies the
data submitting it to the minimum number
text/plain server (for of characters
59
required in an file
<input> element hidden
multiple multiple Specifies that a image
user can enter month
more than one number
value in an password
<input> element radio
name text Specifies the name range
of an <input> reset
element search
pattern regexp Specifies a regular submit
expression that an tel
<input> element's text
value is checked time
against url
placeholder text Specifies a short week
hint that describes value text Specifies the value
the expected value of an <input>
of an <input> element
element
readonly readonly Specifies that an width pixels Specifies the width
input field is read- of an <input>
only element (only for
required required Specifies that an type="image")
input field must be
filled out before Default CSS Settings
submitting the form
size number Specifies the width, None.
in characters, of an
<input> element HTML <ins> Tag
src URL Specifies the URL of
the image to use as
a submit button
Example
(only for
type="image")
step number Specifies the
any interval between A text with a deleted part, and a new, inserted part:
legal numbers in an
input field
type button Specifies the type <p>My favorite color
checkbox <input> element to is <del>blue</del> <ins>red</ins>!</p>
color display
date
datetime-local
email Definition and Usage
60
The <ins> tag defines a text that has been inserted into a Most browsers will display the <ins> element with the following
document. Browsers will usually underline inserted text. default values:

Example
Define some text as keyboard input in a document:

Use CSS to style <del> and <ins>:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text
(Windows).</p>
<html>
<head> <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac
<style> OS).</p>
del {background-color: tomato;}
ins {background-color: yellow;} Definition and Usage
</style>
</head> The <kbd> tag is used to define keyboard input. The content inside
<body> is displayed in the browser's default monospace font.

<p>My favorite color Tip: This tag is not deprecated. However, it is possible to achieve
is <del>blue</del> <ins>red</ins>!</p> richer effect by using CSS (see example below).

Also look at:

</body>
</html>

Default CSS Settings

Tag Description
61
<code> Defines a piece of computer Example
code
<samp> Defines sample output from a
computer program kbd {
<var> Defines a variable font-family: monospace;
<pre> Defines preformatted text }

Example
HTML <label> Tag

Use CSS to style the <kbd> element:

Example
<html>
<head>
<style> Three radio buttons with labels:
kbd {
border-radius: 2px;
padding: 2px;
border: 1px solid black; <form action="/action_page.php">
} <input type="radio" id="html" name="fav_language" value="HT
</style> ML">
</head> <label for="html">HTML</label><br>
<body> <input type="radio" id="css" name="fav_language" value="CSS
">
<label for="css">CSS</label><br>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text <input type="radio" id="javascript" name="fav_language" val
(Windows).</p> ue="JavaScript">
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac <label for="javascript">JavaScript</label><br><br>
OS).</p> <input type="submit" value="Submit">
</form>
</body>
</html> Definition and Usage

Proper use of labels with the elements above will benefit:

HTML <legend> Tag
 Screen reader users (will read out loud the label, when the
user is focused on the element)
 Users who have difficulty clicking on very small regions (such as
checkboxes) - because when a user clicks the text within
Example
the <label> element, it toggles the input (this increases the hit area).

Group related elements in a form:

Tips and Notes

Tip: The for attribute of <label> must be equal to the id attribute of the related <form action="/action_page.php">
element to bind them together. A label can also be bound to an element by placing <fieldset>
the element inside the <label> element. <legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
Attributes <input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
Attribut Value Description <input type="email" id="email" name="email"><br><br>
e <label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><
for element_ Specifies the id of the form
br>
id element the label should be bound
<input type="submit" value="Submit">
to
</fieldset>
form form_id Specifies which form the label </form>
belongs to
Definition and Usage
63
The <legend> tag defines a caption for the <fieldset> element. Attributes

Attribute Value Description

HTML <li> Tag value number Only for <ol> lists.
Specifies the start
value of a list item.
The following list
items will
Example increment from
that number

One ordered (<ol>) and one unordered (<ul>) HTML list:

Example

<ol>
Use of the value attribute in an ordered list:
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> <ol>
<li value="100">Coffee</li>
<li>Tea</li>
<ul>
<li>Milk</li>
<li>Coffee</li>
<li>Water</li>
<li>Tea</li>
<li>Juice</li>
<li>Milk</li>
<li>Beer</li>
</ul>
</ol>

Definition and Usage

Example
The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists

Set different list style types (with CSS):
(<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with
bullet points. <ol>
<li>Coffee</li>
In <ol>, the list items will usually be displayed with numbers or <li style="list-style-type:lower-alpha">Tea</li>
letters. <li>Milk</li>
</ol>
Tip: Use CSS to style lists.
<ul>
<li>Coffee</li>
64
<li style="list-style-type:square">Tea</li> <li>Milk</li>
<li>Milk</li> </ul>
</ul>
Default CSS Settings

Example Most browsers will display the <li> element with the following
default values:

li {
Create a list inside a list (a nested list):
display: list-item;
}

<ul>
<li>Coffee</li> HTML <link> Tag
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li> Example
<li>Milk</li>
</ul>
Link to an external style sheet:

Example
<head>
<link rel="stylesheet" href="styles.css">
Create a more complex nested list: </head>

Definition and Usage

<ul>
The <link> tag defines the relationship between the current
<li>Coffee</li>
document and an external resource.
<li>Tea
<ul>
<li>Black tea</li> The <link> tag is most often used to link to external style sheets
<li>Green tea or to add a favicon to your website.
<ul>
<li>China</li> The <link> element is an empty element, it contains attributes
<li>Africa</li> only.
</ul>
</li>
</ul>
</li> Attributes
Attribute Value Description
65
crossorigin anonymous Specifies how the type of the linked
use-credentials element handles document
cross-origin
requests Default CSS Settings
href URL Specifies the
location of the Most browsers will display the <link> element with the following
linked document default values:
hreflang language_code Specifies the
language of the link {
text in the linked display: none;
document }
media media_query Specifies on what
device the linked
document will be
displayed HTML <main> Tag
referrerpolicy no-referrer Specifies which
no-referrer-when- referrer to use
downgrade when fetching the
origin resource
origin-when-cross- Example
origin
unsafe-url
rel alternate Required. Specifies Specify the main content of the document:
author the relationship
dns-prefetch between the
help current document
icon and the linked <main>
license document <h1>Most Popular Browsers</h1>
next <p>Chrome, Firefox, and Edge are the most used browsers
pingback today.</p>
preconnect
prefetch <article>
preload <h2>Google Chrome</h2>
prerender <p>Google Chrome is a web browser developed by Google,
prev released in 2008. Chrome is the world's most popular web
search browser today!</p>
stylesheet </article>
sizes HeightxWidth Specifies the size
any of the linked
resource. Only for <article>
rel="icon" <h2>Mozilla Firefox</h2>
title Defines a preferred <p>Mozilla Firefox is an open-source web browser
or an alternate developed by Mozilla. Firefox has been the second most
stylesheet popular web browser since January, 2018.</p>
type media_type Specifies the media </article>
66

.browser {
<article>
background: white;
<h2>Microsoft Edge</h2>
}
<p>Microsoft Edge is a web browser developed by
Microsoft, released in 2015. Microsoft Edge replaced Internet
.browser > h2, p {
Explorer.</p>
margin: 4px;
</article>
font-size: 90%;
</main>
}
</style>
Definition and Usage
</head>
<body>
The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the <main>
document. It should not contain any content that is repeated <h1>Most Popular Browsers</h1>
across documents such as sidebars, navigation links, copyright <p>Chrome, Firefox, and Edge are the most used browsers
information, site logos, and search forms. today.</p>
<article class="browser">
Note: There must not be more than one <main> element in a <h2>Google Chrome</h2>
document. The <main> element must NOT be a descendant of an <p>Google Chrome is a web browser developed by Google,
<article>, <aside>, <footer>, <header>, or <nav> element. released in 2008. Chrome is the world's most popular web
browser today!</p>
More Examples </article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser
Example
developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
Use CSS to style the <main> element: <article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by
Microsoft, released in 2015. Microsoft Edge replaced
<html>
Internet Explorer.</p>
<head>
</article>
<style>
</main>
main {
margin: 0;
padding: 5px; </body>
background-color: lightgray; </html>
}

main > h1, p, .browser {

margin: 10px; HTML <map> Tag
padding: 5px;
}
67
Example <img src="planets.gif" width="145" height="126" alt="Plane
ts"
usemap="#planetmap">
An image map, with clickable areas:
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" al
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" t="Sun">
width="400" height="379"> <area shape="circle" coords="90,58,3" href="mercur.htm"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm"
<map name="workmap"> alt="Venus">
<area shape="rect" coords="34,44,270,350" alt="Computer" </map>
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" Default CSS Settings
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of Most browsers will display the <map> element with the following default values:
coffee" href="coffee.htm">
</map> map {
display: inline;
Definition and Usage }

The <map> tag is used to define an image map. An image map is an image with
clickable areas.
HTML <mark> Tag
The required name attribute of the <map> element is associated with the <img>'s
usemap attribute and creates a relationship between the image and the map.
Example
The <map> element contains a number of <area> elements, that defines the
clickable areas in the image map.

Attributes Highlight parts of a text:

Attribute Value Description

name mapname Required. Specifies <p>Do not forget to buy <mark>milk</mark> today.</p>
the name of the
image map Definition and Usage

The <mark> tag defines text that should be marked or highlighted.

Example

Another image map, with clickable areas: Default CSS Settings

Most browsers will display the <mark> element with the following default values:
68
Example Metadata will not be displayed on the page, but is machine
parsable.

mark { Metadata is used by browsers (how to display content or reload

background-color: yellow; page), search engines (keywords), and other web services.
color: black;
} There is a method to let web designers take control over the
viewport (the user's visible area of a web page), through
the <meta> tag (See "Setting The Viewport" example below).

HTML <meta> Tag Attributes

Example Attribute Value Description
charset character_set Specifies the
character encoding
Describe metadata within an HTML document: for the HTML
document
content text Specifies the value
associated with the
<head> http-equiv or name
<meta charset="UTF-8"> attribute
<meta name="description" content="Free Web tutorials"> http-equiv content-security- Provides an HTTP
<meta name="keywords" content="HTML, CSS, JavaScript"> policy header for the
<meta name="author" content="John Doe"> content-type information/value of
<meta name="viewport" content="width=device-width, default-style the content
initial-scale=1.0"> refresh attribute
</head>
name application-name Specifies a name
author for the metadata
description
generator
keywords
viewport

More Examples

Definition and Usage Define keywords for search engines:

The <meta> tag defines metadata about an HTML document.

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

Define the author of a page: Tip: If you are browsing this page with a phone or a tablet, you can

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

click on the two links below to see the difference.
Refresh document every 30 seconds:

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

Setting the viewport to make your website look good on all

devices:

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

initial-scale=1.0">

Setting the Viewport Without the viewport meta tag

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.

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

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

initial-scale=1.0">

This gives the browser instructions on how to control the page's With the viewport meta tag
dimensions and scaling.

The width=device-width part sets the width of the page to follow

the screen-width of the device (which will vary depending on the Default CSS Settings
device).
None.
The initial-scale=1.0 part sets the initial zoom level when the
page is first loaded by the browser.
70
Attributes
Attribute Value Description
form form_id Specifies which
form the <meter>
element belongs to
high number Specifies the range
HTML <meter> Tag that is considered
to be a high value
low number Specifies the range
that is considered
to be a low value
Example max number Specifies the
maximum value of
the range
Use the meter element to display a scalar value within a given range (a min number Specifies the
gauge): minimum value of
the range. Default
value is 0
optimum number Specifies what
<label for="disk_c">Disk usage C:</label> value is the optimal
<meter id="disk_c" value="2" min="0" max="10">2 out of value for the gauge
10</meter><br> value number Required. Specifies
the current value of
<label for="disk_d">Disk usage D:</label> the gauge
<meter id="disk_d" value="0.6">60%</meter>
Default CSS Settings

Try it Yourself » None.

Definition and Usage

The <meter> tag defines a scalar measurement within a known

range, or a fractional value. This is also known as a gauge. HTML <nav> Tag
Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress Example
(as in a progress bar). For progress bars, use the <progress> tag.

Tip: Always add the <label> tag for best accessibility practices! A set of navigation links:
71
<nav> <iframe src="https://www.w3schools.com"></iframe>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> | HTML <noscript> Tag
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

Definition and Usage Example

The <nav> tag defines a set of navigation links.

Use of the <noscript> tag:
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.
<script>
Browsers, such as screen readers for disabled users, can use this element to
document.write("Hello World!")
determine whether to omit the initial rendering of this content.
</script>
<noscript>Your browser does not support
Default CSS Settings
JavaScript!</noscript>
Most browsers will display the <nav> element with the following default values: Definition and Usage
nav { The <noscript> tag defines an alternate content to be displayed
display: block; to users that have disabled scripts in their browser or have a
} browser that doesn't support script.

The <noscript> element can be used in both <head> and

HTML <noframes> Tag <body>. When used inside <head>, the <noscript> element
could only contain <link>, <style>, and <meta> elements.
Not Supported in HTML5.
Default CSS Settings
The <noframes> tag was used in HTML 4 to act as a fallback tag
for browsers that did not support frames. None.

What to Use Instead?

HTML <object> Tag

Example

Example
Use the <iframe> tag to embed another document within the current
HTML document:
An embedded image:
72
<object data="pic_trulli.jpg" width="300" height="200"></ The <object> tag was originally designed to embed browser Plug-
object> ins.

Plug-ins are computer programs that extend the standard

Example functionality of the browser.

Plug-ins have been used for many different purposes:

An embedded HTML page:
 Run Java applets
 Run ActiveX controls
 Display Flash movies
<object data="snippet.html" width="500" height="200"></  Display maps
object>  Scan for viruses
 Verify a bank id

Example
Warning !

An embedded video:
Most browsers no longer support Java Applets and Plug-ins.

<object data="video.mp4" width="400" height="300"></object>

ActiveX controls are no longer supported in any browser.
Definition and Usage

The <object> tag defines a container for an external resource.

The support for Shockwave Flash has also been turned off in modern
The external resource can be a web page, a picture, a media browsers.
player, or a plug-in application.

Attributes
To embed a picture, it is better to use the <img> tag.
Attribute Value Description
data URL Specifies the URL
of the resource to
To embed HTML, it is better to use the <iframe> tag. be used by the
object
form form_id Specifies which
To embed video or audio, it is better to use the <video> and <audio> tags. form the object
belongs to
height pixels Specifies the
height of the object
Plug-ins name name Specifies a name
for the object
73
type media_type Specifies the </ol>
media type of data
specified in the
<ol start="50">
data attribute
<li>Coffee</li>
typemustmatch true/false Specifies whether <li>Tea</li>
the type attribute <li>Milk</li>
and the actual </ol>
content of the
resource must
Definition and Usage
match to be
displayed
The <ol> tag defines an ordered list. An ordered list can be numerical or
usemap #mapname Specifies the name
alphabetical.
of a client-side
image map to be
used with the The <li> tag is used to define each list item.
object
width pixels Specifies the width Tip: Use CSS to style lists.
of the object
Tip: For unordered list, use the <ul> tag.
Default CSS Settings

Most browsers will display the <object> element with the following default
values: Attributes

object:focus { Attribute Value Description

outline: none; reversed reversed Specifies that the
} list order should be
reversed (9,8,7...)
start number Specifies the start
value of an ordered
HTML <ol> Tag list
type 1 Specifies the kind
A of marker to use in
a the list
I
Example i

Two different ordered lists (the first list starts at 1, and the second starts at 50):
Example

<ol>
<li>Coffee</li>
Set different list types (with CSS):
<li>Tea</li>
<li>Milk</li>
74
<ol style="list-style-type:upper-roman"> Reduce and expand line-height in lists (with CSS):
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<ol style="line-height:80%">
</ol>
<li>Coffee</li>
<li>Tea</li>
<ol style="list-style-type:lower-alpha"> <li>Milk</li>
<li>Coffee</li> </ol>
<li>Tea</li>
<li>Milk</li>
<ol style="line-height:180%">
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Example </ol>

Display all the different list types available with CSS:

Default CSS Settings

Example
75
Most browsers will display the <ol> element with the following default values: The <optgroup> tag is used to group related options in a <select> element (drop-
down list).

Example If you have a long list of options, groups of related options are easier to handle for a
user.

ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0; Attributes
padding-left: 40px;
}
Attribute Value Description
disabled disabled Specifies that an
option-group
should be disabled
HTML <optgroup> Tag label text Specifies a label
for an option-group
Default CSS Settings

None.
Example

Group related options with <optgroup> tags:

HTML <option> Tag
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars"> Example
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars"> A drop-down list with four options:
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup> <label for="cars">Choose a car:</label>
</select>

Definition and Usage <select id="cars">

<option value="volvo">Volvo</option>
76
<option value="saab">Saab</option> Example
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Use of <option> in a <datalist> element:
More "Try it Yourself" examples below.

Definition and Usage <label for="browser">Choose your browser from the

list:</label>
The <option> tag defines an option in a select list. <input list="browsers" name="browser" id="browser">

<option> elements go inside a <select>, <optgroup>, or <datalist> element. <datalist id="browsers">

<option value="Edge">
Note: The <option> tag can be used without any attributes, but you usually need <option value="Firefox">
the value attribute, which indicates what is sent to the server on form submission. <option value="Chrome">
<option value="Opera">
Tip: If you have a long list of options, you can group related options within <option value="Safari">
the <optgroup> tag. </datalist>

Attributes
Example
Attribute Value Description
disabled disabled Specifies that an
option should be Use of <option> in <optgroup> elements:
disabled
label text Specifies a shorter
label for an option <label for="cars">Choose a car:</label>
selected selected Specifies that an <select id="cars">
option should be <optgroup label="Swedish Cars">
pre-selected when <option value="volvo">Volvo</option>
the page loads <option value="saab">Saab</option>
value text Specifies the value </optgroup>
to be sent to a <optgroup label="German Cars">
server <option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Default CSS Settings

None.

HTML <output> Tag

77
Most browsers will display the <output> element with the
following default values:

Example output {
display: inline;
}
Perform a calculation and show the result in an <output> element:
HTML <p> Tag
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
Example
=<output name="x" for="a b"></output>
</form>

Definition and Usage A paragraph is marked up as follows:

The <output> tag is used to represent the result of a calculation

(like one performed by a script). <p>This is some text in a paragraph.</p>

Attributes
Attribute Value Description Attribute
for element_id Specifies the for
relationship
between the
result of the Definition and Usage
calculation,
and the The <p> tag defines a paragraph.
elements
used in the Browsers automatically add a single blank line before and after
calculation each <p> element.
form form_id Specifies form
which form Tip: Use CSS to style paragraphs.
the output
element
belongs to
Example
name name Specifies a name
name for the
output
element Align text in a paragraph (with CSS):

Default CSS Settings

78
<p style="text-align:right">This is some text in a <p>
paragraph.</p> This paragraph
contains a lot of lines
in the source code,
Example but the browser
ignores it.
</p>
Style paragraphs with CSS:

<html>
<head>
<style>
p {
color: navy;
text-indent: 30px;
text-transform: uppercase; Example
}
</style>

</head> Poem problems in HTML:

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing <p>

elit, sed do eiusmod tempor incididunt ut labore et dolore My Bonnie lies over the ocean.
magna aliqua. Ut enim ad minim veniam, quis nostrud My Bonnie lies over the sea.
exercitation ullamco laboris nisi ut aliquip ex ea commodo My Bonnie lies over the ocean.
consequat. Duis aute irure dolor in reprehenderit in Oh, bring back my Bonnie to me.
voluptate velit esse cillum dolore eu fugiat nulla </p>
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est Default CSS Settings
laborum.</p>
Most browsers will display the <p> element with the following
default values:
</body>
</html>
Example

Example
p {
display: block;
More on paragraphs: margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
79
margin-right: 0; param {
} display: none;
}

HTML <picture> Tag

HTML <param> Tag Example

How to use the <picture> tag:

Example

<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.
Set the "autoplay" parameter to "true", so the sound will start playing as jpg">
soon as the page loads: <source media="(min-width:465px)" srcset="img_white_flower.
jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="widt
<object data="horse.wav"> h:auto;">
<param name="autoplay" value="true"> </picture>
</object>
Definition and Usage
Definition and Usage
The <picture> tag gives web developers more flexibility in
The <param> tag is used to define parameters for specifying image resources.
an <object> element.
The most common use of the <picture> element will be for art
Attributes direction in responsive designs. Instead of having one image that
is scaled up or down based on the viewport width, multiple images
Attribute Value Description can be designed to more nicely fill the browser viewport.
name name Specifies the name
of a parameter The <picture> element contains two tags: one or
value value Specifies the value more <source> tags and one <img> tag.
of the parameter
The browser will look for the first <source> element where the
Default CSS Settings media query matches the current viewport width, and then it will
display the proper image (specified in the srcset attribute). The
Most browsers will display the <param> element with the following <img> element is required as the last child of
default values:
80
the <picture> element, as a fallback option if none of the source computer code
tags matches. <samp> Defines sample <samp>
output from a
Tip: The <picture> element works "similar" to <video> and computer program
<audio>. You set up different sources, and the first source that <kbd> Defines keyboard <kbd>
fits the preferences is the one being used. input
<var> Defines a variable <var>
The <picture> tag also supports the Event Attributes in HTML.
Example

How to create a pre-formatted text with a fixed

HTML <pre> Tag width (with CSS):
Example
<div style="width:200px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much
Performatted text: space as specified.</pre>
</div>
<pre>
Text in a pre element
is displayed in a fixed-width Try it Yourself »
font, and it preserves
both spaces and
line breaks
</pre>
Default CSS Settings
Try it Yourself »
Most browsers will display the <pre> element with the following default
values:

Example

pre {
Definition and Usage display: block;
The <pre> tag defines preformatted text.Text in font-family: monospace;
white-space: pre;
a <pre> element is displayed in a fixed-width font, and the text
margin: 1em 0;
preserves both spaces and line breaks. The text will be displayed
}
exactly as written in the HTML source code.

Also look at: Try iHTML <progress> Tag

Tag Description Tag
<code> Defines a piece of <code> Example
81
Show a progress bar: Mark up a short quotation:

<label for="file">Downloading progress:</label> <p>WWF's goal is to:

<progress id="file" value="32" max="100"> 32% </progress> <q>Build a future where people live in harmony with
nature.</q>
Definition and Usage We hope they succeed.</p>

The <progress> tag represents the completion progress of a task. Definition and Usage

Tip: Always add the <label> tag for best accessibility practices! The <q> tag defines a short quotation.

Tips and Notes Browsers normally insert quotation marks around the quotation.

Tip: Use the <progress> tag in conjunction with JavaScript to Tip: Use <blockquote> for long quotations.
display the progress of a task.
Attributes
Note: The <progress> tag is not suitable for representing a gauge
(e.g. disk space usage or relevance of a query result). To Attribute Value Description
represent a gauge, use the <meter> tag instead. cite URL Specifies the
source URL of the
quote
Attributes

Attribute Value Description More Examples

max number Specifies how
much work the task
requires in total. Example
Default value is 1
value number Specifies how
much of the task Use CSS to style the <q> element:
has been
completed

<html>
<head>
Default CSS Settings
<style>
q {
None.
color: gray;
font-style: italic;
t Yourself » HTML <q> Tag }
</style>
</head>
<body>
Example
82
A ruby annotation:
<p>WWF's goal is to:
<q>Build a future where people live in harmony with
nature.</q> <ruby>
We hope they succeed.</p> 漢 <rp>(</rp><rt>ˋ</rt><rp>)</rp>
</ruby>
</body>
Definition and Usage
</html>
The <rp> tag can be used to provide parentheses around a ruby
Default CSS Settings
text, to be shown by browsers that do not support ruby
annotations.
Most browsers will display the <q> element with the following
default values:
Use <rp> together with <ruby> and <rt>: The <ruby> element
consists of one or more characters that needs an
explanation/pronunciation, and an <rt> element that gives that
Example information, and an optional <rp> element that defines what to
show for browsers that not support ruby annotations.

q { Default CSS Settings

display: inline;
} None.

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}

HTML <rt> Tag

HTML <rp> Tag Example

A ruby annotation:
Example
83
<ruby> A ruby annotation is a small extra text, attached to the main text
漢 <rt> ˋ </rt> to indicate the pronunciation or meaning of the corresponding
</ruby> characters. This kind of annotation is often used in Japanese
publications.
Definition and Usage
Use <ruby> together with <rt> and <rp>: The <ruby> element
The <rt> tag defines an explanation or pronunciation of consists of one or more characters that needs an
characters (for East Asian typography) in a ruby annotation. explanation/pronunciation, and an <rt> element that gives that
information, and an optional <rp> element that defines what to
Use <rt> together with <ruby> and <rp>: The <ruby> element show for browsers that do not support ruby annotations.
consists of one or more characters that needs an
explanation/pronunciation, and an <rt> element that gives that
information, and an optional <rp> element that defines what to
show for browsers that not support ruby annotations

Default CSS Settings

HTML <s> Tag
Most browsers will display the <rt> element with the following
default values:
Example
rt {
line-height: normal;
} Mark up text that is no longer correct:

HTML <ruby> Tag

❮ PreviousComplete HTML ReferenceNext ❯ <p><s>Only 50 tickets left!</s></p>
<p>SOLD OUT!</p>

Definition and Usage

Example
The <s> tag specifies text that is no longer correct, accurate or
relevant. The text will be displayed with a line through it.

A ruby annotation: The <s> tag should not be used to define deleted text in a
document, use the <del> tag for that.

<ruby> Default CSS Settings

漢 <rt> ˋ </rt>
</ruby> Most browsers will display the <s> element with the following
default values:
Definition and Usage

The <ruby> tag specifies a ruby annotation. Example

84
s { Most browsers will display the <samp> element with the following
text-decoration: line-through; default values:
}

Example

HTML <samp> Tag samp {

font-family: monospace;
}

Example
HTML <script> Tag
Define some text as sample output from a computer program in a
document: Example

<p>Message from my computer:</p> Write "Hello JavaScript!" with JavaScript:

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

Default CSS Settings

85
Tip: Also look at the <noscript> element for users that have
disabled scripts in their browser, or have a browser that doesn't <script type="text/javascript">
support client-side scripting. //<![CDATA[
let i = 10;
if (i < 5) {
Tip: If you want to learn more about JavaScript, visit our JavaScript
// some code
Tutorial.
}
//]]>
Attributes </script>
Attribute Value Attribute
async async async
crossorigin anonymous crossorigin Default CSS Settings
use-credentials
defer defer defer Most browsers will display the <script> element with the
integrity filehash integrity following default values:
nomodule True nomodule
False script {
referrerpolicy no-referrer referrerpolicy display: none;
no-referrer-when- }
downgrade
origin
origin-when-cross-
origin
same-origin
strict-origin
strict-origin-when-
cross-origin
unsafe-url
src URL src
type scripttype type HTML <section> Tag

Example

Differences Between HTML and XHTML Two sections in a document:

In XHTML, the content inside scripts is declared as #PCDATA

(instead of CDATA), which means that entities will be parsed. <section>
<h2>WWF History</h2>
This means that in XHTML, all special characters should be <p>The World Wide Fund for Nature (WWF) is an
encoded, or all content should be wrapped inside a CDATA section: international organization working on issues regarding the
conservation, research and restoration of the environment,
formerly named the World Wildlife Fund. WWF was founded in
86
1961.</p> <option value="mercedes">Mercedes</option>
</section> <option value="audi">Audi</option>
</select>
<section>
Definition and Usage
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known
panda logo of WWF originated from a panda named Chi Chi The <select> element is used to create a drop-down list.
that was transferred from the Beijing Zoo to the London
Zoo in the same year of the establishment of WWF.</p> The <select> element is most often used in a form, to collect user
</section> input.

Definition and Usage The name attribute is needed to reference the form data after the
form is submitted (if you omit the name attribute, no data from the
The <section> tag defines a section in a document. drop-down list will be submitted).

Default CSS Settings The id attribute is needed to associate the drop-down list with a
label.
Most browsers will display the <section> element with the following default
values: The <option> tags inside the <select> element define the
available options in the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!
Example
Attributes
section {
display: block; Attribute Value Description
} autofocus autofocus Specifies that the
drop-down list
HTML <select> Tag should
automatically get
focus when the
page loads
Example disabled disabled Specifies that a
drop-down list
should be disabled
Create a drop-down list with four options: form form_id Defines which form
the drop-down list
belongs to
multiple multiple Specifies that
<label for="cars">Choose a car:</label>
multiple options
can be selected at
<select name="cars" id="cars"> once
<option value="volvo">Volvo</option> name name Defines a name for
<option value="saab">Saab</option> the drop-down list
87
required required Specifies that the <p>This is some normal text.</p>
user is required to <p><small>This is some smaller text.</small></p>
select a value
before submitting
the form
size number Defines the Definition and Usage
number of visible
options in a drop- The <small> tag defines smaller text (like copyright and other
down list side-comments).

Tip: This tag is not deprecated, but it is possible to achieve richer

(or the same) effect with CSS.
Example
More Examples

Use <select> with <optgroup> tags:

Example

<label for="cars">Choose a car:</label>

<select name="cars" id="cars"> Use CSS to define smaller text:
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup> <html>
<optgroup label="German Cars"> <head>
<option value="mercedes">Mercedes</option> <style>
<option value="audi">Audi</option> span.small {
</optgroup> font-size: smaller;
</select> }
</style>
Default CSS Settings </head>
<body>
None.
<p>This is some normal text.</p>
HTML <small> Tag <p><span class="small">This is some smaller
text.</span></p>

Example </body>
</html>

Default CSS Settings

Define a smaller text:
Most browsers will display the <small> element with the following
default values:
88
Example sizes for different
page layouts
src URL Required when
small { <source> is used
font-size: smaller; in <audio> and
} <video>. Specifies
the URL of the
media file
HTML <source> Tag srcset URL Required when
<source> is used
in <picture>.
Example Specifies the URL
of the image to use
in different
An audio player with two source files. The browser will choose the first situations
<source> it supports: type MIME-type Specifies the MIME-
type of the
resource

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Definition and Usage

The <source> tag is used to specify multiple media resources for

media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative

video/audio/image files which the browser may choose from, Example
based on browser support or viewport width. The browser will
choose the first <source> it supports.
Use <source> within <video> to play a video:

Attributes
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Attribute Value Description <source src="movie.ogg" type="video/ogg">
media media_query Accepts any valid Your browser does not support the video tag.
media query that </video>
would normally be
defined in a CSS
sizes Specifies image
89
Example The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.

Use <source> within <picture> to define different images based on the The <span> tag is much like the <div> element, but <div> is a
viewport width: block-level element and <span> is an inline element.

Default CSS Settings

Default CSS Settings

None. HTML <strike> Tag

Not Supported in HTML5.

The <strike> tag was used in HTML 4 to define strikethrough text.

What to Use Instead?

HTML <span> Tag
Example
Example

Use the <del> tag to define deleted text:

A <span> element which is used to color a part of a text:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>My mother
has <span style="color:blue">blue</span> eyes.</p>
Example
Definition and Usage

The <span> tag is an inline container used to mark up a part of a Use the <s> tag to mark up text that is no longer correct:
text, or a part of a document.
90
<p><s>My car is blue.</s></p> <html>
<head>
<style>
HTML <strong> Tag h1 {color:red;}
Example p {color:blue;}
</style>
</head>
<body>
Define important text in a document:

<h1>A heading</h1>
<p>A paragraph.</p>
<strong>This text is important!</strong>

Definition and Usage </body>

</html>
The <strong> tag is used to define text with strong importance. The content
inside is typically displayed in bold. Definition and Usage

Tip: Use the <b> tag to specify bold text without any extra importance! The <style> tag is used to define style information (CSS) for a
document.
Default CSS Settings
Inside the <style> element you specify how HTML elements
Most browsers will display the <strong> element with the following default should render in a browser.
values:
Tips and Notes

Example Note: When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet. If some
properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will
strong {
be used (see example below)!
font-weight: bold;
}
Tip: To link to an external style sheet, use the <link> tag.

Tip: To learn more about style sheets, please read our CSS
Tutorial.
HTML <style> Tag

Example

Use of the <style> element to apply a simple style sheet to an HTML

Attributes
document:
91
Attribute Value Description style {
media media_query Specifies what display: none;
media/device the }
media resource is

type text/css
optimized for
Specifies the media
HTML <sub> Tag
type of the <style>
tag

Example
Example

Subscript text:
Multiple styles for the same elements:

<p>This text contains <sub>subscript</sub> text.</p>

<html>
<head> Definition and Usage
<style>
h1 {color:red;} The <sub> tag defines subscript text. Subscript text appears half a
p {color:blue;} character below the normal line, and is sometimes rendered in a
</style> smaller font. Subscript text can be used for chemical formulas, like
<style> H2O.
h1 {color:green;}
p {color:pink;} Tip: Use the <sup> tag to define superscripted text.
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Default CSS Settings
</body> Most browsers will display the <sub> element with the following
</html> default values:

Example
Default CSS Settings

Most browsers will display the <style> element with the following
default values: sub {
vertical-align: sub;
92
font-size: smaller; <html>
} <style>
details > summary {
padding: 4px;
width: 200px;
HTML <summary> Tag background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
Example
}

details > p {
Using the <summary> element: background-color: #eeeeee;
padding: 4px;
margin: 0;
<details> box-shadow: 1px 1px 2px #bbbbbb;
<summary>Epcot Center</summary> }
<p>Epcot is a theme park at Walt Disney World Resort </style>
featuring exciting attractions, international pavilions, <body>
award-winning fireworks and seasonal special events.</p>
</details> <details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort
featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>

Definition and Usage

</body>
The <summary> tag defines a visible heading for </html>
the <details> element. The heading can be clicked to view/hide
the details. Default CSS Settings

Note: The <summary> element should be the first child Most browsers will display the <summary> element with the
element of the <details> element. following default values:

summary {
display: block;
Example
}

Use CSS to style <details> and <summary>: HTML <sup> Tag

Example

Superscript text:
93
<p>This text contains <sup>superscript</sup> text.</p> width="4" fill="yellow" />
</svg>
Definition and Usage

The <sup> tag 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].
Definition and Usage

The <svg> tag defines a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.

Tip: Use the <sub> tag to define subscript text. To learn more about SVG, please read our SVG Tutorial.

Default CSS Settings Example

Most browsers will display the <sup> element with the following
default values:
Draw a rectangle:
Example

sup { <svg width="400" height="100">

vertical-align: super; <rect width="400" height="100" style="fill:rgb(0,0,255);str
font-size: smaller; oke-width:10;stroke:rgb(0,0,0)" />
} </svg>

Try it Yourself »
Example

HTML <svg> Tag

Draw a square with rounded corners:

Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150
Draw a circle: " style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<svg width="100" height="100"> Example

<circle cx="50" cy="50" r="40" stroke="green" stroke-
94
Draw a star: Example

<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" An HTML table may also
/> include <caption>, <colgroup>, <thead>, <tfoot>,
and <tbody> elements.
<text fill="#ffffff" font-size="45" font-family="Verdana" x="
50" y="86">SVG</text>
</svg> Example

How to add collapsed borders to a table (with CSS):

<html>
<head>
<style>
table, th, td {
HTML <table> Tag border: 1px solid black;
95
border-collapse: collapse; <tr>
} <td>February</td>
</style> <td>$80</td>
</head> </tr>
<body> </table>

<table>
<tr> Example
<th>Month</th>
<th>Savings</th>
</tr> How to center-align a table (with CSS):
<tr>
<td>January</td>
<td>$100</td>
</tr> <html>
<tr> <head>
<td>February</td> <style>
<td>$80</td> table, th, td {
</tr> border: 1px solid black;
</table> }
table.center {
margin-left: auto;
</body> margin-right: auto;
</html> }
</style>
</head>
<body>

<table class="center">
Example <tr>
<th>Month</th>
<th>Savings</th>
How to right-align a table (with CSS): </tr>
<tr>
<td>January</td>
<td>$100</td>
<table style="float:right"> </tr>
<tr> <tr>
<th>Month</th> <td>February</td>
<th>Savings</th> <td>$80</td>
</tr> </tr>
<tr> </table>
<td>January</td>
<td>$100</td>
</tr>
Example
96
How to add background-color to a table (with CSS): <th>Savings</th>
</tr>
<tr>
<td>January</td>
<table style="background-color:#00FF00">
<td>$100</td>
<tr>
</tr>
<th>Month</th>
<tr>
<th>Savings</th>
<td>February</td>
</tr>
<td>$80</td>
<tr>
</tr>
<td>January</td>
</table>
<td>$100</td>
</tr>
<tr> </body>
<td>February</td> </html>
<td>$80</td>
</tr>
Example
</table>

How to set table width (with CSS):

Example

<table style="width:400px">
How to add padding to a table (with CSS):
<tr>
<th>Month</th>
<th>Savings</th>
<html> </tr>
<head> <tr>
<style> <td>January</td>
table, th, td { <td>$100</td>
border: 1px solid black; </tr>
} <tr>
<td>February</td>
th, td { <td>$80</td>
padding: 10px; </tr>
} </table>
</style>
</head>
<body> Example

<table>
<tr> How to create table headers:
<th>Month</th>
97
<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Phone</th> <th colspan="2">Phone</th>
</tr> </tr>
<tr> <tr>
<td>John Doe</td> <td>John Doe</td>
<td>john.doe@example.com</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>123-45-678</td>
</tr> <td>212-00-546</td>
</table> </tr>
</table>

Example Default CSS Settings

Most browsers will display the <table> element with the following
default values:
How to create a table with a caption:

Example
<table>
<caption>Monthly savings</caption>
<tr> table {
<th>Month</th> display: table;
<th>Savings</th> border-collapse: separate;
</tr> border-spacing: 2px;
<tr> border-color: gray;
<td>January</td> }
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table> HTML <tbody> Tag

Example Example

How to define table cells that span more than one row or one column: An HTML table with a <thead>, <tbody>, and a <tfoot> element:
98
<table> Note: The <tbody> element must have one or more <tr> tags
<thead> inside.
<tr>
<th>Month</th> The <tbody> tag must be used in the following context: As a child
<th>Savings</th> of a <table> element, after any <caption>, <colgroup>,
</tr> and <thead> elements.
</thead>
<tbody> Tip: The <thead>, <tbody>, and <tfoot> elements will not affect
<tr> the layout of the table by default. However, you can use CSS to
<td>January</td> style these elements (see example below)!
<td>$100</td>
</tr>
<tr> Example
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table> Style <thead>, <tbody>, and <tfoot> with CSS:

A simple HTML table, with two rows and four table cells: Example

<table> How to align content inside <td> (with CSS):

<tr>
<td>Cell A</td>
<td>Cell B</td> <table style="width:100%">
</tr> <tr>
<tr> <th>Month</th>
<td>Cell C</td> <th>Savings</th>
<td>Cell D</td> </tr>
</tr> <tr>
</table> <td>January</td>
<td style="text-align:right">$100</td>
Definition and Usage </tr>
<tr>
The <td> tag defines a standard data cell in an HTML table. <td>February</td>
<td style="text-align:right">$80</td>
An HTML table has two kinds of cells: </tr>
</table>
 Header cells - contains header information (created with
the <th> element)
 Data cells - contains data (created with the <td> element) Example

The text in <td> elements are regular and left-aligned by default.

How to add background-color to table cell (with CSS):
The text in <th> elements are bold and centered by default.

Attributes
<table>
Attribute Value Description <tr>
101
<th>Month</th> explain anything</td>
<th>Savings</th> </tr>
</tr> </table>
<tr>
<td style="background-color:#FF0000">January</td>
<td style="background-color:#00FF00">$100</td> Example
</tr>
</table>
How to vertical align content inside <td> (with CSS):
Example

<table style="width:50%;">
<tr>
How to set the height of a table cell (with CSS):
<th>Month</th>
<th>Savings</th>
</tr>
<table> <tr style="height:100px">
<tr> <td style="vertical-align:bottom">January</td>
<th>Month</th> <td style="vertical-align:bottom">$100</td>
<th>Savings</th> </tr>
</tr> </table>
<tr>
<td style="height:100px">January</td>
<td style="height:100px">$100</td>
</tr>
</table> Example

How to set the width of a table cell (with CSS):

Example

<table style="width:100%">
<tr>
How to specify no word-wrapping in table cell (with CSS):
<th>Month</th>
<th>Savings</th>
</tr>
<table> <tr>
<tr> <td style="width:70%">January</td>
<th>Poem</th> <td style="width:30%">$100</td>
</tr> </tr>
<tr> </table>
<td style="white-space:nowrap">Never increase, beyond
what is necessary, the number of entities required to
102
Example Example

How to create table headers: How to define table cells that span more than one row or one column:

<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Phone</th> <th colspan="2">Phone</th>
</tr> </tr>
<tr> <tr>
<td>John Doe</td> <td>John Doe</td>
<td>john.doe@example.com</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>123-45-678</td>
</tr> <td>212-00-546</td>
</table> </tr>
</table>

Example Default CSS Settings

Most browsers will display the <td> element with the following
default values:
How to create a table with a caption:
td {
display: table-cell;
<table> vertical-align: inherit;
<caption>Monthly savings</caption> }
<tr>
<th>Month</th>
<th>Savings</th> HTML <template> Tag
</tr>
<tr>
<td>January</td> Example
<td>$100</td>
</tr>
<tr>
<td>February</td> Use <template> to hold some content that will be hidden when the
<td>$80</td> page loads. Use JavaScript to display it:
</tr>
</table>
<button onclick="showContent()">Show hidden content</button>
103
<template> Fill the web page with one new div element for each item in an array.
<h2>Flower</h2> The HTML code of each div element is inside the template element:
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<template>
<script> <div class="myClass">I like: </div>
function showContent() { </template>
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
<script>
document.body.appendChild(clon);
let myArr =
}
["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
</script>
function showContent() {
let temp, item, a, i;
Try it Yourself » temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
More "Try it Yourself" examples below. a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
Definition and Usage </script>

The <template> tag is used as a container to hold some HTML

content hidden from the user when the page loads. Example
The content inside <template> can be rendered later with a
JavaScript.
Check browser support for <template>:
You can use the <template> tag if you have some HTML code you
want to use over and over again, but not until you ask for it. To do
this without the <template> tag, you have to create the HTML <script>
code with JavaScript to prevent the browser from rendering the if (document.createElement("template").content) {
code. document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>
More Examples

Example
104
HTML <textarea> Tag Attribute
autofocus
Value
autofocus
Description
Specifies that a
text area should
automatically get
focus when the
Example page loads
cols number Specifies the
visible width of a
text area
A multi-line text input control (text area): dirname textareaname.dir Specifies that the
text direction of
the textarea will be
<label for="w3review">Review of W3Schools:</label> submitted
disabled disabled Specifies that a
text area should be
<textarea id="w3review" name="w3review" rows="4" cols="50" disabled
> form form_id Specifies which
At w3schools.com you will learn how to make a website. form the text area
They offer free tutorials in all web development belongs to
technologies. maxlength number Specifies the
</textarea> maximum number
of characters
Definition and Usage allowed in the text
area
The <textarea> tag defines a multi-line text input control. name text Specifies a name
for a text area
The <textarea> element is often used in a form, to collect user placeholder text Specifies a short
inputs like comments or reviews. hint that describes
the expected value
A text area can hold an unlimited number of characters, and the of a text area
text renders in a fixed-width font (usually Courier). readonly readonly Specifies that a
text area should be
The size of a text area is specified by the cols and rows attributes read-only
(or with CSS). required required Specifies that a
text area is
The name attribute is needed to reference the form data after the required/must be
form is submitted (if you omit the name attribute, no data from the filled out
text area will be submitted). rows number Specifies the
visible number of
The id attribute is needed to associate the text area with a label. lines in a text area
wrap hard Specifies how the
Tip: Always add the <label> tag for best accessibility practices! soft text in a text area
is to be wrapped
Attributes when submitted in
a form
105
Example <table>
<thead>
<tr>
<th>Month</th>
Disable default resize option:
<th>Savings</th>
</tr>
</thead>
<html> <tbody>
<head> <tr>
<style> <td>January</td>
textarea { <td>$100</td>
resize: none; </tr>
} <tr>
</style> <td>February</td>
</head> <td>$80</td>
<body> </tr>
</tbody>
<label for="w3review">Review of W3Schools:</label> <tfoot>
<tr>
<td>Sum</td>
<textarea id="w3review" name="w3review" rows="4" cols="50" <td>$180</td>
> </tr>
At w3schools.com you will learn how to make a website. </tfoot>
They offer free tutorials in all web development </table>
technologies.
</textarea> Definition and Usage

</body> The <tfoot> tag is used to group footer content in an HTML table.
</html>
The <tfoot> element is used in conjunction with
Default CSS Settings the <thead> and <tbody> elements to specify each part of a table (footer, header,
body).
None.
Browsers can use these elements to enable scrolling of the table body independently
of the header and footer. Also, when printing a large table that spans multiple
pages, these elements can enable the table header and footer to be printed at the top
and bottom of each page.
HTML <tfoot> Tag
Note: The <tfoot> element must have one or more <tr> tags inside.

Example The <tfoot> tag must be used in the following context: As a child of
a <table> element, after any <caption>, <colgroup>, <thead>,
and <tbody> elements.
An HTML table with a <thead>, <tbody>, and a <tfoot> element:
106
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of <td>Sum</td>
the table by default. However, you can use CSS to style these elements (see <td>$180</td>
example below)! </tr>
</tfoot>
</table>
Example

Style <thead>, <tbody>, and <tfoot> with CSS:

Example
<html>
<head>
<style>
thead {color: green;} How to align content inside <tfoot> (with CSS):
tbody {color: blue;}
tfoot {color: red;}
<table style="width:100%">
table, th, td { <tr>
border: 1px solid black; <th>Month</th>
} <th>Savings</th>
</style> </tr>
</head> <tr>
<body> <td>January</td>
<td>$100</td>
</tr>
<table>
<tr>
<thead>
<td>February</td>
<tr>
<td>$80</td>
<th>Month</th>
</tr>
<th>Savings</th>
<tfoot style="text-align:center">
</tr>
<tr>
</thead>
<td>Sum</td>
<tbody>
<td>$180</td>
<tr>
</tr>
<td>January</td>
</tfoot>
<td>$100</td>
</table>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
107
Example Example

How to vertical align content inside <tfoot> (with CSS): A simple HTML table with three rows, two header cells and four data
cells:

<table style="width:100%">
<tr> <table>
<th>Month</th> <tr>
<th>Savings</th> <th>Month</th>
</tr> <th>Savings</th>
<tr> </tr>
<td>January</td> <tr>
<td>$100</td> <td>January</td>
</tr> <td>$100</td>
<tr> </tr>
<td>February</td> <tr>
<td>$80</td> <td>February</td>
</tr> <td>$80</td>
<tfoot style="vertical-align:bottom"> </tr>
<tr style="height:100px"> </table>
<td>Sum</td>
<td>$180</td> Definition and Usage
</tr>
</tfoot> The <th> tag defines a header cell in an HTML table.
</table>
An HTML table has two kinds of cells:
Default CSS Settings
 Header cells - contains header information (created with
Most browsers will display the <tfoot> element with the following default the <th> element)
values:  Data cells - contains data (created with the <td> element)

tfoot { The text in <th> elements are bold and centered by default.
display: table-footer-group;
vertical-align: middle;
The text in <td> elements are regular and left-aligned by default.
border-color: inherit;
}
Attributes
Attribute Value Description
abbr text Specifies an
HTML <th> Tag abbreviated
version of the
❮ PreviousComplete HTML ReferenceNext ❯
content in a header
cell
108
colspan number Specifies the Example
number of columns
a header cell
should span How to add background-color to table header cell (with CSS):
headers header_id Specifies one or
more header cells
a cell is related to
rowspan number Specifies the <table>
number of rows a <tr>
header cell should <th style="background-color:#FF0000">Month</th>
span <th style="background-color:#00FF00">Savings</th>
scope col Specifies whether a </tr>
colgroup header cell is a <tr>
row header for a <td>January</td>
rowgroup column, row, or <td>$100</td>
group of columns </tr>
or rows </table>

Example

Example How to set the height of a table header cell (with CSS):

How to align content inside <th> (with CSS): <table>

<tr>
<th style="height:100px">Month</th>
<th style="height:100px">Savings</th>
<table style="width:100%">
</tr>
<tr>
<tr>
<th style="text-align:left">Month</th>
<td>January</td>
<th style="text-align:left">Savings</th>
<td>$100</td>
</tr>
</tr>
<tr>
</table>
<td>January</td>
<td>$100</td>
</tr>
<tr> Example
<td>February</td>
<td>$80</td>
</tr> How to specify no word-wrapping in table header cell (with CSS):
</table>
109
<table> <td>$100</td>
<tr> </tr>
<th>Month</th> </table>
<th style="white-space:nowrap">My Savings for a new
car</th>
</tr> Example
<tr>
<td>January</td>
<td>$100</td>
</tr> How to create table headers:
</table>

Example <table>
<tr>
<th>Name</th>
How to vertical align content inside <th> (with CSS): <th>Email</th>
<th>Phone</th>
</tr>
<tr>
<table style="width:50%;"> <td>John Doe</td>
<tr style="height:100px"> <td>john.doe@example.com</td>
<th style="vertical-align:bottom">Month</th> <td>123-45-678</td>
<th style="vertical-align:bottom">Savings</th> </tr>
</tr> </table>
<tr>
<td>January</td>
<td>$100</td> Example
</tr>
</table>

How to create a table with a caption:

Example

<table>
How to set the width of a table header cell (with CSS): <caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
<table style="width:100%"> </tr>
<tr> <tr>
<th style="width:70%">Month</th> <td>January</td>
<th style="width:30%">Savings</th> <td>$100</td>
</tr> </tr>
<tr> <tr>
<td>January</td> <td>February</td>
110
<td>$80</td> An HTML table with a <thead>, <tbody>, and a <tfoot> element:
</tr>
</table>
<table>
<thead>
Example <tr>
<th>Month</th>
<th>Savings</th>
How to define table cells that span more than one row or one column: </tr>
</thead>
<tbody>
<tr>
<table> <td>January</td>
<tr> <td>$100</td>
<th>Name</th> </tr>
<th>Email</th> <tr>
<th colspan="2">Phone</th> <td>February</td>
</tr> <td>$80</td>
<tr> </tr>
<td>John Doe</td> </tbody>
<td>john.doe@example.com</td> <tfoot>
<td>123-45-678</td> <tr>
<td>212-00-546</td> <td>Sum</td>
</tr> <td>$180</td>
</table> </tr>
</tfoot>
Default CSS Settings </table

Most browsers will display the <th> element with the following
default values:
Definition and Usage
th {
display: table-cell; The <thead> tag is used to group header content in an HTML
vertical-align: inherit; table.
font-weight: bold;
text-align: center; The <thead> element is used in conjunction with
} the <tbody> and <tfoot> elements to specify each part of a table
(header, body, footer).

Browsers can use these elements to enable scrolling of the table

body independently of the header and footer. Also, when printing
HTML <thead> Tag a large table that spans multiple pages, these elements can
enable the table header and footer to be printed at the top and
bottom of each page.
Example
111
Note: The <thead> element must have one or more <tr> tags </tr>
inside. <tr>
<td>February</td>
The <thead> tag must be used in the following context: As a child <td>$80</td>
of a <table> element, after </tr>
any <caption> and <colgroup> elements, and before </tbody>
any <tbody>, <tfoot>, and <tr> elements. <tfoot>
<tr>
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect <td>Sum</td>
the layout of the table by default. However, you can use CSS to <td>$180</td>
style these elements (see example below)! </tr>
</tfoot>
</table>
Example

Style <thead>, <tbody>, and <tfoot> with CSS:

Example

<html>
<head>
<style> How to align content inside <thead> (with CSS):
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;} <table style="width:100%">
<thead style="text-align:left">
table, th, td { <tr>
border: 1px solid black; <th>Month</th>
} <th>Savings</th>
</style> </tr>
</head> </thead>
<body> <tbody>
<tr>
<td>January</td>
<table>
<td>$100</td>
<thead>
</tr>
<tr>
<tr>
<th>Month</th>
<td>February</td>
<th>Savings</th>
<td>$80</td>
</tr>
</tr>
</thead>
</tbody>
<tbody>
</table>
<tr>
<td>January</td>
<td>$100</td>
112
Example

How to vertical align content inside <thead> (with CSS):

HTML <time> Tag

<table style="width:50%;">
<thead style="vertical-align:bottom">
<tr style="height:100px"> Example
<th>Month</th>
<th>Savings</th>
</tr> How to define a time and a date:
</thead>
<tbody>
<tr>
<td>January</td> <p>Open
<td>$100</td> from <time>10:00</time> to <time>21:00</time> every
</tr> weekday.</p>
<tr>
<td>February</td> <p>I have a date on <time datetime="2008-02-14
<td>$80</td> 20:00">Valentines day</time>.</p>
</tr>
</tbody> Definition and Usage
</table>
The <time> tag defines a specific time (or datetime).
Default CSS Settings
The datetime attribute of this element is used translate the time into a machine-
Most browsers will display the <thead> element with the following readable format so that browsers can offer to add date reminders through the user's
default values: calendar, and search engines can produce smarter search results.

thead { Attributes
display: table-header-group;
vertical-align: middle; Attribute Value Description
border-color: inherit; datetime datetime Represent a
} machine-readable
format of the
<time> element

Default CSS Settings

None.

HTML <title> Tag

113
Here are some tips for creating good titles:
 Go for a longer, descriptive title (avoid one- or two-word
Example titles)
 Search engines will display about 50-60 characters of the
Define a title for your HTML document: title, so try not to have titles longer than that
<!DOCTYPE html>  Do not use just a list of words as the title (this may reduce
<html> the page's position in search results)
<head>
<title>HTML Elements Reference</title> So, try to make the title as accurate and meaningful as possible!
</head>
<body>
Note: You can NOT have more than one <title> element in an
HTML document.
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Default CSS Settings

</body> Most browsers will display the <title> element with the following
</html> default values:

Definition and Usage title {

display: none;
}
The <title> tag 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 tab.

The <title> tag is required in HTML documents!

HTML <tr> Tag

Example

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

A simple HTML table with three rows; one header row and two data
optimization (SEO)! The page title is used by search engine
rows:
algorithms to decide the order when listing pages in search
results.

The <title> element: <table>

 defines a title in the browser toolbar <tr>
<th>Month</th>
 provides a title for the page when it is added to favorites
<th>Savings</th>
 displays a title for the page in search-engine results </tr>
114
<tr> <th>Month</th>
<td>January</td> <th>Savings</th>
<td>$100</td> </tr>
</tr> <tr>
<tr> <td>January</td>
<td>February</td> <td>$100</td>
<td>$80</td> </tr>
</tr> </table>
</table>

Definition and Usage Example

The <tr> tag defines a row in an HTML table.

How to vertical align content inside <tr> (with CSS):
A <tr> element contains one or more <th> or <td> elements.

Example <table style="height:200px">

<tr style="vertical-align:top">
<th>Month</th>
<th>Savings</th>
How to align content inside <tr> (with CSS): </tr>
<tr style="vertical-align:bottom">
<td>January</td>
<table style="width:100%"> <td>$100</td>
<tr> </tr>
<th>Month</th> </table>
<th>Savings</th>
</tr>
<tr style="text-align:right"> Example
<td>January</td>
<td>$100</td>
</tr>
How to create table headers:
</table>

Example <table>
<tr>
<th>Name</th>
<th>Email</th>
How to add background-color to a table row (with CSS): <th>Phone</th>
</tr>
<tr>
<table> <td>John Doe</td>
<tr style="background-color:#FF0000"> <td>john.doe@example.com</td>
115
<td>123-45-678</td> <td>123-45-678</td>
</tr> <td>212-00-546</td>
</table> </tr>
</table>

Example Default CSS Settings

Most browsers will display the <tr> element with the following
default values:
How to create a table with a caption:
tr {
display: table-row;
<table> vertical-align: inherit;
<caption>Monthly savings</caption> border-color: inherit;
<tr> }
<th>Month</th>
<th>Savings</th>
</tr>
<tr> HTML <track> Tag
<td>January</td>
<td>$100</td>
</tr>
<tr> Example
<td>February</td>
<td>$80</td>
</tr> A video with subtitle tracks for two languages:
</table>

<video width="320" height="240" controls>

Example <source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="e
How to define table cells that span more than one row or one column: n" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="n
o" label="Norwegian">
</video>
<table>
<tr> Definition and Usage
<th>Name</th>
<th>Email</th>
The <track> tag specifies text tracks for <audio> or <video> elements.
<th colspan="2">Phone</th>
</tr>
<tr> This element is used to specify subtitles, caption files or other files containing text,
<td>John Doe</td> that should be visible when the media is playing.
<td>john.doe@example.com</td>
Tracks are formatted in WebVTT format (.vtt files).
116
Optional Attributes Consider the <kbd> element (for keyboard input), the <var> element (for variables),
the <code> element (for computer code), the <samp> element (for computer
output), or use CSS instead.
Attribute Value Description
default default Specifies that the
Example
track is to be
enabled if the
user's preferences
do not indicate Define a teletype/monospace font for a <p> element (with CSS):
that another track
would be more
appropriate <p style="font-family:'Lucida Console', monospace">This text
kind captions Specifies the kind is monospace text.</p>
chapters of text track
descriptions In our CSS tutorial you can find more details about specifying the type of font in a
metadata document.
subtitles
label text Specifies the title
of the text track
src URL Required. Specifies
the URL of the
track file
srclang language_code Specifies the
language of the
track text data
(required if
kind="subtitles")
Default CSS Settings
HTML <u> Tag
None.

Example
HTML <tt> Tag
Not Supported in HTML5. Mark up a misspelled word with the <u> tag:

The <tt> tag was used in HTML 4 to define teletype text.

<p>This is some <u>mispeled</u> text.</p>
What to Use Instead?
Definition and Usage
117
The <u> tag represents some text that is unarticulated and styled u {
differently from normal text, such as misspelled words or proper text-decoration: underline;
names in Chinese text. The content inside is typically displayed }
with an underline. You can change this with CSS (see example
below).

Tip: Avoid using the <u> element where it could be confused for a
hyperlink!

Example

Use CSS to style misspelled text:

HTML <ul> Tag
<html>
<head> Example
<style>
.spelling-error {
text-decoration-line: underline; An unordered HTML list:
text-decoration-style: wavy;
text-decoration-color: red;
}
</style> <ul>
</head> <li>Coffee</li>
<body> <li>Tea</li>
<li>Milk</li>
</ul>
<p>This is
some <u class="spelling-error">mispeled</u> text.</p> Definition and Usage

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

</html>
Use the <ul> tag together with the <li> tag to create unordered lists.
Default CSS Settings
Tip: Use CSS to style lists.
Most browsers will display the <u> element with the following
default values: Tip: For ordered lists, use the <ol> tag.

Example Example
118
Set the different list style types (with CSS):

ul style="list-style-type:circle"> Example
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> Create a list inside a list (a nested list):
</ul>

<ul style="list-style-type:disc"> <ul>

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

Example
Example

Create a more complex nested list:

Expand and reduce line-height in lists (with CSS):

<ul>
<ul style="line-height:180%"> <li>Coffee</li>
<li>Coffee</li> <li>Tea
<li>Tea</li> <ul>
<li>Milk</li> <li>Black tea</li>
</ul> <li>Green tea
<ul>
<li>China</li>
<ul style="line-height:80%"> <li>Africa</li>
<li>Coffee</li> </ul>
<li>Tea</li> </li>
<li>Milk</li> </ul>
</ul> </li>
<li>Milk</li>
</ul>
119
Default CSS Settings Also look at:

Most browsers will display the <ul> element with the following default values: Tag Description
<code> Defines a piece of computer
code
Example <samp> Defines sample output from a
computer program
<kbd> Defines keyboard input
ul { <pre> Defines preformatted text
display: block;
Default CSS Settings
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em; Most browsers will display the <var> element with the following
margin-left: 0; default values:
margin-right: 0;
padding-left: 40px;
} Example

var {
font-style: italic;
HTML <var> Tag }

Example

Define some text as variables in a document:

HTML <video> Tag

<p>The area of a triangle is: 1/2

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

Definition and Usage

Play a video:
The <var> tag is used to defines a variable in programming or in a
mathematical expression. The content inside is typically displayed
in italic. <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Tip: This tag is not deprecated. However, it is possible to achieve <source src="movie.ogg" type="video/ogg">
richer effect by using CSS.
120
Your browser does not support the video tag. to be shown while
</video> the video is
downloading, or
Definition and Usage until the user hits
the play button
The <video> tag is used to embed video content in a document, preload auto Specifies if and
such as a movie clip or other video streams. metadata how the author
none thinks the video
The <video> tag contains one or more <source> tags with should be loaded
different video sources. The browser will choose the first source it when the page
supports. loads
src URL Specifies the URL
The text between the <video> and </video> tags will only be of the video file
displayed in browsers that do not support the <video> element. width pixels Sets the width of
the video player
There are three supported video formats in HTML: MP4, WebM,
Default CSS Settings
and OGG.
None.
Tips and Notes

Tip: For audio files, look at the <audio> tag. HTML <wbr> Tag
Optional Attributes
Example
Attribute Value Description
autoplay autoplay Specifies that the
video will start
playing as soon as A text with word break opportunities:
it is ready
controls controls Specifies that video
controls should be <p>To learn AJAX, you must be familiar with the
displayed (such as XML<wbr>Http<wbr>Request Object.</p>
a play/pause
button etc). Definition and Usage
height pixels Sets the height of
the video player The <wbr> (Word Break Opportunity) tag specifies where in a text
loop loop Specifies that the it would be ok to add a line-break.
video will start over
again, every time it
Tip: When a word is too long, the browser might break it at the
is finished
wrong place. You can use the <wbr> element to add word break
muted muted Specifies that the opportunities.
audio output of the
video should be
muted
poster URL Specifies an image
121

HTML Introduction

What is HTML?
What is an HTML element?
Web browsers
HTML page structure
HTML History

HTML BASIC
HTML Document
HTML Declaration
HTML Headings
HTML Paragraphs
HTML Links
HTML Images
How to view HTML sources?

HTML ELEMENT
HTML Elements
Nested HTML Elements
Empty HTML Elements
HTML Attributes
The href attribute
The src attribute
The width and height attributes
HTML Headings
HTML Headings
Heading is Important
Bigger headings
HTML Paragraphs
HTML Paragraphs
HTML display
HTML Horizontal rules
HTML Line breaks
The Poem Problem
Solution - the HTML <pre> Element
HTML style Attribute
Background and Color
HTML Styles
Text Color
Fonts
Text Size
122
Text Alignment HTML Links
HTMLFormatting HTML Links-Hyper Links
HTML Formatting Elements HTML Links-Syntax
HTML <b> and <strong> Elements HTML Links- The Target Attribute
HTML <i> and <em> Elements Absolute URLs Vs Relative URLs
HtML <small> Element HTML Links- Use an image as a link
HTML <mark> Element Links to an Email Adress
HTML <del> Element Button as a Link
HTML <ins> Element Link Titles
HTML <sub> Element More on Absolute URLs and Relative URLs
HTML Quotations HTML LInks Tags
HTML <blockquote> for Quotations HTML Links- Different Colors
HTML <q> for short Quotations HTML- Link Colors
HTML <abbr> for Abrreviations HTML Links- Create Bookmarks
HTML <address> for Contact Information
HTML <cite> for work Title
HTML <bdo> for bi-directional Override
HTML Comments HTML Images
HTML Comment Tag HTML Images
Add Comments HTML images Syntax
Hide Contents The src Attribute
Hide in the Comments The alt attribute
HTML Colors Image -Size, Width, and Height
Color Names Width and Height , or Style?
Background Color Images in another folder
Test color Images on another server/website
Border Color Animated Images
Color Values Images as a link
HTML RGB and RGBA color Image floating
RGB clor Values Common Image Formats
HTML HEX Colors Chapter Summary
HTML Color Values
HTML HSL HSLA Colors HTML image Maps
HSL Color Values Image maps
Saturation How does it work?
HTML CSS The image
What is CSS? Create Image map
Using CSS The areas
Inline CSS Shape=”rect”
Internal CSS Shape=”circle”
External CSS Shape=”poly”
CSS Colors, Fonts, and Sizes Image map and Javascript
CSS Border Chapter Summary
CSS Padding HTML image tags
CSS Margin HTML Background Images
Link to External CSS
123
Background Image on a HTML element IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML
LayoutHTML ResponsiveHTML ComputercodeHTML
Background Images on a page
SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML
Background Repeat EmojisHTML CharsetHTML URL Encode
Background Color
Background Stretch

HTML <picture> Element

The HTML <picture> element
When to use the <picture> element?
HTML images tag

HTML Favicon
How to add a favicon In HTML?
Favicon File Support
Chapter Summary
HTML Link tag

HTML Page Title

HTML <title> Tag

HTML Tables
HTML Tables
Define an HTML table
Table Cells
Table Row
Table headers
HTML tags
HTML Table Borders

HTML TablesHTML ListsHTML Block & InlineHTML ClassesHTML

IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML
LayoutHTML ResponsiveHTML ComputercodeHTML
SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML
EmojisHTML CharsetHTML URL EncodeHTML Tutorial
HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML
ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML
StylesHTML FormattingHTML QuotationsHTML CommentsHTML
ColorsHTML CSSHTML LinksHTML ImagesHTML FaviconHTML Page
TitleHTML TablesHTML ListsHTML Block & InlineHTML ClassesHTML

HTML Tags and Uses
No ratings yet
HTML Tags and Uses
5 pages
BASICS OF HTML-WPS Office
No ratings yet
BASICS OF HTML-WPS Office
9 pages
HTML Tags
No ratings yet
HTML Tags
8 pages
IT Chap 8
No ratings yet
IT Chap 8
34 pages
HTML Basics and Tags Guide
No ratings yet
HTML Basics and Tags Guide
9 pages
HTML Tags for Beginners
No ratings yet
HTML Tags for Beginners
2 pages
Sample Codes
No ratings yet
Sample Codes
118 pages
HTML
No ratings yet
HTML
13 pages
Essential HTML Tags
No ratings yet
Essential HTML Tags
4 pages
HTML Notes
No ratings yet
HTML Notes
17 pages
Web Designing - 14786
No ratings yet
Web Designing - 14786
14 pages
CH 2 WD - Introduction To HTML
No ratings yet
CH 2 WD - Introduction To HTML
33 pages
Basic HTML: Tag Description
No ratings yet
Basic HTML: Tag Description
12 pages
Introduction To HTML CSC 221
No ratings yet
Introduction To HTML CSC 221
23 pages
HTML Tags
No ratings yet
HTML Tags
5 pages
Unit-1 WT
No ratings yet
Unit-1 WT
37 pages
HTML Tags Reference
No ratings yet
HTML Tags Reference
2 pages
UECS2094 2194 - Topic 2 - HTML - Jan 2025
No ratings yet
UECS2094 2194 - Topic 2 - HTML - Jan 2025
86 pages
CH 2
No ratings yet
CH 2
78 pages
HTML
No ratings yet
HTML
5 pages
Training File
No ratings yet
Training File
31 pages
Unit 1 - Web Designing
No ratings yet
Unit 1 - Web Designing
31 pages
HTML Guide for Beginners
No ratings yet
HTML Guide for Beginners
8 pages
Smartguide HTML
No ratings yet
Smartguide HTML
8 pages
HTML Revision Part 1
No ratings yet
HTML Revision Part 1
12 pages
Introduction To HTML
No ratings yet
Introduction To HTML
36 pages
HTML Tag Reference Guide
No ratings yet
HTML Tag Reference Guide
4 pages
HTML PDF
No ratings yet
HTML PDF
72 pages
HTML Tags
No ratings yet
HTML Tags
3 pages
Chapter 2 - HTML
No ratings yet
Chapter 2 - HTML
47 pages
HTML Tags for Beginners
No ratings yet
HTML Tags for Beginners
3 pages
HTML Basics Session1 4KitSolutions
No ratings yet
HTML Basics Session1 4KitSolutions
80 pages
HTML Notes11
No ratings yet
HTML Notes11
14 pages
Comp 6 Ms. Tumasis Soliman, Ma. Cristina B. Ab4Ea
No ratings yet
Comp 6 Ms. Tumasis Soliman, Ma. Cristina B. Ab4Ea
7 pages
HTML
No ratings yet
HTML
6 pages
HTML
No ratings yet
HTML
6 pages
Super Detailed HTML Tags Explanation
No ratings yet
Super Detailed HTML Tags Explanation
8 pages
4 - HTMLV5
No ratings yet
4 - HTMLV5
56 pages
HTML Notes
No ratings yet
HTML Notes
8 pages
HTML Elements - PHPGurukul
No ratings yet
HTML Elements - PHPGurukul
3 pages
HTML Tags Overview for Beginners
No ratings yet
HTML Tags Overview for Beginners
6 pages
HTML Element Reference
No ratings yet
HTML Element Reference
13 pages
HTML CSS JavaScript Basics 1
No ratings yet
HTML CSS JavaScript Basics 1
227 pages
Class 8 Computer Worksheet of Introduction To HTML
No ratings yet
Class 8 Computer Worksheet of Introduction To HTML
8 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
26 pages
Voice Tape
No ratings yet
Voice Tape
3 pages
HTML Basics and Structure Guide
No ratings yet
HTML Basics and Structure Guide
76 pages
Chapter 2 (Web Design and Programming)
No ratings yet
Chapter 2 (Web Design and Programming)
74 pages
UNIT-2 Web
No ratings yet
UNIT-2 Web
18 pages
HTML Tutorial Exemplu Pagina:: !doctype HTML Body h1 /h1 P /P /body /HTML
No ratings yet
HTML Tutorial Exemplu Pagina:: !doctype HTML Body h1 /h1 P /P /body /HTML
11 pages
2 Structure of HTML
No ratings yet
2 Structure of HTML
3 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
25 pages
WT Unit 1 (HTML)
No ratings yet
WT Unit 1 (HTML)
14 pages
HTML Basic Information
No ratings yet
HTML Basic Information
2 pages
Fed HTML
No ratings yet
Fed HTML
25 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
Doctype HTML
No ratings yet
Doctype HTML
224 pages
Introduction Web Desiging Editor and HTML
No ratings yet
Introduction Web Desiging Editor and HTML
39 pages
Class-11 Ex-4. Ict MCQ (Pag - 3.2)
No ratings yet
Class-11 Ex-4. Ict MCQ (Pag - 3.2)
5 pages
!DOCTYPE HTML
No ratings yet
!DOCTYPE HTML
11 pages
Options and Derivatives Programming in C++23: Algorithms and Programming Techniques For The Financial Industry, 3rd Edition Carlos Oliveira
100% (4)
Options and Derivatives Programming in C++23: Algorithms and Programming Techniques For The Financial Industry, 3rd Edition Carlos Oliveira
47 pages
!DOCTYPE HTML
No ratings yet
!DOCTYPE HTML
3 pages
Draw XML Tree For The Following XML Exercises
No ratings yet
Draw XML Tree For The Following XML Exercises
6 pages
Format 3 Macro 2
No ratings yet
Format 3 Macro 2
10 pages
!DOCTYPE HTML
No ratings yet
!DOCTYPE HTML
3 pages
Doctype HTML
No ratings yet
Doctype HTML
3 pages
Cit 853
No ratings yet
Cit 853
35 pages
!DOCTYPE HTML
No ratings yet
!DOCTYPE HTML
37 pages
Doctype HTML
No ratings yet
Doctype HTML
85 pages
!DOCTYPE HTML
No ratings yet
!DOCTYPE HTML
3 pages
3 XML DTD and XSLT Assignment No 31
No ratings yet
3 XML DTD and XSLT Assignment No 31
7 pages
Employee XML Assignment
No ratings yet
Employee XML Assignment
2 pages
200 Tag
No ratings yet
200 Tag
4 pages
阅读 3.0 书源，选择本地导入即可
No ratings yet
阅读 3.0 书源，选择本地导入即可
596 pages
MCQ'S Based On HTML
No ratings yet
MCQ'S Based On HTML
8 pages
Assignment Unit 6 by Waseem U Zaman
No ratings yet
Assignment Unit 6 by Waseem U Zaman
3 pages
HSC Practical HTML Chapter
No ratings yet
HSC Practical HTML Chapter
18 pages
Assignment and Practice questionsOnDTD25
No ratings yet
Assignment and Practice questionsOnDTD25
2 pages
ParrotPatcher Log
No ratings yet
ParrotPatcher Log
45 pages
DOCTYPE HTML Jennifer
No ratings yet
DOCTYPE HTML Jennifer
4 pages
Git CMD
No ratings yet
Git CMD
2 pages
Doctype HTML
No ratings yet
Doctype HTML
7 pages
iOS Aimbot
No ratings yet
iOS Aimbot
2 pages
Export 1059655121209400
No ratings yet
Export 1059655121209400
217 pages
Ex-4 XML For Creation of DTD, Which Specifies Set of Rules. Create A Style Sheet in CSS/ XSL & Display The Document
No ratings yet
Ex-4 XML For Creation of DTD, Which Specifies Set of Rules. Create A Style Sheet in CSS/ XSL & Display The Document
3 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
150 pages

HTML Tags

Uploaded by

HTML Tags

Uploaded by

1

HTML  Tag

Tips and Notes

The most important attribute of the <a> element is

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

<h1>The a element</h1> Visit W3Schools.com!

How to use an image as a link: <a href="#section2">Go to Section 2</a>

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

a:link:active, a:visited:active { Example

<abbr> can also be used with <dfn> to define an

<!DOCTYPE html> The abbr element

Default CSS Settings

More "Try it Yourself" examples below.

What to Use Instead? Example

Example Contact information for Example.com:

An acronym or abbreviation should be marked up with <address>

Example What to Use Instead?

address { If you want to embed a video, use the <video> tag:

HTML <applet> Tag <video width="320" height="240" controls>

Plug-ins have been used for many different purposes:

<img src="workplace.jpg" alt="Workplace"

Read more about computer

<area shape="rect" coords="0,0,82,126" href="s <h2>Mozilla Firefox</h2>

<area shape="circle" coords="124,58,8" href="v January, 2018.</p>

Definition and Usage .browser {

Default CSS Settings </body>

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

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

Default CSS Settings

Tip: For video files, look at the <video> tag.

<p><a href="tags/tag_base.asp">HTML base

More "Try it Yourself" examples below.

Tips and Notes Example

Note: According to the HTML5 specification, the <b> tag should

Default CSS Settings <html>

Not Supported in HTML5. </style>

Specify a default text-color for a page (with CSS):

BDI stands for Bi-Directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a

Specify the text direction: <html>

HTML <big> Tag

The <big> tag was used in HTML 4 to define bigger text.

What to Use Instead?

Use CSS to remove the indentation from the blockquote element:

Example The <body> element contains all the contents of an HTML

Example: Add a background image to a document (with CSS):

</html> Example : Set the background color of a document (with CSS):

More "Try it Yourself" examples below.

Example: Set the color of text in a document (with CSS): </body>

Set the color of unvisited links in a document (with CSS): </body>

Set the color of visited links in a document (with CSS):

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

More "Try it Yourself" examples below.

The <br> tag is useful for writing addresses or poems.

Tips and Notes

<button type="button">Click Me!</button>

Definition and Usage

Most browsers will display the <canvas> element with the

Example A table with a caption:

Center-align text (with CSS): Example

<html> Define the title of a work with the <cite> tag:

Tip: This tag is not deprecated. However, it is possible to achieve

Also look at:

<h1>The code element</h1>

<p>The CSS <code>background- The CSS background-color property

Attribut Value Description

Definition and Usage

The <data> tag is used to add a machine-readable translation of a

Attributes <label for="browser">Choose your browser from the

The <datalist> element's id attribute must be equal to the </body>

Default CSS Settings

Most browsers will display the <datalist> element with the

Tip: Also look at the <ins> tag to markup inserted text.

<!DOCTYPE html> The del element

Attribute Value Description 1. Just as the content of the <dfn> element: