HTML Cheat Sheet

Welcome to the Logique HTML Cheat Sheet - your comprehensive resource for understanding the core building blocks of the web. Whether you're a beginner or an experienced developer, this guide offers detailed explanations, practical code examples, and live demos for the most commonly used HTML tags.

HTML (HyperText Markup Language) is the foundation of every web page, providing the structure and meaning behind content. Explore the sections below to learn about the different tags, how to use them effectively, and best practices to create accessible, well-structured web pages.

Document Structure

<html> – HTML Document Root

The <html> element is the root of an HTML document. It encloses all the content of your web page (excluding the doctype).

Code:

<html lang="en">
  <!-- head and body go here -->
</html>

MDN Documentation →

<head> – Document Head

Contains metadata about the document such as title, styles, and scripts.

Code:

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

MDN Documentation →

<title> – Document Title

Sets the title of the document, which appears in the browser tab.

Code:

<title>Your Page Title</title>

MDN Documentation →

<body> – Document Body

Contains all the content of an HTML document like text, images, links, and more.

Code:

<body>
  <!-- content goes here -->
</body>

MDN Documentation →

Text Content

<p> – Paragraph

Defines a paragraph of text.

Code:

<p>This is a sample paragraph.</p>

Demo:

This is a sample paragraph.

MDN Documentation →

<headings> – Headings (h1–h6)

Defines headings with a hierarchical structure from <h1> (most important) to <h6> (least important).

Code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Demo:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

MDN Documentation →

<a> – Anchor

Defines a hyperlink to another page or location.

Code:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

Demo:

MDN Documentation →

<span> – Span

Defines an inline container for text.

Code:

<span style="color: red;">This is a span.</span>

Demo:

This is a span within a paragraph.

MDN Documentation →

Media

<img> – Image

Embeds an image into the page. Always include an alt attribute for accessibility.

Code:

<img src="https://placehold.co/400x300?text=Image" alt="Placeholder image" />

Demo:

MDN Documentation →

Lists

<ul> – Unordered List

Defines a list of items with bullet points.

Code:

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

Demo:

Item 1
Item 2

MDN Documentation →

<ol> – Ordered List

Defines a list of items in a specific sequence.

Code:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Demo:

First item
Second item

MDN Documentation →

Data

<table> – Table

Defines a table with rows and cells.

Code:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
  </tbody>
</table>

Demo:

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2

MDN Documentation →

Forms

<input> – Input

Defines a form control for user data entry. Configure it with different types (text, email, number, etc.).

Code:

<input type="text" placeholder="Enter text here" />

Demo:

MDN Documentation →

<button> – Button

Defines a clickable button for forms or JavaScript actions.

Code:

<button type="button">Click Me</button>

Demo:

MDN Documentation →

<form> – Form

Defines an interactive form for user input.

Code:

<form>
  <input type="text" placeholder="Enter text" />
  <button type="submit">Submit</button>
</form>

Demo:

MDN Documentation →

Layout

<div> – Division

A generic container used to group and style sections of content.

Code:

<div>
  This is a division.
</div>

Demo:

This is a division.

MDN Documentation →

Semantic Elements

<article> – Article

Represents a self-contained piece of content, such as a blog post or news article.

Code:

<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>

Demo:

Article Title

Article content goes here...

MDN Documentation →

🚀 Learn to Code or Level Up Your Skills

Whether you're just starting out or looking to sharpen your web development skills, we've got free coding courses to help you grow!

Beginner-friendly lessons—perfect if you've never coded before.
Advanced topics for developers who want to go deeper.
Real-world projects to build your portfolio.
100% free—no sign-ups, no catch.

Explore Free Courses