ENGIMY.IO - CHEATSHEET
HTML × QUICK REFERENCE
HTML
LANGUAGE REFERENCE

HTML
CHEAT SHEET.

A concise reference for HTML5 – document structure, common tags, forms, semantic elements, multimedia, and best practices. All in one place.

REFERENCE vHTML5

HTML Quick Reference

Everything you need day‑to‑day – structure, tags, forms, and best practices.

Document Structure

<!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>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
</head>
<body>
    <!-- Page content -->
</body>
</html>

Meta Tags

Essential Meta Tags
  • <meta charset="UTF-8" />
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • <meta name="description" content="Page description" />
  • <meta name="keywords" content="keyword1, keyword2" />
  • <meta name="author" content="Your Name" />
  • <meta http-equiv="refresh" content="30" />
Open Graph (Social Media)
  • <meta property="og:title" content="Title" />
  • <meta property="og:description" content="Description" />
  • <meta property="og:image" content="image.jpg" />
  • <meta property="og:url" content="https://example.com" />
  • <meta property="og:type" content="website" />
  • <meta name="twitter:card" content="summary_large_image" />

Headings

<h1>Main Heading (only one per page)</h1>
<h2>Section Heading</h2>
<h3>Sub‑section Heading</h3>
<h4>Sub‑section Heading</h4>
<h5>Sub‑section Heading</h5>
<h6>Sub‑section Heading</h6>

Text Elements

<p>Paragraph of text.</p>

<strong>Strong / Bold</strong>
<em>Emphasised / Italic</em>
<u>Underlined</u>
<s>Strikethrough</s>
<mark>Highlighted</mark>
<small>Small text</small>
<sup>Superscript</sup>
<sub>Subscript</sub>

<br />  <!-- Line break -->
<hr />  <!-- Horizontal rule -->

<pre>
    Preformatted text
    preserves whitespace
</pre>

<code>Inline code</code>
<blockquote>Block quote</blockquote>

Lists

<!-- Unordered List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<!-- Ordered List with type -->
<ol type="A">  <!-- A, a, I, i, 1 -->
    <li>Item</li>
</ol>

<!-- Description List -->
<dl>
    <dt>Term</dt>
    <dd>Description</dd>
    <dt>Another Term</dt>
    <dd>Another Description</dd>
</dl>

<!-- Nested List -->
<ul>
    <li>Item 1
        <ul>
            <li>Sub‑item 1.1</li>
            <li>Sub‑item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

Links

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

<!-- Link to email -->
<a href="mailto:someone@example.com">Send Email</a>

<!-- Link to phone -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link to anchor on page -->
<a href="#section">Go to Section</a>
...
<h2 id="section">Section</h2>

<!-- Link with title attribute -->
<a href="https://example.com" title="Click to visit">Link</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

Images

<!-- Basic image -->
<img src="image.jpg" alt="Description of image" />

<!-- With dimensions -->
<img src="image.jpg" alt="Description" width="300" height="200" />

<!-- Responsive image (srcset) -->
<img
    srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
    sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
    src="image-large.jpg"
    alt="Responsive image"
/>

<!-- Picture element -->
<picture>
    <source media="(max-width: 480px)" srcset="image-mobile.jpg" />
    <source media="(max-width: 768px)" srcset="image-tablet.jpg" />
    <img src="image-desktop.jpg" alt="Description" />
</picture>

Tables

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>Mumbai</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 records</td>
        </tr>
    </tfoot>
</table>

<!-- Attributes -->
<table border="1" cellpadding="10" cellspacing="0">
<!-- colspan – merge columns -->
<!-- rowspan – merge rows -->

Forms

Basic Form Structure

<form action="/submit" method="POST">
    <!-- Form elements -->
</form>

<!-- method: GET (default), POST -->
<!-- action: URL where form data is sent -->
<!-- enctype: multipart/form-data for file uploads -->

Input Types

<!-- Text -->
<input type="text" name="username" placeholder="Enter username" />

<!-- Email -->
<input type="email" name="email" placeholder="email@example.com" required />

<!-- Password -->
<input type="password" name="password" minlength="8" />

<!-- Number -->
<input type="number" name="age" min="18" max="99" step="1" />

<!-- Date -->
<input type="date" name="birthday" />

<!-- Time -->
<input type="time" name="meeting_time" />

<!-- Datetime -->
<input type="datetime-local" name="event" />

<!-- Checkbox -->
<input type="checkbox" name="subscribe" value="newsletter" checked />

<!-- Radio -->
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

<!-- File upload -->
<input type="file" name="file" accept=".jpg,.png,.pdf" />

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" value="50" />

<!-- Color picker -->
<input type="color" name="theme_color" />

<!-- Hidden -->
<input type="hidden" name="user_id" value="123" />

<!-- Submit / Reset / Button -->
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Click Me" />

<!-- Modern button (preferred) -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

Form Attributes

<!-- Common attributes -->
<input required />           <!-- Must be filled -->
<input disabled />           <!-- Cannot be interacted with -->
<input readonly />           <!-- Read‑only -->
<input autofocus />          <!-- Focus on page load -->
<input placeholder="Text" />  <!-- Hint text -->
<input autocomplete="on" />   <!-- Enable autocomplete -->
<input pattern="[A-Za-z]{3}" /> <!-- Regex validation -->

Select / Dropdown

<select name="country" required>
    <option value="">Select a country</option>
    <option value="in">India</option>
    <option value="us">USA</option>
    <option value="uk" selected>UK</option>
</select>

<!-- Multiple select -->
<select name="skills" multiple size="3">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

<!-- Optgroup -->
<select>
    <optgroup label="Frontend">
        <option>HTML</option>
        <option>CSS</option>
    </optgroup>
    <optgroup label="Backend">
        <option>Node.js</option>
        <option>Python</option>
    </optgroup>
</select>

Textarea

<textarea name="message" rows="5" cols="50" placeholder="Enter your message..."></textarea>

Fieldset & Legend

<fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
</fieldset>

Semantic HTML5 Elements

Structure
  • <header> – header
  • <nav> – navigation
  • <main> – main content
  • <section> – thematic grouping
  • <article> – independent content
  • <aside> – side content
  • <footer> – footer
Inline Semantic
  • <time> – date/time
  • <mark> – highlighted
  • <figure> – figure with caption
  • <figcaption> – caption
  • <details> – collapsible
  • <summary> – summary for details
  • <dialog> – dialog box

Example Semantic Layout

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Blog Post Title</h2>
        <time datetime="2024-01-15">January 15, 2024</time>
        <p>Content goes here...</p>
    </article>

    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2024 My Website</p>
</footer>

Multimedia

Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg" />
    <source src="audio.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

<!-- Attributes: autoplay, loop, muted, preload -->

Video

<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    Your browser does not support the video element.
</video>

<!-- Attributes: autoplay, loop, muted, preload, poster -->

Iframe

<!-- Embed external content (YouTube, maps, etc.) -->
<iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    width="560"
    height="315"
    allowfullscreen
    loading="lazy"
></iframe>

ARIA & Accessibility

<!-- Landmark roles -->
<header role="banner"></header>
<nav role="navigation"></nav>
<main role="main"></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>

<!-- Common ARIA attributes -->
<div role="button" tabindex="0" aria-label="Close dialog"></div>
<div role="dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Dialog Title</h2>
</div>

<!-- aria‑hidden – hide from screen readers -->
<div aria-hidden="true">Decorational image</div>

<!-- aria‑live – announce updates -->
<div aria-live="polite">Notification message</div>

<!-- aria‑expanded – toggle state -->
<button aria-expanded="false">Show More</button>

<!-- aria‑controls – controls another element -->
<button aria-controls="menu">Menu</button>

Best Practices

  • Use semantic HTML5 – improves accessibility and SEO.
  • Include alt attributes for all images (decorative images can use alt="").
  • Use lang attribute on the html tag.
  • Add title tag – every page needs a unique, descriptive title.
  • Use role attributes sparingly – prefer native semantic elements.
  • Avoid inline styles – keep CSS separate.
  • Avoid <br> for layout – use CSS margins/padding.
  • Use button elements for interactive actions, not divs.
  • Use label elements with for attribute for form inputs.
  • Use loading="lazy" for images and iframes to improve performance.
  • Validate your HTML with the W3C validator.
  • Use <template> for reusable content fragments.
📌 Quick Reference
HTML Validator: https://validator.w3.org/
Common tags cheat: div, span, a, p, h1-h6, ul, ol, li, table, form, input, button
Semantic tags: header, nav, main, section, article, aside, footer
Form basics: form, input, label, select, textarea, button
← Back to All Cheatsheets