HTML5 – Topic 1: Introduction to HTML5
What is HTML?
• HTML stands for HyperText Markup Language.
• It is the standard language used to create and structure content on the web.
• HTML is not a programming language; it is a markup language.
• HTML uses tags to define elements such as headings, paragraphs, links, images,
tables, forms, etc.
Example:
<p>This is a paragraph.</p>
Evolution to HTML5
• HTML5 is the latest version of HTML.
• Introduced to provide modern features for web applications.
• Advantages over older HTML versions:
o Supports multimedia (audio, video) without plugins.
o Provides semantic elements for better structure.
o Supports offline storage and local databases.
o Better support for mobile devices and responsive design.
o APIs for canvas, geolocation, drag & drop, etc.
Opening &
HTML Tag Explanation
Closing
Declares the
document type
<!DOCTYPE <!DOCTYPE
and HTML
html> html>
version
(HTML5).
Opening &
HTML Tag Explanation
Closing
Root element of
<html> ...
<html> an HTML
</html>
document.
Contains
<head> ... metadata, title,
<head>
</head> links to CSS/JS
files.
Sets the title of
<title> ... the web page
<title>
</title> (shown in
browser tab).
Provides
metadata like
charset,
<meta> <meta ...> description,
viewport (self-
closing in
HTML5).
Links external
resources like
<link> <link ...>
CSS (self-
closing).
<style> ... Embeds CSS
<style>
</style> styles in HTML.
Embeds
<script> ...
<script> JavaScript in
</script>
HTML.
Contains the
<body> ...
<body> main content of
</body>
the HTML page.
Opening &
HTML Tag Explanation
Closing
Represents
<header> ... introductory
<header>
</header> content or a
page header.
Represents
<footer> ... footer content
<footer>
</footer> for a page or
section.
<nav> ... Represents
<nav>
</nav> navigation links.
Main content of
<main> ... the page,
<main>
</main> unique per
document.
Defines a
<section> ...
<section> section in a
</section>
document.
Defines an
<article> ... independent,
<article>
</article> self-contained
content block.
Defines content
<aside> ... aside from the
<aside>
</aside> main content
(like a sidebar).
Headings, <h1>
is most
<h1> to <h6> <h1> ... </h1>
important, <h6>
is least.
Paragraph of
<p> <p> ... </p>
text.
Opening &
HTML Tag Explanation
Closing
Line break (self-
<br> <br>
closing).
Horizontal rule
(self-closing),
<hr> <hr> used to
separate
content.
Hyperlink to
<a href="...">
<a> another page or
... </a>
resource.
Embeds an
<img src="..."
<img> image (self-
alt="...">
closing).
Unordered list
<ul> <ul> ... </ul>
(bullets).
Ordered list
<ol> <ol> ... </ol>
(numbers).
List item (used
<li> <li> ... </li> inside <ul> or
<ol>).
<table> ...
<table> Table container.
</table>
<tr> <tr> ... </tr> Table row.
<td> <td> ... </td> Table data cell.
Table header
<th> <th> ... </th>
cell.
<form> ... Container for
<form>
</form> HTML forms.
Opening &
HTML Tag Explanation
Closing
<input Input field (text,
<input> type="..." checkbox, radio,
name="..."> etc.).
<textarea> ... Multi-line text
<textarea>
</textarea> input.
<button> ... Clickable
<button>
</button> button.
<select> ...
<select> Dropdown list.
</select>
<option> ... Option inside
<option>
</option> <select>.
<label> ... Label for a form
<label>
</label> control.
Generic block
<div> <div> ... </div>
container.
<span> ... Generic inline
<span>
</span> container.
Important text
<strong> ...
<strong> (bold by
</strong>
default).
Emphasized
<em> <em> ... </em> text (italic by
default).
Bold text
<b> <b> ... </b> (stylistic, not
semantic).
Italic text
<i> <i> ... </i>
(stylistic).
Opening &
HTML Tag Explanation
Closing
<mark> ...
<mark> Highlights text.
</mark>
<small> ...
<small> Smaller text.
</small>
<code> ... Inline code
<code>
</code> snippet.
Preformatted
<pre> ... text (keeps
<pre>
</pre> whitespace &
line breaks).
<blockquote>
<blockquote> ... Long quotation.
</blockquote>
Short, inline
<q> <q> ... </q>
quotation.
Embeds
<iframe
another HTML
<iframe> src="..."> ...
page within the
</iframe>
page.
<video> ... Embeds a
<video>
</video> video.
<audio> ... Embeds audio
<audio>
</audio> content.
Graphics
<canvas> ... container for
<canvas>
</canvas> JavaScript
drawing.
Scalable Vector
<svg> <svg> ... </svg> Graphics
container.
Opening &
HTML Tag Explanation
Closing
Metadata,
charset,
<meta> <meta ...> viewport
settings (self-
closing).
Basic Structure of an HTML5 Document
Every HTML5 page follows a standard structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML5 Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is my first HTML5 page.</p>
</body>
</html>
Explanation:
Tag Purpose
<!DOCTYPE html> Declares HTML5 version
<html> Root element of the page
<head> Contains meta-information, title, links to CSS/JS
<meta charset="UTF-8"> Sets character encoding
<title> Page title displayed in browser tab
<body> Main content visible to users
<h1> Heading level 1
Tag Purpose
<p> Paragraph
Key Features of HTML5
1. Semantic Elements – clearer structure for both humans and browsers:
<header>, <footer>, <article>, <section>, <nav>
2. Multimedia Support – natively embed:
o <audio>
o <video>
3. Form Enhancements – new input types:
o email, tel, url, number, date, color
4. Graphics & Interactive Content – using <canvas> and <svg>
5. Offline & Storage – local storage via localStorage and sessionStorage
6. Improved Accessibility – semantic tags improve screen reader support
Example of Semantic HTML5
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<section>
<article>
<h2>HTML5 Introduction</h2>
<p>HTML5 is the latest standard of HTML.</p>
</article>
</section>
<footer>
<p>© 2026 My Website</p>
</footer>
• Makes the page structured and easier for search engines and accessibility tools.
1. Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
• <!DOCTYPE html> – Declares the document type as HTML5.
• <html> – Root element of the HTML page.
• <head> – Contains metadata (title, links, scripts, styles).
• <title> – Sets the page title shown in the browser tab.
• <body> – Contains all the visible content on the page.
2. Headings
<h1>Largest Heading</h1>
<h2>Second Largest</h2>
<h3>Medium Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller</h5>
<h6>Smallest</h6>
• Headings <h1> to <h6> define the importance of content.
3. Text Formatting
<p>This is a paragraph.</p>
<b>Bold Text</b>
<strong>Important Text</strong>
<i>Italic Text</i>
<em>Emphasized Text</em>
<u>Underlined Text</u>
<small>Small Text</small>
<mark>Highlighted Text</mark>
4. Links
<a href="[Link] Example</a>
<a href="[Link] Email</a>
<a href="#section1">Go to Section 1</a>
• <a> – Anchor tag for links.
• href – Attribute that specifies the destination URL.
5. Images
<img src="[Link]" alt="Description" width="300" height="200">
• <img> – Displays an image.
• src – Path to the image.
• alt – Text shown if image fails to load.
• width and height – Size of the image.
6. Lists
Ordered List (numbered)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List (bullets)
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Description List
<dl>
<dt>HTML</dt>
<dd>Language for creating webpages</dd>
<dt>CSS</dt>
<dd>Used for styling webpages</dd>
</dl>
7. Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
• <table> – Creates a table.
• <tr> – Table row.
• <th> – Table header.
• <td> – Table data cell.
8. Forms & Inputs
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="checkbox" name="subscribe" value="yes"> Subscribe<br>
<input type="submit" value="Submit">
</form>
• <form> – Defines a form.
• <input> – Input field (text, email, password, radio, checkbox, submit, etc.)
• <label> – Labels an input field.
9. Multimedia
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
10. Other Common Tags
<br> <!-- Line Break -->
<hr> <!-- Horizontal Rule -->
<div>Content</div> <!-- Division / Container -->
<span>Text</span> <!-- Inline Container -->
