40 Intermediate HTML Tutorials
1. Form Validation Attributes
HTML5 provides built-in form validation attributes like required, pattern, and minlength to enforce input rules.
Example: Required and pattern validation.
<form>
<label for="email">Email:</label>
<input type="email" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}">
<button type="submit">Submit</button>
</form>Note: Use clear error messages via JavaScript for better UX.
2. Data Attributes
Custom data-* attributes store extra information on elements for JavaScript or CSS.
Example: Data attribute usage.
<div data-info="extra" style="background-color: #f0f0f0;">Content</div>
<script>
console.log(document.querySelector('div').dataset.info); // Logs "extra"
</script>Note: Use lowercase for data attribute names.
3. ARIA Attributes
ARIA attributes enhance accessibility by providing roles and states for assistive technologies.
Example: ARIA for a button.
<button aria-label="Close dialog" role="button">X</button>Note: Use ARIA only when native HTML is insufficient.
4. HTML5 Input Types
HTML5 introduces input types like email, tel, and date for specialized input handling.
Example: Date and email inputs.
<form>
<input type="date" name="birthdate">
<input type="email" name="email">
</form>Note: Browser support varies; test across devices.
5. Form Method and Action
The method (GET/POST) and action attributes define how and where form data is sent.
Example: Form submission.
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>Note: Use POST for sensitive data to avoid URL exposure.
6. HTML5 Semantic Structure
Semantic elements like <main>, <article>, and <section> improve structure and accessibility.
Example: Semantic layout.
<header>
<h1>Site Title</h1>
</header>
<main>
<section>
<article>Content here</article>
</section>
</main>Site Title
Note: Avoid overusing divs when semantics apply.
7. Picture Element
The <picture> tag provides responsive image sources based on screen size or format.
Example: Responsive image with picture.
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<img src="large.jpg" alt="Responsive Image">
</picture>Note: Use for adaptive image delivery.
8. Responsive Images
The srcset and sizes attributes optimize images for different screen resolutions.
Example: Responsive image.
<img src="default.jpg" srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive">Note: Test across devices for optimal performance.
9. HTML5 Video Attributes
Video attributes like autoplay, loop, and muted control playback behavior.
Example: Video with attributes.
<video width="320" height="240" controls loop muted>
<source src="video.mp4" type="video/mp4">
</video>Note: Avoid autoplay without muted for better UX.
10. HTML5 Audio Attributes
Audio attributes like controls, loop, and preload manage audio playback.
Example: Audio with attributes.
<audio controls loop preload="auto">
<source src="audio.mp3" type="audio/mpeg">
</audio>Note: Use multiple sources for compatibility.
11. Advanced Tables
Tables can include <thead>, <tbody>, and <tfoot> for structured data.
Example: Structured table.
<table border="1">
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>25</td></tr>
</tbody>
</table>| Name | Age |
|---|---|
| John | 25 |
Note: Use CSS for styling instead of border attributes.
12. Colspan and Rowspan
colspan and rowspan allow table cells to span multiple columns or rows.
Example: Spanning cells.
<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>Cell 1</td>
<td rowspan="2">Cell 2</td>
</tr>
<tr><td>Cell 3</td></tr>
</table>| Header | |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | |
Note: Ensure table structure remains accessible.
13. HTML5 Canvas Basics
The <canvas> tag enables dynamic graphics rendering via JavaScript.
Example: Drawing a rectangle.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas").getContext("2d");
c.fillStyle = "blue";
c.fillRect(50, 25, 100, 50);
</script>Note: Canvas requires JavaScript for functionality.
14. SVG Paths
SVG <path> elements draw complex shapes using coordinate-based commands.
Example: SVG path.
<svg width="100" height="100">
<path d="M10 10 L90 90" stroke="black" stroke-width="2"/>
</svg>Note: Paths are scalable and resolution-independent.
15. Contenteditable Attribute
The contenteditable attribute allows users to edit element content directly.
Example: Editable paragraph.
<p contenteditable="true">Edit this text!</p>Edit this text!
Note: Sanitize user input to prevent security issues.
16. HTML5 Drag and Drop
HTML5 drag-and-drop APIs allow elements to be draggable with attributes like draggable.
Example: Draggable element.
<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'Dragged!')">Drag me!</div>
<div ondrop="event.preventDefault(); alert(event.dataTransfer.getData('text'))" ondragover="event.preventDefault()">Drop here</div>Note: Add keyboard support for accessibility.
17. HTML5 Geolocation
The Geolocation API retrieves the user's location with JavaScript, requiring permission.
Example: Geolocation button.
<button onclick="getLocation()">Get Location</button>
<p id="location"></p>
<script>
function getLocation() {
navigator.geolocation.getCurrentPosition(pos => {
document.getElementById("location").innerText = `Lat: ${pos.coords.latitude}, Lon: ${pos.coords.longitude}`;
});
}
</script>Note: Handle errors and non-supported browsers gracefully.
18. HTML5 Web Storage
Web Storage (localStorage and sessionStorage) stores data in the browser.
Example: Storing data.
<input id="data" placeholder="Enter text">
<button onclick="localStorage.setItem('data', document.getElementById('data').value)">Save</button>
<p>Stored: <span id="stored"></span></p>
<script>
document.getElementById("stored").innerText = localStorage.getItem("data") || "";
</script>Stored:
Note: Limit storage to non-sensitive data.
19. HTML5 Progress Element
The <progress> tag displays task completion, like a loading bar.
Example: Progress bar.
<progress value="70" max="100">70%</progress>Note: Style with CSS for consistency across browsers.
20. HTML5 Meter Element
The <meter> tag represents a scalar value within a range, like a gauge.
Example: Meter gauge.
<meter value="0.6" min="0" max="1">60%</meter>Note: Use for measurements, not progress tasks.
21. Form Autocomplete
The autocomplete attribute enables or disables browser autofill for forms.
Example: Autocomplete form.
<form autocomplete="on">
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
</form>Note: Use specific autocomplete values for better UX.
22. HTML5 Details and Summary
The <details> and <summary> tags create collapsible content sections.
Example: Collapsible section.
<details>
<summary>More Info</summary>
<p>Hidden content here.</p>
</details>More Info
Hidden content here.
Note: Native interactivity reduces JavaScript dependency.
23. HTML5 Dialog Element
The <dialog> tag creates modal or non-modal dialogs, controlled via JavaScript.
Example: Simple dialog.
<dialog id="myDialog">
<p>This is a dialog!</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').show()">Open Dialog</button>Note: Add showModal() for modal dialogs.
24. HTML5 Output Element
The <output> tag displays the result of a form calculation or action.
Example: Dynamic output.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result">0</output>
</form>Note: Use with JavaScript for dynamic updates.
25. HTML5 Datalist Advanced
The <datalist> tag can be combined with JavaScript for dynamic suggestions.
Example: Datalist with input.
<input list="cities" oninput="updateList()">
<datalist id="cities">
<option value="New York">
<option value="London">
</datalist>Note: JavaScript can enhance datalist functionality.
26. Form Input Patterns
The pattern attribute enforces specific input formats using regex.
Example: Zip code pattern.
<form>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" pattern="[0-9]{5}" title="Five-digit zip code">
</form>Note: Provide clear title for error messages.
27. HTML5 Hidden Attribute
The hidden attribute hides elements from display without CSS.
Example: Hidden element.
<p hidden>This is hidden.</p>
<button onclick="document.querySelector('p').hidden = false">Show</button>This is hidden.
Note: Use CSS for complex visibility control.
28. HTML5 Spellcheck
The spellcheck attribute enables or disables browser spell-checking.
Example: Spellcheck enabled.
<textarea spellcheck="true">Type here with spellcheck.</textarea>Note: Set to false for code or technical inputs.
29. HTML5 Tabindex
The tabindex attribute controls keyboard navigation order.
Example: Custom tab order.
<button tabindex="2">Second</button>
<button tabindex="1">First</button>Note: Use tabindex="0" for natural focus order.
30. HTML5 Role Attribute
The role attribute defines an element’s purpose for accessibility.
Example: Role for navigation.
<nav role="navigation">
<a href="#home">Home</a>
</nav>Note: Use roles to clarify non-standard elements.
31. HTML5 Microdata
Microdata adds machine-readable metadata using attributes like itemscope and itemprop.
Example: Microdata for a person.
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="email">[email protected]</span>
</div>Note: Enhances SEO and data extraction.
32. HTML5 Download Attribute
The download attribute prompts file downloads instead of navigation.
Example: Download link.
<a href="document.pdf" download="myfile.pdf">Download PDF</a>Note: Works only for same-origin URLs.
33. HTML5 Ping Attribute
The ping attribute sends a POST request to track link clicks.
Example: Ping usage.
<a href="https://example.com" ping="/track">Trackable Link</a>Note: Browser support is limited; use with caution.
34. HTML5 Preload and Autoplay
preload and autoplay control media loading and playback behavior.
Example: Preload video.
<video preload="metadata" controls>
<source src="video.mp4" type="video/mp4">
</video>Note: Use preload="metadata" for faster loading.
35. HTML5 Lazy Loading
The loading="lazy" attribute defers off-screen image or iframe loading.
Example: Lazy-loaded image.
<img src="image.jpg" loading="lazy" alt="Lazy Image">Note: Improves page load performance.
36. HTML5 Form Novalidate
The novalidate attribute disables browser validation for a form.
Example: Form without validation.
<form novalidate>
<input type="email" required>
<button type="submit">Submit</button>
</form>Note: Useful for custom validation with JavaScript.
37. HTML5 Input Placeholder
The placeholder attribute provides a hint for input fields.
Example: Placeholder text.
<input type="text" placeholder="Enter your name">Note: Keep placeholders concise and descriptive.
38. HTML5 Input Autofocus
The autofocus attribute sets focus on an input when the page loads.
Example: Autofocused input.
<input type="text" autofocus placeholder="Start typing">Note: Use sparingly to avoid UX disruption.
39. HTML5 Input Required
The required attribute prevents form submission if a field is empty.
Example: Required input.
<form>
<input type="text" required>
<button type="submit">Submit</button>
</form>Note: Provide clear feedback for required fields.
40. HTML5 Input Min/Max
The min and max attributes set valid ranges for numeric inputs.
Example: Range input.
<input type="number" min="1" max="10">Note: Combine with JavaScript for custom validation.