DEV Community

CodeWithDhanian
CodeWithDhanian

Posted on

10 new HTML tips

1. Use Semantic HTML for Better SEO and Accessibility
Semantic HTML helps search engines and assistive technologies understand the content better.

<article>
  <header>
    <h1>Article Title</h1>
    <p>Posted by <a href="#author">John Doe</a> on <time datetime="2024-12-21">Dec 21, 2024</time></p>
  </header>
  <section>
    <h2>Section Title</h2>
    <p>This is a paragraph within a section.</p>
  </section>
  <footer>
    <p><small>&copy; 2024 Example Corp.</small></p>
  </footer>
</article>
Enter fullscreen mode Exit fullscreen mode

2. Utilize the and Tags for Collapsible Content
This creates interactive content that can be expanded or collapsed.

<details>
  <summary>Click to expand</summary>
  <p>This is the content that can be expanded or collapsed.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

3. Incorporate the picture Element for Responsive Images
Enhance image loading across different devices by using different image sources.

<picture>
  <source media="(max-width: 799px)" srcset="small-image.jpg">
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <img src="default-image.jpg" alt="Description of image">
</picture>
Enter fullscreen mode Exit fullscreen mode

4. Use input[type="range"] for Slider Controls
Great for settings or any numeric input where a slider makes sense.

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
Enter fullscreen mode Exit fullscreen mode

5. Employ the datalist Element for Predefined Options
Enhances form usability by providing suggestions without limiting choices.

<label for="browser">Choose your browser:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
Enter fullscreen mode Exit fullscreen mode

6. Add download Attribute to Links for File Downloads
Makes it clear that clicking the link will download a file rather than navigate.

<a href="example.pdf" download="MyDocument">Download PDF</a>
Enter fullscreen mode Exit fullscreen mode

7. Use input[type="color"] for Color Pickers
A simple way to let users pick a color.

<label for="colorPicker">Choose a color:</label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
Enter fullscreen mode Exit fullscreen mode

8. Implement progress for Showing Progress
Useful for operations that take time, like file uploads or processing.

<label for="file">Uploading file:</label>
<progress id="file" value="70" max="100">70%</progress>
Enter fullscreen mode Exit fullscreen mode

9. Add hidden Attribute for Content Management
This can hide content that should not be immediately visible but might be useful for JavaScript manipulation.

<p hidden>This paragraph is hidden but can be shown with JavaScript.</p>
Enter fullscreen mode Exit fullscreen mode

10. Use template for Reusable Content
The element allows you to define reusable content, which is not rendered by default but can be instantiated with JavaScript.

<template id="product-template">
  <div class="product">
    <h3 class="product-name"></h3>
    <p class="product-price"></p>
  </div>
</template>

<script>
  const template = document.getElementById('product-template');
  const clone = template.content.cloneNode(true);
  clone.querySelector('.product-name').textContent = 'Product Name';
  clone.querySelector('.product-price').textContent = '$99.99';
  document.body.appendChild(clone);
</script>
Enter fullscreen mode Exit fullscreen mode

These tips leverage HTML5 features for better structure, interaction, and user experience. Remember to always test your implementations across different browsers to ensure compatibility.

Support me by buying me coffee☕ at https://ko-fi.com/codewithdhanian

Image description

Top comments (0)