In this article, we will discuss the 20+ fundamental HTML tags that you must know. As you all know HTML is very easy to learn, and thus we must understand the uses and meaning of each and every tag we use. We will learn about the following tags:
- HTML
- Head
- Title
- Body
- Div
- Span
- Anchor
- Br
- Section
- Nav
- Footer
- Table
- THead(Table Header)
- TBody(Table Body)
- TR(Table Row)
- TD(Table Data)
- Script
- Img(Image)
- UL(Unordered List)
- OL(Ordered List)
Top 20 Fundamental HTML Tags You Must Know
Let’s directly jump to the tags without any further delay.
1. html
It is the most elementary and basic block of the HTML document. It implies the structure and meaning of the content.
Syntax:
<html>HTML DOCUMENT CONTENTS</html>
2. head
Head tag is one of the most crucial tags used in HTML and web designing. This tag contains all the information regarding the website that is not of client interest(metadata, links to external stylesheets and scripts), except the title.
Syntax:
<head> Metadata and other relevant information </head>
3. title
The title tag defines the title of the webpage. This title is shown in the title bar of the browser.
Syntax:
<title> The title of your website <title>
4. body
The body tag consists of the content of the HTML. All the information that is presented to the client is usually put inside the body tag.
Note: Only a single body tag is preferred in an HTML document.
Syntax:
<body>HTML Contents</body>
5. div
Div tag represents generic and fundamental vessels to contain the data. It is one of the most used tags in HTML. A div tag is a block-level element, which means that it does not share horizontal space with other elements.
Syntax:
<div> Contents </div>
6. span
The vertical equivalent of the div tag is the span tag. A span tag creates a vessel that can hold the data while sharing the horizontal spacing with other elements of the document. And again, just like div, the span tag is also one of the most used tags in HTML.
Note: The span and the div tags are very generic and fundamental in nature, hence overusing these tags should be avoided. Overusing these generic containers is not beneficial for the overall structure of the website. Instead, one should use more semantic tags like section, footer, header, etc.
Syntax:
<span> Contents </span>
7. Anchor
The a(anchor) tag is used to attach a link to the contents lying inside this tag. It can have different attributes like target, referrerpolicy, type, etc.
Syntax:
<a href = "External Link"> Contents </a>
8. br
This tag inserts a line break in the HTML document. The br tag is an empty tag, meaning it doesn’t need any closing tag. Further, it is also a block-level element. It is often used to separate two different blocks of data.
Syntax:
<br>
9. section
The section tag is used to represent a section of contents. It is a semantic HTML tag. Semantic elements give more logical meaning to the HTML document and they also prove to be useful for screen readers.
syntax:
<section> Content </section>
10. nav
This tag is used to represent the navigation bar of the HTML document. Again, just like the section tag, the nav tag is also one of the semantic elements of HTML. Using nav tags to implement the navigation bar creates a more positive impact on the structure of the website and is also helpful for screen readers.
Syntax:
<nav> Contents </nav>
11. footer
The footer tag is a semantic tag that adds to the structure of the document. Also, screen readers find it easier to differentiate between a footer created using the footer tag than those developed using the div tag.
Syntax:
<footer> Footer Contents </footer>
12. table
The table tag creates a table structure inside which rows and columns can be implemented according to the developer’s needs.
Syntax:
<table>
Table Contents....Table Headers and Rows
</table>
13. thead
This tag represents the row that contains the header for all the columns of the table.
Syntax:
<table>
<caption>Council budget (in Rs) 2021</caption>
<thead>
<tr>
<th scope="col">Item Name</th>
<th scope="col">Cost</th>
</tr>
</thead>
</table>
14. tbody
The tbody tag constitutes the body of the table. It consists of all the rows and the data inside them.
Syntax:
<table>
<tbody>
<tr>
<th scope="row">Cake</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Grocerries</th>
<td>18,000</td>
</tr>
</tbody>
</table>
15. tr
This particular tag represents a single row inside a table. This row will further contain the data based on the different columns present inside the table.
Syntax:
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact Number</th>
</tr>
16. td
The td tag represents the data inside a particular column of a table. This is the most fundamental element of a table.
Syntax:
<td>Data1</td>
<td>Data2</td>
17. script
This tag adds JavaScript inside the HTML document. JavaScipt makes the website more dynamic and logical.
Syntax:
<script>
document.getElementById("Malik").content = "Hello There!";
</script>
18. img
The img embeds an image on the website. Further, this tag has a lot of attributes that control the alternate text, visibility, dimensions, and the position of the image like: src, width, etc.
Syntax:
<img src = "Url to the image...Either relative or absolute" alt = "Any text describing the image">
19. ul
The ul tag represents an unordered list. This tag creates the outer structure of the list, and the list can further have the list elements and even other lists nested inside it.
Syntax:
<ul>
<li>Malik</li>
<li>Car
<ul>
<li>Welcome</li>
<li>Everyone</li>
</ul>
</li>
</ul>
20. ol
Analogous to the ul tag, the ol tag indicates an ordered list. This list is usually a sorted numerically indicated list whose appearance can be customized according to the needs of the developer.
Syntax:
<ol>
<li>Dragon Fruit</li>
<li>Mango</li>
<li>Banana</li>
<li>Apple</li>
<li>Kiwi</li>
</ol>
Conclusion
The HTML is huge and one can not master it overnight, it consists of a large number of tags and, each tag further has many many attributes inside it. So let’s conclude this article now, in this article we discussed 20+ most fundamental and commonly used HTML tags.
References
To learn more about HTML and HTML tags you can refer to the following websites:
https://developer.mozilla.org/en-US/
https://www.w3schools.com/default.asp
