HTML tags are similar to keywords in that they specify how a web browser will format and display text. A web browser can tell the difference between HTML and plain content thanks to tags. The opening tag, the content tag, and the closing tag are the three primary sections of an HTML tag. Some HTML tags, however, are not closing tags.

When a web browser scans an HTML document, it does so from left to right and from top to bottom. To generate HTML documents and render their characteristics, HTML tags are employed. Each HTML tag has its own set of features.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All HTML tags must enclosed within < > these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>


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.

There are two types of tags in HTML that are used by the Website Designers:

  1. Paired Tags (Opening and Closing Tags)
  2. 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 TagClose 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

Example

<!DOCTYPE html>
<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.

Example

<!DOCTYPE html>
<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.This tag is called anchor tag and anything between the opening <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.

Example

<!DOCTYPE html>
<HTML lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Anchor Tag </title>
</head>
<body>
<a target=”_blank” href=”https://www.codelivly.com”> Codelivly – A Way For Coder </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.

Example

<!DOCTYPE html>
<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

HTML Image

HTML All Tags List


TagDescription
<!–…–>Describe a comment text in the source code
<!doctype>Defines a document type
<a>Specific a anchor (Hyperlink)
Use for link in internal/external web documents.
<abbr>Describes an abbreviation (acronyms)
<acronym>Describes an acronyms
<address>Describes an address information
<applet>Embedding an applet in HTML document
<area>Defines an area in an image map
<article>Defines an article
<aside>Describes contain set(or write) on aside place in page contain
<audio>Specific audio content
<b>Specific text weight bold
<base>Define a base URL for all the links with in a web page
<basefont>Describes a default font color, size, face in a document
<bb>Define browser command, that command invoke as per client action
<bdo>Specific direction of text display
<big>Defines a big text
<blockquote>Specifies a long quotation
<body>Defines a main section(body) part in HTML document
<br />Specific a single line break
<button>Specifies a press/push button
<canvas>Specifies the display graphics on HTML web documment
<caption>Define a table caption
<center>Specifies a text is display in center align
<cite>Specifies a text citation
<code>Specifies computer code text
<col>Specifies a each column within a <colgroup> element in table
<colgroup>Defines a group of one or more columns inside table
<command>Define a command button, invoke as per user action
<datagrid>Define a represent data in datagrid either list wise or tree wise
<datalist>Define a list of pre-defined options surrounding <input> tag
<dd>Defines a definition description in a definition list
<del>Specific text deleted in web document
<details>Define a additional details hide or show as per user action
<dfn>Define a definition team
<dialog>Define a chat conversation between one or more person
<dir>Define a directory list
<div>Define a division part
<dl>Define a definition list
<dt>Define a definition team
<em>Define a text is emphasize format
<embed>Define a embedding external application using a relative plug-in
<eventsource>Defines a source of event generates to remote server
<fieldset>Defines a grouping of related form elements
<figcaption>Represents a caption text corresponding with a figure element
<figure>Represents self-contained content corresponding with a <figcaption> element
<font>Defines a font size, font face and font color for its text
<footer>Defines a footer section containing details about the author, copyright, contact us, sitemap, or links to related documents.
<form>Defines a form section that having interactive input controls to submit form information to a server.
<frame>Defines frame window.
<frameset>Used to holds one or more <frame> elements.
<h1> to <h6>Defines a Headings level from 1 to 6 different sizes.
<head>Defines header section of HTML document.
<header>Defines as a container that hold introductory content or navigation links.
<hgroup>Defines the heading of a section that hold the h1 to h6 tags.
<hr />Represent a thematic break between paragraph-level tags. It is typically draw horizontal line.
<html>Define a document is a HTML markup language
<i>Defines a italic format text
<iframe>Defines a inline frame that embedded external content into current web document.
<img>Used to insert image into a web document.
<input>Define a get information in selected input
<ins>Used to indicate text that is inserted into a page and indicates changes to a document.
<isindex>Used to create a single line search prompt for querying the contents of the document.
<kbd>Used to identify text that are represents keyboard input.
<keygen>Used to generate signed certificate, which is used to authenticate to services.
<label>Used to caption a text label with a form <input> element.
<legend>Used to add a caption (title) to a group of related form elements that are grouped together into the <fieldset> tag.
<li>Define a list item either ordered list or unordered list.
<link>Used to load an external stylesheets into HTML document.
<map>Defines an clickable image map.
<mark>Used to highlighted (marked) specific text.
<menu>Used to display a unordered list of items/menu of commands.
<meta>Used to provide structured metadata about a web page.
<meter>Used to measure data within a given range.
<nav>Used to defines group of navigation links.
<noframes>Used to provide a fallback content to the browser that does not support the <frame> element.
<noscript>Used to provide an fall-back content to the browser that does not support the JavaScript.
<object>Used to embedded objects such as images, audio, videos, Java applets, and Flash animations.
<ol>Defines an ordered list of items.
<optgroup>Used to create a grouping of options, the related options are grouped under specific headings.
<option>Represents option items within a <select><optgroup> or <datalist> element.
<output>Used for representing the result of a calculation.
<p>Used to represents a paragraph text.
<param>Provides parameters for embedded object element.
<pre>Used to represents preformatted text.
<progress>Represents the progress of a task.
<q>Represents the short quotation.
<rp>Used to provide parentheses around fall-back content to the browser that does not support the ruby annotations.
<rt>Specifies the ruby text of ruby annotation.
<ruby>Used to represents a ruby annotation.
<s>Text display in strikethrough style.
<samp>Represents text that should be interpreted as sample output from a computer program.
<script>Defines client-side JavaScript.
<section>Used to divide a document into number of different generic section.
<select>Used to create a drop-down list.
<small>Used to makes the text one size smaller.
<source>Used to specifies multiple media resources.
<span>Used to grouping and applying styles to inline elements.
<strike>Represents strikethrough text.
<strong>Represents strong emphasis greater important text.
<style>Used to add CSS style to an HTML document.
<sub>Represents inline subscript text.
<sup>Represents inline superscript text.
<table>Used to defines a table in an HTML document.
<tbody>Used for grouping table rows.
<td>Used for creates standard data cell in HTML table.
<textarea>Create multi-line text input.
<tfoot>Used to adding a footer to a table that containing summary of the table data.
<th>Used for creates header of a group of cell in HTML table.
<thead>Used to adding a header to a table that containing header information of the table.
<time>Represents the date and/or time in an HTML document.
<title>Represents title to an HTML document.
<tr>Defines a row of cells in a table.
<track>Represents text tracks for both the <audio> and <video> tags.
<tt>Represents teletype text.
<u>Represents underlined text.
<ul>Defines an unordered list of items.
<var>Represents a variable in a computer program or mathematical equation.
<video>Used to embed video content.
<wbr>Defines a word break opportunity in a long string of text.

Hope this tutorial will help you to understand the fundamentals of HTML tags. There is one more concept of elements vs Tags in HTML.

Leave a Comment

Your email address will not be published.