0% completed
In this lesson, we will explore the most commonly used HTML tags and their purposes. Below is a reference table containing common HTML tags, their descriptions, and examples to help you understand their usage.
| Tag | Description | Example |
|---|---|---|
<!--...--> | Defines a comment | <!-- This is a comment --> |
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<h1> to <h6> | Defines HTML headings, with <h1> being the largest and <h6> the smallest. | <h1>Welcome to DesignGurus</h1> |
<p> | Defines a paragraph. | <p>This is a paragraph of text.</p> |
<span> | Defines a section of text for inline styling. | <span style="color: red;">Important text</span> |
<div> | Defines a block-level section in a document. | <div style="background-color: lightblue;">This is a container</div> |
<a> | Defines a hyperlink. | <a href="https://designgurus.io">Visit DesignGurus</a> |
<img> | Embeds an image. | <img src="logo.png" alt="DesignGurus Logo" /> |
<br> | Defines a single line break. | This is line one.<br />This is line two. |
<ul> | Defines an unordered (bulleted) list. | <ul><li>Item 1</li><li>Item 2</li></ul> |
<ol> | Defines an ordered (numbered) list. | <ol><li>First</li><li>Second</li></ol> |
<li> | Defines a list item. | <ul><li>List item</li></ul> |
<table> | Defines a table. | <table><tr><td>Row 1, Cell 1</td></tr></table> |
<tr> | Defines a row in a table. | <tr><td>Row Content</td></tr> |
<td> | Defines a cell in a table. | <td>Cell Content</td> |
<form> | Defines a form for user input. | <form action="/submit"><input type="text" /></form> |
<input> | Defines an input control. | <input type="text" name="username" /> |
<button> | Defines a clickable button. | <button>Click Me</button> |
<textarea> | Defines a multiline text input control. | <textarea rows="4" cols="50">Type here...</textarea> |
<select> | Defines a drop-down list. | <select><option>Option 1</option></select> |
<option> | Defines an option in a drop-down list. | <option value="1">Option 1</option> |
<strong> | Defines important text (usually bold). | <strong>This is important</strong> |
<em> | Defines emphasized text (usually italicized). | <em>This is emphasized</em> |
<blockquote> | Defines a section that is quoted from another source. | <blockquote>Quoted text here</blockquote> |
<code> | Defines a piece of computer code. | <code>console.log('Hello, world!');</code> |
<pre> | Defines preformatted text. | <pre>Text with spaces</pre> |
<footer> | Defines a footer for a section or document. | <footer>© 2025 DesignGurus</footer> |
<header> | Defines a header for a section or document. | <header>Welcome to My Website</header> |
<nav> | Defines navigation links. | <nav><a href="#home">Home</a></nav> |
<section> | Defines a section in a document. | <section><h2>About Us</h2></section> |
<article> | Defines an article in a document. | <article><h2>Blog Title</h2><p>Blog content...</p></article> |
<figure> | Defines self-contained content (e.g., images). | <figure><img src="image.jpg" /><figcaption>Image Caption</figcaption></figure> |
<audio> | Embeds sound content. | <audio controls><source src="sound.mp3" type="audio/mpeg"></audio> |
<video> | Embeds video content. | <video controls><source src="video.mp4" type="video/mp4"></video> |
<canvas> | Used for drawing graphics via JavaScript. | <canvas id="myCanvas"></canvas> |
<iframe> | Embeds another HTML document. | <iframe src="https://designgurus.io"></iframe> |
<b> | Defines bold text (without emphasis). | <b>This is bold text</b> |
<i> | Defines italicized text (without emphasis). | <i>This is italicized text</i> |
<hr> | Defines a thematic break (horizontal line). | <hr /> |
<abbr> | Defines an abbreviation or acronym. | <abbr title="World Health Organization">WHO</abbr> |
<address> | Defines contact information. | <address>123 Main Street, Anytown, USA</address> |
<mark> | Defines marked (highlighted) text. | <mark>Highlighted text</mark> |
<time> | Defines a specific time or date. | <time datetime="2025-01-01">January 1, 2025</time> |
<small> | Defines smaller text. | <small>This is fine print text</small> |
<wbr> | Suggests a line break opportunity. | This is a very<wbr>long word. |
.....
.....
.....