HTML Tips & Tricks

A collection of tips and tricks for writing better and more efficient HTML.

1. Emmet Shortcuts

<!-- Emmet Shortcut -->
div.container>h1+p*3  -->

<!-- Result: -->
<div class="container">
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</div>

<!-- Other shortcuts -->
nav>ul>li*5>a[href="#"]  -->
header+main+footer  -->
div.card>h2+p+ul>li*3  -->

2. HTML Comments

<!-- Comment for this section -->
<!-- 
    Multi-line comment
    Useful for documentation
-->

<!-- TODO: Add validation -->
<!-- FIXME: Bug in responsive layout -->

3. Important Meta Tags

<!-- Charset and Viewport -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- SEO -->
<title>Page Title | Website Name</title>
<meta name="description" content="Description 150-160 characters">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://url/image.jpg">

4. Semantic HTML Cheat Sheet

<!-- Page Structure -->
<header>    <!-- Top section -->
<nav>       <!-- Navigation -->
<main>      <!-- Main content -->
<article>   <!-- Self-contained content -->
<section>   <!-- Thematic section -->
<aside>     <!-- Side content -->
<footer>    <!-- Bottom section -->

<!-- Content -->
<figure>    <!-- Image + caption -->
<figcaption><!-- Image caption -->
<details>   <!-- Expandable content -->
<summary>   <!-- Summary for details -->
<time>      <!-- Date/time -->
<mark>      <!-- Highlighted text -->

5. Responsive Images

<!-- Responsive image with srcset -->
<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 1000px) 1000px, 1500px"
     alt="Image description">

<!-- Picture element for art direction -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

6. Form Patterns

<!-- Input with mask -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}" placeholder="123-4567">

<!-- Datalist for autocomplete -->
<input list="major" name="study_program">
<datalist id="major">
    <option value="Computer Science">
    <option value="Information Systems">
    <option value="Management">
</datalist>

<!-- Input group -->
<div class="input-group">
    <span class="prefix">https://</span>
    <input type="text" name="website">
</div>

7. Accessibility Quick Wins

<!-- Skip link -->
<a href="#main" class="skip-link">Skip to content</a>

<!-- ARIA labels -->
<button aria-label="Close menu">&times;</button>
<nav aria-label="Main navigation">...</nav>
<div aria-live="polite" id="status"></div>

<!-- Focus management -->
<input tabindex="0" aria-describedby="help-text">
<div id="help-text">Enter an active email</div>

8. Performance Tips

<!-- Lazy loading image -->
<img src="image.jpg" loading="lazy" alt="Image">

<!-- Defer JavaScript -->
<script src="script.js" defer></script>

<!-- Preload resources -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://example.com">

9. HTML Entities

<!-- Special Characters -->
&lt;    <!-- < -->
&gt;    <!-- > -->
&amp;   <!-- & -->
&quot;  <!-- " -->
&apos;  <!-- ' -->
&nbsp;  <!-- non-breaking space -->
&copy;  <!-- copyright -->
&trade; <!-- trademark -->
&reg;   <!-- registered -->

10. Debug Tips

<!-- Debug outline -->
<style>
    * { outline: 1px solid red; }
    *:hover { outline: 2px solid blue; }
</style>

<!-- Validation -->
<!-- Open in browser, press F12 -->
<!-- Console tab to see errors -->
<!-- Elements tab to inspect DOM -->

<!-- W3C Validator -->
<!-- https://validator.w3.org/ -->

Case Study: Quick Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <meta name="description" content="Page description">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#main" class="skip-link">Skip to content</a>

    <header>
        <nav aria-label="Main">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">Tentang</a></li>
            </ul>
        </nav>
    </header>

    <main id="main">
        <article>
            <h1>Article Title</h1>
            <p>Article content goes here.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 Name Website</p>
    </footer>

    <script src="script.js" defer></script>
</body>
</html>

Best Practices Recap

1. Always validate: Use the W3C Validator
2. Semantics > Div: Use HTML5 elements
3. Accessibility first: ARIA, alt text, labels
4. Performance: Lazy load, defer, preload
5. SEO: Meta tags, structured data, semantic HTML
6. Clean code: Consistent indentation, clear comments

Summary

HTML is the foundation of web development. Master these tips and tricks to write better, faster, and more accessible HTML.