The Ultimate HTML Cheat Sheet: Code Like a Pro!

HTML (HyperText Markup Language) is the foundation of web development. It structures content, ensuring web pages display correctly across different browsers. In this ultimate cheat sheet, we’ll go through everything from the basics to advanced elements of HTML in a hierarchical manner.

We’re starting from the ground up, covering the essentials before diving into more complex HTML features. Let’s explore the most comprehensive, step-by-step Ultimate HTML cheat sheet you’ll ever need!

1. HTML Document Structure

<!DOCTYPE html>
Defines the document type (HTML5) to ensure proper rendering.
<html></html>
Wraps all the content of the page.
<head></head>
Contains meta-information (e.g., title, styles, scripts) about the document.
<title>Page Title</title>
Sets the title of the page shown in the browser tab.
<meta charset="UTF-8">
Declares the character encoding, ensuring special characters display properly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ensures responsive design for mobile devices by controlling layout scaling.
<meta name="keywords" content="HTML, Web Development, Cheat Sheet">
Defines keywords for search engines to understand the content.
<meta name="description" content="Ultimate HTML cheat sheet for beginners and pros.">
Describes the content for search engine results.
<link rel="stylesheet" href="style.css">
Links an external CSS file to style the document.
<script src="script.js"></script>
Links an external JavaScript file for dynamic behavior.
<body></body>
Contains the visible content displayed on the page.

2. Text Formatting Tags

<h1> to <h6>
Defines headers from largest (h1) to smallest (h6).
<p>
Creates a paragraph block.
<br>
Inserts a line break in text.
<hr>
Creates a horizontal rule (line).
<strong>
Boldens text and adds emphasis.
<em>
Italicizes text and adds emphasis.
<u>
Underlines text.
<i> Defines italicized text (use <em> for better semantics).
<s> Defines strikethrough text (use <del> for better semantics when marking deleted text).
<mark>
Highlights text.
<small>
Displays smaller-sized text.
<del>
Displays strikethrough text, indicating deletion.
<ins>
Indicates inserted text, often underlined.
<sub>
Displays subscript text.
<sup>
Displays superscript text.
<blockquote>
Indicates a block of quoted text.
<pre>
Preserves whitespace and line breaks for preformatted text.
<code>
Indicates inline code snippets.

3. Links & Anchors

<a href="url">Text</a>
Creates a hyperlink to a URL.
<a href="mailto:email@example.com">Email Us</a>
Creates a clickable link that opens an email client.
<a href="tel:+123456789">Call Us</a>
Creates a clickable link to dial a phone number.
<a target="_blank">Open in New Tab</a>
Opens the link in a new browser tab or window.
<a id="section1"></a>
Defines an anchor that can be linked to.
<a href="#section1">Jump to Section</a>
Creates a link to an internal anchor on the same page.

4. Lists

Unordered List:

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

Creates a bullet-point list.

Ordered List:

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

Creates a numbered list.

Description List:

<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>
</dl>

Creates a list of terms and their descriptions.

5. Images & Media

<img src="image.jpg" alt="Description">
Embeds an image.
<img src="image.jpg" width="500" height="300">
Embeds an image with specified width and height.
<figure><img src="image.jpg"><figcaption>Caption</figcaption></figure>
Creates a figure with an image and caption.
<audio controls src="audio.mp3"></audio>
Embeds an audio file with playback controls.
<video controls width="600" height="400"><source src="video.mp4"></video>
Embeds a video file with playback controls and defined dimensions.
<iframe src="https://example.com"></iframe>
Embeds another webpage within the current one.

6. Tables

<table></table>
Creates a table.
<tr></tr>
Defines a table row.
<td></td>
Defines a table cell (data).
<th></th>
Defines a header cell in a table.
<thead></thead>
Groups the header content of a table.
<tbody></tbody>
Groups the body content of a table.
<tfoot></tfoot>
Groups the footer content of a table.
colspan=""
Spans a cell across multiple columns.
rowspan=""
Spans a cell across multiple rows.

7. Forms & Inputs

<form action="submit.php" method="post"></form>
Defines a form for user input and submission.
<input type="text">
Creates a single-line text input field.
<input type="email">
Creates an input field for emails.
<input type="password">
Creates a password input field where the characters are obscured.
<input type="submit">
Creates a button to submit the form.
<input type="checkbox">
Creates a checkbox.
<input type="radio">
Creates a radio button for selecting one option.
<input type="number">
Creates a number input field.
<input type="range">
Creates a slider input field for selecting a value range.
<textarea></textarea>
Creates a multi-line text input field.
<button></button>
Creates a clickable button.
<select><option></option></select>
Creates a drop-down selection box.
<label for="id">Label Text</label>
Labels an input field, improving accessibility.
<fieldset></fieldset>
Groups related fields in a form.
<legend>Form Legend</legend>
Provides a caption for a fieldset.

8. Semantic HTML Elements

<header></header>
Defines the header section of a webpage.
<nav></nav>
Defines a navigation menu.
<main></main>
Represents the main content of the document.
<section></section>
Defines a section within the document.
<article></article>
Defines independent content or a blog post.
<aside></aside>
Defines content aside from the main content, like a sidebar.
<footer></footer>
Defines the footer section of a webpage.
<figure></figure>
Defines self-contained content, like an image with a caption.
<figcaption></figcaption>
Defines a caption for the figure element.

9. Div & Span (Grouping Elements)

<div></div>
Defines a block-level container for grouping content.
<span></span>
Defines an inline container for grouping content.

10. Inline vs Block Elements

Inline Elements:
- <a> (Hyperlink)
- <span> (Inline Container)
- <img> (Image)
- <strong> (Bold)
- <em> (Italic)
- <b> (Defines bold text (use <strong> for better semantics).)
Block Elements:
- <div> (Block Container)
- <p> (Paragraph)
- <h1> to <h6> (Headings)
- <ul>, <ol>, <li> (Lists)
- <table>, <tr>, <td> (Tables)
- <section>, <article>, <aside> (Semantic Sections)
- <header> (Defines the header section of a page or section.)
- <footer>(Defines the footer section of a page or section.)

11. Inline Frames (Iframes)

<iframe src="https://example.com"></iframe>
Embeds an external page within the current document.
width="" height=""
Defines the size of the iframe.
sandbox
Restricts the actions the iframe can perform.
allowfullscreen
Allows the iframe to display in fullscreen mode.

12. Comments


Inserts a comment that won’t be displayed in the browser.

13. Special Characters (HTML Entities)

©
Represents the copyright symbol (©).
®
Represents the registered trademark symbol (®).
 
Represents a non-breaking space.
&
Represents the ampersand (&) symbol.
<
Represents the less than sign (<).
>
Represents the greater than sign (>).
"
Represents a double quotation mark (“).
'
Represents a single quotation mark (‘).
£ Represents the British pound (£) symbol.
€ Represents the euro (€) symbol.

14. Input Types

<input type="text">
Defines a single-line text field.
<input type="email">
Defines a field for email input.
<input type="password">
Defines a password field where the text is hidden.
<input type="tel">
Defines a field for telephone numbers.
<input type="url">
Defines a field for URLs.
<input type="date">
Defines a field for selecting a date.
<input type="time">
Defines a field for selecting a time.
<input type="number">
Defines a field for entering numbers.
<input type="range">
Defines a slider control for selecting a numeric value within a range.
<input type="color">
Defines a color picker control.
<input type="search">
Defines a search input field.
<input type="file">
Defines a file upload control.

15. Button Types

<button type="submit">Submit</button>
Creates a button to submit a form.
<button type="reset">Reset</button>
Creates a button to reset form fields.
<button type="button">Click Me</button>
Creates a general-purpose clickable button.

16. Form Validation Attributes

required
Specifies that an input field must be filled out before submitting.
minlength=""
Sets the minimum number of characters allowed in an input field.
maxlength=""
Sets the maximum number of characters allowed in an input field.
pattern=""
Specifies a regular expression that the input field’s value must match.
readonly
Makes an input field read-only (non-editable).
disabled
Disables an input field, making it unclickable and non-editable.

17. Embedding Objects

<embed src="file.pdf">
Embeds external content like PDFs directly into the document.
<object data="file.pdf" type="application/pdf"></object>
Embeds an object like a PDF file in the document.
<param name="autoplay" value="true">
Sets a parameter for the embedded object, such as autoplay for media.

18. Audio & Video Elements

<audio controls><source src="audio.mp3"></audio>
Embeds audio with controls like play, pause, and volume.
<video controls><source src="video.mp4"></video>
Embeds video with playback controls.
<track kind="subtitles" src="subtitles.vtt">
Adds subtitles or captions to video content.

19. Scripts & External Resources

<script src="script.js"></script>
Includes an external JavaScript file.
<link rel="stylesheet" href="style.css">
Links an external CSS file to style the page.

20. Deprecated Tags (Avoid Using)

<b>
Boldens text (use <strong> instead for better semantics).
<i>
Italicizes text (use <em> instead for better semantics).
<u>
Underlines text (use <ins> instead for better semantics).
<center>
Centers content (use CSS for centering instead).
<font>
Defines font size and color (use CSS for styling instead).
<frame>, <frameset>, <noframes>
Defines frames for multiple views (use <iframe> instead for better flexibility).

21. Accessibility Tags (ARIA)

role="navigation"
Indicates navigation regions for screen readers.
role="button"
Marks an element as a button for accessibility tools.
aria-label="Description"
Provides an accessible label for an element.
aria-hidden="true"
Hides an element from screen readers.
aria-expanded="false"
Indicates the expanded state of an element, like a dropdown.

22. Meta Information

<meta name="description" content="Your page description">
Defines the description of the page for search engines.
<meta name="author" content="Your Name">
Specifies the author of the page.
<meta name="robots" content="index, follow">
Tells search engines whether to index and follow links on the page.

23. Local Storage (Client-Side Data Storage)

localStorage.setItem('key', 'value');
Stores a key-value pair in the browser’s local storage.
localStorage.getItem('key');
Retrieves a value from local storage by its key.

24. Web Workers

Run JavaScript in the background without affecting the page’s performance.

25. Geolocation API

navigator.geolocation.getCurrentPosition(success, error);
Gets the user’s current geographical position.

26. Microdata & Schema.org

Microdata provides a way to add semantic meaning to HTML elements using attributes like itemprop and itemscope. Schema.org is the vocabulary used with Microdata to structure web content for better search engine understanding.

This now completes the Ultimate HTML Cheat Sheet covering all the tags, attributes, and elements, Comment me if I have missed something!