HTML (HyperText Markup Language) is the foundation of web development, enabling developers to create structured, engaging, and responsive content for the web. Whether you’re a beginner or an experienced developer, having a concise reference of essential HTML tags, attributes, and best practices is invaluable.
On This Page
Table of Contents
HTML CheatSheet Table
| Feature | Tag/Attribute | Example / Output | Additional Notes |
|---|---|---|---|
| HTML Document Structure | <!DOCTYPE html> | Basic structure of an HTML5 document | Declares the document as HTML5 |
| HTML Head | <head> | Contains metadata, title, and links | Place scripts, styles, and meta tags here |
| HTML Body | <body> | Visible page content goes here | Wraps all visible elements |
| Heading Levels | <h1> to <h6> | <h1>Main Title</h1> | Use <h1> for main title and others for subheadings |
| Paragraph | <p> | <p>This is a paragraph.</p> | Block-level container for text |
| Line Break | <br> | Adds a line break | Self-closing tag |
| Horizontal Rule | <hr> | Adds a horizontal line | Visual section separator |
| Bold Text | <b> or <strong> | <b>Bold</b> or <strong>Strong</strong> | <strong> adds semantic emphasis |
| Italic Text | <i> or <em> | <i>Italic</i> or <em>Emphasis</em> | <em> adds semantic emphasis |
| Anchor (Link) | <a href="url"> | <a href="https://example.com">Visit</a> | Add target="_blank" for new tab links |
| Image | <img src="url" alt="desc"> | <img src="image.jpg" alt="description"> | Always include alt for accessibility |
| Lists (Ordered) | <ol><li>Item</li></ol> | 1. Item | Ordered (numbered) list |
| Lists (Unordered) | <ul><li>Item</li></ul> | – Item | Unordered (bulleted) list |
| Table | <table> | Basic table structure | Use <thead>, <tbody>, and <tfoot> for semantics |
| Table Row/Cell | <tr> / <td> | <tr><td>Cell</td></tr> | Combine rows and cells for table data |
| Table Header | <th> | <th>Header</th> | Use for column headers |
| Div | <div> | <div>Content</div> | Block-level container |
| Span | <span> | <span>Inline Content</span> | Inline container for styling |
| Forms | <form> | <form action="/submit"></form> | Collects and sends data to a server |
| Input Field | <input type="text"> | <input type="text" placeholder="Name"> | Common types: text, email, password, submit |
| Textarea | <textarea> | <textarea rows="5">Text</textarea> | Multi-line text input |
| Dropdown (Select) | <select> | <select><option>Option</option></select> | Use <option> for dropdown options |
| Button | <button> | <button>Click Me</button> | Add event listeners for interactivity |
| Checkbox | <input type="checkbox"> | <input type="checkbox"> Option | Collect boolean (yes/no) data |
| Radio Button | <input type="radio" name="group"> | <input type="radio" name="gender"> | Group radio buttons with the same name |
| Label | <label for="id"> | <label for="name">Name</label> | Associates a label with an input field |
| Script | <script> | <script src="script.js"></script> | Adds JavaScript functionality |
| Style | <style> | <style>body { color: red; }</style> | Embed CSS styles directly |
| Link (CSS) | <link rel="stylesheet"> | <link href="styles.css" rel="stylesheet"> | External CSS file inclusion |
| Meta Tag | <meta> | <meta charset="UTF-8"> | Add metadata like character encoding and descriptions |
| Video Embedding | <video src="video.mp4"> | <video controls src="video.mp4"></video> | Use controls for playback controls |
| Audio Embedding | <audio src="audio.mp3"> | <audio controls src="audio.mp3"></audio> | Embed audio files |
| Iframe | <iframe src="url"> | <iframe src="https://example.com"></iframe> | Embed another page |
| Canvas | <canvas> | <canvas width="200" height="200"></canvas> | Use with JavaScript for drawing graphics |
| SVG (Graphics) | <svg> | <svg width="100" height="100"></svg> | Scalable vector graphics |
| Semantic Tags | <header> <footer> <section> | <header>Title</header> | Improve content structure and accessibility |
| Custom Data Attributes | data-* | <div data-id="123"></div> | Store extra data in elements |
| Progress Bar | <progress> | <progress value="50" max="100"></progress> | Display progress or completion levels |
| Details/Summary | <details><summary> | <details><summary>More</summary>Details</details> | Toggle expandable content |
| HTML Entities | & < > | & < > | Display special characters like &, <, > |
| Accessibility (ARIA) | aria-* attributes | <button aria-label="Close">X</button> | Improves accessibility for screen readers |
| Global Attributes | id, class, style, title | <div id="main" class="content"> | Apply universally to most elements |
This comprehensive cheat sheet is designed to help you quickly recall the most commonly used HTML elements and features, from basic structure to advanced techniques.
Discover Other Cheatsheets:
FAQs
What is HTML used for?
HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It defines elements such as headings, paragraphs, links, images, and more to display content on the web.
Why are semantic tags important in HTML?
Semantic tags, like <header>, <footer>, and <article>, add meaning to your HTML structure, improving accessibility, SEO, and maintainability of your web pages.
What are global attributes in HTML?
Global attributes like id, class, style, and title can be applied to most HTML elements to provide additional properties such as styling, unique identification, or tooltips.
Can I embed multimedia in HTML?
Yes, HTML supports multimedia embedding through elements like <video> and <audio> for videos and audio files, and <iframe> for external content.
What is the purpose of the <meta> tag?
The <meta> tag provides metadata about a webpage, such as character encoding, viewport settings, or page descriptions for search engines.
What are HTML entities, and why are they used?
HTML entities represent special characters like &, <, and > in a way that browsers can display correctly. For example, & represents &.
How does HTML support responsive design?
HTML supports responsive design through elements like <meta name="viewport"> and attributes that work alongside CSS and JavaScript to create mobile-friendly, adaptable layouts.
Are HTML and XHTML the same?
No, XHTML is a stricter, XML-based version of HTML that requires well-formed syntax and adherence to stricter rules.
What are custom data attributes in HTML?
Custom data attributes (e.g., data-*) allow developers to store extra information on HTML elements, which can be accessed via JavaScript for dynamic interactions.
Why is accessibility important in HTML?
Accessibility ensures that web content is usable by all individuals, including those with disabilities. HTML supports this through semantic tags and ARIA attributes.
+ There are no comments
Add yours