HTML Cheat Sheet

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</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Essential Tags:

  • <html>: Root element of an HTML page.
  • <head>: Contains meta-information about the document.
  • <title>: Specifies the title of the document.
  • <body>: Contains the content of the HTML document.
  • <meta>: Specifies metadata about the HTML document.

Text Formatting

  • <h1> to <h6>: Header tags, <h1> being the most important, and <h6> the least.
  • <p>: Paragraph tag.
  • <br>: Line break.
  • <hr>: Thematic break in the page.
  • <strong> / <b>: Bold text.
  • <em> / <i>: Italicized text.
  • <u>: Underlined text.
  • <sup>: Superscript text.
  • <sub>: Subscript text.

Hyperlinks and Images

  • <a href="url">link text</a>: Creates a hyperlink.
  • <img src="url" alt="alternative text">: Embeds an image.

Lists

  • Unordered List:
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>

  • Ordered List:
<ol>
    <li>List item</li>
    <li>List item</li>
</ol>

Tables

<table>
    <tr>
        <th>Header</th>
        <th>Header</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Forms

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" name="email">
    <br>
    <input type="submit" value="Submit">
</form>

Useful Attributes

  • id: Defines a unique id for an element.
  • class: Defines one or more class names for an element.
  • style: Applies CSS styles directly to the element.
  • title: Adds extra information about an element (usually shown as a tooltip).

CSS Integration

<link rel="stylesheet" href="styles.css">

JavaScript Integration

<script src="script.js"></script>

Tips for Better HTML Coding

  • Use Semantic HTML: Wherever possible, use HTML5 semantic elements (<header>, <footer>, <article>, etc.) to enhance SEO and accessibility.
  • Validate Your Code: Use the W3C Validator to check your HTML and ensure it's error-free.
  • Keep Learning: HTML is constantly evolving, so stay updated with the latest elements and best practices.
  • This HTML cheat sheet provides a quick overview of the essential HTML elements and their use.

    Keep it handy to refer to as you build or maintain web pages.

    Create a free account to access the full topic

    “It has all the necessary theory, lots of practice, and projects of different levels. I haven't skipped any of the 3000+ coding exercises.”
    Andrei Maftei
    Hyperskill Graduate