HTML5 FEATURES:
1. HTML5 Vector Graphics – <svg>
Used to create scalable vector graphics.
Graphics do not lose quality when resized.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"></circle>
</svg>
2. HTML5 Multimedia – <audio> and <video>
Used to embed audio and video without plugins.
Video Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
Audio Example:
<audio controls>
<source src="song.mp3" type="audio/mp3">
</audio>
3. Header and Footer – <header> and <footer>
Semantic tags introduced in HTML5.
<header> → top section (title, logo)
<footer> → bottom section (copyright, contact)
Example:
<header>
<h1>My Website</h1>
</header>
<footer>
<p>© 2024 All Rights Reserved</p>
</footer>
4. Spell-Checking Feature – spellcheck
Checks spelling in text input fields.
Attribute value can be true or false.
Example:
<textarea spellcheck="true"></textarea>
5. Figure and Figure Caption – <figure> and <figcaption>
Used to group images with captions.
Improves semantic meaning.
Example:
<figure>
<img src="[Link]" alt="Sample Image">
1
<figcaption>Figure: Sample Image</figcaption>
</figure>
6. Navigation Tag – <nav>
Used to define navigation links.
Improves accessibility and SEO.
Example:
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
7. Progress Tag – <progress>
Displays task progress (download, loading, etc.).
Example:
<progress value="60" max="100"></progress>
8. Placeholder Attribute – placeholder
Displays hint text inside input fields.
Disappears when user types.
Example:
<input type="text" placeholder="Enter your name">
9. E-mail Attribute – type="email"
Validates email format automatically.
HTML5 form validation feature.
Example:
<input type="email" placeholder="Enter your email">
2
1.. Make an application that utilizes HTML5's vector graphics, multimedia,
header and footer, and spell-checking features.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Application</title>
</head>
<body>
<header>
<h1 align="center">HTML5 Application</h1>
<hr>
</header>
<main>
<h2>Vector Graphics</h2>
<svg width="200" height="200">
<circle cx="100" cy="100" r="60" fill="skyblue"></circle>
</svg>
<hr>
<h2>Multimedia</h2>
<video width="320" height="240" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<hr>
<h2>Spell Checking</h2>
<form>
<textarea rows="4" cols="40" spellcheck="true" placeholder="Type
here..."></textarea>
<br><br>
<button type="submit">Submit</button>
</form>
3
</main>
<hr>
<footer align="center">
<p>© 2024 HTML5 Application. All rights reserved.</p>
</footer>
</body>
</html>
2. Create a program with HTML5 features such as figure and figure
caption, nav tag, progress tag, place holder attribute, E-mail attribute
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Features Demo</title>
</head>
<body>
<!-- Navigation Section -->
<nav>
<a href="#">Home</a> |
<a href="#">Gallery</a> |
<a href="#">Contact</a>
</nav>
<hr>
<!-- Figure and Figcaption -->
<h2>Figure and Figure Caption</h2>
<figure>
<img src="[Link]" alt="Nature Image" width="300" height="200">
<figcaption>Figure: Beautiful Nature Scene</figcaption>
</figure>
<hr>
<!-- Progress Tag -->
<h2>Progress Tag</h2>
<p>Course Completion:</p>
<progress value="70" max="100"></progress>
4
<hr>
<!-- Form with Placeholder and Email -->
<h2>User Registration</h2>
<form>
<p>
Name: <br>
<input type="text" placeholder="Enter your name">
</p>
<p>
Email: <br>
<input type="email" placeholder="Enter your email">
</p>
<input type="submit" value="Submit">
</form>
</body>
</html>