HTML Cheatsheet: A Complete Guide for Beginners

Introduction

HTML (HyperText Markup Language) is the standard language used to create webpages. It provides the structure for content on the web, including text, images, links, and more. Every website you see is built using HTML in some way. This cheatsheet is a complete reference guide to help you learn or revise HTML. It includes definitions, simple code examples, and key points about each topic.

1. HTML Document Structure

Definition: The basic layout of any HTML page.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Point: Always start your HTML document with <!DOCTYPE html>.

2. Headings

Definition: Used to define headings, from <h1> (largest) to <h6> (smallest).

Example

<h1>Main Heading</h1>
<h2>Subheading</h2>

Point: Use only one <h1> per page for better SEO.

3. Paragraphs

Definition: Used to write text content.

Example

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

Point: Wrap every block of text in <p> for better formatting.

4. Links

Definition: Create hyperlinks to other pages or websites.

Example

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

Point: Use target="_blank" to open the link in a new tab.

5. Images

Definition: Display an image on the webpage.

Example

<img src="image.jpg" alt="A sample image">

Point: Always add alt text for accessibility and SEO.

6. Lists

Definition: Used to create ordered (numbered) or unordered (bulleted) lists.

Example

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

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

Point: Use lists to organize content clearly.

7. Tables

Definition: Used to display data in rows and columns.

Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
</table>

Point: Use <th> for headings and <td> for data.

8. Forms

Definition: Collect user input.

Example

<form action="/submit">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Point: Use the name attribute to identify form fields in the backend.

9. Input Types

Definition: Different input fields for forms.

Example

<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="submit">

Point: Choose the correct type to match the data you need.

10. Buttons

Definition: Clickable elements for user actions.

Example

<button>Click Me</button>

Point: Can be styled or used with JavaScript for actions.

11. Div and Span

Definition: Used for grouping elements and applying styles.

Example

<div>This is a block element</div>
<span>This is an inline element</span>

Point: Use <div> for layout, <span> for small inline changes.

12. Comments

Definition: Notes in code that are not displayed in the browser.

Example

<!-- This is a comment -->

Point: Useful for documenting code and debugging.

13. Semantic Elements

Definition: Describe the meaning of content.

Examples

<header>Header content</header>
<nav>Navigation links</nav>
<main>Main content</main>
<article>Article content</article>
<footer>Footer content</footer>

Point: Improves accessibility and SEO.

14. Meta Tags

Definition: Provide metadata about the webpage.

Example

<meta charset="UTF-8">
<meta name="description" content="Free HTML cheatsheet">

Point: Place meta tags inside the <head> section.

15. Inline vs Block Elements

Definition

Inline: Does not start on a new line (e.g., <span>, <a>)
Block: Starts on a new line and takes full width (e.g., <div>, <p>)

Point: Helps in layout design.

16. HTML Entities

Definition: Used to display reserved characters.

Example

< for <
> for >
& for &
  for space

Point: Use entities to avoid breaking HTML syntax.

17. Audio and Video

Definition: Add multimedia to your webpage.

Example

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Point: Always include controls for better user interaction.

18. Iframe

Definition: Embed another webpage inside the current one.

Example

<iframe src="https://example.com" width="300" height="200"></iframe>

Point: Be cautious with third-party content for security reasons.

19. Script and Style

Definition

<script>: Used to add JavaScript.
<style>: Used to add CSS.

Example

<style>
  p { color: blue; }
</style>

<script>
  alert("Hello");
</script>

Point: Keep scripts and styles in separate files for better practice.

20. HTML5 Doctype

Definition: Declares the document as HTML5.

Example

<!DOCTYPE html>

Point: Always use it at the top of your HTML page.

21. `label` Tag

Definition: Describes a form input, improving accessibility and usability.

Example

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Point: Use for attribute to link the label to the input's id.

22. `fieldset` and `legend`

Definition: Group related form elements and label the group.

Example

<fieldset>
  <legend>Contact Info</legend>
  <input type="text" name="name">
</fieldset>

Point: Useful for organizing long forms clearly.

23. `textarea`

Definition: Allows multi-line text input.

Example

<textarea rows="4" cols="30">Your message here</textarea>

Point: Use rows and cols to control size.

24. `select` and `option`

Definition: Creates a dropdown menu.

Example

<select name="country">
  <option value="in">India</option>
  <option value="us">USA</option>
</select>

Point: Use value to assign backend-friendly data.

25. `details` and `summary`

Definition: Used to show/hide additional content on demand.

Example

<details>
  <summary>More Info</summary>
  <p>This is hidden until clicked.</p>
</details>

Point: Great for FAQs or expandable content.

26. `progress` and `meter`

Definition: Show progress or measurements visually.

Examples

<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>

Point: Use them for feedback in forms or uploads.

27. `template` Tag

Definition: Holds HTML code that is not rendered unless activated by JavaScript.

Example

<template id="myTemplate">
  <div>Hidden Content</div>
</template>

Point: Useful for dynamic content generation.

28. `noscript` Tag

Definition: Provides fallback content for users with JavaScript disabled.

Example

<noscript>
  <p>Please enable JavaScript to view this content.</p>
</noscript>

Point: Improves accessibility and user experience.

29. `data-*` Attributes

Definition: Used to store custom data in elements.

Example

<div data-user-id="12345">Profile</div>

Point: Useful for storing extra info accessed by JavaScript.

30. `abbr`, `code`, `kbd`, and `mark`

Definitions

<abbr>: Abbreviation tooltip
<code>: Code formatting
<kbd>: Keyboard input
<mark>: Highlight text

Example

<abbr title="World Health Organization">WHO</abbr>
<code>let x = 10;</code>
<kbd>Ctrl + S</kbd>
<mark>Important</mark>

Point: Improve content clarity and semantic value.

31. Accessibility Attributes (`aria-*`)

Definition: Help screen readers and assistive technologies interpret the webpage better.

Example

<button aria-label="Close menu">X</button>

Point: Important for building inclusive websites.

32. `link` Tag

Definition: Links external resources like stylesheets.

Example

<link rel="stylesheet" href="styles.css">

Point: Always place inside <head>.

33. `base` Tag

Definition: Sets the base URL for all relative links on a page.

Example

<base href="https://example.com/">

Point: Helps manage large projects with relative links.

34. Favicon

Definition: Small icon that appears in the browser tab.

Example

<link rel="icon" href="favicon.ico" type="image/x-icon">

Point: Improves brand recognition and user experience.

35. HTML Boilerplate (Quick Template)

Definition: Basic starting structure for every HTML page.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Point: Start every HTML project with this layout.

36. `picture` Element

Definition: Serves different image sources based on device screen or resolution.

Example

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="Responsive image">
</picture>

Point: Best for responsive images without using JavaScript or CSS.

37. `srcset` Attribute in `<img>`

Definition: Loads the best image size depending on screen resolution.

Example

<img src="small.jpg" srcset="small.jpg 1x, large.jpg 2x" alt="Image">

Point: Improves performance on high-resolution screens.

38. `time` Element

Definition: Marks a time or date in machine-readable format.

Example

<time datetime="2025-08-05">August 5, 2025</time>

Point: Helps with SEO and microdata for search engines.

39. `bdi` and `bdo`

Definitions

<bdi>: Isolates text for proper directionality in mixed languages.
<bdo>: Overrides text direction (LTR or RTL).

Example

<bdi>user123</bdi>
<bdo dir="rtl">This text is right-to-left</bdo>

Point: Important for multilingual or RTL language support.

40. `output` Element

Definition: Displays the result of a calculation or script.

Example

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input name="a" type="number"> +
  <input name="b" type="number"> =
  <output name="result"></output>
</form>

Point: Useful for real-time form calculations without JavaScript.

41. `canvas` Element

Definition: Creates a drawing area for graphics via JavaScript.

Example

<canvas id="myCanvas" width="200" height="100"></canvas>

Point: Used in games, charts, and visualizations with JS.

42. `svg` Element

Definition: Embeds Scalable Vector Graphics directly in HTML.

Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" fill="red"/>
</svg>

Point: Sharp, resolution-independent graphics.

43. `embed`, `object`, and `param`

Definition: Embeds multimedia, PDFs, or third-party content.

Example

<embed src="file.pdf" width="300" height="400">
<object data="file.pdf" type="application/pdf" width="300" height="400">
  <param name="autoplay" value="true">
</object>

Point: Avoid for modern HTML5 sites unless required (e.g., legacy content).

44. `is` Attribute (Web Components)

Definition: Used with customized built-in elements in Web Components.

Example

<button is="custom-button">Click</button>

Point: Works only with JavaScript-defined custom elements.

45. Hidden Attribute

Definition: Hides an element from display without using CSS.

Example

<p hidden>This is hidden</p>

Point: Avoid for layout logic use CSS if styling is involved.

46. Boolean Attributes

Definition: Attributes that do not need a value (their presence = true).

Examples

<input type="checkbox" checked>
<input type="text" disabled>
<input type="radio" required>

Point: You can write checked instead of checked="checked" it works the same.

47. Autocomplete Attribute

Definition: Suggests saved input values.

Example

<input type="email" autocomplete="on">

Point: Enhances user experience on forms.

48. Autofocus Attribute

Definition: Automatically focuses an input field on page load.

Example

<input type="text" autofocus>

Point: Use wisely avoid using on more than one element per page.

49. `rel` Attribute in `<a>`

Definition: Specifies the relationship between the current page and the linked page.

Examples

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

Point: Use rel="noopener noreferrer" with target="_blank" for security.

50. Responsive Meta Tag

Definition: Ensures the site displays correctly on mobile devices.

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Point: Without this, your site will not scale properly on small screens.

Conclusion

This is the most complete HTML cheatsheet you’ll find in one place covering not just the basics but also responsive design, accessibility, semantic elements, and even modern HTML5 capabilities.

Introduction

1. HTML Document Structure

2. Headings

3. Paragraphs

4. Links

5. Images

6. Lists

7. Tables

8. Forms

9. Input Types

10. Buttons

11. Div and Span

12. Comments

13. Semantic Elements

14. Meta Tags

15. Inline vs Block Elements

16. HTML Entities

17. Audio and Video

18. Iframe

19. Script and Style

20. HTML5 Doctype

21. label Tag

22. fieldset and legend

23. textarea

24. select and option

25. details and summary

26. progress and meter

27. template Tag

28. noscript Tag

29. data-* Attributes

30. abbr, code, kbd, and mark

31. Accessibility Attributes (aria-*)

32. link Tag

33. base Tag

34. Favicon

35. HTML Boilerplate (Quick Template)

36. picture Element

37. srcset Attribute in <img>

38. time Element

39. bdi and bdo

40. output Element

41. canvas Element

42. svg Element

43. embed, object, and param

44. is Attribute (Web Components)

45. Hidden Attribute

46. Boolean Attributes

47. Autocomplete Attribute

48. Autofocus Attribute

49. rel Attribute in <a>

50. Responsive Meta Tag

Conclusion

21. `label` Tag

22. `fieldset` and `legend`

23. `textarea`

24. `select` and `option`

25. `details` and `summary`

26. `progress` and `meter`

27. `template` Tag

28. `noscript` Tag

29. `data-*` Attributes

30. `abbr`, `code`, `kbd`, and `mark`

31. Accessibility Attributes (`aria-*`)

32. `link` Tag

33. `base` Tag

36. `picture` Element

37. `srcset` Attribute in `<img>`

38. `time` Element

39. `bdi` and `bdo`

40. `output` Element

41. `canvas` Element

42. `svg` Element

43. `embed`, `object`, and `param`

44. `is` Attribute (Web Components)

49. `rel` Attribute in `<a>`