HTML Cheatsheet

1. <html>: The root element of an HTML document that contains all other elements.

2. <head>: Contains metadata about the document, such as the title and links to external resources.

3. <meta>: Provides metadata about the document, like character encoding.

4. <title>: Sets the title of the web page, displayed in the browser's title bar.

5. <link>: Links to external resources, like stylesheets.

6. <body>: Contains the visible content of the web page.

7. <header>: Represents a container for introductory content or a set of navigational links.

8. <footer>: Represents a container for the footer content of a section or a page.

9. <nav>: Defines a section containing navigation links.

10. <section>: Represents a standalone section within a document.

11. <article>: Represents a self-contained composition, such as a news article.

12. <div>: A generic container element used for grouping and styling.

13. <a>: Creates hyperlinks to other web pages or resources.

14. <img>: Embeds images in a web page.

15. <p>: Defines a paragraph of text.

16. <ul> and <li>: Create unordered lists and list items.

17. <ol> and <li>: Create ordered (numbered) lists and list items.

18. <table>, <thead>, <tbody>, <tr>, <th>, and <td>: Create tables for tabular data.

19. <form>, <input>, <label>, and <button>: Create web forms for user input.

20. <select>, <option>, and <optgroup>: Create dropdown menus and select options.

21. <textarea>: Defines a multi-line text input field.

22. <iframe>: Embeds another web page or external content.

23. <audio> and <source>: Embed audio content with optional source files.

24. <video> and <source>: Embed video content with optional source files.

25. <canvas>: Provides a drawing surface for graphics and animations.

26. <svg>: Defines scalable vector graphics for illustrations and icons.

27. <span> and <div>: Generic container elements for styling and layout purposes.

These HTML tags cover a wide range of functionality for building web pages and applications.

Below you can see all the tags used in code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <!-- Header Content -->
    <h1>Website Header</h1>
    <nav>
      <!-- Navigation Menu -->
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <!-- Main Content Section -->
    <article>
      <!-- Article Content -->
      <h2>Article Title</h2>
      <p>This is the main content of the article.</p>
    </article>

    <aside>
      <!-- Sidebar or Additional Content -->
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </aside>
  </section>

  <footer>
    <!-- Footer Content -->
    <p>&copy; 2023 Your Website</p>
  </footer>

  <div>
    <!-- Generic Container -->
    <p>This is a paragraph inside a div.</p>
  </div>

  <a href="https://www.example.com">
    <!-- Anchor (Link) -->
    <img src="image.jpg" alt="Image Description">
  </a>

  <p>
    <!-- Paragraph -->
    This is a simple paragraph of text.
    <ul>
      <!-- Unordered List -->
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <ol>
      <!-- Ordered List -->
      <li>First Item</li>
      <li>Second Item</li>
    </ol>
  </p>

  <table>
    <!-- Table -->
    <thead>
      <!-- Table Header -->
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table Body -->
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

  <form action="#" method="post">
    <!-- Form -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">
      <!-- Submit Button -->
      Submit
    </button>
  </form>

  <select>
    <!-- Select Dropdown -->
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>

  <textarea rows="4" cols="50">
    <!-- Textarea -->
    Enter your text here...
  </textarea>

  <iframe src="https://www.example.com">
    <!-- Iframe for Embedded Content -->
  </iframe>

  <audio controls>
    <!-- Audio Player -->
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

  <video controls width="320" height="240">
    <!-- Video Player -->
    <source src="video.mp4" type="video/mp4">
  </video>

  <canvas id="myCanvas" width="200" height="100">
    <!-- Canvas for Graphics -->
  </canvas>

  <svg width="100" height="100">
    <!-- SVG for Vector Graphics -->
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>

  <span>
    <!-- Span (Inline Container) -->
    This is a span element.
  </span>
</body>
</html>

---