HTML Cheat Sheet: A Quick Reference Guide

Maheen Waris | Sep 13, 2023 min read

HTML (Hypertext Markup Language) is the backbone of web development, serving as the standard markup language for creating web pages. Whether you’re a seasoned developer or just starting on your web development journey, having an HTML cheat sheet at your disposal can be a valuable resource. In this article, we’ll provide a concise HTML cheat sheet that you can reference whenever you need a quick reminder of HTML tags and syntax.

Basic Structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Your Page Title</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

Document Structure

  • <html>: The root element that encloses the entire web page.
  • <head>: Contains metadata and links to external resources.
  • <meta charset="UTF-8">: Defines the character encoding of the document (usually UTF-8).
  • <title>: Sets the title of the web page displayed in the browser’s title bar.
  • <body>: Contains the visible content of the web page.

Text Elements

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings from largest (1) to smallest (6).
  • <p>: Paragraph.
  • <a href="URL">Link Text</a>: Hyperlink.
  • <strong>: Strong (bold) text.
  • <em>: Emphasized (italic) text.
  • <u>: Underlined text (not semantic; use CSS for underlining).

Lists

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Images

<img src="image.jpg" alt="Image Description" />

<a href="https://www.example.com">Visit Example</a>

Forms

<form action="submit.php" method="POST">
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  <input type="submit" value="Submit" />
</form>

Tables

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

Comments

<!-- This is a comment -->

Special Characters

  • &lt;: Less than (<)
  • &gt;: Greater than (>)
  • &amp;: Ampersand (&)
  • &quot;: Double quotation mark (")
  • &apos;: Single quotation mark (')

HTML5 Semantic Elements

  • <header>: Represents the header of a section or the page.
  • <nav>: Defines a navigation menu.
  • <main>: Represents the main content of a document.
  • <article>: Defines a self-contained piece of content.
  • <section>: Represents a standalone section within a document.
  • <aside>: Marks content tangentially related to the content around it.
  • <footer>: Represents the footer of a section or the page.

This HTML cheat sheet provides a quick reference for common HTML elements and syntax. Bookmark it or print it out for easy access as you work on web development projects. Remember that HTML is just the beginning; as you delve deeper into web development, you’ll explore CSS and JavaScript to create dynamic and visually appealing websites. Happy coding!