HTML stands for Hypertext Markup Language. It is the backbone of webpages. HTML uses tags to define elements on the page, like headings, paragraphs, images, links, and more. Understanding these tags is essential for structuring content properly. In this blog, you will learn all HTML tags and best practices for using them.
Table of Contents:
HTML tags are special keywords enclosed in angle brackets, like <tagname>, which tell the browser how to display content. Each and every tag has its own meaning. There are two types of tags in HTML:
1. Container Tag
A container tag is also known as a paired tag in HTML. It comes with a pair, which means it has opening and closing tags.
Syntax:
<p> This is a paragraph tag.</p>
Example: <p>, <a>, <html>, <head>, <title>, etc. are some examples of container tags in HTML.
2. Empty Tag
An empty tag, also called an unpaired HTML tag, has only an opening tag. It doesn’t require a closing tag. They are used to insert a single element in HTML documents.
Syntax:
<hr>
Examples: <img>, <br>, and <hr> are some empty tags in HTML.
HTML is all about the tags. It is used to define the elements in a webpage, like audio, video, images, and text. Here is the list of some commonly used HTML tags:
The table below represents the tags that are used to define the document structure:
| Tag |
Definition |
Example |
| <html> |
It is the root tag of an HTML document. |
<html>…</html> |
| <head> |
It contains the metadata (data used by browsers) like title, links, and scripts. |
<head>…</head> |
| <title> |
It is used to set the title of the page. |
<title>My Webpage</title> |
| <body> |
It contains all the tags that are used to display the content of the webpage. |
<body>…</body> |
A website has multiple sections like navigation, sidebar, header, footer, etc. For making these sections, HTML has special sectioning tags. Here is a list of sectioning tags in HTML.
| Tag |
Definition |
Example |
| <header> |
It represents the top section of a webpage. |
<header>…</header> |
| <nav> |
It is used to define navigation links. |
<nav><a href=”#”>Home</a></nav> |
| <section> |
It helps in defining a section of content. |
<section>About</section> |
| <article> |
Represents self-contained content like blogs |
<article>News</article> |
| <aside> |
It contains content that is indirectly related to the main content. |
<aside>Sidebar</aside> |
| <footer> |
It represents the bottom section of the website. |
<footer>Copyright</footer> |
Master the Art of Building Websites
Enroll Today
3. Content Tags
Here is the list of the tags that are used to insert text in your webpage:
| Tag |
Definition |
Example |
| <h1>-<h6> |
It is used to add headings in your document. <h1> is the largest and <h6> is the smallest heading. |
<h1>Main Heading</h1> |
| <p> |
Paragraph |
<p>This is a paragraph</p> |
| <br> |
It is used to break the line. |
<br> |
| <hr> |
It is used to place a horizontal line. |
<hr> |
| <blockquote> |
It is used to define a section of text that is quoted from another source. |
<blockquote>Quote</blockquote> |
4. Inline Text Semantics
Here are some of the tags that are used to style the text written in the HTML document.
| Tag |
Definition |
Example |
| <a> |
It is used to add hyperlinks to the website. |
<a href=”https://”>Link</a> |
| <strong> |
It displays the importance of the text within its content. |
<strong>Important</strong> |
| <em> |
It helps to highlight text in italics. |
<em>Note</em> |
| <span> |
Used for styling small portions of text |
<span class=”red”>Text</span> |
| <code> |
It helps to represent code written in languages like JavaScript, C, or C++. |
<code>let x = 5;</code> |
Image and media tags are important to add images, audio, and video to the webpage. Here is the list of the images and media tags in HTML.
| Tag |
Definition |
Example |
| <img> |
It is used to add images to the website. |
<img src=”image.jpg” alt=”Intellipaat”> |
| <audio> |
It helps to add audio content to the website. |
<audio controls><source src=”audio.mp3″ type=”audio/mpeg”></audio> |
| <video> |
It helps to add video content to the website. |
<video controls><source src=”movie.mp4″ type=”video/mp4″></video> |
| <figure> |
Group media and caption |
<figure><img src=”pic.jpg”><figcaption>Caption</figcaption></figure> |
Lists in HTML are used to display items in a structured way. Here is the list of all the tags that are used to create lists in HTML:
| Tag |
Definition |
Example |
| <ul> |
It is used to display unordered lists (display items in bullets). |
<ul><li>Intellipaat</li></ul> |
| <ol> |
It is used to display ordered lists (A, a, i, 1). |
<ol><li>Intellipaat</li></ol> |
| <li> |
List items |
<li>Intellipaat</li> |
| <dl> |
Used for defining a list of terms with their corresponding descriptions. |
<dl><dt>HTML</dt><dd>Markup Language</dd></dl> |
| <dt> |
Used to define the term in a description list. |
<dt>Term</dt> |
| <dd> |
Used to write the description of the term. |
<dd>Definition</dd> |
Tables in HTML are used to represent the data of multiple records. Here is the list of all the tags used to create a table in HTML:
| Tag |
Definition |
Example |
| <table> |
It is used to define tables in HTML. |
<table>…</table> |
| <tr> |
Used to create a table row. |
<tr><td>Row</td></tr> |
| <td> |
Used to create a data cell in tables. |
<td>Data</td> |
| <th> |
It is used to create header cells in the table. |
<th>Header</th> |
| <thead> |
Used to create header rows in the table. |
<thead><tr><th>Col</th></tr></thead> |
| <tbody> |
Used to create body rows in the table. |
<tbody><tr><td>Data</td></tr></tbody> |
| <tfoot> |
Used to create footer rows in the table. |
<tfoot><tr><td>Sum</td></tr></tfoot> |
Forms are used to get data from the users. Here are some of the important tags that are used to create forms in HTML.
| Tag |
Definition |
Description |
| <form> |
It is used to create forms in HTML. |
<form action=”/submit”>…</form> |
| <input> |
Used to create an input field of a different type (like text, email, password, etc). |
<input type=”text”> |
| <label> |
Used to create a label for an input field. |
<label for=”name”>Name</label> |
| <textarea> |
Allows multi-line text input. |
<textarea></textarea> |
| <button> |
A clickable button used to perform an action. |
<button>Submit</button> |
| <select> |
Used to create a drop-down list. |
<select><option>1</option></select> |
| <option> |
Used to create options in a drop-down list. |
<option>Option 1</option> |
Here is the list of all the tags that are used to add external scripts and apply styling to the HTML document.
| Tag |
Definition |
Example |
| <script> |
It is used to add a JavaScript file to the HTML document. |
<script>console.log(‘Hello’)</script> |
| <style> |
It is used to add CSS styles. |
<style>body { color: red; }</style> |
| <link> |
It is used to add an external CSS file to the HTML |
<link rel=”stylesheet” href=”style.css”> |
Here is the list of all the deprecated tags that are no longer used in HTML.
| Tag |
Definition |
Example |
| <font> |
It is used to define font style (deprecated in HTML5). |
<font color=”red”>Text</font> |
| <center> |
It is used to center text (deprecated in HTML5). |
<center>Hello</center> |
| <big> |
Used to make text larger (deprecated in HTML5). |
<big>Big Text</big> |
| <blink> |
Makes text blink (not supported in modern browsers). |
<blink>Blink</blink> |
Tip:
These tags are deprecated because better alternatives are there for doing these tasks, like we don’t need a <center> tag because we have CSS (text-align: center;) for doing the same.
Here are some of the best practices that you need to follow while writing tags in HTML:
- Always close your tags properly by writing closing tags (</>)
- Use the semantic tags (like <section>, <article>) for structuring your content properly.
- Don’t use deprecated tags for writing HTML code.
- Keep the structure clean and readable, and in proper formatting.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
Tags in HTML are used to structure and format the content effectively. Understanding and using them properly to create webpages ensures that your content is well structured and visually attractive. Whether you’re a beginner or an experienced developer, you need to master these tags for creating webpages.
Q1. What is a tag in HTML?
An HTML tag is defined as a keyword that is used to tell the browser how to display the content on the web. It is always put inside the angle brackets (<>).
Q2. What is CSS?
CSS stands for Cascading Style Sheets. It is used to change the colors, fonts, and layout of the HTML elements.
Q3. What is the <a> tag in HTML?
The <a>, short for anchor, is the tag used to display hyperlinks in HTML.
Q4. What is alt in HTML?
An alt attribute in the <img> tag helps you to display the alternative text for the image if the image is not loaded in the browser.
Q5. What is the <p> tag?
The <p> tag in HTML is used to create a paragraph on the webpage.