Article Heading
This is the main content of the article. Semantic HTML helps create a meaningful structure for your content.
Subsection
This is a subsection within the article.
Lesson 21: Introduction to HTML5
Discover the modern web standard that revolutionized web development with new elements, APIs, and capabilities
Start LearningWhat is HTML5?
HTML5 is the fifth and current major version of HTML, the standard markup language for creating web pages and web applications. It was finalized in 2014 and represents a significant evolution from previous HTML standards.
Key Insight: HTML5 was designed to replace both HTML4, XHTML, and the HTML DOM Level 2 with a single standard that includes new elements, attributes, and APIs for better multimedia support, offline capabilities, and semantic structure.
Goals of HTML5
- Reduce the need for external plugins (like Flash)
- Provide better error handling
- Replace scripting with more markup
- Make HTML more device-independent
- Provide better semantic structure for web documents
Key Features of HTML5
HTML5 introduced numerous features that have become essential for modern web development.
| Feature | Description |
|---|---|
| Semantic Elements | New elements like <header>, <footer>, <article>, and <section> that clearly define content structure |
| Audio & Video | Native support for multimedia with <audio> and <video> elements |
| Canvas | The <canvas> element for drawing graphics via JavaScript |
| Geolocation | API for detecting user location |
| Local Storage | Web storage for data persistence on the client side |
| Form Enhancements | New form elements, attributes, and input types |
| Drag & Drop | Native API for drag-and-drop functionality |
| Web Workers | JavaScript running in the background without affecting page performance |
Semantic Elements
Semantic elements clearly define their meaning to both the browser and developer. They help create better document structure and improve accessibility.
Why Semantic HTML Matters: Semantic elements improve SEO by helping search engines understand page content. They also enhance accessibility for screen readers and make code easier to maintain.
Common Semantic Elements
| Element | Description |
|---|---|
| <header> | Represents introductory content or a set of navigational links |
| <nav> | Defines a set of navigation links |
| <main> | Specifies the main content of a document |
| <article> | Defines independent, self-contained content |
| <section> | Defines a section in a document |
| <aside> | Defines content aside from the content it is placed in |
| <footer> | Defines a footer for a document or section |
| <figure> & <figcaption> | Represents self-contained content with an optional caption |
Semantic Structure Example
<body>
<header>
<h1>Website Title</h1>
<nav>...</nav>
</header>
<main>
<article>
<h2>Article Heading</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Related Content</h3>
<p>Sidebar content...</p>
</aside>
</main>
<footer>
<p>Copyright information</p>
</footer>
</body>
Result:
Website Title
New Form Elements & Attributes
HTML5 introduced several new form input types and attributes to enhance user experience and validation.
New Input Types
| Input Type | Description |
|---|---|
| For email addresses with validation | |
| url | For web addresses with validation |
| number | For numerical input with spinner controls |
| range | Slider control for numerical input |
| date | Date picker control |
| time | Time input control |
| color | Color picker control |
| search | Search field with specialized styling |
New Form Attributes
| Attribute | Description |
|---|---|
| placeholder | Hint text displayed in the input field when empty |
| required | Specifies that an input field must be filled out |
| autofocus | Automatically focuses the input element when page loads |
| pattern | Regular expression pattern for input validation |
| autocomplete | Controls browser autocomplete behavior |
Form Example
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required placeholder="Enter your email">
</div>
<div class="form-group">
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate">
</div>
<div class="form-group">
<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" step="5">
</div>
<div class="form-group">
<label for="color">Favorite Color:</label>
<input type="color" id="color" value="#ff0000">
</div>
<button type="submit">Submit</button>
</form>
Result:
HTML5 APIs
HTML5 introduced several JavaScript APIs that extend the capabilities of web applications.
Important: While these APIs are part of the HTML5 specification, they are implemented using JavaScript and require proper scripting to utilize.
Key HTML5 APIs
| API | Description |
|---|---|
| Geolocation | Allows websites to detect the user's physical location |
| Drag & Drop | Enables native drag-and-drop functionality |
| Local Storage | Stores data in the user's browser with no expiration |
| Session Storage | Stores data for one session (cleared when tab closes) |
| Web Workers | Runs JavaScript in the background without blocking UI |
| Web Sockets | Provides full-duplex communication channels over TCP |
| Canvas | Provides a bitmap area for drawing with JavaScript |
Geolocation API Example
// Check if Geolocation is supported
if (navigator.geolocation) {
// Get current position
navigator.geolocation.getCurrentPosition(
function(position) {
// Success callback
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`Latitude: ${lat}, Longitude: ${lng}`);
},
function(error) {
// Error callback
console.error("Error getting location:", error.message);
}
);
} else {
console.log("Geolocation is not supported by this browser.");
}
Try It Out:
Backward Compatibility
HTML5 was designed with backward compatibility in mind, allowing it to work in older browsers while providing enhanced features in modern browsers.
Polyfills: For features not supported in older browsers, developers can use polyfills - JavaScript code that replicates the functionality of modern APIs in older browsers.
Ensuring Compatibility
- Use feature detection instead of browser detection
- Provide fallback content for new elements
- Use polyfills for JavaScript APIs
- Validate your HTML5 code
- Test in multiple browsers
Modernizr - Feature Detection Library
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
<script src="modernizr.js"></script>
<script>
if (Modernizr.geolocation) {
// Use geolocation API
} else {
// Provide fallback solution
}
</script>
Practical Exercise: Create a Blog Post
Create a blog post using HTML5 semantic elements and new features.
Solution:
My HTML5 Blog
A showcase of modern web technologies
Why HTML5 Matters
Published on
HTML5 has revolutionized web development by providing a rich set of features that enable developers to create more interactive and dynamic web applications.
Semantic Structure
With semantic elements like <article>, <section>, and <nav>, HTML5 makes it easier to create meaningful document structures.
Multimedia Support
Native <audio> and <video> elements eliminate the need for plugins like Flash.