HTML5 Cheat Sheet

This HTML5 cheat sheet provides a quick reference for essential tags and elements used in modern web development. It covers document structure, text formatting, links, images, lists, forms, tables, objects, and the new semantic tags introduced in HTML5.

HTML5 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 goes here -->
</body>
</html>

The <!DOCTYPE html> declaration defines the document type and version. The <html> element is the root of an HTML page, with the lang attribute specifying the language. The <head> section contains meta-information about the HTML document, such as character set, viewport settings, title, and links to stylesheets or scripts. The <body> section contains the visible page content.

Essential HTML Tags

Document Information Tags

<base/>
<style></style>
<meta/>
<script></script>
<link/>

These tags provide metadata and link external resources. <meta> tags are crucial for SEO, specifying character encoding, viewport, and page descriptions.

Document Structure Tags

<h1></h1> ... <h6></h6>
<p></p>
<div></div>
<span></span>
<br/>
<hr>

Headings (<h1> to <h6>) define the structure and importance of content. Paragraphs (<p>) group text. <div> and <span> are generic containers for styling and grouping. <br> creates a line break, and <hr> creates a thematic break.

Text Formatting Tags

<strong></strong> and <b></b>
<em></em> and <i></i>
<del></del>
<pre></pre>
<blockquote></blockquote>
<abbr></abbr>
<address></address>
<code></code>
<q></q>
<sub></sub>
<sup></sup>
<kbd></kbd>
<small></small>
<ins></ins>

These tags control the presentation of text, indicating importance (<strong>, <em>), deletion (<del>), insertion (<ins>), preformatted text (<pre>), quotations (<blockquote>, <q>), abbreviations (<abbr>), and code snippets (<code>).

Links and Images

<a href="url">Link Text</a>
<a href="mailto:email@example.com">Email Us</a>
<a href="#section-id">Jump to Section</a>
<a href="tel://+1-555-123-4567">Call Us</a>
<img src="image.jpg" alt="Description of image">

The anchor tag (<a>) creates hyperlinks. The href attribute specifies the destination. The <img> tag embeds images, with src for the image source and alt for alternative text, crucial for accessibility and SEO.

List Formatting

<ol>
    <li>Ordered Item 1</li>
    <li>Ordered Item 2</li>
</ol>

<ul>
    <li>Unordered Item 1</li>
    <li>Unordered Item 2</li>
</ul>

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>

Ordered lists (<ol>) use numbers, while unordered lists (<ul>) use bullet points. List items are defined with <li>. Definition lists (<dl>) consist of terms (<dt>) and their definitions (<dd>).

Forms Formatting and Attributes

<form action="/submit-form" method="post">
    <fieldset>
        <legend>User Information</legend>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <textarea name="message" rows="4" cols="50">Enter your message here...</textarea>

        <select name="country">
            <option value="us">United States</option>
            <option value="ca">Canada</option>
        </select>

        <button type="submit">Submit</button>
    </fieldset>
</form>

Forms (<form>) are used to collect user input. Key elements include <label> for input descriptions, <input> for various input types, <textarea> for multi-line text, <select> for dropdowns, and <button> for actions. Attributes like required, name, and type are essential.

Tables Formatting

<table>
    <caption>Monthly Sales Data</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$12,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$22,000</td>
        </tr>
    </tfoot>
</table>

Tables (<table>) organize data in rows (<tr>) and cells (<td>). Headers (<th>) define column titles. <thead>, <tbody>, and <tfoot> group table sections. <caption> provides a title for the table.

Objects and iFrames

<object data="document.pdf" type="application/pdf" width="600" height="400"></object>
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
<embed src="video.mp4" type="video/mp4" width="400" height="300">

<object> embeds external content like PDFs. <iframe> embeds another HTML document within the current one. <embed> is used for external applications or plugins.

HTML5 New Semantic Tags

<header>
    <!-- Header content, e.g., logo, navigation -->
</header>

<nav>
    <!-- Navigation links -->
</nav>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
        <figure>
            <img src="image.png" alt="Figure description">
            <figcaption>Caption for the figure</figcaption>
        </figure>
    </article>
    <aside>
        <!-- Sidebar content -->
    </aside>
</main>

<section>
    <!-- A distinct section of the document -->
</section>

<details>
    <summary>Click to reveal details</summary>
    <p>Hidden content...</p>
</details>

<dialog>
    <!-- Dialog box content -->
</dialog>

<mark>Highlighted text</mark>
<time datetime="2023-10-27">October 27, 2023</time>

<footer>
    <!-- Footer content, e.g., copyright, contact info -->
</footer>

HTML5 introduced semantic tags to provide better structure and meaning to web content. These include <header>, <nav>, <main>, <article>, <aside>, <section>, <details>, <dialog>, <figure>, <figcaption>, <mark>, <time>, and <footer>. These tags improve SEO and accessibility.

Other Useful Tags

<canvas></canvas>
<map></map>

<canvas> is used for drawing graphics via JavaScript, while <map> defines an image map.

Character Entities

Special characters can be represented using HTML entities:

" or " for quotation marks (")
& or & for ampersand (&)
< or < for less than sign (<)
> or > for greater than sign (>)
  or for non-breaking space
&commat; or @ for @ symbol (@)
• or • for small bullet (•)
™ or ™ for trademark symbol (™)

html5