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.