HTML Book

Basic HTML
Tag
<!DOCTYPE>
<html>
<head>
<title>
<body>
<h1> to <h6>
<p>
<br>
<hr>

Formatting
Tag
<acronym>
<abbr>
<address>
<b>
<bdi>
<bdo>
<big>
<blockquote>
<center>
<cite>
<code>
<del>
<dfn>
<em>
<font>
<i>
<ins>
<kbd>
<mark>
<meter>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<small>
<strike>
<strong>
<sub>
<sup>
<template>
<time>
<tt>
<u>
<var>
<wbr>
Forms and Input

Tag
<form>
<input>
<textarea>
<button>
<select>
<optgroup>
<option>
<label>
<fieldset>
<legend>
<datalist>
<output>
Frames
Tag
<frame>
<frameset>
<noframes>
<iframe>
Images
Tag
<img>
<map>
<area>
<canvas>
<figcaption>
<figure>
<picture>
<svg>
Audio / Video
Tag
<audio>
<source>
<track>
<video>
Links
Tag
<a>
<link>
<nav>
Lists
Tag
<ul>
<ol>
<li>
<dir>
<dl>
<dt>
<dd>
Tables
Tag
<table>
<caption>
<th>
<tr>
<td>
<thead>
<tbody>
<tfoot>
<col>
<colgroup>
Styles and
Semantics
Tag
<style>
<div>
<span>
<header>
<footer>
<main>
<section>
<article>
<aside>
<details>
<dialog>
<summary>
<data>
Meta Info
Tag
<head>
<meta>
<base>
<basefont>
Programming
Tag
<script>
<noscript>
<applet>
<embed>
<object>
<param>
Description
Defines the document type
Defines an HTML document
Defines information about the document
Defines a title for the document

Defines the document's body
Defines HTML headings
Defines a paragraph
Inserts a single line break
Defines a thematic change in the content
Defines a comment
Description
Not supported in HTML5. Use <abbr> instead.
Defines an acronym
Defines an abbreviation or an acronym
Defines contact information for the author/owner of a
document/article
Defines bold text

Isolates a part of text that might be formatted in a
different direction from other text outside it
Overrides the current text direction

Not supported in HTML5. Use CSS instead.
Defines big text
Defines a section that is quoted from another source

Defines centered text
Defines the title of a work
Defines a piece of computer code
Defines text that has been deleted from a document
Represents the defining instance of a term
Defines emphasized text
Defines font, color, and size for text
Defines a part of text in an alternate voice or mood
Defines a text that has been inserted into a document
Defines keyboard input
Defines marked/highlighted text
Defines a scalar measurement within a known range (a
gauge)
Defines preformatted text
Represents the progress of a task
Defines a short quotation

Defines what to show in browsers that do not support
ruby annotations
Defines an explanation/pronunciation of characters (for
East Asian typography)
Defines a ruby annotation (for East Asian typography)
Defines text that is no longer correct

Defines sample output from a computer program
Defines smaller text
Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
Defines important text
Defines subscripted text
Defines superscripted text
Defines a template
Defines a date/time
Defines teletype text
Defines text that should be stylistically different from
normal text
Defines a variable
Defines a possible line-break
Description
Defines an HTML form for user input
Defines an input control
Defines a multiline input control (text area)
Defines a clickable button

Defines a drop-down list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list

Defines a label for an <input> element
Groups related elements in a form
Defines a caption for a <fieldset> element

Specifies a list of pre-defined options for input controls
Defines the result of a calculation
Description
Not supported in HTML5.
Defines a window (a frame) in a frameset
Defines a set of frames
Defines an alternate content for users that do not
support frames
Defines an inline frame
Description
Defines an image
Defines a client-side image-map
Defines an area inside an image-map

Used to draw graphics, on the fly, via scripting (usually
JavaScript)
Defines a caption for a <figure> element
Specifies self-contained content
Defines a container for multiple image resources
Defines a container for SVG graphics
Description
Defines sound content
Defines multiple media resources for media elements

(<video>, <audio> and <picture>)
Defines text tracks for media elements (<video> and
<audio>)
Defines a video or movie
Description
Defines a hyperlink
Defines the relationship between a document and an
external resource (most used to link to style sheets)
Defines navigation links
Description
Defines an unordered list
Defines an ordered list
Defines a list item

Not supported in HTML5. Use <ul> instead.
Defines a directory list
Defines a description list
Defines a term/name in a description list

Defines a description of a term/name in a description
list
Description
Defines a table
Defines a table caption
Defines a header cell in a table

Defines a row in a table
Defines a cell in a table

Groups the header content in a table
Groups the body content in a table
Groups the footer content in a table
Specifies column properties for each column within a

<colgroup> element
Description
Defines style information for a document
Defines a section in a document

Defines a header for a document or section
Defines a footer for a document or section
Specifies the main content of a document

Defines an article
Defines content aside from the page content
Defines additional details that the user can view or hide
Defines a dialog box or window

Defines a visible heading for a <details> element
Links the given content with a machine-readable
translation
Description
Defines information about the document
Defines metadata about an HTML document

Specifies the base URL/target for all relative URLs in a
document
Specifies a default color, size, and font for all text in a
document
Description
Defines a client-side script
Defines an alternate content for users that do not

support client-side scripts
Not supported in HTML5. Use <embed> or <object>
instead.
Defines an embedded applet
Defines a container for an external (non-HTML)
application
Defines an embedded object
Defines a parameter for an object

Formula
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<head>
</head>
<title>HTML Elements Reference</title>

<body>
The content of the document......
</body>
<h1>This is heading 1</h1>

<p>This is some text in a paragraph.</p>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
<hr>
<!--This is a comment. Comments are not displayed in the browser--
>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<abbr title="World Health Organization">WHO</abbr>

<address>
Written by <a
href="mailto:webmaster@example.com">Jon
Doe</a>.<br>
Visit us at:<br>
Example.com<br></address>
<p>This is normal text - <b>and this is bold text</b>.</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>
<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>
<cite>The Scream</cite>
<code>button</code>
<del>blue</del>
<dfn>HTML</dfn>
<em>have</em>
<i>Lorem ipsum</i>
<ins>red</ins>!
<kbd>Ctrl</kbd>
<mark>milk</mark>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<progress id="file" value="32" max="100"> 32% </progress>
<q>Build a future where people live in harmony with nature.</q>
<rp>(</rp>
<rt> ㄏㄢˋ </rt>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
<s>My car is blue.</s>
<samp>File not found.<br>Press F1 to continue</samp>
<small>This is some smaller text.</small>
<strong>Strong text</strong>
<sub>subscript</sub>
<sup>superscript</sup>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg">
</template>
<time>10:00</time>
<u>parragraph</u>
<var>h</var>
<wbr>Http<wbr>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

<textarea id="w3mission" 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>
<button type="button">Click Me!</button>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<optgroup label="Swedish Cars">

<option value="saab">Saab</option>
</optgroup>
<label for="male">Male</label>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
</fieldset>
<legend>Personalia:</legend>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<output name="x" for="a b"></output>
<iframe src="https://www.w3schools.com"></iframe>
Try it Yourself »
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm"
alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm"
alt="Venus">
</map>
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<canvas id="myCanvas"></canvas>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<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>
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<source src="horse.ogg" type="audio/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<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>
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
<link rel="stylesheet" type="text/css" href="theme.css">

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<dt>Milk</dt>
<dd>White cold drink</dd>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption>Monthly savings</caption>
<th>Month</th>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<td>January</td>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<col span="2" style="background-color:red">

<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<span style="color:blue">blue</span>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<footer>
<p>Author: Hege Refsnes</p>
<p><a
href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
<main>
<h2>Web Browsers</h2>
<p>Chrome, Firefox, and Edge are the most used browsers
today.</p>
<article>
<h3>Google Chrome</h3>
<p>Chrome is a free, open-source web browser developed by
Google, released in 2008.</p>
</article>
</main>
<section>
<h2>WWF</h2>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released
in 2008. Chrome is the world's most popular web browser today!
</p>
</article>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks
and seasonal special events.</p>
</aside>
<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>
<dialog open>This is an open dialog window</dialog>

<summary>Epcot Center</summary>
<data value="21053">Cherry Tomato</data>
<head>
</head>
<meta name="description" content="Free Web tutorials">
<base href="https://www.w3schools.com/" target="_blank">

<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
<embed type="image/jpg" src="pic_trulli.jpg" width="300"

height="200">
Example
<object data="pic_trulli.jpg" width="300" height="200">
<param name="autoplay" value="true">

HTML Book

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Book

Uploaded by

Copyright:

Available Formats

Basic HTML

Forms and Input

Defines information about the document

Defines a title for the document

Defines HTML headings

Defines bold text

Overrides the current text direction

Not supported in HTML5. Use CSS instead.

Represents the progress of a task

Defines a short quotation

Defines text that is no longer correct

Defines an input control

Defines a multiline input control (text area)

Defines a clickable button

Defines a group of related options in a drop-down list

Defines an option in a drop-down list

Defines a caption for a <fieldset> element

Defines the result of a calculation

Defines an area inside an image-map

Defines a container for SVG graphics

Defines multiple media resources for media elements

Defines an ordered list

Defines a list item

Defines a term/name in a description list

Defines a table caption

Defines a header cell in a table

Defines a cell in a table

Groups the body content in a table

Groups the footer content in a table

Specifies column properties for each column within a

Defines a section in a document

Defines a section in a document

Defines a footer for a document or section

Specifies the main content of a document

Defines content aside from the page content

Defines additional details that the user can view or hide

Defines a dialog box or window

Defines metadata about an HTML document

Defines an alternate content for users that do not

Defines an embedded object

Defines a parameter for an object

<title>HTML Elements Reference</title>

<h1>This is heading 1</h1>

<p>This is some text in a paragraph.</p>

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

<abbr title="World Health Organization">WHO</abbr>

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

<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter>

<progress id="file" value="32" max="100"> 32% </progress>

<q>Build a future where people live in harmony with nature.</q>

<rt> ㄏㄢˋ </rt>

<input type="text" id="fname" name="fname"><br><br>

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

<optgroup label="Swedish Cars">

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

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

<source src="horse.ogg" type="audio/ogg">

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

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

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

<link rel="stylesheet" type="text/css" href="theme.css">

<dd>White cold drink</dd>