Dev.to

The Ultimate HTML Cheat Sheet

Introduction HTML (HyperText Markup Language) is the foundation of web development. This cheatsheet provides a list of HTML tags along with their descriptions and usage. What is HTML? HTML is a markup language used to structure web pages. It consists of elements (tags) that define content, layout, and functionality. Basic Structure Page Title Head Section Elements : Defines the title of the web page (shown in the browser tab). : Provides metadata like charset, viewport, keywords, etc. : Links to external files such as stylesheets. : Embeds internal CSS styles within the head. body { font-family: Arial, sans-serif; } Text Elements to : Heading tags, being the highest/most important. Main Heading Subheading : Paragraph tag. This is a paragraph of text. : Line break (self-closing). : Horizontal rule/line (self-closing). : Bold text. : Italicized/emphasized text. Links and Images : Anchor tag for hyperlinks. Visit Example Use target="_blank" to open links in a new tab. : Displays an image. Attributes: src (source), alt (alternate text), width, height. Lists Ordered List (): First item Second item Unordered List (): Bullet point one Bullet point two Definition List (, , ): Term Definition of the term Tables Header 1 Header 2 Data 1 Data 2 , , : Group table sections. : Table header cell. : Table data cell. Forms Name: Email: : Different input types (text, email, password, radio, checkbox, submit, etc.). : Label for form elements. : Multi-line text input. and : Dropdown menu. Option 1 Option 2 Multimedia : Embeds an audio file. Your browser does not support the audio tag. : Embeds a video file. Your browser does not support the video tag. Semantic Elements : Defines a header section. : Defines a navigation section. : Main content of the document. : An independent piece of content. : Defines sections in a document. : Footer of a document. : Content tangentially related to the main content. and : Used for figures/images with captions. Block vs Inline Elements Block-level elements (take up full width):* ``, ``, ``-``, ``, ``, ``, `` **Inline elements** (take up only necessary space): , , , , , Other Common Elements : Generic container for block-level content. : Generic container for inline content. : Embeds or links to JavaScript. : Display content if JavaScript is disabled. JavaScript is not enabled in your browser. Global Attributes class: Assigns a class to an element for CSS/JS targeting. This is an intro paragraph. id: Unique identifier for an element. style: Inline CSS styles. Styled text data-*: Custom data attributes. User Content HTML5 New Elements : Represents independent, self-contained content. : Defines a section in a document. : Represents introductory content or a set of navigational links. : Defines a footer for a document or section. : Represents content aside from the main content, like a sidebar. : The main content of the document. : Contains navigation links. and : Used for figures like images with captions. : Highlights text. : Displays the progress of a task. 70% Input Types (HTML5) HTML5 introduced new input types for better form control. email: For email addresses. url: For URLs. number: For numerical input. range: A slider control for selecting a range. date: For selecting a date. color: For choosing a color. Inline vs Block Differences Make sure to explain the differences between inline and block elements for clarity: Inline elements: Flow within a line. Examples include , , , , , . Block elements: Start on a new line and stretch to the full width of their parent. Examples include , , to , , , , , . Forms with Validation (HTML5) HTML5 introduced attributes for client-side form validation: required: Makes a field required. pattern: Specifies a regex pattern for input validation. min, max, step: Define limits for input types like number, range, or date. Accessibility Best Practices For SEO and user accessibility, you can mention some key practices: alt attribute for images: Always add descriptive alt text to images for screen readers and better SEO. ARIA (Accessible Rich Internet Applications) attributes: Make web content more accessible to people with disabilities. X Best Practices for SEO Include these tips for HTML best practices in relation to SEO: Use semantic HTML tags: Elements like , , and provide better structure for search engines. Meaningful URLs and anchor

Mar 27, 2025 - 01:59
 0
The Ultimate HTML Cheat Sheet

Introduction

HTML (HyperText Markup Language) is the foundation of web development. This cheatsheet provides a list of HTML tags along with their descriptions and usage.

What is HTML?

HTML is a markup language used to structure web pages. It consists of elements (tags) that define content, layout, and functionality.

Basic Structure 




  
  
  Page Title

Head Section Elements

  • </code>: Defines the title of the web page (shown in the browser tab).</li> <li> <p><code><meta></code>: Provides metadata like charset, viewport, keywords, etc. <pre class="highlight plaintext"><code><meta name="description" content="A brief description of the page"> </code></pre> </li> <li> <p><code><link></code>: Links to external files such as stylesheets. <pre class="highlight plaintext"><code><link rel="stylesheet" href="styles.css"> </code></pre> </li> <li> <p><code><style></code>: Embeds internal CSS styles within the head. <pre class="highlight plaintext"><code><style> body { font-family: Arial, sans-serif; } </style> </code></pre> </li> </ul> <h3> Text Elements </h3> <ul> <li> <p><code><h1></code> to <code><h6></code>: Heading tags, <code><h1></code> being the highest/most important. <pre class="highlight plaintext"><code><h1>Main Heading</h1> <h2>Subheading</h2> </code></pre> </li> <li> <p><code><p></code>: Paragraph tag. <pre class="highlight plaintext"><code><p>This is a paragraph of text. </code></pre> </li> <li><p><code><br></code>: Line break (self-closing).</li> <li><p><code><hr></code>: Horizontal rule/line (self-closing).</li> <li><p><code><strong></code>: Bold text.</li> <li><p><code><em></code>: Italicized/emphasized text.</li> </ul> <h3> Links and Images </h3> <ul> <li> <p><code><a></code>: Anchor tag for hyperlinks. <pre class="highlight plaintext"><code><a href="https://example.com">Visit Example</a> </code></pre> <ul> <li> Use <code>target="_blank"</code> to open links in a new tab.</li> </ul> </li> <li> <p><code><img></code>: Displays an image. <pre class="highlight plaintext"><code><img src="image.jpg" alt="Description of image"> </code></pre> <ul> <li> Attributes: <code>src</code> (source), <code>alt</code> (alternate text), <code>width</code>, <code>height</code>.</li> </ul> </li> </ul> <h3> Lists </h3> <ul> <li> <p>Ordered List (<code><ol></code>): <pre class="highlight plaintext"><code><ol> <li>First item</li> <li>Second item</li> </ol> </code></pre> </li> <li> <p>Unordered List (<code><ul></code>): <pre class="highlight plaintext"><code><ul> <li>Bullet point one</li> <li>Bullet point two</li> </ul> </code></pre> </li> <li> <p>Definition List (<code><dl></code>, <code><dt></code>, <code><dd></code>): <pre class="highlight plaintext"><code><dl> <dt>Term</dt> <dd>Definition of the term</dd> </dl> </code></pre> </li> </ul> <h3> Tables </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table> </code></pre> </div> <ul> <li> <code><thead></code>, <code><tbody></code>, <code><tfoot></code>: Group table sections.</li> <li> <code><th></code>: Table header cell.</li> <li> <code><td></code>: Table data cell.</li> </ul> <h3> Forms </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><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> <input type="submit" value="Submit"> </form> </code></pre> </div> <ul> <li> <code><input></code>: Different input types (<code>text</code>, <code>email</code>, <code>password</code>, <code>radio</code>, <code>checkbox</code>, <code>submit</code>, etc.).</li> <li> <code><label></code>: Label for form elements.</li> <li> <p><code><textarea></code>: Multi-line text input. <pre class="highlight plaintext"><code><textarea rows="4" cols="50"></textarea> </code></pre> </li> <li> <p><code><select></code> and <code><option></code>: Dropdown menu. <pre class="highlight plaintext"><code><select> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </code></pre> </li> </ul> <h3> Multimedia </h3> <ul> <li> <p><code><audio></code>: Embeds an audio file. <pre class="highlight plaintext"><code><audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> </code></pre> </li> <li> <p><code><video></code>: Embeds a video file. <pre class="highlight plaintext"><code><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </code></pre> </li> </ul> <h3> Semantic Elements </h3> <ul> <li> <code><header></code>: Defines a header section.</li> <li> <code><nav></code>: Defines a navigation section.</li> <li> <code><main></code>: Main content of the document.</li> <li> <code><article></code>: An independent piece of content.</li> <li> <code><section></code>: Defines sections in a document.</li> <li> <code><footer></code>: Footer of a document.</li> <li> <code><aside></code>: Content tangentially related to the main content.</li> <li> <code><figure></code> and <code><figcaption></code>: Used for figures/images with captions.</li> </ul> <h3> Block vs Inline Elements </h3> <p><strong>Block-level elements</strong> (take up full width):<code>* `<div>`, `<p>`, `<h1>`-`<h6>`, `<section>`, `<article>`, `<table>`, `<form>` **Inline elements** (take up only necessary space):</code> <ul> <li> <code><a></code>, <code><span></code>, <code><img></code>, <code><strong></code>, <code><em></code>, <code><input></code> </li> </ul> <h3> Other Common Elements </h3> <ul> <li> <code><div></code>: Generic container for block-level content.</li> <li> <code><span></code>: Generic container for inline content.</li> <li> <p><code><script></code>: Embeds or links to JavaScript. <pre class="highlight plaintext"><code><script src="app.js"></script> </code></pre> </li> <li> <p><code><noscript></code>: Display content if JavaScript is disabled. <pre class="highlight plaintext"><code><noscript>JavaScript is not enabled in your browser.</noscript> </code></pre> </li> </ul> <h3> Global Attributes </h3> <ul> <li> <p><code>class</code>: Assigns a class to an element for CSS/JS targeting. <pre class="highlight plaintext"><code><p class="intro">This is an intro paragraph. </code></pre> </li> <li> <p><code>id</code>: Unique identifier for an element. <pre class="highlight plaintext"><code><div id="main-content"></div> </code></pre> </li> <li> <p><code>style</code>: Inline CSS styles. <pre class="highlight plaintext"><code><p style="color: blue;">Styled text </code></pre> </li> <li> <p><code>data-*</code>: Custom data attributes. <pre class="highlight plaintext"><code><div data-user-id="123">User Content</div> </code></pre> </li> </ul> <h3> HTML5 New Elements </h3> <ul> <li> <strong><code><article></code></strong>: Represents independent, self-contained content.</li> <li> <strong><code><section></code></strong>: Defines a section in a document.</li> <li> <strong><code><header></code></strong>: Represents introductory content or a set of navigational links.</li> <li> <strong><code><footer></code></strong>: Defines a footer for a document or section.</li> <li> <strong><code><aside></code></strong>: Represents content aside from the main content, like a sidebar.</li> <li> <strong><code><main></code></strong>: The main content of the document.</li> <li> <strong><code><nav></code></strong>: Contains navigation links.</li> <li> <strong><code><figure></code></strong> and <strong><code><figcaption></code></strong>: Used for figures like images with captions.</li> <li> <strong><code><mark></code></strong>: Highlights text.</li> <li> <p><strong><code><progress></code></strong>: Displays the progress of a task. <pre class="highlight plaintext"><code><progress value="70" max="100">70%</progress> </code></pre> </li> </ul> <h3> Input Types (HTML5) </h3> <p>HTML5 introduced new input types for better form control. <ul> <li> <code>email</code>: For email addresses.</li> <li> <code>url</code>: For URLs.</li> <li> <code>number</code>: For numerical input.</li> <li> <p><code>range</code>: A slider control for selecting a range. <pre class="highlight plaintext"><code><input type="range" min="0" max="100"> </code></pre> </li> <li><p><code>date</code>: For selecting a date.</li> <li> <p><code>color</code>: For choosing a color. <pre class="highlight plaintext"><code><input type="color"> </code></pre> </li> </ul> <h3> Inline vs Block Differences </h3> <p>Make sure to explain the differences between <strong>inline</strong> and <strong>block</strong> elements for clarity: <ul> <li> <strong>Inline elements</strong>: Flow within a line. Examples include <code><a></code>, <code><span></code>, <code><img></code>, <code><strong></code>, <code><em></code>, <code><input></code>.</li> <li> <strong>Block elements</strong>: Start on a new line and stretch to the full width of their parent. Examples include <code><div></code>, <code><p></code>, <code><h1></code> to <code><h6></code>, <code><section></code>, <code><header></code>, <code><footer></code>, <code><table></code>, <code><article></code>.</li> </ul> <h3> Forms with Validation (HTML5) </h3> <p>HTML5 introduced attributes for client-side form validation: <ul> <li> <p><strong><code>required</code></strong>: Makes a field required. <pre class="highlight plaintext"><code><input type="text" required> </code></pre> </li> <li> <p><strong><code>pattern</code></strong>: Specifies a regex pattern for input validation. <pre class="highlight plaintext"><code><input type="text" pattern="[A-Za-z]{3,}"> </code></pre> </li> <li> <p><strong><code>min</code></strong>, <strong><code>max</code></strong>, <strong><code>step</code></strong>: Define limits for input types like <code>number</code>, <code>range</code>, or <code>date</code>. <pre class="highlight plaintext"><code><input type="number" min="1" max="100" step="5"> </code></pre> </li> </ul> <h3> Accessibility Best Practices </h3> <p>For SEO and user accessibility, you can mention some key practices: <ul> <li> <strong><code>alt</code> attribute</strong> for images: Always add descriptive <code>alt</code> text to images for screen readers and better SEO.</li> <li> <p><strong>ARIA</strong> (Accessible Rich Internet Applications) attributes: Make web content more accessible to people with disabilities. <pre class="highlight plaintext"><code><button aria-label="Close">X</button> </code></pre> </li> </ul> <h3> Best Practices for SEO </h3> <p>Include these tips for HTML best practices in relation to SEO: <ul> <li> <strong>Use semantic HTML tags</strong>: Elements like <code><article></code>, <code><section></code>, and <code><header></code> provide better structure for search engines.</li> <li> <p><strong>Meaningful URLs and anchor text</strong>: Make sure your links are descriptive. <pre class="highlight plaintext"><code><a href="/about-us">Learn more about us</a> </code></pre> </li> <li> <p><strong>Meta descriptions</strong>: Always include unique meta descriptions. <pre class="highlight plaintext"><code><meta name="description" content="Your page description here"> </code></pre> </li> <li><p><strong>Heading hierarchy</strong>: Follow a logical order for headings (<code><h1></code> to <code><h6></code>).</li> </ul> <h3> CSS and JavaScript Integration </h3> <p>Explain how to include CSS and JavaScript within HTML. <ul> <li> <p><strong>Internal CSS</strong>: <pre class="highlight plaintext"><code><style> body { background-color: #f4f4f4; } </style> </code></pre> </li> <li> <p><strong>External CSS</strong>: <pre class="highlight plaintext"><code><link rel="stylesheet" href="styles.css"> </code></pre> </li> <li> <p><strong>Inline CSS</strong>: <pre class="highlight plaintext"><code><p style="color: red;">This text is red. </code></pre> </li> <li> <p><strong>JavaScript in HTML</strong>: <pre class="highlight plaintext"><code><script src="app.js"></script> </code></pre> </li> <li> <p><strong>Inline JavaScript</strong>: <pre class="highlight plaintext"><code><button onclick="alert('Hello!')">Click Me</button> </code></pre> </li> </ul> <h3> Doctype and Charset </h3> <p>Explain the importance of these attributes in your HTML document: <ul> <li> <strong><code><!DOCTYPE html></code></strong>: Declares the document type and helps the browser render the page correctly.</li> <li> <strong><code><meta charset="UTF-8"></code></strong>: Ensures proper rendering of characters and symbols.</li> </ul> <h3> Favicons and Meta Tags </h3> <ol> <li> <p><strong>Favicon</strong>: Add a small icon that represents the website in the browser tab. <pre class="highlight plaintext"><code><link rel="icon" href="favicon.ico" type="image/x-icon"> </code></pre> </li> <li><p><strong>Meta Tags for SEO and Social Media</strong>:</li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>* **`<meta>` for Search Engines**: Improve SEO by using meta descriptions and keywords. <meta name="description" content="An ultimate HTML cheat sheet for beginners to advanced developers."> <meta name="keywords" content="HTML, cheat sheet, web development, HTML tags, SEO"> * **Open Graph for Social Media**: Optimize how your site looks when shared on social media. <meta property="og:title" content="Ultimate HTML Cheat Sheet"> <meta property="og:description" content="Learn all essential HTML tags with examples in this complete HTML cheat sheet."> <meta property="og:image" content="image.jpg"> <meta property="og:url" content="https://example.com/html-cheat-sheet"> </code></pre> </div> <h3> Best Practices for Performance Optimization </h3> <p>You can briefly mention some HTML tips that help with <strong>performance</strong>: <ul> <li> <strong>Minimize HTTP requests</strong>: Combine CSS/JS files or use CDN links to reduce load time.</li> <li> <p><strong>Lazy Loading for Images</strong>: Load images only when they appear in the viewport. <pre class="highlight plaintext"><code><img src="image.jpg" alt="image" loading="lazy"> </code></pre> </li> <li> <p><strong>Async/Defer JavaScript</strong>: Use the <code>async</code> or <code>defer</code> attribute in <code><script></code> tags to prevent render-blocking. <pre class="highlight plaintext"><code><script src="app.js" async></script> </code></pre> </li> </ul> <h3> Custom Data Attributes (<code>data-*</code>) </h3> <p>HTML allows you to add custom attributes with <code>data-*</code>: <ul> <li> <p>These can be useful for storing custom data for scripts. <pre class="highlight plaintext"><code><div data-user-id="123" data-role="admin">User Info</div> </code></pre> </li> <li> <p>You can access these with JavaScript via <code>dataset</code>: <pre class="highlight plaintext"><code>let userId = document.querySelector('div').dataset.userId; </code></pre> </li> </ul> <h3> Comments in HTML </h3> <p>Always remind developers to use comments to document their code: <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><!-- This is a comment --> </code></pre> </div> <ul> <li> Comments are helpful for other developers (or yourself) when revisiting code.</li> <li> They do not affect the page and are not visible to users.</li> </ul> <h3> Accessibility: <code>alt</code> and <code>aria</code> </h3> <p>Promoting accessibility is important: <ul> <li> <p><strong>Use <code>alt</code> attributes</strong> for all images to describe the content. <pre class="highlight plaintext"><code><img src="photo.jpg" alt="A photo of a sunset"> </code></pre> </li> <li> <p><strong>ARIA</strong> (Accessible Rich Internet Applications) attributes for better interaction with assistive technologies: <pre class="highlight plaintext"><code><button aria-label="Close">X</button> </code></pre> </li> </ul> <h3> HTML Entities </h3> <p>When you need to display special characters in HTML, use <strong>HTML entities</strong>: <ul> <li> <p><strong>Common Entities</strong>: <ul> <li> <code>&</code>: <code>&</code> </li> <li> <code><</code>: <code><</code> </li> <li> <code>></code>: <code>></code> </li> <li> <code>"</code>: <code>"</code> </li> <li> <code>'</code>: <code>'</code> </li> </ul> <p>Example: <pre class="highlight plaintext"><code><p>5 < 10 is true </code></pre> </li> </ul> <h3> Example of a Responsive Web Page </h3> <p>You can include an example of a simple, <strong>responsive web page</strong> structure, like this: <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Web Page

    Welcome to My Responsive Page

    About Us

    This page is fully responsive and adapts to screen sizes.

This will be a good reference for beginners learning how to structure a responsive page.

Conclusion

This HTML Cheat Sheet covers the most essential tags and attributes you need to start building and optimizing websites. From structuring your page, adding text and multimedia, to enhancing accessibility and SEO, these snippets will help you become more efficient in web development. Bookmark this page for future reference and feel free to experiment with different HTML elements as you continue to improve your coding skills.

Did we miss any important tags? Let us know in the comments!