Semantic HTML:
<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:
This ensures that the image scales proportionally and remains within the boundaries of its parent container, adapting to various screen sizes.
Form Elements:
<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:
<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:
<!– 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:
<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:
<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:
The <progress> element creates a progress bar to indicate the completion status of a task or process.
Picture Element for Responsive Images:
<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:
The <meter> element represents a scalar measurement within a known range, such as disk usage, completion percentage, etc.
HTML5 Features(Video and Audio):
<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:
<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:
<!– Product details –>
</div>
Responsive Images:
<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:
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:
This meta tag specifies the character encoding of the HTML document, ensuring proper display of special characters and symbols.
HTML5 Canvas:
The <canvas> element is used to draw graphics, animations, or other visual images on the fly using JavaScript.
SVG Image:
<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:
<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):
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.
