HTML Cheatsheet

A ready-to-use page to support your daily webpage development in HTML!

cheatsheet

html

HTML

HTML, which stands for Hypertext Markup Language, is the standard markup language used for creating and structuring web pages on the internet. It provides a set of elements or tags that define the structure of content within a webpage, including text, images, links, and multimedia. HTML documents consist of a series of nested elements enclosed within opening and closing tags, forming a hierarchical structure.

Basics

<!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>
<!-- REMEMBER: HTML IS CASE INSENSITIVE! -->

Meta Tags

<!-- Meta Tags -->
<meta name="description" content="Page description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">

Text and Headings

<!-- Headings -->
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<!-- ... up to h6 -->

<!-- Paragraphs -->
<P>This is a paragraph.</P>

<!-- Line Break -->
<P>This is a line<br>break.</P>

<!-- Bold and Italic -->
<strong>Bold text</strong>
<em>Italic text</em>

<!-- Abbreviation -->
<abbr title="World Health Organization">WHO</abbr>

<!-- Citation -->
<blockquote>
    <P>This is a quote.</P>
    <footer>Author</footer>
</blockquote>

<!-- Code -->
<code>inline code</code>
<pre>
    <code>
        #include <stdio.h>
        int main() {
            printf("Hello, World!");
            return 0;
        }
    </code>
</pre>

<!-- Superscript and Subscript -->
<P>2<sup>3</sup> = 8</P>
<P>H<sub>2</sub>O</P>

Lists

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

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

Links and Images

<!-- Links -->
<a href="https://www.example.com" target="_blank">Visit Example.com</a>

<!-- Internal Link -->
<a href="#section">Go to Section</a>

<!-- Bookmark Link -->
<a href="#bookmark" id="section">Section</a>

<!-- Images -->
<img src="image.jpg" alt="Description">

<!-- Captioned Figure -->
<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Caption for the image.</figcaption>
</figure>

Forms

<!-- Form -->
<form action="./submit.php" method="post">
    <!-- Text Input -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <!-- Password Input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <!-- Checkbox -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">Subscribe</label>

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

    <!-- Dropdown/Select -->
    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </select>
    
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    
    <!-- Range Input -->
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100">
    
    <!-- Date Input -->
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">

    <!-- Submit Button -->
    <button type="submit">Submit</button>
    
    <!-- File Input -->
    <label for="file">Choose a file:</label>
    <input type="file" id="file" name="file">
    
    <!-- Hidden Input -->
    <input type="hidden" name="user_id" value="123">
    
    <!-- Button Types -->
    <button type="button">Click Me</button>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>

Tables

<!-- Table -->
<table border="1">
    <!-- Table Header -->
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <!-- Table Body -->
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

Semantic elements

<!-- Header -->
<header>
    <h1>Page 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>

<!-- Article -->
<article>
    <h2>Article Title</h2>
    <P>Article content goes here.</P>
</article>

<!-- Section -->
<section>
    <h2>Section Title</h2>
    <P>Section content goes here.</P>
</section>

<!-- Footer -->
<footer>
    <P>&copy; 2024 Your Company</P>
</footer>

Text Miscellaneous

<!-- Horizontal Line -->
<hr>

<!-- Non-Breaking Space -->
<P>This&nbsp;is&nbsp;non-breaking&nbsp;space.</P>

Scripts

<!-- Script -->
<script>
    alert("Hello, World!");
</script>

Interactive Elements

<!-- Button -->
<button onclick="myFunction()">Click Me</button>

<!-- Details and Summary -->
<details>
    <summary>Click to expand</summary>
    <P>Hidden content revealed when summary is clicked.</P>
</details>

<!-- Progress Bar -->
<progress value="70" max="100"></progress>