Hello Developers, If you want to learn about Paired and Unpaired tags in HTML, this article is for you. We will cover a lot of paired and unpaired tags with the help of explanations and examples.
So without wasting the time let’s start.
HTML (Hypertext Markup Language) is a markup language that helps to create the structure of web pages. Webpages have lots of elements like headings, paragraphs, audio, video, images, etc each element is represented by a specific tag in HTML.
HTML tags are used to define the structure of the content of the web pages. HTML tags are divided into two types they are as follows:
- Paired Tags
- Unpaired Tags
1) Paired Tags in HTML
Paired Tag is also known as the Opening Tag and Closing Tag, All HTML tags that have at least one opening and closing tag are known as Paired Tag.
In paired HTML tags, it is mandatory to close each opening tag and it allows writing the content between the opening and its corresponding closing tag.
Syntax
<tag-name> Write the contents </tag-name>
Explanation :
- <tag-name> is an opening tag
- </tag-name> is the closing tag for <tag-name>
- You can write the content between the opening and closing tag
Example :
<h1>What are the Paired and Unpaired tags in HTML </h1> <p> Paired and unpaired tags are html tats which help to define the structure of the web pages </p>
List of Paired tags in HTML
Here is a list of commonly used paired tags in HTML with a short description:
| SN | TAG Name | Description |
| 1 | <a> | Anchor/Link tag, It is used to create hyperlinks. |
| 2 | <abbr> | Abbreviation, It is used with a title attribute. |
| 3 | <address> | It is used to display Contact information for the author/owner on the webpage. |
| 4 | <article> | Self-contained content that can be independently distributed or reused. |
| 5 | <aside> | It is used to define the Content related to the main content. |
| 6 | <b> | It helps to make bold text. |
| 7 | <blockquote> | Extended quotation that spans multiple paragraphs. |
| 8 | <body> | It defines the Body of the HTML document. |
| 9 | <button> | It helps to create button elements in HTML documents. |
| 10 | <cite> | Title of a work (e.g., book, movie, song) referenced within the text. |
| 11 | <code> | It is used to display code snippets. |
| 12 | <dd> | Description or definition in a description list. |
| 13 | <del> | Deleted text (Mainly used at MRP and Sale Price). |
| 14 | <details> | Additional details that can be toggled open or closed. |
| 15 | <div> | It is used to create a division or section of a document. |
| 16 | <dl> | It helps to make a description list. |
| 17 | <dt> | Term or name in a description list. |
| 18 | <em> | It helps to emphasize the text. |
| 19 | <fieldset> | It helps to Group the related form elements. |
| 20 | <figcaption> | It is used to set a caption for a <figure> element. |
| 21 | <figure> | Self-contained content, such as an image, diagram, or code snippet. |
| 22 | <footer> | Footer used to create a footer section of a document or webpage. |
| 23 | <form> | Form element in HTML pages. |
| 24 | <h1> to <h6> | All are used to define headings of varying levels. |
| 25 | <header> | It helps to create a header section of a document or webpage. |
| 26 | <i> | Italicized text. |
| 27 | <iframe> | It is used to embed another document within the current document. |
| 28 | <label> | Label for an <input> element. |
| 29 | <li> | List items within an ordered or unordered list. |
| 30 | <main> | It helps to display the main content of a document or webpage. |
| 31 | <mark> | Highlighted or marked text. |
| 32 | <nav> | It is used to create the container for navigation links. |
| 33 | <ol> | It is used to create an ordered list. |
| 34 | <p> | It helps to display the paragraph. |
| 35 | <pre> | Preformatted text. |
| 36 | <q> | It helps to create short inline quotations. |
| 37 | <s> | Strikethrough text. |
| 38 | <section> | Creating the section of a document. |
| 39 | <select> | Create a dropdown list for the form. |
| 40 | <option> | Creating the option for the dropdown list |
| 41 | <small> | Make the text smaller. |
| 42 | <span> | Generic container for inline elements. |
| 43 | <strong> | It helps to display Strong importance, typically rendered as bold text. |
| 44 | <sub> | It helps to make subscript text. |
| 45 | <sup> | It helps to make superscript text. |
| 46 | <table> | It is used to create table elements. |
| 47 | <tbody> | Table body. |
| 48 | <td> | Table data/cell. |
| 49 | <textarea> | A text area for multiline input. |
| 50 | <tfoot> | It is used to create a footer for the table. |
| 51 | <th> | Table header cell. |
| 52 | <thead> | Container for table header. |
| 53 | <tr> | Table row. |
| 54 | <ul> | Unordered list. |
| 55 | <video> | It is used to create video elements. |
These are just a few examples of paired tags in HTML. There are lots of tags available for various purposes.
Must Read
- How to remove commas from string in JavaScript with Example.
- JavaScript Array Methods Cheat Sheet: A Comprehensive Guide
1) Unpaired Tags in HTML
Unpaired tags are also known as Self-closing tags or Empty tags, All HTML tags which does not have any external closing tag are considered Unpaired tags. It represents the standalone element with no content encapsulated.
It does not have any closing tag but still, we need to close the unpaired tag by using the forward slash “/” at the end of the tag before closing the angular bracket “>”.
Syntax
<tag-name attribute=""/>
Example:
<img src="image.png" alt="Image"/>
Unpaired tags are generally used for standalone elements, such as images, line breaks, horizontal rules, input fields, and meta information about HTML pages or documents.
We can set extra information to the unpaired tag with the help of attributes, you can see in the above example we used two attributes one is src which helps to set the image source and another is alt which helps to add the alternative text for the image tag.
List of Unpaired tags in HTML
Here is a list of commonly used unpaired tags in HTML with a short description:
| SN | TAG Name | Description |
| 1 | <area> | It Defines an area inside an image map. |
| 2 | <base> | Specifies the base URL/target for all relative URLs in a document. |
| 3 | <br> | It is used to make line breaks in the document. |
| 4 | <col> | It Defines attributes for the table columns. |
| 5 | <embed> | Embeds external content, such as multimedia, into a document. |
| 6 | <hr> | It is used to create horizontal rules or dividers in HTML pages. |
| 7 | <img> | It helps to add an image element. |
| 8 | <input> | It is used to create input fields for forms. |
| 9 | <link> | It is used to add external resources to the current page. |
| 10 | <meta> | It provides meta-information about the HTML document. |
| 11 | <source> | It specifies multiple media resources for media elements, such as <audio> and <video>. |
The above tags do not require the closing tag because all tags are unpaired tags. They stand alone and represent the element.
Summary and Conclusion:
In summary, this article (paired and unpaired tags in HTML) explored paired and unpaired tags in HTML.
Paired tags are generally used to organize and encapsulate the content while unpaired tags are used for standalone elements or elements with no content.
I hope you have enjoyed this article if yes, you can share it with your college friends and juniors.
Thank You!
(FAQs) About Paired and Unpaired Tags in HTML
1. What are the 2 types of tags in HTML?
- Paired tags (opening and closing tags)
- Unpaired tags (self-closing tag or empty tag)
2. Which tags are called as paired tags?
All the tags that have an opening and an external closing tag are known as paired tags. Example <p> Content here </p> is a paired tag.
3. What are paired tags in an HTML example?
Here is the list of paired tags in HTML
- <h1>Heading</h1>
- <a>Link</a>
- <p>Peragraph here </p>
- <div> Division here </div>
- <span> inline section </span>
4. Is h1 a paired tag?
Yes, h2 is the paired tag in HTML because it has the opening and closing tag for example
<h1> Heading here </h1>
5. Are all HTML tags in pairs?
