HTML Cheatsheet

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>