HTML (HyperText Markup Language) is the backbone of every website. It structures the web content using elements defined by tags. Here’s a concise cheatsheet to help you get started:

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Cheatsheet</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
</body>
</html>

Common HTML Tags

TagDescriptionExample
<h1> to <h6>Headings (h1 is the largest)<h1>Main Title</h1>
<p>Paragraph<p>This is a paragraph.</p>
<a>Hyperlink<a href="https://example.com">Visit Example</a>
<img>Image<img src="image.jpg" alt="Description">
<ul>Unordered List<ul><li>Item 1</li><li>Item 2</li></ul>
<ol>Ordered List<ol><li>Step 1</li><li>Step 2</li></ol>
<div>Division/Container<div>Content here</div>
<span>Inline Container<span>Highlighted text</span>
<table>TableSee Table Example below
<form>FormSee Form Example below

Attributes

Attributes provide additional information about elements:

  • href: Defines the link for <a>
<a href="https://example.com">Click Me</a>
  • src: Specifies the source of an image for <img>
<img src="image.jpg" alt="Image Description">
  • id: Unique identifier for elements
<div id="main-container"></div>
  • class: Specifies a class name for styling
<div class="header"></div>

Forms Example

<form action="/submit" method="POST">
    <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>
</form>

Table Example

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ali</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Fatima</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

Media Embedding

  • Image:
<img src="picture.jpg" alt="Description">
  • Video:
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>
  • Audio:
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Meta Tags

Meta tags provide metadata for your web page:

<meta name="description" content="Learn HTML basics with this cheatsheet">
<meta name="author" content="Abdul Mateen">
<meta name="keywords" content="HTML, Cheatsheet, Web Development">

Semantic Tags

Use these for better accessibility and SEO:

TagDescriptionExample
<header>Defines a header section<header>Title Here</header>
<footer>Footer content<footer>Contact Info</footer>
<article>Independent content<article>Blog Post</article>
<section>Thematic grouping<section>Section Content</section>
<nav>Navigation links<nav><a href="#">Home</a></nav>

HTML5 Input Types

HTML5 introduces new input types for forms:

TypeExample
text<input type="text">
email<input type="email">
password<input type="password">
number<input type="number">
date<input type="date">
range<input type="range" min="0" max="100">

Bonus Tips

  • Always close tags properly.
  • Indent nested elements for readability.
  • Use the alt attribute for images to improve accessibility.

Learn by practicing! Happy coding! 🎉

Categorized in:

HTML,