Here are some unique examples of HTML usage, incorporating various elements and attributes:
SVG Integration:
-
Combining HTML with SVG for a scalable vector graphic.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Integration</title> </head> <body> <h1>Scalable Vector Graphic</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </body> </html>
Details and Summary Elements:
-
Using the
<details>and<summary>elements to create collapsible content.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Collapsible Content</title> </head> <body> <details> <summary>Click to reveal more information</summary> <p>Additional details or content can go here.</p> </details> </body> </html>
Meter Element:
-
Utilizing the
<meter>element to represent a measurement within a known range.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meter Element</title> </head> <body> <label for="diskSpace">Disk Space Usage:</label> <meter id="diskSpace" value="60" min="0" max="100">60%</meter> </body> </html>
Picture Element for Responsive Images:
-
Using the
<picture>element for displaying different images based on the device's characteristics.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Images</title> </head> <body> <picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <img src="image-small.jpg" alt="Responsive Image"> </picture> </body> </html>
Custom Data Attributes:
-
Introducing custom data attributes (
data-*) to store extra information with HTML elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Data Attributes</title> </head> <body> <div data-info="custom data attribute content"> This element has a custom data attribute. </div> </body> </html>
Web Components:
-
Utilizing custom elements and templates to create reusable web components.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Components</title> </head> <body> <my-custom-element></my-custom-element> <template id="custom-template"> <p>This is a reusable template for web components.</p> </template> <script> class MyCustomElement extends HTMLElement { constructor() { super(); const template = document.getElementById('custom-template'); const content = template.content.cloneNode(true); this.attachShadow({ mode: 'open' }).appendChild(content); } } customElements.define('my-custom-element', MyCustomElement); </script> </body> </html>
Geolocation API:
-
Using the Geolocation API to get the user's current location.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geolocation API</title> </head> <body> <button onclick="getLocation()">Get Location</button> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(position) { alert("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude); } </script> </body> </html>
Interactive Canvas:
-
Creating an interactive canvas with the
<canvas>element and JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Canvas</title> </head> <body> <canvas id="interactive-canvas" width="300" height="150"></canvas> <script> const canvas = document.getElementById('interactive-canvas'); const context = canvas.getContext('2d'); canvas.addEventListener('mousemove', draw); function draw(event) { const x = event.clientX - canvas.offsetLeft; const y = event.clientY - canvas.offsetTop; context.beginPath(); context.arc(x, y, 5, 0, 2 * Math.PI); context.fillStyle = 'blue'; context.fill(); } </script> </body> </html>
Meter Element with JavaScript Update:
-
Dynamically updating the value of a
<meter>element using JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Meter Element</title> </head> <body> <label for="dynamic-meter">Dynamic Meter:</label> <meter id="dynamic-meter" value="50" min="0" max="100">50%</meter> <button onclick="updateMeter()">Update Meter</button> <script> function updateMeter() { const meter = document.getElementById('dynamic-meter'); const newValue = Math.floor(Math.random() * 101); meter.value = newValue; meter.textContent = `${newValue}%`; } </script> </body> </html>
These examples showcase some unique and lesser-known aspects of HTML, demonstrating its versatility for creating diverse and interactive web content.
These showcase additional features and functionalities of HTML, including web components, geolocation, canvas drawing, and dynamic updates.
Top comments (0)