HTML5 Quick Reference Guide - johnverz22/webdev1-lessons GitHub Wiki

1. Basic Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2. Metadata Elements

  • <meta charset="UTF-8"> - Specifies character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Ensures proper scaling on mobile devices.
  • <title> - Sets the document title.
  • <link rel="stylesheet" href="styles.css"> - Links to an external CSS file.
  • <script src="script.js"></script> - Links to an external JavaScript file.

3. Common Elements

Text Content

  • <h1> to <h6> - Headings.
  • <p> - Paragraph.
  • <blockquote> - Block quotation.
  • <hr> - Horizontal rule.
  • <br> - Line break.

Lists

  • <ul> - Unordered list.
  • <ol> - Ordered list.
  • <li> - List item.

Links and Media

  • <a href="URL"> - Anchor (hyperlink).
  • <img src="URL" alt="description"> - Image.
  • <video src="URL" controls> - Video.
  • <audio src="URL" controls> - Audio.
  • <figure> and <figcaption> - Media with a caption.

4. Forms and Inputs

Form Elements

  • <form action="URL" method="GET|POST"> - Form container.
  • <label for="id"> - Label for input.
  • <input type="text|email|password|number|checkbox|radio|submit"> - Various input types.
  • <textarea> - Multiline text input.
  • <select> - Dropdown menu.
  • <option> - Options in a dropdown.

Input Attributes

  • placeholder - Hint text.
  • required - Makes the field mandatory.
  • maxlength and minlength - Limit input length.
  • pattern - Regex pattern.
  • readonly - Makes input read-only.

5. Semantics and Structure

  • <header> - Introductory content or navigation.
  • <nav> - Navigation links.
  • <section> - Thematic grouping of content.
  • <article> - Independent, self-contained content.
  • <aside> - Sidebar or ancillary information.
  • <footer> - Footer content.
  • <main> - Main content of the document.
  • <div> - General-purpose container.
  • <span> - Inline container.

6. Tables

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Attributes

  • colspan - Merge columns.
  • rowspan - Merge rows.
  • scope - Accessibility for headers (row, col).

7. Multimedia and Graphics

Images

  • <img src="image.jpg" alt="description">

Audio and Video

  • `

`

  • `

`

Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 50);
</script>

SVG

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

8. Accessibility

  • Use semantic HTML.
  • Add alt to images.
  • Use <label> with for for inputs.
  • Implement aria-* attributes for custom components.

9. Global Attributes

  • class - Apply CSS classes.
  • id - Unique identifier.
  • style - Inline styles.
  • title - Tooltip text.
  • data-* - Custom data attributes.

10. Deprecated Elements (Avoid Using)

  • <font> - Use CSS instead.
  • <center> - Use CSS instead.
  • <b> - Use <strong> for emphasis.
  • <i> - Use <em> for emphasis.

11. References and Best Practices

  • Validate your HTML: validator.w3.org
  • Use semantic HTML for better SEO and accessibility.
  • Minimize inline styles; prefer external CSS.
  • Test for responsiveness and cross-browser compatibility.
⚠️ **GitHub.com Fallback** ⚠️