Understanding HTML role is much like grasping a tree's roots helps appreciate how crucial it is for the web. It may not be visible in the final design, but it’s essential for creating a functional and accessible website.You can check our "What is the basic HTML?" article. Today we will understand What is the tags?, Type og Tags and more.
What is HTML Tags?
HTML tags are special codes that used to structure and create, design web pages. that tell the web browser how to display content.
Typically Tags comes in pairs:
- an opening tag <> : The opening tag starts with a angle brackets <>
- a closing tag </> : while the closing tag starts with angle brackets <>, but has an additional forward-slash ( / ) in closing.
- Content: The content is placed between these tags.
Look at the Example
<p>This is a paragraph.</p>
- <p> is the opening tag.
- "This is a paragraph." is the content.
- </p> is the closing tag.
Here’s a list of common tags:
| Tag | Description | Example Usage |
|---|---|---|
<html> |
The root element of an HTML document. | <html> All Content Here </html> |
<head> |
Contains metadata and links to resources such as stylesheets and scripts. | <head> </head> |
<body> |
Contains the content of the HTML document that is visible to users. | <body>...</body> |
<title> |
Sets the title of the document, displayed in the browser’s title bar or tab. | <title>My Web Page</title> |
<h1> - <h6> |
Defines HTML headings, <h1> being the highest level and <h6> the lowest. |
<h1>Main Heading</h1> |
<p> |
Defines a paragraph of text. | <p>This is a paragraph.</p> |
<a> |
Defines a hyperlink to another document or location. | <a href="https://www.example.com">Visit Example</a> |
<div> |
Defines a division or section in the document, used for grouping content. | <div class="container">...</div> |
<span> |
Defines a section of text or inline content for styling or manipulation. | <span style="color: red;">Text</span> |
<table> |
Defines a table. | <table>...</table> |
<tr> |
Defines a row in a table. | <tr>...</tr> |
<td> |
Defines a cell in a table row. | <td>Cell content</td> |
<th> |
Defines a header cell in a table. | <th>Header</th> |
<col> |
Specifies column properties for an HTML table. | <col style="background-color: yellow;"> |
<meta> |
Defines metadata about the HTML document. | <meta charset="UTF-8"> |
<link> |
Defines the relationship between the current document and an external resource, usually used for linking stylesheets. | <link rel="stylesheet" href="styles.css"> |
<script> |
Defines client-side JavaScript. | <script src="script.js"></script> |
<style> |
Defines CSS styles within the document. | <style> body { font-family: Arial; } </style> |
Self-closing tags
Most of tags comes in pairs (with opening and closing tags) as we show avobe, but, some tags don’t need to be closed, and thats called (self-closing tags). They are typically written with a trailing slash before the closing angle bracket
Examples of self-closing tags are :
<img>, <br />, …, etc.
Here’s a list of common self-closing tags:
<br>: Inserts a line break in text, creating a new line without starting a new paragraph.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a line.<br>This is another line.</p>
</body>
</html>
<img>: Embeds an image into the document.
<hr>: creates a horizontal rule (line) on the web page to separate content.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a line.<br>This is another line.</p>
<hr>
<p>3rd Line</p>
</body>
</html>
Self-Closing Tags in HTML5
In HTML5, the trailing slash (/) in self-closing tags is not required but is still accepted:
<br />
<hr />
=================================
