1. Lazy Loading Images
Why? Boosts page load speed by loading images only when they enter the viewport.
<img src="image.jpg" loading="lazy" alt="Lazy loading image">
2. Responsive Images with <picture>
Why? Serve different image sizes based on screen width, optimizing performance.
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<img src="image-default.jpg" alt="Responsive image">
</picture>
3. Auto-fill Prevention for Forms
Why? Improves security by preventing browsers from automatically filling sensitive fields.
<form autocomplete="off">
<input type="password" autocomplete="new-password">
</form>
4. Native Modal Dialogs with <dialog>
Why? Simplifies modal creation without external libraries.
This is a native modal
<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>
5. Preload Critical Resources with <link>
Why? Speeds up page load times by preloading key assets like fonts or images.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
6. Pattern Validation on Inputs
Why? Enforces input validation without JavaScript.
<input type="text" pattern="\d{3}-\d{3}-\d{4}" title="123-456-7890">
7. Using <template> for Reusable HTML
Why? Efficiently create reusable HTML elements dynamically with JavaScript.
<template id="cardTemplate">
<div class="card">Card Content</div>
</template>
8. Semantic HTML for Better SEO
Why? Improves accessibility and search engine ranking by using semantic tags.
<article>
<header>
<h1>Article Title</h1>
</header>
<p>Article content...</p>
<footer>Author</footer>
</article>
9. Custom Data Attributes (data-*)
Why? Store custom data in HTML elements that you can easily access via JavaScript.
<button data-id="12345">Product</button>
<script>
let productId = document.querySelector('button').dataset.id;
</script>
10. Viewport Meta Tag for Mobile Optimization
Why? Ensures a responsive layout on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Top comments (0)