Tags
What is a Tag? 🏷️
Tags are the building blocks of HTML—they tell the browser what type of content you're creating. Think of tags as labels that mark different parts of your web page.
Real-World Analogy: Labeling Boxes 📦
┌─────────────────────┐
│ Label: "Books" │ ← This is like an HTML tag
│ ───────────────── │
│ 📚 Book 1 │ ← This is the content
│ 📚 Book 2 │
│ 📚 Book 3 │
└─────────────────────┘
In HTML:
<h1>This is a Heading</h1>
↑ ↑ ↑
Opening Content Closing
tag tag
Tag Structure
Most tags come in pairs:
<tagname>Content goes here</tagname>
Breaking it down:
- Opening tag:
<tagname>- Starts the element - Content: The text or media inside
- Closing tag:
</tagname>- Ends the element (note the/)
Common Tag Examples
<!-- Heading -->
<h1>Main Title</h1>
<!-- Paragraph -->
<p>This is a paragraph of text.</p>
<!-- Link -->
<a href="https://google.com">Click here</a>
<!-- Image (self-closing!) -->
<img src="photo.jpg" alt="Description">
<!-- Bold text -->
<strong>Important text</strong>
<!-- Italic text -->
<em>Emphasized text</em>
Visual Output:
Main Title
This is a paragraph of text.
Important text
Emphasized text
What is an Attribute?
Tags can also include attributes, which provide additional information about the element. Attributes are added to the opening tag and are usually in the form of a name/value pair. For example, the img tag is used to add an image to a web page, and it includes an src attribute that specifies the URL of the image file. Here's an example:
<img src="image.webp" alt="A description of the image" />
In this example, the src attribute specifies the URL of the image file, while the alt attribute provides a description of the image, which is displayed if the image can't be loaded for some reason. Tags and attributes are the building blocks of HTML, and they allow web developers to create complex and dynamic web pages.
This could show up as:
See image is not showing up, because it is not available, so it is showing the alt text. Now, I put a src that points to a real image, so it will show up:
<img src="/img/logo.svg" alt="A description of the image" width="120" />
Self-Closing Tags (Void Elements) 🔓
Some tags don't need a closing tag because they don't contain content—they just perform an action or insert something.
Why Self-Closing?
Regular tags contain content:
<p>Content goes here</p>
Self-closing tags don't have content to contain:
<img src="photo.jpg"> <!-- Just inserts an image -->
<br> <!-- Just creates a line break -->
<hr> <!-- Just draws a horizontal line -->
Common Self-Closing Tags
<!-- Line break (new line) -->
<br>
<!-- Horizontal rule (divider line) -->
<hr>
<!-- Image -->
<img src="photo.jpg" alt="Description">
<!-- Input field -->
<input type="text" placeholder="Enter name">
<!-- Link to stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Metadata -->
<meta charset="UTF-8">
Example Usage
<p>First line<br>Second line</p>
<!-- Output: -->
<!-- First line -->
<!-- Second line -->
<p>Section 1</p>
<hr>
<p>Section 2</p>
<!-- Output: -->
<!-- Section 1 -->
<!-- ____________ (horizontal line) -->
<!-- Section 2 -->
These terms mean the same thing:
- Self-closing tag ✅
- Void element ✅
- Empty element ✅
All refer to tags that don't have closing tags!
In HTML5, the trailing slash / is optional:
<!-- Both are valid -->
<img src="photo.jpg"> ✅
<img src="photo.jpg" /> ✅
<br> ✅
<br /> ✅
Recommendation: Use no slash for cleaner code, but be consistent!
Essential HTML Tags by Category 📚
HTML has 100+ tags, but you'll use about 20-30 regularly. Let's organize them by purpose!
Quick Reference: Most Used Tags
| Tag | Purpose | Example |
|---|---|---|
<h1> to <h6> | Headings | <h1>Main Title</h1> |
<p> | Paragraph | <p>Text here</p> |
<a> | Link | <a href="url">Link</a> |
<img> | Image | <img src="pic.jpg"> |
<div> | Container | <div>Content</div> |
<span> | Inline container | <span>Text</span> |
<ul>, <ol>, <li> | Lists | <ul><li>Item</li></ul> |
<button> | Button | <button>Click</button> |
<input> | Form input | <input type="text"> |
Now let's explore tags by category with examples!
Document Structure
<!DOCTYPE>:
Declares the document type and version. It should be the first line of an HTML document.
<!DOCTYPE html>
<html>:
Defines the root of an HTML document. All other elements must be a child of this element.
<html>
...
</html>
<head>:
Contains meta information about the document. This element is a child of the <html> element.
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<title>:
Defines the title of the document, which is shown in a browser's title bar or on the page's tab. This element is a child of the <head> element.
<title>Page Title</title>
<body>:
Defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. This element is a child of the <html> element.
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
Text Formatting
<h1> to <h6>:
Defines HTML headings, <h1> defines the most important heading and <h6> defines the least important heading. Each heading level has its own default size, with <h1> rendered the largest. This element is a child of the <body> element.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
<p>:
Defines a paragraph of text.
<p>This is a paragraph.</p>
<br>:
Inserts a single line break.
<p>This is<br />a paragraph.</p>
<hr>:
Inserts a horizontal rule (a thematic break in an essay or article).
<p>This is a paragraph.</p> <hr /> <p>This is another paragraph.</p>
<pre>:
Defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
<pre>
This is a paragraph.
This is another paragraph.
This is a third paragraph.
</pre>
<b>:
Defines bold text.
<p>This is <b>bold</b> text.</p>
<strong>:
Defines important text.
<p>This is <strong>important</strong> text.</p>
<u>:
Defines underlined text.
<p>This is <u>underlined</u> text.</p>
<i>:
Defines italic text.
<p>This is <i>italic</i> text.</p>
<em>:
Defines emphasized text.
<p>This is <em>emphasized</em> text.</p>
Lists
<ul>:
Defines an unordered list.
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<ol>:
Defines an ordered list.
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
<li>:
Defines a list item.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Tables
<table>:
Defines a table.
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
<tr>:
Defines a table row.
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
<th>:
Defines a table header.
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
<td>:
Defines a table cell.
<table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> </table>
Forms
<form>:
Defines an HTML form for user input.
<form> <label for="name">Name:</label> <input type="text" id="name" name="name" /> <input type="submit" value="Submit" /> </form>
<input>:
Defines an input control.
<form> <label for="name">Name:</label> <input type="text" id="name" name="name" /> <input type="submit" value="Submit" /> </form>
<textarea>:
Defines a multiline input control (text area).
<form> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="33"> The cat was playing in the garden. </textarea> </form>
<select>:
Defines a drop-down list.
<form> <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </form>
<option>:
Defines an option in a drop-down list.
<form> <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </form>
<button>:
Defines a clickable button.
<button type="button">Click Me!</button>
Media
<img>:
Defines an image.
<img src="https://docs.rizwanashiq.com/img/rizwan-ashiq.webp" alt="Rizwan Ashiq" width="104" height="104" />
<audio>:
Defines sound content.
<audio controls> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
<video>:
Defines a video or movie.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
Embedded Content
<iframe>:
Defines an inline frame.
<iframe src="https://rizwanashiq.com"></iframe>
Containers
<div>:
Defines a section in a document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript. The <div> element has no special meaning. It is used to group block-elements to format them with CSS.
<div
style="border:1px solid black; padding:10px; color:black; background-color:white;"
>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
This will produce the following output:
London
London is the capital city of England.
<span>:
Defines a section in a document. The <span> element is used to group inline-elements in a document. The <span> element does not introduce a new line or a new paragraph. The <span> element is useful for styling a part of a text, or for adding a hook to a part of a text.
<span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</span>
Conclusion
In this tutorial, we have learned about the HTML elements and their attributes. We also learned about the different types of HTML elements.