HTML Cheatsheet

<!DOCTYPE html>  <!-- Document type declaration -->

<html> <!-- Root element -->

<head> <!-- Document head containing metadata -->
    <meta charset="UTF-8"> <!-- Character encoding -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive viewport settings -->
    <title>Your Page Title</title> <!-- Page title displayed in the browser tab -->
    <link rel="stylesheet" href="styles.css"> <!-- Link to an external stylesheet -->
        /* Internal CSS styles */
    <script src="script.js"></script> <!-- Link to an external JavaScript file -->

<body> <!-- Document body where visible content goes -->
    <header> <!-- Header section -->
        <h1>Heading 1</h1> <!-- Heading with the largest font size -->
        <h2>Heading 2</h2> <!-- Subheading -->
        <nav> <!-- Navigation menu -->
                <li><a href="#">Home</a></li> <!-- List item with a link -->
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>

    <main> <!-- Main content section -->
        <section> <!-- Section with a heading -->
            <h2>Section Title</h2>
            <p>This is a paragraph of text.</p>
            <a href="">Visit Example</a> <!-- Link to an external website -->
            <img src="image.jpg" alt="Image Description"> <!-- Image with alternative text -->

        <article> <!-- Independent, self-contained content -->
            <h3>Article Title</h3>
            <p>Article content goes here.</p>

    <aside> <!-- Sidebar or supplementary content -->
        <h3>Sidebar Title</h3>
            <li>Item 1</li>
            <li>Item 2</li>

    <footer> <!-- Footer section -->
        <p>&copy; 2023 Your Website Name</p> <!-- Copyright notice -->



  • <html> and </html> enclose the entire HTML document.
  • <head> and </head> contain information about the document, such as the title and meta tags.
  • <body> and </body> contain the content of the document, such as headings, paragraphs, and images.


  • <h1> to <h6> create headings of different sizes.
  • <p> creates a paragraph.


  • <ul> creates an unordered list.
  • <ol> creates an ordered list.
  • <li> creates a list item.


  • <img> inserts an image into the document.


  • <a> creates a link to another document or resource.


  • <table> and </table> enclose a table.
  • <tr> and </tr> create rows in a table.
  • <td> and </td> create cells in a table.


  • <form> and </form> enclose a form.
  • <input> creates a text input field.
  • <select> creates a drop-down list.
  • <button> creates a button.


  • Attributes are used to specify additional information about elements. For example, the src attribute of the <img> element specifies the source of the image.
<!DOCTYPE html>
  <title>My Web Page</title>
  <h1>This is my web page!</h1>
  <p>This is a paragraph on my web page.</p>
  <img src="" alt="Image of a cat">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>