HTML Tutorial Examples
HTML Introduction Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic Example</title>
</head>
<body>
<h1>HTML Basic Example</h1>
<p>This is basic example in HTML at Tutorialsroot</p>
</body>
</html>
Output
HTML Basic Tags Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic Tag</title>
</head>
<body>
<h1>HTML Basic Tag</h1>
<p>This is basic Tag in HTML at Tutorialsroot</p>
</body>
</html>
Heading Tags Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags Example</title>
</head>
<body>
<h1>Tutorialsroot heading 1</h1>
<h2>Tutorialsroot heading 2</h2>
<h3>Tutorialsroot heading 3</h3>
<h4>Tutorialsroot heading 4</h4>
<h5>Tutorialsroot heading 5</h5>
<h6>Tutorialsroot heading 6</h6>
</body>
</html>
Output
Paragraph Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag Example</title>
</head>
<body>
<p>Tutorialsroot Paragraph Example 1</p>
<p>Tutorialsroot Paragraph Example 2</p>
<p>Tutorialsroot Paragraph Example 3</p>
<p>Tutorialsroot Paragraph Example 4</p>
<p>Tutorialsroot Paragraph Example 5</p>
</body>
</html>
Output
HTML links Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Links Example</title>
</head>
<body>
<a href="http://www.tutorialsroot.com">Tutorialsroot Links Example </a>
</body>
</html>
Output
HTML Images Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Images Example</title>
</head>
<body>
<img src="image_hyperlink.jpg" alt="Tutorialsroot.com" width="200" height="200">
</body>
</html>
Output
HTML Attributes Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Attribute Example</title>
</head>
<body>
<h2 title="The Title Attribute">The Title Attribute</h2>
<p title="I am a Tooltip">
Mouse over this heading, to Display the title Attribute as a Tooltip.
</p>
</body>
</html>
Output
The href Attribute Example
<!DOCTYPE html>
<html>
<head>
<title>HTML href Attribute Example</title>
</head>
<body>
<a href="http://www.tutorialsroot.com">This is a link</a>
</body>
</html>
Output
The width and height Attributes Example
<!DOCTYPE html>
<html>
<head>
<title>HTML width and height Attribute Example</title>
</head>
<body>
<img src="image_hyperlink.jpg" width="500" height="600">
</body>
</html>
Output
The alt Attribute Example
<!DOCTYPE html>
<html>
<head>
<title>HTML alt Attribute Example</title>
</head>
<body>
<img src="image_hyperlink.jpg" alt="Image Hyperlink" width="500" height="600">
</body>
</html>
Output
The Attribute without quotes Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Attribute without quotes Example</title>
</head>
<body>
<a href=http://www.tutorialsroot.com>This is a link</a>
</body>
</html>
Output
HTML Headings Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>Tutorialsroot Heading 1</h1>
<h2>Tutorialsroot Heading 2</h2>
<h3>Tutorialsroot Heading 3</h3>
<h4>Tutorialsroot Heading 4</h4>
<h5>Tutorialsroot Heading 5</h5>
<h6>Tutorialsroot Heading 6</h6>
</body>
</html>
Output
HTML Horizontal Rules Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Rules Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is some text</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text</p>
<hr>
<h3>This is heading 2</h3>
<p>This is some other text</p>
</body>
</html>
Output
HTML head Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Head Example</title>
<meta charset="UTF-8">
</head>
<body>
<p>This is some other text</p>
<p>This is some other text</p>
</body>
</html>
Output
HTML Paragraphs Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraphs Example</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
Output
HTML use of line breaks Example
<!DOCTYPE html>
<html>
<head>
<title>HTML use of line breaks Example</title>
</head>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
Output
Line breaks and spaces with the <pre> Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Line breaks and spaces with the <pre> Tag Example</title>
</head>
<body>
<pre>
My Name is Ammu.
I Live in Telangana
My Best Friend is Ali
He is Very Handsome
</pre>
</body>
</html>
Output
HTML Styles Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Styles Example</title>
</head>
<body>
<p>My Name is Ammu</p>
<p style="color:red;">I Live in Telangana</p>
<p style="color:blue;">My Best Friend is Ali</p>
<p style="font-size:36px;">He is Very Handsome</p>
</body>
</html>
Output
HTML Background Color Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Color Example</title>
</head>
<body style="background-color:red;">
<body>
<h1>My Name is Ammu</h1>
<p>I Live in Telangana</p>
</body>
</html>
Output
HTML Text Color Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Color Example</title>
</head>
<body>
<h1 style="color:red;">My Name is Ammu</h1>
<p style="color:blue;>I Live in Telangana</p>
</body>
</html>
Output
HTML Text Font Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Font Example</title>
</head>
<body>
<h1 style="font-family:verdana;">My Name is Ammu</h1>
<p style="font-family:courier;">I Live in Telangana</p>
</body>
</html>
Output
HTML Text Size Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Size Example</title>
</head>
<body>
<h1 style="font-size:250%;">My Name is Ammu</h1>
<p style="font-size:170%;">I Live in Telangana</p>
</body>
</html>
Output
HTML Text Alignment Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Alignment Example</title>
</head>
<body>
<h1 style="text-align:center;">My Name is Ammu</h1>
<p style="text-align:center;">I Live in Telangana</p>
</body>
</html>
Output
HTML Text Formatting Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Alignment Example</title>
</head>
<body>
<h1 style="text-align:center;">My Name is Ammu</h1>
<p style="text-align:center;">I Live in Telangana</p>
</body>
</html>
Output
HTML Images Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Example</title>
</head>
<body>
<h2>HTML Image Example</h2>
<img src="tutorialsroot.jpg" alt="Tutorialsroot"/>
</body>
</html>
Output
HTML Layouts Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout Table</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="red">
<h1 style="text-align:center;">This is Web Page</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="blue" width="70">
<b>Main Menu</b><br />
HTML<br />
HTML5<br />
CSS<br />
PHP...
</td>
<td bgcolor="Orange" width="100" height="250">
Web Development Tutorials
</td>
</tr>
<tr>
<td colspan="2" height="50" bgcolor="Cyan">
<center>
Copyright © Tutorialsroot.com 2017. All Rights Reserved
</center>
</td>
</tr>
</table>
</body>
</html>
Output
HTML Layout with DIV, SPAN and CSS Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout with DIV, SPAN and CSS</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:#F52807">
Tutorialsroot Header
</div>
<div style="background-color:#B8FF33;height:200px;width:30%;float:left;">
Left menu
</div>
<div style="background-color:#33FF77;height:200px;width:70%;float:right;">
Main body
</div>
<div style="background-color:#F52807;clear:both">
Tutorialsroot Footer
</div>
</div>
</body>
</html>
Output
HTML Tables Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Table </title>
</head>
<body>
<table style="width:100%" border="2px">
<tr>
<th>Name</th>
<th colspan="2">cell phone</th>
</tr>
<tr>
<td>Saharaukh</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Salman</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Amir</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Akshay</td>
<td>66644973</td>
<td>23452397</td>
</tr>
<tr>
<td>Amit</td>
<td>66644973</td>
<td>23452397</td>
</tr>
</table>
</body>
</html>
Output
Table Border Examples
<!DOCTYPE html>
<html>
<head>
<title>Table Border Example</title>
</head>
<body>
<table border="2">
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr >
<td>cell one</td>
<td>cell two</td>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
</body>
</html>
Output
Table Heading Examples
<!DOCTYPE html>
<html>
<head>
<title>Table Heading Example</title>
</head>
<body>
<table>
<tr>
<th>Column One</th>
<th>Column two</th>
<th>Column three</th>
<th>Column four</th>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
</body>
</html>
Output
Table Colspan Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output
HTML Lists Examples
Unordered List Example
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h3>Unordered List Example</h3>
<ul>
<li>Shahrukh Khan</li>
<li>Salman Khan</li>
<li>Amir Khan</li>
<li>Ranbir Singh</li>
</ul>
</body>
</html>
Output
Ordered List Example
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
<li>Shahrukh Khan</li>
<li>Salman Khan</li>
<li>Amir Khan</li>
<li>Ranbir Singh</li>
</ol>
</body>
</html>
Output
Definition List Example
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h3>Definition List Example</h3>
<dl>
<dt><b>Tutorialsroot</b></dt>
<dd>Learn HTML, PHP, HTML5 with examples</dd>
<dt><b>CSS</b></dt>
<dd>CSS3</dd>
</dl>
</body>
</html>
Output
HTML Links Example
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h3>Anchor Tag</h3>
<a href="http://tutorialsroot.com/" target="_self">Tutorialroot</a>
</body>
</html>
Output
How to HTML Link Example
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink</title>
</head>
<body>
<p>Click Following Image Hyperlink</p>
<a href = "http://www.tutorialsroot.com" target = "_self">
<img src = "tutorialsroot.png" alt = "Image Hyperlink" border = "0"/>
</a>
</body>
</html>
Output
HTML Frames Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<body>
<p>This page is displayed in an Frames...</p>
<iframe src="/html/menu.htm">
</iframe>
<p>This page is displayed in an Frames</p>
</body>
</html>
Output
HTML Frameset Attributes Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Output
HTML Backgrounds Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
</body>
</html>
Output
HTMLl Background with Images Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images Example </title>
</head>
<body>
<table background = "/images/html.gif" width = "100%" height = "100">
<tr>
<td>This background is filled up with HTML image.</td>
</tr>
</table>
</body>
</html>
Output
HTML Forms Example
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form Example
<!DOCTYPE>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h3>HTML Form Example</h3>
<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
<td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
<td><input type="password" name="password" id="register_password" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>
Output