HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It defines the structure and content of a web page using tags, which are enclosed in angle brackets (< and >). HTML tags can be used to define headings, paragraphs, lists, links, images, and many other elements.
If you’re new to HTML or just need a refresher, this HTML cheat sheet can be a valuable resource. It provides a quick reference for some of the most commonly used HTML tags and attributes, arranged in a table format for easy reading and understanding.
The cheat sheet covers everything from basic text formatting tags like <h1> for headings and <p> for paragraphs, to more complex tags like <table> for creating tables and <form> for creating input forms. It also includes tags for embedding multimedia content, defining metadata, and creating navigation menus.
Cheat Sheet
| HTML Tag | Description | Example |
| <!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
| <html> | Defines an HTML document | <html></html> |
| <head> | Contains metadata for the document | <head></head> |
| <title> | Defines the title of the document | <title>My Title</title> |
| <body> | Defines the document body | <body></body> |
| <h1>-<h6> | Defines headings of different levels | <h1>Heading 1</h1> |
| <p> | Defines a paragraph | <p>This is a paragraph.</p> |
| <a> | Defines a hyperlink | <a href=”https://www.example.com”>Link</a> |
| <img> | Defines an image | <img src=”image.jpg” alt=”Alt text”> |
| <ul> | Defines an unordered list | <ul><li>Item 1</li><li>Item 2</li></ul> |
| <ol> | Defines an ordered list | <ol><li>Item 1</li><li>Item 2</li></ol> |
| <li> | Defines a list item | <li>Item 1</li> |
| <table> | Defines a table | <table><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr><tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr></table> |
| <tr> | Defines a table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
| <td> | Defines a table cell | <td>Cell</td> |
| <form> | Defines a form for user input | <form action=”/submit” method=”POST”><input type=”text” name=”input”></form> |
| <input> | Defines an input field | <input type=”text” name=”input”> |
| <select> | Defines a drop-down list | <select><option value=”value1″>Option 1</option><option value=”value2″>Option 2</option></select> |
| <option> | Defines an option in a drop-down list | <option value=”value1″>Option 1</option> |
| <button> | Defines a clickable button | <button>Click me</button> |
| <textarea> | Defines a multiline input field | <textarea name=”message”></textarea> |
| <label> | Defines a label for an input element | <label for=”input”>Label text</label><input type=”text” id=”input”> |
| <br> | Defines a line break | Text<br>more text |
| <hr> | Defines a horizontal rule | <hr> |
| <div> | Defines a section of the document | <div>Content</div> |
| <span> | Defines a small section of the document | <span>Content</span> |
| <style> | Defines CSS style information | <style>body {background-color: white;}</style> |
| <script> | Defines a client-side script | <script>alert(‘Hello, world’);</script> |
| <meta> | Defines metadata for the document | <meta charset=”UTF-8″> |
| <link> | Defines a link to an external resource, typically a stylesheet | <link rel=”stylesheet” href=”style.css”> |
| <header> | Defines a header for a document or section | <header><h1>My Website</h1></header> |
| <nav> | Defines a navigation menu | <nav><a href=”/”>Home</a><a href=”/about”>About</a></nav> |
| <section> | Defines a section of a document | <section><h2>Section Title</h2><p>Section content.</p></section> |
| <article> | Defines an article, typically a blog post or news article | <article><h2>Article Title</h2><p>Article content.</p></article> |
| <footer> | Defines a footer for a document or section | <footer>© 2023 My Website</footer> |
| <aside> | Defines content that is tangentially related to the surrounding content | <aside>Related links</aside> |
| <iframe> | Defines an inline frame for embedding another document | <iframe src=”https://www.example.com”></iframe> |
| <audio> | Defines an audio file | <audio src=”audio.mp3″ controls></audio> |
| <video> | Defines a video file | <video src=”video.mp4″ controls></video> |
| <source> | Defines a source file for media elements | <video><source src=”video.mp4″ type=”video/mp4″><source src=”video.webm” type=”video/webm”></video> |
| <canvas> | Defines an area for graphics drawing with JavaScript | <canvas id=”myCanvas”></canvas> |
| <svg> | Defines an area for scalable vector graphics | <svg width=”100″ height=”100″><circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red”/></svg> |
| <progress> | Defines a progress bar for displaying the completion of a task | <progress value=”50″ max=”100″></progress> |
| <meter> | Defines a meter for displaying a value within a range | <meter value=”50″ min=”0″ max=”100″>50%</meter> |
| <details> | Defines a disclosure widget for showing or hiding additional content | <details><summary>More information</summary><p>Additional content.</p></details> |
| <summary> | Defines a summary for a disclosure widget | <details><summary>More information</summary><p>Additional content.</p></details> |
Reference: