HTML Cheatsheet

Posted on by 
<!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 -->
    <style>
        /* Internal CSS styles */
    </style>
    <script src="script.js"></script> <!-- Link to an external JavaScript file -->
</head>

<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 -->
            <ul>
                <li><a href="#">Home</a></li> <!-- List item with a link -->
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>
    </header>

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

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

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

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

</html>

Structure

  • <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.

Headings

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

Lists

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

Images

  • <img> inserts an image into the document.

Links

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

Tables

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

Forms

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

Attributes

  • 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>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>This is my web page!</h1>
  <p>This is a paragraph on my web page.</p>
  <img src="https://example.com/image.png" alt="Image of a cat">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>