HTML5 Basics Cheat Sheet

Download PDF

This cheat sheet provides a quick reference to the most essential HTML5 elements, attributes, and concepts for beginners. Use it as a handy reference while you're learning to code!

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>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
Element Description
<!DOCTYPE html> Declares the document as HTML5
<html> Root element of an HTML page
<head> Contains meta-information about the document
<meta> Defines metadata about the document
<title> Defines the document's title (shown in browser tabs)
<body> Contains the visible content of the document

Text Elements

Element Description Example
<h1> to <h6> Headings (h1 is most important, h6 is least) <h1>Main Heading</h1>
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break (empty element) Line 1<br>Line 2
<hr> Horizontal rule (thematic break) <p>Text</p><hr><p>More text</p>
<strong> Strong importance (typically bold) <strong>Important text</strong>
<em> Emphasized text (typically italic) <em>Emphasized text</em>
<blockquote> Block quotation <blockquote>Quoted text</blockquote>
<q> Inline quotation He said, <q>Hello!</q>
<abbr> Abbreviation <abbr title="World Health Organization">WHO</abbr>
<code> Computer code <code>var x = 5;</code>

Lists

Unordered List

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Item 1
  • Item 2
  • Item 3

Ordered List

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item

Description List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Tables

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>
Element Description
<table> Defines a table
<caption> Defines a table caption
<thead> Groups header content in a table
<tbody> Groups body content in a table
<tfoot> Groups footer content in a table
<tr> Defines a table row
<th> Defines a header cell
<td> Defines a data cell

Forms

<form action="/submit" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
    </div>
    
    <div>
        <input type="checkbox" id="subscribe" name="subscribe" value="yes">
        <label for="subscribe">Subscribe to newsletter</label>
    </div>
    
    <div>
        <button type="submit">Send</button>
        <button type="reset">Reset</button>
    </div>
</form>

Common Input Types

Input Type Description Example
text Single-line text input <input type="text">
password Password input (characters are masked) <input type="password">
email Email address input <input type="email">
number Numeric input <input type="number" min="1" max="100">
checkbox Checkbox (can select multiple) <input type="checkbox">
radio Radio button (select one from a group) <input type="radio" name="group">
date Date picker <input type="date">
file File upload <input type="file">
submit Submit button <input type="submit" value="Submit">

Form Attributes

Attribute Description Example
required Specifies that an input field must be filled out <input type="text" required>
placeholder Short hint that describes the expected value <input type="text" placeholder="Your name">
disabled Disables an input element <input type="text" disabled>
readonly Makes an input element read-only <input type="text" readonly>
min/max Minimum and maximum values for number inputs <input type="number" min="1" max="100">
pattern Regular expression to validate input <input type="text" pattern="[A-Za-z]{3}">

Semantic Elements

Element Description
<header> Container for introductory content or navigation
<nav> Container for navigation links
<main> Main content of the document
<article> Self-contained content that could be distributed independently
<section> Standalone section of a document
<aside> Content indirectly related to the main content
<footer> Footer for a document or section
<figure> Self-contained content (images, diagrams, etc.)
<figcaption> Caption for a figure
<time> Represents a specific time or date
<mark> Marked or highlighted text

Example Page Structure

<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <p>Published on <time datetime="2023-05-15">May 15, 2023</time></p>
            </header>
            
            <section>
                <h3>Section Title</h3>
                <p>Section content...</p>
            </section>
            
            <section>
                <h3>Another Section</h3>
                <p>More content...</p>
            </section>
            
            <footer>
                <p>Article footer content</p>
            </footer>
        </article>
        
        <aside>
            <h3>Related Content</h3>
            <ul>
                <li><a href="#">Related Link 1</a></li>
                <li><a href="#">Related Link 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
    </footer>
</body>

Global Attributes

These attributes can be used with any HTML element:

Attribute Description Example
id Unique identifier for an element <div id="unique-id">
class Classifies elements for styling/selection <div class="container">
style Inline CSS styling <p style="color: blue;">
title Extra information (shown as tooltip) <p title="Tooltip text">
lang Language of the content <p lang="en">
hidden Hides an element <div hidden>
data-* Custom data attributes <div data-user-id="123">
tabindex Tab order of an element <a tabindex="1">

Comments

<!-- This is a comment -->

<!-- 
    This is a 
    multi-line comment 
-->

Special Characters

Character Entity Description
< &lt; Less than sign
> &gt; Greater than sign
& &amp; Ampersand
" &quot; Double quotation mark
' &apos; Single quotation mark (apostrophe)
© &copy; Copyright symbol
® &reg; Registered trademark symbol
™ &trade; Trademark symbol
  &nbsp; Non-breaking space
— &mdash; Em dash

Further Resources