HTML5 Examples
File Name: firstWebPage.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple HTML Document </title>
</head>
<body>
<h1>Heading</h1>
</body>
</html>
Notes: Create a new text document. Type the above code. save the file on your desktop as "firstWebPage.html". Open with web browser to view the page.
File Name: heading.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 headings demo </title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Notes: Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. <h1> headings are displayed in largest font, whereas <h6> headings are displayed in smallest font.
File Name: paragraph.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 paragraphs demo </title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Notes: Paragraphs are used in text content to read it easily and more readily understood. The HTML <p> element defines a paragraph.
File Name: hrtag.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<p>Text before a horizontal rule:</p>
<hr>
<p>Text before line break:</p>
<br>
<p>Text after line break:</p>
<p>Text with blank space</p>
</body>
</html>
Notes: The <hr> tag is used to create a horizontal rule (line) across the browser page. The <br> defines a line break (a new line). is used to create a single blank space.
File Name: image.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<img src="Car.jpg" alt="Car image">
</body>
</html>
Notes: The <img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. src stands for "source" and tells the browser where to find the image. You can add width and height attributes to the image tag.
File Name: textFormat.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p><p>This is <b>bold text</b>.</p>
</body>
</html>
Notes: HTML text formatting tags are used to make some text on your web pages to appear differently than normal text.
File Name: pretag.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
</body>
</html>
Notes: <pre> tag is used to display spaces, tabs, line breaks, etc exactly as written in the HTML file. It is very helpful in presenting text where spaces and line breaks are important like poem or code.
File Name: symbols.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<h1>Sri Ramanuja e-Patashala ®</h1>
</body>
</html>
Notes: HTML entities (also known as character entity references) enable you to add a wide range of characters to an HTML document.
File Name: quotes.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<blockquote> Conquer the heart of the enemy with truth and love, not by violence.
<cite>By Mahatma Gandhi</cite></blockquote>
<p>This is an example of <q>short inline</q> quotation.</p>
</body>
</html>
Notes: <q> tag is used for a short quotation. </blockquote> tag is used for a block level quote. The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work.
File Name: address.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<address>
Leaders Techno school, <br>
123-3/4A,Beach Road,<br>
Majali-Post,<br>
Delhi-581400
</address>
</body>
</html>
Notes: HTML provides a special tag <address> to represent contact information for a person, people or organization.
File Name: marquee.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
</body>
</html>
Notes: The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has been deprecated in the new version of HTML, i.e., HTML 5.
File Name: hyperlink.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<a href ="https://www.google.com/">Google Search</a><br>
<p>The following link open in a new browser window</p>
<a href = "aboutus.php" target="_blank">About us</a>
<p>Image Link</p>
<a href="aboutus.php" target="_blank"><img src="images/aboutus.jpg"></a>
</body>
</html>
Notes: A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the web. Links are specified in HTML using the <a> tag. The href attribute of this tag identifies the page to be loaded.
File Name: bookmark.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<p id="top">An SSD, or solid-state drive, is a type of storage device used
in computers. This non-volatile storage media stores persistent
data on solid-state flash memory. SSDs replace traditional hard
disk drives (HDDs) in computers and perform the same basic
functions as a hard drive. But SSDs are significantly faster
in comparison. With an SSD, the device's operating system will
boot up more rapidly, programs will load quicker and files can
be saved faster.</p>
<p>A traditional hard drive consists of a spinning disk with a
read/write head on a mechanical arm called an actuator. An HDD
reads and writes data magnetically. The magnetic properties,
however, can lead to mechanical breakdowns.</p>
<img src="ssd.jpg">
<p>By comparison, an SSD has no moving parts to break or spin up
or down. The two key components in an SSD are the flash controller
and NAND flash memory chips. This configuration is optimized to
deliver high read/write performance for sequential and random
data requests.</p>
<p>SSDs are used anywhere that hard drives can be deployed.
In consumer products, for example, they are used in personal
computers (PCs), laptops, computer games, digital cameras,
digital music players, smartphones, tablets and thumb drives.
They are also incorporated with graphics cards. However,
they are more expensive than traditional HDDs.</p>
<a href="#top">Top</a>
</body>
</html>
Notes: Anchors can be used to jump to specific tags on an HTML page. The tag can point to any element that has an id attribute. Anchors are mostly used to jump to a subsection of a page
File Name: audio.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<audio controls>
<source src="media/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Notes: HTML5 provides a new standard for embedding an audio file on a web page. You can embed an audio file to a page using the <audio> element.
File Name: video.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<video width="500" height="300" controls>
<source src="media/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Notes: HTML5 provides a new standard for embedding an audio file on a web page. You can embed an audio file to a page using the <audio> element.
File Name: unorderedlist.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<h2>HTML Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<h2>HTML Nested Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Notes: An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag.
File Name: orderedlist.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<h2>HTML Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr>
<h2>HTML Nested Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea
<ol type = "i">
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Notes: If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag.
File Name: table.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td>Class</td>
<td>Marks</td>
</tr>
<tr>
<td>Raghav</td>
<td>8th</td>
<td>590</td>
</tr>
<tr>
<td>Sri Rama</td>
<td>10th</td>
<td>580</td>
</tr>
</table>
</body>
</html>
Notes: The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.
File Name: form.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<form method="GET" action="login.php">
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit"value="Submit">
</form>
</body>
</html>
Notes: Web page forms are built from HTML elements to collect user inputs like user name, user address, contact phone number, email address etc.
File Name: favicon.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
<link rel="icon" type="image/x-icon" href="ball.jpg">
</head>
<body>
<h1>HTML Favicon</h1>
</body>
</html>
Notes: A favicon is a small image displayed next to the page title in the browser tab.
File Name: float.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Examples</title>
</head>
<body>
<h1>Wrapping an Image with the text </h1>
<img src ="image1.jpg" width="400" height="300">
<p>Writing programs (or programming) is a very creative
and rewarding activity you can learn how to do. Why?
If you learn to paint, you can create pictures.
If you learn to play the violin, you can make music.
But if you learn to program, you can create entirely new
experiences (and you can make pictures and music too,
if you wish).</p>
</body>
</html>
Notes: A favicon is a small image displayed next to the page title in the browser tab.