HTML Tags list: Paired and unpaired tags
The whole HTML functions on HTML Tags. These tags are the basic building block of a website. No web technologies like CSS, PHP, Python, WordPress, etc. will exist without HTML Tags. Today, you will get a complete HTML tags list; paired and unpaired. You can also download a PDF of HTML tags list. Let's start with HTML tag definition.
What is an HTML Tag?
HTML Tags are pre-defined elements in HTML, enclosed within these brackets < > signs. For example: <html>, <table>, etc. All HTML tags has a particular function associated with them.
Each tag has a special function and a combination of various tags developes a website. For example, a <p> tag defines a paragraph in the website and a <table> tag displays a table.
All HTML Tags are predefined, i.e., you cannot create new tags. Look at the example below, this is an example of a paired tag. Observe that there are two tags of same name, but the latter one has a slash / before it, it is a closing tag. Now, what is a closing tag? Let's start with different types of tags!
Syntax:
Types of tags in HTML- HTML tags list download
The types of tags in HTML are categorized on the basis of their appearance. Some tags comes in pairs and others are single. You can also download HTML tags list pdf or can look at the table at the page end.
There are two types of tags in HTML that are used by the Website Designers:
- Paired Tags (Opening and Closing Tags)
- Unpaired Tags (Singular Tag)
Paired Tags - Opening and Closing Tags
Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening tag, and the other one is the closing tag. The closing tag has a / slash, it means that the tag is closed now.
It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the website. When the content is written within paired tags, then it ensures that the effect of those tags would be limited to only the content between them.
Look at the list of some paired tags in HTML below. Notice that each tag has a closing tag with a slash(/) before the name of the tag.
Syntax: <tag> Content </tag>List of some paired tags in HTML:
| Open Tag | Close Tag |
|---|---|
| <html> | </html> |
| <table> | </table> |
| <form> | </form> |
| <span> | </span> |
| <ul> | </ul> |
| <p> | </p> |
| <head> | </head> |
| <div> | </div> |
Unpaired Tags - Singular Tags
Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags. These are also called non-container tags because they do not contain any content.
It is recommended to close the unpaired/singular tags also. But unfortunately, we do not have the closing tag for those. So, an unpaired tag is closed after adding a slash(/) just before the greater than > sign. For example: <br />.
Look below the list of some Unpaired Tags in HTML. Notice the use of slash(/) in the tags, to close them.
Some Unpaired Tags are:
| Open Tag |
|---|
| <br> |
| <hr> |
| <meta> |
| <input> |
HTML Heading Tags - H1 tag to H6 tag
Heading tag is used to give headings of different sizes in a document.
There are six different HTML heading tags, which gives different heading sizes and are defined by <h1> to <h6> tags. <h1> gives the largest heading and <h6> gives the smallest one. So <h1> can be used for most important headings and <h6> can be used for a least important one.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>
Output
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
HTML p tag - Paragraph tag
The <p> tag is used to define a paragraph in a document. HTML paragraph or HTML <p> tag gives the text inside it, a paragraph like finishing. It is a notable point that a browser itself add a line break before and after a paragraph.
Let's take a simple example to see how it works.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>
Output
This is First Paragraph
This is Second Paragraph
This is Third Paragraph
HTML a tag - Anchor Tag
HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file, webpage, image etc.
<a> tag and the closing </a> tag becomes part of the
link, and a user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a target="_blank" href="https://www.coderepublics.com"> This is a link </a>
</body>
</html>
Output
Note : Use 'target = _blank' as an attribute in <a> tag to open the link in a new tab.
HTML img tag - Image Tag
The Image Tag is used to add Images in HTML documents.
The HTML img tag is used to add image in a document. The 'src' attribute is used to give source(address) of the image. The height and width of the image can be controlled by the attributes - height="px" and width="px".
The alt attribute is used as an alternative in a case if the image is not shown.
Anything written as a value of this attribute will be displayed. It will give information about the image.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>
Output
| Tag name | Description |
|---|---|
| <!-- --> | Apply comment in an HTML document. |
| <!DOCTYPE> | Specify the HTML version |
| A | |
| <a> | Creates hyperlink. |
| <abbr> | It defines abbreviation. |
| <acronym> | It defines acronym for a word. (Not supported in HTML5) |
| <address> | It is used to define author's contact information. |
| <applet> | It embeds Java applet. (Not supported in HTML5) |
| <area> | It defines the area of an image map. |
<article> |
It specifies an article space in the website. |
| <aside> |
It defines aside content from main content. |
| <audio> |
It adds audio content in HTML document. |
| B | |
| <b> | It makes text bold. |
| <base> | It defines a base URL for all relative URL within the document. |
| <blockquote> | It defines the content taken from another source. |
| <body> | It defines the body section of an HTML document. |
| <br> | It creates a single line break. |
| <button> | It creates a clickable button. |
| C | |
| <canvas> |
It creates a graphics space. |
| <caption> | It defines a caption for table. |
| <cite> | It defines the title of the book, website, etc. |
| <code> | It displays programming code within an HTML document. |
| <col> | It defines column within a table. |
| D | |
| <datalist> |
It defines a predefined list for input option. |
| <dd> | It is used to provide definition/description of a term in description list. |
| <del> | It defines a deleted text. |
| <details> |
It defines additional details. |
| <dialog> |
It defines a dialog box. |
| <div> | It defines a division within HTML document. |
| <dl> | It defines a description list. |
| E | |
| <em> | It emphasizes text content. |
| <embed> |
It embeds external files and media in the website. |
| F | |
| <fieldset> | It groups related elements/labels within a web form. |
| <figcaption> |
It adds a caption for <figure> element. |
| <figure> |
It defined self-contained content. |
| <footer> |
It defines footer of a webpage. |
| <form> | It defines a form. |
| H | |
| <h1> to <h6> | It defines headings' sizes from level 1 to 6. |
| <head> | It defines the head section of an HTML document. |
| <header> |
It specifies header section of a webpage. |
| <hr> | It applies thematic break between elements. |
| <html> | It is the root element of HTML document. |
Hope this tutorial will help you to understand the fundamentals of HTML tags. There is one more concept of elements vs Tags in HTML. To learn more about HTML Element vs HTML tags we suggest you to go WikiPedia page.