Scribd
Upload
148 views

HTML References

The document defines HTML tags like <!DOCTYPE>, <a>, <abbr>, and <address>. It provides the tag name, a brief description of its purpose, and an example of its usage.

Uploaded by

Luthfi Rahman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
148 views

HTML References

The document defines HTML tags like <!DOCTYPE>, <a>, <abbr>, and <address>. It provides the tag name, a brief description of its purpose, and an example of its usage.

Uploaded by

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

LAMPIRAN REFERENSI TAG HTML

Semua HTML TAG direferensikan dari sistus web WWW.W3SCHOOL.COM

Tag Description

<!--...--> Defines a comment

Definition and Usage


The comment tag is used to insert comments in the source code. Comments are not displayed in the
browsers.
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 useful if you have a lot of code.
Example Code:
<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

<!DOCTYPE> Defines the document type

Definition and Usage


The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html>
tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what
version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML.
The DTD specifies the rules for the markup language, so that the browsers render the content
correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows
what type of document to expect.

<a> Defines a hyperlink

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 the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

1
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<abbr> Defines an abbreviation or an acronym

Definition and Usage


The <abbr> tag defines an abbreviation or an acronym, like "Mr.", "Dec.", "ASAP", "ATM".
Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often
represented as a series of letters.
Marking up abbreviations can give useful information to browsers, translation systems and search-
engines.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

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


document

Definition and Usage


The <address> tag defines the contact information for the author/owner of a document or an article.
If the <address> element is inside the <body> element, it represents contact information for the
document.
If the <address> element is inside an <article> element, it represents contact information for that
article.
The text in the <address> element usually renders in italic. Most browsers will add a line break before
and after the address element.
Example Code:
<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

<applet> Not supported in HTML5.


Use <embed> or <object> instead.

2
Defines an embedded applet

<area> Defines an area inside an image-map

Definition and Usage


The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).
The <area> element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the <map> element's name
attribute, and creates a relationship between the image and the map.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

<article> Defines an article

Definition and Usage


The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from
the rest of the site.
Potential sources for the <article> element:
 Forum post
 Blog post
 News story
 Comment
Example Code:
<!DOCTYPE html>
<html>
<body>

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>

<p><strong>Note:</strong> The article tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<aside> Defines content aside from the page content

Definition and Usage

3
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<p><strong>Note:</strong> The aside tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<audio> Defines sound content

Definition and Usage


The <audio> tag defines sound, such as music or other audio streams.
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
Example Code:
<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The audio tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<b> Defines bold text

Definition and Usage


The <b> tag specifies bold text.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>This is normal text - <b>and this is bold text</b>.</p>

</body>
</html>

<base> Specifies the base URL/target for all relative URLs in a


document

Definition and Usage

4
The <base> tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one <base> element in a document, and it must be inside the <head>
element.
Example Code:
<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>

<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only


specified a relative 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>

<p><a href="https://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new


window, even if it has no target="_blank" attribute. This is because the target attribute of
the base element is set to "_blank".</p>

</body>
</html>

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a
document

<bdi> Isolates a part of text that might be formatted in a


different direction from other text outside it

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.
This element is useful when embedding user-generated content with an unknown directionality.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>
In the example below, usernames are shown along with the number of points in a contest.
If the bdi element is not supported in the browser, the username of the Arabic user would
confuse the text (the bidirectional algorithm would put the colon and the number "90" next to
the word "User" rather than next to the word "points").
</p>

<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>‫<إيان‬/bdi>: 90 points</li>
</ul>

</body>
</html>

<bdo> Overrides the current text direction

Definition and Usage


bdo stands for Bi-Directional Override.
The <bdo> tag is used to override the current text direction.
Example Code:

5
<!DOCTYPE html>
<html>
<body>

<p>This paragraph will go left-to-right.</p>


<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

</body>
</html>

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

Definition and Usage


The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>

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

</body>
</html>

<body> Defines the document's body

Definition and Usage


The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks,
images, tables, lists, etc.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

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

</html>

<br> Defines a single line break

Definition and Usage


The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
Example Code:
<!DOCTYPE html>
<html>

6
<body>

<p>
To break lines<br>in a text,<br>use the br element.
</p>

</body>
</html>

<button> Defines a clickable button

Definition and Usage


The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between
this element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different browsers use different
default types for the <button> element.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h2>The Button Element</h2>


<button type="button" onclick="alert('Hello world!')">Click Me!</button>

</body>
</html>

<canvas> Used to draw graphics, on the fly, via scripting (usually


JavaScript)

Definition and Usage


The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
Example Code:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);

</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<caption> Defines a table caption

Definition and Usage


The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
Note: You can specify only one caption per table.

7
Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-
align and caption-side can be used to align and place the caption.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

</body>
</html>

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

Definition and Usage


The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a
sculpture, etc.).
Note: A person's name is not the title of a work.
Example Code:
<!DOCTYPE html>
<html>
<body>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">


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

</body>
</html>

<code> Defines a piece of computer code

Definition and Usage


The <code> tag is a phrase tag. It defines a piece of computer code.
Example Code:
<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>

8
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<col> Specifies column properties for each column within a


<colgroup> element

Definition and Usage


The <col> tag specifies column properties for each column within a <colgroup> element.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

</body>
</html>

<colgroup> Specifies a group of one or more columns in a table for


formatting

Definition and Usage


The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for
each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and
before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the
<colgroup> tag.

9
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

</body>
</html>

<data> Links the given content with a machine-readable


translation

Definition and Usage


The <data> tag links the given content with a machine-readable translation.
This element provides both a machine-readable value for data processors, and a human-readable
value for rendering in a browser.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>The following example displays product names but also associates each name with a product
number:</p>

<ul>
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>

</body>
</html>

<datalist> Specifies a list of pre-defined options for input controls

Definition and Usage


The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a
drop-down list of pre-defined options as they input data.

10
Use the <input> element's list attribute to bind it together with a <datalist> element.
Example Code:
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="get">


<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier
versions, or in Safari.</p>

</body>
</html>

<dd> Defines a description/value of a term in a description list

Definition and Usage


The <dd> tag is used to describe a term/name in a description list.
The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt>(defines
terms/names).
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

Example Code:
<!DOCTYPE html>
<html>
<body>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

<del> Defines text that has been deleted from a document

Definition and Usage


The <del> tag defines text that has been deleted from a document.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<details> Defines additional details that the user can view or hide

Definition and Usage

11
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Any
sort of content can be put inside the <details> tag.
The content of a <details> element should not be visible unless the open attribute is set.
Example Code:
<!DOCTYPE html>
<html>
<body>

<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes
Data.</p>
</details>

<p><b>Note:</b> The details tag is not supported in Internet Explorer.</p>

</body>
</html>

<dfn> Represents the defining instance of a term

Definition and Usage


The <dfn> tag represents the defining instance of a term in HTML.
The defining instance is often the first use of a term in a document.
The nearest parent of the <dfn> tag must also contain the definition/explanation for the term inside
<dfn>.
Example Code 1:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Example Code 2:
<!DOCTYPE html>
<html>
<body>

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for


creating web pages.</p>

</body>
</html>

Example Code 3:
<!DOCTYPE html>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup


language for creating web pages.</p>

</body>
</html>

Example Code 4:
<!DOCTYPE html>
<html>
<body>

<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>

12
<p>This is some text...</p>

<p>This is some text...</p>

<p>This is some text...</p>

<p>Learn <a href="#html-def">HTML</a> now.</p>

</body>
</html>

<dialog> Defines a dialog box or window

Definition and Usage


The <dialog> tag defines a dialog box or window.
The <dialog> element makes it easy to create popup dialogs and modals on a web page.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<p><b>Note:</b> The dialog tag is not supported in Edge/Internet Explorer.</p>

<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

</body>
</html>

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<div> Defines a section in a document

Definition and Usage


The <div> tag defines a division or a section in an HTML document.
The <div> element is often used as a container for other HTML elements to style them with CSS or to
perform certain tasks with JavaScript.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>

<div style="background-color:lightblue">
<h3>This is a heading in a div element</h3>

13
<p>This is some text in a div element.</p>
</div>

<p>This is some text.</p>

</body>
</html>

<dl> Defines a description list

Definition and Usage


The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd>(describes each
term/name).

Example Code:
<!DOCTYPE html>
<html>
<body>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

<dt> Defines a term/name in a description list

Definition and Usage


The <dt> tag defines a term/name in a description list.
The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd>(describes each
term/name).
Example Code:
<!DOCTYPE html>
<html>
<body>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

<em> Defines emphasized text

Definition and Usage


The <em> tag is a phrase tag. It renders as emphasized text.
Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.
Example Code:
<!DOCTYPE html>
<html>
<body>

14
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<embed> Defines a container for an external (non-HTML)


application

Definition and Usage


The <embed> tag defines a container for an external application or interactive content (a plug-in).
Example Code:
<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>

<fieldset> Groups related elements in a form

Definition and Usage


The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Example Code:
<!DOCTYPE html>
<html>
<body>

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

</body>
</html>

<figcaption> Defines a caption for a <figure> element

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.

Example Code:
<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the
Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25
metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in
Norway.</p>

15
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<p><strong>Note:</strong> The figure tag is not supported in Internet Explorer 8 and earlier
versions.</p>
</body>
</html>

<figure> Specifies self-contained content

Definition and Usage


The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc.
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 should not affect the flow of the document.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the
Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25
metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in
Norway.</p>

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
<p><strong>Note:</strong> The figure tag is not supported in Internet Explorer 8 and earlier
versions.</p>
</body>
</html>

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<footer> Defines a footer for a document or section

Definition and Usage


The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
Example Code:
<!DOCTYPE html>
<html>
<body>

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>

<p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier
versions.</p>

16
</body>
</html>

<form> Defines an HTML form for user input

Definition and Usage


The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
Example Code:
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called
"/action_page.php".</p>

</body>
</html>

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<h1> to <h6> Defines HTML headings

Definition and Usage


The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>

17
<h6>This is heading 6</h6>

<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use them just to make text bold
or big. Use other tags for that.</p>

</body>
</html>

<head> Defines information about the document

Definition and Usage


The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more.
The following elements can go inside the <head> element:
 <title> (this element is required in an HTML document)
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

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

</html>

<header> Defines a header for a document or section

Definition and Usage


The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information
You can have several <header> elements in one document.
Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Example Code:
<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

</body>
</html>

18
<hr> Defines a thematic change in the content

Definition and Usage


The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML page.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>

</body>
</html>

<html> Defines the root of an HTML document

Definition and Usage


The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE>tag).
Example Code:
<!DOCTYPE html>
<html>
<body>

<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>

</body>
</html>

<i> Defines a part of text in an alternate voice or mood

Definition and Usage


The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually
displayed in italic.
The <i> tag can be used to indicate a technical term, a phrase from another language, a thought, or a
ship name, etc.
Use the <i> element only when there is not a more appropriate semantic element, such as:
 <em> (emphasized text)
 <strong> (important text)
 <mark> (marked/highlighted text)
 <cite> (the title of a work)
 <dfn> (a definition term)
Example Code:
<!DOCTYPE html>
<html>
<body>

19
<p>He named his car <i>The lightning</i>, because it was very fast.</p>

</body>
</html>

<iframe> Defines an inline frame

Definition and Usage


The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Example Code:
<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

<img> Defines an image

Definition and Usage


The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The
<img> tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>
An image that is a link:
<a href="https://www.w3schools.com">
<img src="smiley.gif" alt="Go to W3Schools!" width="42" height="42" border="0">
</a>
</p>

</body>
</html>

<input> Defines an input control

Definition and Usage


The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to
input data.
An input field can vary in many ways, depending on the type attribute.
Example Code:
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">

20
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called
"/action_page.php".</p>

</body>
</html>

<ins> Defines a text that has been inserted into a document

Definition and Usage


The <ins> tag defines a text that has been inserted into a document.
Tip: Also look at the <del> tag to markup deleted text.
Browsers will normally strike a line through deleted text and underline inserted text.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<kbd> Defines keyboard input

Definition and Usage


The <kbd> tag is a phrase tag. It defines keyboard input.
Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.
Example Code:
<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<label> Defines a label for an <input> element

Definition and Usage


The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a usability
improvement for mouse users, because if the user clicks on the text within the <label> element, it
toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind
them together.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
<label for="male">Male</label>

21
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

<legend> Defines a caption for a <fieldset> element

Definition and Usage


The <legend> tag defines a caption for the <fieldset> element.

Example Code:
<!DOCTYPE html>
<html>
<body>

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

</body>
</html>

<li> Defines a list item

Definition and Usage


The <li> tag defines a list item.
The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>An ordered list:</p>


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

<p>An unordered list:</p>


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

</body>
</html>

<link> Defines the relationship between a document and an


external resource (most used to link to style sheets)

Definition and Usage


The <link> tag defines a link between a document and an external resource.

22
The <link> tag is used to link to external style sheets.
Example Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>I am formatted with a linked style sheet</h1>


<p>Me too!</p>

</body>
</html>

<main> Specifies the main content of a document

Definition and Usage


The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any
content that is repeated across documents such as sidebars, navigation links, copyright information,
site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must
NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Example Code:
<!DOCTYPE html>
<html>
<body>

<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in
2008.</p>
</article>

<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>

<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>

<p><strong>Note:</strong> The main tag is not supported in Internet Explorer 11 and earlier
versions.</p>

</body>
</html>

<map> Defines a client-side image-map

Definition and Usage


The <map> tag is used to define a client-side image-map. An image-map is an image with clickable
areas.
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.
The <map> element contains a number of <area> elements, that defines the clickable areas in the

23
image map.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

<mark> Defines marked/highlighted text

Definition and Usage


The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The mark tag is not supported in Internet Explorer 8 and earlier
versions.</p>

</body>
</html>

<menu> Defines a list/menu of commands

Definition and Usage


The <menu> tag defines a list/menu of commands.
The <menu> tag is used for context menus, toolbars and for listing form controls and commands.
Example Code:
<!DOCTYPE html>
<html>
<body>

<div style="background:yellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">


<p>Right-click inside this box to see the context menu!</p>

<menu type="context" id="mymenu">


<menuitem label="Refresh" onclick="window.location.reload();"
icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u=' +
window.location.href);"></menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

</div>

<p>This example currently only works in Firefox!</p>

24
</body>
</html>

<menuitem> Defines a command/menu item that the user can invoke


from a popup menu

<meta> Defines metadata about an HTML document

Definition and Usage


Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the
page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
HTML5 introduced 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).
Example Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>All meta information goes in the head section...</p>

</body>
</html>

<meter> Defines a scalar measurement within a known range (a


gauge)

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.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress
bars, use the <progress> tag.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>Display a gauge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> The &lt;meter&gt; tag is not supported in Internet Explorer, Edge


12, Safari 5 and earlier versions.</p>

</body>
</html>

<nav> Defines navigation links

25
Definition and Usage
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is
intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to
omit the initial rendering of this content.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The nav tag is not supported in Internet Explorer 8 and earlier
versions.</p>

</body>
</html>

<noframes> Not supported in HTML5.


Defines an alternate content for users that do not support
frames

<noscript> Defines an alternate content for users that do not support


client-side scripts

Definition and Usage


The <noscript> tag defines an alternate content for 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 <body>.
When used inside the <head> element: <noscript> must contain only <link>, <style>, and <meta>
elements.
The content inside the <noscript> element will be displayed if scripts are not supported, or are
disabled in the user's browser.
Example Code:
<!DOCTYPE html>
<html>
<body>

<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text inside the noscript
element.</p>

</body>
</html>

<object> Defines an embedded object

Definition and Usage


The <object> tag defines an embedded object within an HTML document. Use this element to embed
multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.

26
You can also use the <object> tag to embed another webpage into your HTML document.
You can use the <param> tag to pass parameters to plugins that have been embedded with the
<object> tag.
Example Code:
<!DOCTYPE html>
<html>
<body>

<object width="400" height="400" data="helloworld.swf">


</object>

</body>
</html>

<ol> Defines an ordered list

Definition and Usage


The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Use the <li> tag to define list items.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

<optgroup> Defines a group of related options in a drop-down list

Definition and Usage


The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.
Example Code:
<!DOCTYPE html>
<html>
<body>

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

</body>
</html>

<option> Defines an option in a drop-down list

27
Definition and Usage
The <option> tag defines an option in a select list.
<option> elements go inside a <select> or <datalist> element.
Example Code:
<!DOCTYPE html>
<html>
<body>

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>

<output> Defines the result of a calculation

Definition and Usage


The <output> tag represents the result of a calculation (like one performed by a script).
Example Code:
<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer


and earlier versions.</p>

</body>
</html>

<p> Defines a paragraph

Definition and Usage


The <p> tag defines a paragraph.
Browsers automatically add some space (margin) before and after each <p> element. The margins
can be modified with CSS (with the margin properties).
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<param> Defines a parameter for an object

Definition and Usage


The <param> tag is used to define parameters for plugins embedded with an <object>element.
Tip: HTML 5 also includes two new elements for playing audio or video:

28
The <audio> and <video> tags.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> Internet Explorer 8, and earlier versions, does not support .wav files. Try to
rename the file to "horse.mp3" to test the example in these versions of IE.</p>

<object data="horse.wav">
<param name="autoplay" value="true">
</object>

</body>
</html>

<picture> Defines a container for multiple image resources

Definition and Usage


The <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs.
Instead of having one image that is scaled up or down based on the viewport width, multiple images
can be designed to more nicely fill the browser viewport.
The <picture> element holds two different tags: one or more <source> tags and one <img> tag.
The <source> element has the following attributes:
srcset (required) - defines the URL of the image to show
media - accepts any valid media query that would normally be defined in a CSS
sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-
delimited list of media queries with a width descriptor
type - defines the MIME type
The browser will use the attribute values to load the most appropriate image. The browser will use
the first <source> element with a matching hint and ignore any following <source> tags.
The <img> element is required as the last child tag of the <picture> declaration block. The <img>
element is used to provide backward compatibility for browsers that do not support the <picture>
element, or if none of the <source> tags matched.
The <picture> element works similar to the <video> and <audio> elements. You set up different
sources, and the first source that fits the preferences is the one being used.
Example Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

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

<p>Resize the browser to see different versions of the picture loading at different viewport
sizes.
The browser looks for the first source element where the media query matches the user's
current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the
picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari

29
9.0 and earlier.</p>

</body>
</html>

<pre> Defines preformatted text

Definition and Usage


The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
Example Code:
<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

</body>
</html>

<progress> Represents the progress of a task

Definition and Usage


The <progress> tag represents the progress of a task.
Example Code:
<!DOCTYPE html>
<html>
<body>

Downloading progress:
<progress value="22" max="100">
</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier
versions.</p>

</body>
</html>

<q> Defines a short quotation

Definition and Usage


The <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>WWF's goal is to:


<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

30
<rp> Defines what to show in browsers that do not support
ruby annotations

Definition and Usage


The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that
do not support ruby annotations.
Use the <rp> tag together with the <ruby> and the <rt> tags: The <ruby> element 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.
Example Code:
<!DOCTYPE html>
<html>
<body>

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

</body>
</html>

<rt> Defines an explanation/pronunciation of characters (for


East Asian typography)

Definition and Usage


The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a
ruby annotation.
Use the <rt> tag together with the <ruby> and the <rp> tags: The <ruby> element 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.
Example Code:
<!DOCTYPE html>
<html>
<body>

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

</body>
</html>

<ruby> Defines a ruby annotation (for East Asian typography)

Definition and Usage


The <ruby> tag specifies a ruby annotation.
A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or
meaning of the corresponding characters. This kind of annotation is often used in Japanese
publications.
Use the <ruby> tag together with the <rt> and/or the <rp> tags: The <ruby> element 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 do not
support ruby annotations.

31
Example Code:
<!DOCTYPE html>
<html>
<body>

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

</body>
</html>

<s> Defines text that is no longer correct

Definition and Usage


The <s> tag specifies text that is no longer correct, accurate or relevant.
The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define
replaced or deleted text.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p><s>My car is blue.</s></p>


<p>My new car is silver.</p>

</body>
</html>

<samp> Defines sample output from a computer program

Definition and Usage


The <samp> tag is a phrase tag. It defines sample output from a computer program.
Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.
Example Code:
<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<script> Defines a client-side script

Definition and Usage


The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file
through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
Example Code:
<!DOCTYPE html>
<html>
<body>

32
<p id="demo"></p>

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

</body>
</html>

<section> Defines a section in a document

Definition and Usage


The <section> tag defines sections in a document, such as chapters, headers, footers, or any other
sections of the document.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

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

<p><strong>Note:</strong> The section tag is not supported in Internet Explorer 8 and earlier
versions.</p>

</body>
</html>

<select> Defines a drop-down list

Definition and Usage


The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Example Code:
<!DOCTYPE html>
<html>
<body>

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>

<small> Defines smaller text

Definition and Usage


The <small> tag defines smaller text (and other side comments).
Example Code:

33
<!DOCTYPE html>
<html>
<body>

<p>W3Schools.com - the world's largest web development site.</p>


<p><small>Copyright 1999-2050 by Refsnes Data.</small></p>

</body>
</html>

<source> Defines multiple media resources for media elements


(<video> and <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, based on its media type, codec support or media query.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The source tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<span> Defines a section in a document

Definition and Usage


The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
Example Code:
<!DOCTYPE html>
<html>
<body>

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


<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

Definition and Usage


The <strong> tag is a phrase tag. It defines important text.
Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.
Example Code:

34
<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<style> Defines style information for a document

Definition and Usage


The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser.
Each HTML document can contain multiple <style> tags.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

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

</body>
</html>

<sub> Defines subscripted text

Definition and Usage


The <sub> tag defines subscript text. Subscript text appears half a character below the normal line,
and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like
H2O.
Tip: Use the <sup> tag to define superscripted text.
Example Code:
<!DOCTYPE html>
<html>
<body>

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


<p>This text contains <sup>superscript</sup> text.</p>

</body>
</html>

<summary> Defines a visible heading for a <details> element

Definition and Usage


The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.
Example Code:
<!DOCTYPE html>
<html>

35
<body>

<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes
Data.</p>
</details>

<p><b>Note:</b> The summary element is not supported in Edge/Internet Explorer.</p>

</body>
</html>

<sup> Defines superscripted text

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].
Tip: Use the <sub> tag to define subscript text.
Example Code:
<!DOCTYPE html>
<html>
<body>

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


<p>This text contains <sup>superscript</sup> text.</p>

</body>
</html>

<svg> Defines a container for SVG graphics

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.
Example Code:
<!DOCTYPE html>
<html>
<body>

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


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

<table> Defines a table

Definition and Usage


The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element
defines a table cell.
A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and
<tbody> elements.
Example Code:
<!DOCTYPE html>

36
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>

<tbody> Groups the body content in a table

Definition and Usage


The <tbody> tag is used to group the body content in an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify
each part of a table (body, header, footer).
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.
The <tbody> tag must be used in the following context: As a child of a <table> element, after any
<caption>, <colgroup>, and <thead> elements.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>

<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>

37
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by
default. However, you can use CSS to style these elements.</p>

</body>
</html>

<td> Defines a cell in a table

Definition and Usage


The <td> tag defines a standard cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

</body>
</html>

<template> Defines a template

Definition and Usage


The <template> tag holds its content hidden from the client.
Content inside a <template> tag will not be rendered.
The content can be visible and rendered later by using JavaScript.
Use the <template> tag when you have 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 code with
JavaScript to prevent the browser from rendering the code.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h1>The template Tag</h1>

38
<p>Content inside a template tag is hidden from the client.</p>

<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>

<p>A later example will show you how to use JavaScript to display the template content.</p>

</body>
</html>

<textarea> Defines a multiline input control (text area)

Definition and Usage


The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS'
height and width properties.
Example Code:
<!DOCTYPE html>
<html>
<body>

<textarea rows="4" cols="50">


At w3schools.com you will learn how to make a website. We offer free tutorials in all web
development technologies.
</textarea>

</body>
</html>

<tfoot> Groups the footer content in a table

Definition and Usage


The <tfoot> tag is used to group footer content in an HTML table.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify
each part of a table (footer, header, body).
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.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any
<caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>

<table>
<thead>
<tr>

39
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by
default. However, you can use CSS to style these elements.</p>

</body>
</html>

<th> Defines a header cell in a table

Definition and Usage


The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>

<thead> Groups the header content in a table

40
Definition and Usage
The <thead> tag is used to group header content in an HTML table.
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 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.
The <thead> tag must be used in the following context: As a child of a <table> element, after any
<caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>

<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by
default. However, you can use CSS to style these elements.</p>

</body>
</html>

<time> Defines a date/time

Definition and Usage


The <time> tag defines a human-readable date/time.
This element can also be used to encode dates and times in a machine-readable way so that user
agents can offer to add birthday reminders or scheduled events to the user's calendar, and search
engines can produce smarter search results.
Example Code:
<!DOCTYPE html>

41
<html>
<body>

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

<p><b>Note:</b> The time element does not render as anything special in any of the major
browsers.</p>

<p><strong>Note:</strong> The time tag is not supported in Internet


Explorer 8 and earlier versions.</p>

</body>
</html>

<title> Defines a title for the document

Definition and Usage


The <title> tag is required in all HTML documents and it defines the title of the document.
The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

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

</html>

<tr> Defines a row in a table

Definition and Usage


The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>

42
</table>

</body>
</html>

<track> Defines text tracks for media elements (<video> and


<audio>)

Definition and Usage


The <track> tag specifies text tracks for media elements (<audio> and <video>).
This element is used to specify subtitles, caption files or other files containing text, that should be
visible when the media is playing.

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines text that should be stylistically different from


normal text

Definition and Usage


The <u> tag represents some text that should be stylistically different from normal text, such as
misspelled words or proper nouns in Chinese.
Example Code:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<ul> Defines an unordered list

Definition and Usage


The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Example Code:
<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>


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

</body>
</html>

<var> Defines a variable

Definition and Usage


The <var> tag is a phrase tag. It defines a variable.
Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.
Example Code:

43
<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

<video> Defines a video or movie

Definition and Usage


The <video> tag specifies video, such as a movie clip or other video streams.
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg
Example Code:
<!DOCTYPE html>
<html>
<body>

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


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier
versions.</p>

</body>
</html>

<wbr> Defines a possible line-break

Definition and Usage


The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong
place, you can use the <wbr> element to add word break opportunities.
Example Code:
<!DOCTYPE html>
<html>
<body>

<p>Try to shrink the browser window, to view how the very long word in
the paragraph below will break:</p>

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryvery
Veryveryvery
<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

<p><b>Note:</b> The wbr element is not supported in Internet Explorer 11 and


earlier versions.</p>

</body>
</html>

44

You might also like