HTML: All Daily Used Tags and Their Explanation with Examples
Sabat Ali
HTML (HyperText Markup Language) forms the foundation of web development. It structures the content on the web, allowing developers to create organized, visually appealing, and interactive web pages. In this blog, we'll cover some of the most commonly used HTML tags that every developer encounters on a daily basis. Understanding these tags and their purposes will enhance your ability to write cleaner, more effective code.
1. <!DOCTYPE html> – Document Type Declaration
The <!DOCTYPE html> tag is the first line in any HTML file and tells the browser which version of HTML the page is using. For modern websites, it declares that the page is written in HTML5.
Example:
<!DOCTYPE html>
2. <html> – Root Element
The <html> tag wraps all the content on the page and acts as the root element of an HTML document.
Example:
<!DOCTYPE html>
<html>
</html>
3. <head> – Metadata Container
The <head> tag contains meta-information about the HTML document, such as its title, character encoding, linked stylesheets, and scripts. This information is not visible on the page itself but is crucial for the browser and search engines.
Example:
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
4. <title> – Title of the Page
The <title> tag defines the title that appears in the browser tab when the page is opened. It also plays a key role in SEO.
Example:
<title>Learning HTML Basics</title>
5. <body> – Main Content Container
The <body> tag holds all the visible content on the web page, such as headings, paragraphs, images, links, and forms.
Example:
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample web page.</p>
</body>
6. <h1> to <h6> – Headings
Headings are used to define the structure and hierarchy of your content. <h1> is the main heading, and <h2> to <h6> are subheadings, each decreasing in size.
Example:
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Subheading 2</h3>
7. <p> – Paragraph
The <p> tag is used to define paragraphs in a webpage. It groups sentences or blocks of text.
Example:
<p>This is a paragraph explaining HTML basics.</p>
8. <a> – Anchor (Link)
The <a> tag defines hyperlinks, allowing users to navigate between different pages or sections.
Example:
<a href="https://www.example.com">Visit Example</a>
9. <img> – Image
The <img> tag is used to embed images on a web page. It includes the src attribute to specify the image source and the alt attribute for alternative text if the image fails to load.
Example:
<img src="image.jpg" alt="A description of the image">
10. <ul>, <ol>, <li> – Lists
<ul>defines an unordered (bulleted) list.<ol>defines an ordered (numbered) list.<li>represents individual list items.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
11. <div> – Division or Section
The <div> tag is used to group HTML elements together and apply styles or manipulate them with JavaScript. It does not have any semantic meaning by itself.
Example:
<div class="container">
<p>This is inside a div container.</p>
</div>
12. <span> – Inline Element
The <span> tag is used to apply styles or manipulate small sections of content without breaking the flow of the document, unlike <div>.
Example:
<p>This is a <span style="color: red;">highlighted</span> word.</p>
13. <form> – Forms
The <form> tag defines a form that users can fill out, containing input fields, checkboxes, radio buttons, etc.
Example:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
14. <input> – Input Fields
The <input> tag is used to create various form elements such as text fields, checkboxes, radio buttons, and more.
Example:
<input type="text" name="username" placeholder="Enter your name">
15. <button> – Button
The <button> tag creates clickable buttons.
Example:
<button>Click Me!</button>
16. <table>, <tr>, <td>, and <th> – Tables
These tags are used to create tables.
<table>defines the table.<tr>defines a row.<td>defines a data cell.<th>defines a header cell.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
17. <strong> and <em> – Bold and Italics
<strong>is used to make text bold and indicates strong importance.<em>is used to italicize text and indicates emphasis.
Example:
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
18. <br> – Line Break
The <br> tag inserts a line break, forcing the next content to appear on a new line.
Example:
<p>This is the first line.<br>This is the second line.</p>
19. <hr> – Horizontal Rule
The <hr> tag is used to insert a thematic break (a horizontal line) between sections.
Example:
<hr>
20. <meta> – Metadata
The <meta> tag provides metadata about the HTML document, such as keywords, descriptions, and character sets.
Example:
<meta name="description" content="Learn HTML basics.">
Conclusion:
These are some of the most common HTML tags that you’ll use regularly as you build web pages. Mastering them is the first step toward creating well-structured, functional websites. Practice using these tags in different scenarios, and you’ll soon be comfortable building more complex HTML structures!
Subscribe to my newsletter
Read articles from Sabat Ali directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by