Learn HTML with this simple chart of all basic tags. Includes meaning, description, and examples of every HTML tag. A complete beginner-friendly guide.
.jpg)
When learning web development, the first step is understanding HTML tags. Tags are the building blocks of a webpage. They tell the browser how to display content such as text, images, links, forms, tables, and videos.
To make it simple, here is a Basic HTML Tags Chart with Examples. This chart is beginner-friendly and shows each tag with its purpose and example.
Basic HTML Tags Chart
Here is the chart of important HTML tags with their description:
| Tag | Description | Example |
|---|---|---|
| <!DOCTYPE html> | Defines HTML5 document | <!DOCTYPE html> |
| <html> | Root element | <html lang="en"> ... </html> |
| <head> | Metadata, title, links, scripts | <head><title>My Page</title></head> |
| <title> | Webpage title | <title>My Blog</title> |
| <meta> | Metadata (charset, SEO) | <meta charset="UTF-8"> |
| <link> | External resources | <link rel="stylesheet" href="style.css"> |
| <style> | Internal CSS | <style>h1 {color:blue;}</style> |
| <script> | JavaScript | <script>alert("Hello")</script> |
| <body> | Main page content | <body>Text goes here</body> |
| <h1> – <h6> | Headings | <h1>Heading</h1> |
| <p> | Paragraph | <p>This is text.</p> |
| <br> | Line break | First<br>Second |
| <hr> | Horizontal line | <hr> |
| <a> | Link | <a href="https://example.com">Click</a> |
| <img> | Image | <img src="image.jpg" alt="Sample"> |
| <b> | Bold text | <b>Bold</b> |
| <strong> | Important bold | <strong>Important</strong> |
| <i> | Italic text | <i>Italic</i> |
| <em> | Emphasized | <em>Focus</em> |
| <u> | Underlined text | <u>Underline</u> |
| <mark> | Highlighted | <mark>Note</mark> |
| <small> | Small text | <small>Disclaimer</small> |
| <del> | Strikethrough | <del>Old</del> |
| <ins> | Inserted text | <ins>New</ins> |
| <sub> | Subscript | H<sub>2</sub>O |
| <sup> | Superscript | x<sup>2</sup> |
| <ul> | Bullet list | <ul><li>Item</li></ul> |
| <ol> | Numbered list | <ol><li>First</li></ol> |
| <li> | List item | <li>Apple</li> |
| <div> | Block container | <div>Content</div> |
| <span> | Inline container | <span style="color:red">Red</span> |
| <table> | Table | <table>...</table> |
| <tr> | Table row | <tr>...</tr> |
| <th> | Table header | <th>Name</th> |
| <td> | Table cell | <td>John</td> |
| <thead> | Table head | <thead>...</thead> |
| <tbody> | Table body | <tbody>...</tbody> |
| <tfoot> | Table footer | <tfoot>...</tfoot> |
| <form> | User form | <form>...</form> |
| <input> | Input field | <input type="text"> |
| <textarea> | Multi-line input | <textarea></textarea> |
| <button> | Button | <button>Click</button> |
| <select> | Dropdown | <select><option>One</option></select> |
| <option> | Dropdown option | <option>Choice</option> |
| <label> | Label for input | <label for="name">Name:</label> |
| <fieldset> | Groups inputs | <fieldset>...</fieldset> |
| <legend> | Fieldset caption | <legend>Form Info</legend> |
| <iframe> | Embedded page | <iframe src="page.html"></iframe> |
| <nav> | Navigation bar | <nav><a href="#">Home</a></nav> |
| <header> | Page header | <header><h1>Logo</h1></header> |
| <footer> | Page footer | <footer>© 2025</footer> |
| <main> | Main content | <main>Content</main> |
| <section> | Section of page | <section>About Us</section> |
| <article> | Independent content | <article>Blog</article> |
| <aside> | Sidebar content | <aside>Ads</aside> |
| <video> | Video player | <video controls><source src="video.mp4"></video> |
| <audio> | Audio player | <audio controls><source src="song.mp3"></audio> |
| <source> | Media source | <source src="file.mp4" type="video/mp4"> |
| <canvas> | Draw graphics (via JS) | <canvas id="myCanvas"></canvas> |
| <svg> | Vector graphics | <svg><circle cx="50" cy="50" r="40"/></svg> |
| <abbr> | Abbreviation | <abbr title="Cascading Style Sheets">CSS</abbr> |
| <cite> | Citation | <cite>Book Title</cite> |
| <blockquote> | Large quotation | <blockquote>Quote here</blockquote> |
| <q> | Inline quote | <q>Hello</q> |
| <code> | Code text | <code>console.log("Hi")</code> |
| <pre> | Preformatted text | <pre>Preserve spacing</pre> |
| <address> | Contact info | <address>[email protected]</address> |
| <time> | Time/date | <time datetime="2025-08-26">Aug 26, 2025</time> |
| <progress> | Progress bar | <progress value="70" max="100"></progress> |
| <meter> | Gauge measurement | <meter value="6" min="0" max="10"></meter> |
| <details> | Expand/collapse content | <details><summary>More</summary>Hidden</details> |
| <summary> | Title for details | <summary>Click me</summary> |
| <figure> | Media with caption | <figure><img src="pic.jpg"><figcaption>Caption</figcaption></figure> |
| <figcaption> | Figure caption | <figcaption>Image description</figcaption> |
| <dialog> | Popup dialog box | <dialog open>Dialog content</dialog> |
| <template> | Template for JS | <template><p>Hidden content</p></template> |
| <slot> | Placeholder in Web Components | <slot>Default text</slot> |
| <noscript> | Content if JS disabled | <noscript>Please enable JavaScript</noscript> |
| <embed> | Embeds external content | <embed src="file.pdf"> |
| <object> | Embeds media/object | <object data="movie.swf"></object> |
| <param> | Parameters for <object> | <param name="autoplay" value="true"> |
Conclusion
This Basic HTML Tags Chart is a great starting point for beginners who want to learn web development. By practicing these tags, you can easily create structured and well-designed web pages. Once you are confident with HTML, you can move forward to CSS and JavaScript for styling and functionality.
Keep this chart as a quick reference whenever you code. The more you use these tags, the easier they will become.
Click Here to Download Basic HTML Tags Chart PDF
That’s a wrap!
Thank you for taking the time to read this article! I hope you found it informative and enjoyable. If you did, please consider sharing it with your friends and followers. Your support helps me continue creating content like this.
Stay updated with our latest content by signing up for our email newsletter! Be the first to know about new articles and exciting updates directly in your inbox. Don't miss out—subscribe today!
If you'd like to support my work directly, you can buy me a coffee . Your generosity is greatly appreciated and helps me keep bringing you high-quality articles.
Thanks!
Faraz 😊
