HTML5 Features, Semantic Elements, Multimedia and Forms
Introduction to HTML5
HTML stands for HyperText Markup Language.
It is the standard markup language used to create and structure web pages.
HTML combines two ideas:
- Hypertext – links one webpage or resource to another.
- Markup Language – uses tags to define the structure and meaning of webpage content.
HTML5 is a major version of HTML that introduced many features for building modern websites and web applications.
HTML5 added improved support for:
- Semantic Elements
- Audio
- Video
- Graphics
- Forms
- Local Storage
- Web Applications
- Drag and Drop
Difference Between Earlier HTML and HTML5
| Earlier HTML | HTML5 |
|---|---|
| Older HTML versions often used longer DOCTYPE declarations. | Uses the simple <!DOCTYPE html> declaration. |
| Had fewer semantic structural elements. | Introduced elements such as <header>, <footer>, <section>, and <article>. |
| Multimedia often depended heavily on external plug-ins. | Provides native <audio> and <video> elements. |
| Did not provide the HTML5 Canvas API. | Provides <canvas> for script-based graphics. |
| Had fewer specialized form input types. | Includes input types such as email, date, number, range, color, and URL. |
| Limited built-in support for web application features. | Supports features such as local storage, geolocation, and drag-and-drop APIs. |
Basic HTML5 Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML5 Page</title>
</head>
<body>
<h1>Hello HTML5</h1>
</body>
</html>
New Features in HTML5
HTML5 introduced many useful technologies and elements.
Important features include:
- New Semantic Elements
- Improved Forms
- Local Storage
- WebSocket
- Server-Sent Events
- Canvas
- Audio and Video
- Geolocation
- Microdata
- Drag and Drop
1. New Semantic Elements
HTML5 introduced meaningful structural elements such as:
<header><footer><main><section><article><nav><aside>
These elements help describe the purpose of different parts of a webpage.
2. Improved HTML5 Forms
HTML5 introduced new form features and input types.
Examples include:
<input type="email">
<input type="date">
<input type="number">
<input type="range">
<input type="color">
<input type="url">
It also introduced useful form attributes such as:
requiredplaceholderminmaxsteppattern
3. Local Storage
HTML5 web technologies provide Web Storage, which allows websites to store information in the user’s browser.
Two common types are:
localStoragesessionStorage
Local storage can preserve information without relying on older third-party browser plug-ins.
4. WebSocket
WebSocket provides two-way communication between a browser and a server.
It is useful for applications requiring fast real-time communication.
Examples include:
- Chat Applications
- Live Notifications
- Online Games
- Real-Time Dashboards
5. Server-Sent Events
Server-Sent Events (SSE) allow a server to continuously send updates to a web browser.
They may be useful for:
- Live News
- Notifications
- Score Updates
- Monitoring Systems
6. Canvas
HTML5 provides the <canvas> element.
It creates an area where graphics can be drawn using JavaScript.
Canvas can be used for:
- Lines
- Shapes
- Text
- Animations
- Games
- Charts
7. Audio and Video
HTML5 allows multimedia to be embedded directly using:
<audio>
and:
<video>
This reduces the need for older multimedia plug-ins.
8. Geolocation
The Geolocation API can allow users to choose to share their location with a website or web application.
It can be used in applications such as:
- Maps
- Nearby Services
- Location-Based Applications
Permission from the user is normally required.
9. Microdata
Microdata provides a way to add structured information to HTML content.
It can help software and search engines better understand webpage information.
10. Drag and Drop
HTML5 provides APIs that allow users to drag elements from one place and drop them into another location on a webpage.
HTML5 Semantic Elements
Semantic elements are HTML elements whose names clearly describe the purpose or meaning of their content.
Examples include:
<main><section><article><header><footer><figure><figcaption><aside><mark><summary><details><nav>
Semantic HTML improves:
- Code Readability
- Page Structure
- Accessibility
- Maintainability
1. <main> Element
The <main> element represents the main content of a webpage.
Example:
<main>
<h1>Web Browsers</h1>
<p>
A web browser is software used to access
and display web pages.
</p>
</main>
A document should generally contain one main content area.
2. <section> Element
The <section> element represents a thematic section of a document.
Example:
<section>
<h2>Introduction</h2>
<p>
This section contains introductory information.
</p>
</section>
Sections can be used for:
- Introduction
- Services
- Products
- Contact Information
- Chapters
3. <article> Element
The <article> element represents independent or self-contained content.
Examples include:
- Blog Posts
- News Articles
- Forum Posts
- Product Articles
Example:
<article>
<h2>Google Chrome</h2>
<p>
Google Chrome is a web browser developed by Google.
</p>
</article>
4. <header> Element
The <header> element represents introductory or header content.
Example:
<header>
<h1>My Website</h1>
<p>Welcome to my webpage.</p>
</header>
A header may contain:
- Logo
- Heading
- Navigation
- Introduction
5. <footer> Element
The <footer> element represents footer information.
Example:
<footer>
<p>Posted by XYZ</p>
<p>Contact: info@example.com</p>
</footer>
A footer may contain:
- Copyright
- Contact Information
- Author Information
- Useful Links
6. <figure> Element
The <figure> element represents self-contained content such as:
- Images
- Diagrams
- Illustrations
- Charts
Example:
<figure>
<img
src="flower.jpg"
alt="A flower">
</figure>
7. <figcaption> Element
The <figcaption> element provides a caption for content inside <figure>.
Example:
<figure>
<img
src="mountain.jpg"
alt="Mountain landscape"
width="300">
<figcaption>
Beautiful Mountain Landscape
</figcaption>
</figure>
8. <aside> Element
The <aside> element represents content indirectly related to the main content.
It may be used for:
- Sidebars
- Related Links
- Extra Information
- Advertisements
Example:
<aside>
<h3>Related Information</h3>
<p>
Read more articles about web browsers.
</p>
</aside>
9. <mark> Element
The <mark> element highlights text.
Example:
<p>
HTML5 introduced many
<mark>new semantic elements</mark>.
</p>
10. <summary> Element
The <summary> element provides a visible heading for a <details> element.
Example:
<details>
<summary>Read More</summary>
<p>
Additional information is shown here.
</p>
</details>
11. <details> Element
The <details> element creates content that users can open or close.
Example:
<details>
<summary>About Nepal</summary>
<p>
Nepal is a country in South Asia.
</p>
</details>
12. <nav> Element
The <nav> element represents navigation links.
Example:
<nav>
<a href="index.html">Home</a>
<a href="html.html">HTML</a>
<a href="javascript.html">JavaScript</a>
</nav>
Common HTML5 Semantic Elements
| Element | Purpose |
|---|---|
<main> | Main webpage content |
<section> | Thematic section |
<article> | Independent content |
<header> | Header or introductory content |
<footer> | Footer information |
<figure> | Self-contained media/content |
<figcaption> | Caption for a figure |
<aside> | Related or sidebar content |
<mark> | Highlighted text |
<details> | Expandable details |
<summary> | Heading for <details> |
<nav> | Navigation links |
HTML5 Multimedia Elements
Multimedia may include:
- Sound
- Music
- Video
- Movies
- Animation
HTML5 provides two major multimedia elements:
<audio><video>
HTML5 <video> Element
The <video> element displays video on a webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<video
width="500"
height="300"
controls>
<source
src="video.mp4"
type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
Important Video Attributes
Common attributes include:
controlsautoplaymutedloopwidthheightposter
Autoplay Video
Modern browsers often restrict autoplay with sound.
A common autoplay example is:
<video
width="500"
autoplay
muted
controls>
<source
src="video.mp4"
type="video/mp4">
</video>
HTML5 <audio> Element
The <audio> element is used to play audio on a webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Important Audio Attributes
Common attributes include:
controlsautoplaymutedloop
HTML5 Canvas
The <canvas> element provides a drawing area for graphics generated through JavaScript.
Basic Syntax
<canvas
id="myCanvas"
width="200"
height="100">
</canvas>
The canvas itself does not automatically draw graphics.
JavaScript is normally used to draw inside it.
Canvas Example
<canvas
id="myCanvas"
width="300"
height="150">
</canvas>
<script>
const canvas =
document.getElementById("myCanvas");
const ctx =
canvas.getContext("2d");
ctx.fillRect(50, 30, 150, 70);
</script>
Uses of Canvas
Canvas can be used for:
- Drawing Shapes
- Charts
- Games
- Animation
- Image Manipulation
- Dynamic Graphics
HTML5 SVG
SVG stands for:
Scalable Vector Graphics
SVG is an XML-based format used for describing two-dimensional vector graphics.
SVG graphics can be scaled without significant loss of quality.
Advantages of SVG
- Scalable
- Suitable for Logos
- Suitable for Icons
- Supports Shapes
- Supports Text
- Can be styled using CSS
- Can interact with JavaScript
SVG Circle Example
<svg
width="200"
height="120">
<circle
cx="60"
cy="60"
r="40"
stroke="yellow"
stroke-width="4"
fill="red">
</circle>
</svg>
SVG Rectangle Example
<svg
width="200"
height="100">
<rect
width="150"
height="50"
x="20"
y="20"
stroke="yellow"
stroke-width="4"
fill="red">
</rect>
</svg>
SVG Polygon Example
<svg
width="220"
height="220">
<polygon
points="100,10 40,198 190,78 10,78 168,198"
style="
fill:red;
stroke:black;
stroke-width:3;
fill-rule:nonzero;">
</polygon>
</svg>
Difference Between Canvas and SVG
| Canvas | SVG |
|---|---|
| Uses a drawing surface. | Uses vector elements. |
| Usually controlled using JavaScript. | Defined using XML-like markup. |
| Good for dynamic graphics and games. | Good for icons, logos, and diagrams. |
| Individual drawn objects are not DOM elements. | SVG shapes are DOM elements. |
| Resolution depends on canvas dimensions. | Scales well as vector graphics. |
HTML5 Drag and Drop
Drag and Drop is an HTML5 feature that allows users to select an element, drag it, and drop it in another location.
Examples include:
- Moving Images
- Rearranging Items
- File Interfaces
- Interactive Applications
Drag and Drop Events
Important events include:
ondragstart
Triggered when dragging begins.
ondrag
Triggered repeatedly while an element is being dragged.
ondragenter
Triggered when a dragged element enters a drop area.
ondragleave
Triggered when the dragged element leaves a drop area.
ondragover
Triggered while the dragged element is over a drop target.
ondrop
Triggered when the element is dropped.
ondragend
Triggered when dragging ends.
HTML5 Drag and Drop Example
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<style>
#dropArea {
width: 350px;
height: 120px;
border: 2px solid black;
padding: 10px;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData(
"text",
event.target.id
);
}
function drop(event) {
event.preventDefault();
const data =
event.dataTransfer.getData("text");
event.currentTarget.appendChild(
document.getElementById(data)
);
}
</script>
</head>
<body>
<div
id="dropArea"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<img
id="dragImage"
src="image.jpg"
alt="Draggable Image"
draggable="true"
ondragstart="drag(event)"
width="150">
</body>
</html>
HTML5 Forms
An HTML form is an area on a webpage that allows users to enter and submit information.
A form is created using:
<form>
Common form elements include:
<input><textarea><button><select><option>
<input> Element
The <input> element can create many different types of controls.
Examples include:
- Text
- Password
- Number
- Date
- Radio Button
- Checkbox
- File Upload
- Range
- Color
Text Box
A text box is used to enter a single line of text.
<input
type="text"
size="20"
maxlength="30">
Radio Button
A radio button is normally used when the user should choose one option from a group.
<input
type="radio"
id="married"
name="status"
value="married">
<label for="married">
Married
</label>
<input
type="radio"
id="unmarried"
name="status"
value="unmarried">
<label for="unmarried">
Unmarried
</label>
Checkbox
A checkbox allows one or more independent selections.
<input
type="checkbox"
id="movie"
name="interest"
value="movie">
<label for="movie">
Movie
</label>
<input
type="checkbox"
id="music"
name="interest"
value="music">
<label for="music">
Music
</label>
Password Box
A password input hides the characters entered by the user.
<input
type="password"
name="password"
size="10"
maxlength="20">
<select> Element
The <select> element creates a drop-down list.
The <option> element defines each choice.
<label for="country">
Country:
</label>
<select
id="country"
name="country">
<option value="nepal">
Nepal
</option>
<option value="bhutan">
Bhutan
</option>
<option value="india">
India
</option>
</select>
<textarea> Element
The <textarea> element allows multiple lines of text.
<label for="comments">
Comments:
</label>
<textarea
id="comments"
name="comments"
rows="3"
cols="20">
</textarea>
<button> Element
The <button> element creates a clickable button.
<button type="button">
Click
</button>
A form submission button can be created using:
<button type="submit">
Submit
</button>
New HTML5 Input Types
HTML5 introduced several useful input types.
| Input Type | Purpose |
|---|---|
text | Normal text |
email | Email address |
password | Password |
date | Date |
url | Website URL |
number | Numeric value |
range | Slider |
color | Color picker |
file | File upload |
checkbox | Multiple selection |
radio | Single selection from a group |
HTML5 Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
max-width: 600px;
margin: auto;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input,
select,
textarea,
button {
padding: 8px;
box-sizing: border-box;
}
input,
select,
textarea {
width: 100%;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>HTML5 Form Example</h1>
<form
action="/submit"
method="post">
<div class="form-group">
<label for="name">
Name:
</label>
<input
type="text"
id="name"
name="name"
required>
</div>
<div class="form-group">
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required>
</div>
<div class="form-group">
<label for="password">
Password:
</label>
<input
type="password"
id="password"
name="password"
required
minlength="8">
</div>
<div class="form-group">
<label for="dob">
Date of Birth:
</label>
<input
type="date"
id="dob"
name="dob">
</div>
<div class="form-group">
<label for="website">
Website:
</label>
<input
type="url"
id="website"
name="website">
</div>
<div class="form-group">
<label for="number">
Favorite Number:
</label>
<input
type="number"
id="number"
name="number"
min="1"
max="100"
step="1">
</div>
<div class="form-group">
<label for="range">
Experience Level:
</label>
<input
type="range"
id="range"
name="range"
min="0"
max="10"
step="1">
</div>
<div class="form-group">
<label for="color">
Favorite Color:
</label>
<input
type="color"
id="color"
name="color">
</div>
<div class="form-group">
<label for="file">
Upload File:
</label>
<input
type="file"
id="file"
name="file">
</div>
<div class="form-group">
<label for="bio">
Biography:
</label>
<textarea
id="bio"
name="bio"
rows="4"
cols="50">
</textarea>
</div>
<div class="form-group">
<label for="gender">
Gender:
</label>
<select
id="gender"
name="gender">
<option value="">
Select...
</option>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
<option value="other">
Other
</option>
</select>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
name="newsletter"
value="yes">
Subscribe to Newsletter
</label>
</div>
<fieldset>
<legend>
Preferred Contact Method
</legend>
<label>
<input
type="radio"
name="contact_method"
value="email"
checked>
Email
</label>
<label>
<input
type="radio"
name="contact_method"
value="phone">
Phone
</label>
</fieldset>
<br>
<button type="submit">
Submit
</button>
</form>
</body>
</html>
Quick Revision
HTML5
HTML5 introduced modern features for:
- Structure
- Multimedia
- Graphics
- Forms
- Web Applications
Major HTML5 Features
- Semantic Elements
- Improved Forms
- Local Storage
- WebSocket
- Server-Sent Events
- Canvas
- Audio and Video
- Geolocation
- Microdata
- Drag and Drop
Semantic Elements
<header>
<footer>
<main>
<section>
<article>
<nav>
<aside>
<figure>
<figcaption>
<details>
<summary>
Multimedia
<audio controls></audio>
<video controls></video>
Canvas
<canvas
id="myCanvas"
width="200"
height="100">
</canvas>
SVG
SVG stands for:
Scalable Vector Graphics
It is useful for:
- Shapes
- Icons
- Logos
- Diagrams
Drag and Drop
Important events include:
ondragstartondragondragenterondragleaveondragoverondropondragend
HTML5 Forms
Important elements include:
<form><input><textarea><select><option><button>
Important Exam Points
- HTML stands for HyperText Markup Language.
- HTML5 is a major version of HTML.
- HTML5 introduced semantic elements.
- Semantic elements describe the meaning of webpage sections.
<main>represents the main content.<section>represents a thematic section.<article>represents independent content.<header>defines introductory or header content.<footer>defines footer content.<figure>represents self-contained visual content.<figcaption>provides a caption for a figure.<aside>contains related or sidebar content.<mark>highlights text.<details>creates expandable content.<summary>provides the heading for a<details>element.<nav>defines navigation links.- HTML5 supports audio without older browser plug-ins.
- HTML5 supports video using the
<video>element. <canvas>is used with JavaScript to draw graphics.- SVG stands for Scalable Vector Graphics.
- SVG can create circles, rectangles, and polygons.
- Drag and drop allows elements to be moved interactively.
- HTML5 introduced improved form input types.
type="email"is used for email addresses.type="date"creates a date input.type="number"accepts numeric values.type="range"creates a slider.type="color"provides a color picker.type="file"allows file selection.<textarea>accepts multi-line text.<select>creates a drop-down list.<button>creates a clickable button.
Discussion
Share a helpful question, idea, or explanation with other students.