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.
Top comments (0)