HTML5 Basics: Tutorials and Examples
Introduction
HTML5 is the latest standard for HTML, providing new elements and APIs for building
modern, interactive web applications. It offers improved support for multimedia,
better semantic elements, and enhanced form controls.
Basic HTML5 Structure
A basic HTML5 document includes the <!DOCTYPE html> declaration and a few
fundamental elements.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Basics</title>
</head>
<body>
<h1>Hello, HTML5!</h1>
<p>This is a basic HTML5 document.</p>
</body>
</html>
Explanation:
• <!DOCTYPE html>: Declares the document type and HTML version.
• <html>: Root element of the HTML document.
• <head>: Contains meta-information about the document, such as character set
and viewport settings.
• <body>: Contains the content of the document.
New HTML5 Elements
1. Semantic Elements
HTML5 introduces semantic elements to improve the structure and readability of web
pages.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Elements</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about section.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
2. Form Enhancements
HTML5 adds new input types and attributes for forms.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Forms</title>
</head>
<body>
<h1>HTML5 Forms</h1>
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<br>
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="10">
<br>
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<br>
<label for="color">Color:</label>
<input type="color" id="color" name="color">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. Multimedia Elements
HTML5 provides native support for audio and video.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Multimedia</title>
</head>
<body>
<h1>HTML5 Multimedia</h1>
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
4. Canvas Element
The <canvas> element allows for drawing graphics via JavaScript.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas</title>
</head>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid
#000000;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 100);
// Draw a circle
ctx.beginPath();
ctx.arc(240, 150, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
5. Geolocation
HTML5 allows web applications to access the user's location.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Geolocation</title>
</head>
<body>
<h1>HTML5 Geolocation</h1>
<button onclick="getLocation()">Get Location</button>
<p id="result"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById('result').innerHTML = "Geolocation is not supported by
this browser.";
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById('result').innerHTML = "Latitude: " + latitude +
"<br>Longitude: " + longitude;
}
</script>
</body>
</html>
6. Local Storage
HTML5 introduces local storage to save data on the client-side.
Examples:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Local Storage</title>
</head>
<body>
<h1>HTML5 Local Storage</h1>
<input type="text" id="dataInput" placeholder="Enter some text">
<button onclick="saveData()">Save Data</button>
<button onclick="loadData()">Load Data</button>
<p id="storedData"></p>
<script>
function saveData() {
var data = document.getElementById('dataInput').value;
localStorage.setItem('myData', data);
function loadData() {
var data = localStorage.getItem('myData');
document.getElementById('storedData').innerHTML = data ? data : 'No data found.';
</script>
</body>
</html>
