Semantic HTML:
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
</main>
<footer>
<p>© 2024 Website Name</p>
</footer>
Using semantic HTML elements helps to structure the page meaningfully, making it more accessible and understandable for both browsers and developers.
Responsive Images:
<img src="image.jpg" alt="Description of image" style="max-width:100%; height:auto;">
This ensures that the image scales proportionally and remains within the boundaries of its parent container, adapting to various screen sizes.
Form Elements:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
Properly structured forms with appropriate input types and labels improve user experience and accessibility.
Certainly! Here are some more unique and updated HTML examples with codes:
Interactive SVG:
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG (Scalable Vector Graphics) allows for the creation of interactive graphics directly within HTML, providing scalability and responsiveness.
Custom Data Attributes:
<div id="product" data-product-id="12345" data-category="electronics">
<!-- Product details -->
</div>
Data attributes (data-*
) provide a way to store custom data associated with HTML elements, which can be useful for JavaScript interactions and styling.
Details and Summary:
<details>
<summary>Click to expand</summary>
<p>Hidden content here...</p>
</details>
The <details>
and <summary>
elements provide a way to create collapsible content sections, allowing users to reveal additional information as needed.
Responsive Iframe:
<div style="position:relative; padding-bottom:56.25%; height:0;">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
This responsive iframe code ensures that embedded content like YouTube videos maintains its aspect ratio and adapts to different screen sizes.
Progress Bar:
<progress value="70" max="100">70%</progress>
The <progress>
element creates a progress bar to indicate the completion status of a task or process.
Picture Element for Responsive Images:
<picture>
<source srcset="image-large.jpg" media="(min-width: 1024px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Image">
</picture>
The <picture>
element allows you to specify multiple image sources based on different media queries, ensuring the appropriate image is loaded based on the viewport size.
Meter Element:
<meter value="0.6" min="0" max="1">60%</meter>
The <meter>
element represents a scalar measurement within a known range, such as disk usage, completion percentage, etc.
HTML5 Features(Video and Audio):
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Forms:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
Data Attributes:
<div id="product" data-product-id="12345" data-category="electronics">
<!-- Product details -->
</div>
Responsive Images:
<picture>
<source srcset="image-large.jpg" media="(min-width: 1024px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Image">
</picture>
Accessibility:
<button aria-label="Close" onclick="closeModal()">X</button>
The aria-label
attribute provides an accessible label for screen readers, enhancing accessibility for users with disabilities. It describes the action performed by the button.
Character Encoding:
<meta charset="UTF-8">
This meta tag specifies the character encoding of the HTML document, ensuring proper display of special characters and symbols.
HTML5 Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
The <canvas>
element is used to draw graphics, animations, or other visual images on the fly using JavaScript.
SVG Image:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
SVG (Scalable Vector Graphics) allows for the creation of vector-based images that can be scaled to any size without losing quality.
Responsive Table:
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
Tables should be used carefully for tabular data, and in this example, the table structure is designed to adapt to different screen sizes for better responsiveness.
Content Security Policy(CSP):
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
Content Security Policy (CSP) is a security feature that helps prevent XSS attacks by controlling which resources can be loaded and executed on a webpage. In this example, it restricts resources to those from the same origin.
These examples showcase various HTML concepts and best practices. Remember to modify them to fit your project needs.