HTML - Tags

To make HTML tags plain or understandable, this post explains what HTML tags are, why they're important, and provides a handy reference for tags like <title>, <table>, <form>, <iframe> that add structure, links, images, media, and more to web pages.

What HTML tags are?

HTML tags are similar to keywords, which specify how a web browser will format and display content. A web browser can differentiate between simple content and HTML content with the use of tags. The major components which are essential for the HTML tag are the opening tag and the closing tag. However, some tags in HTML are not closed.

HTML Tags

Why do they matter?

An HTML document is viewed by a web browser from left to right and top to bottom. To generate HTML documents and render their structures, utilize HTML tags. Every HTML tag has a unique set of features.

Examples of Each Tags

Here we have categorize the tags on the basis of the usage, to create any particular componets.

 

Each tag goes with some other tags unless we forced to use them indivitually. Each tag has it's own example code on the third column of the table's that you can check and edit to see the result.

Basic Tags

HTML Basic tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Usually, most of the HTML tags contains an opening and a closing tag. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.

Following are the basic tags that are listed below:

Tags Description Examples
<!--...-->

Specifies a comment. Comments are annotations within the code that are note displayed in the browser window.

 Code
<!DOCTYPE>

Specifies the document type. This is the initial declaration required for the specification of document type and html version.

 Code
<html>

The html tags are the container that contains all the other HTML tags. It consist of opening and closing angle brackets surrounding a tag name.

Code
<head>

Specifies information about the document. Html <head> is a tag specifies as a metadata container.

Code
<title>

Specifies the document title. <title> is placed within the <head> specifies the concise and descriptive label that appears in the browser's title bar or tab when the webpage is opened.

Code
<body>

Specifies the body element. The HTML <body> tag serves as the container for all visible content within a webpage.

 Code
<h1> to <h6>

Specifies header 1 to header 6. It represents the main title or headline of a section or the entire page.

 Code
<p>

Specifies a paragraph. This tag serves as a container for blocks of text and content specifiying the web page.

 Code
<br>

Inserts a single line break. It's a self-closing element used to create a forced line break within text content.

 Code
<hr />

Specifies a horizontal rule. It is a self-closing element used to insert a thematic break or divider within a webpage's content.

Code

Formatting Tags

Formatting tags in HTML are elements used to structure and style the content of a webpage, enhancing its appearance and readability. These tags add semantic value to text parts and used to style the visual appearance of the text.

Following are the Formatting tags that are listed below:

Tags Description Examples
<abbr>

Specifies an abbreviation. It provides a semantic and accessible way to identify and explain their meanings.

 Code
<address>

Specifies an address element. The <address> tag provides a semantic way to structure contact information or the author's detail within a document.

 Code
<bdi>

Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality

 Code
<bdo>

Specifies the direction of text display. IT is a markup element used to specify the direction of text within a document.

 Code
<blockquote>

Specifies a long quotation. It is a structural element used to identify and visually separate quoted content within a webpage.

 Code
<cite>

Specifies a citation. It is a semantic element used to mark up the title of a creative work, such as a book, article, song, or movie, that is referenced within a document.

Code
<code>

Specifies computer code text. The HTML <code> tag is a semantic element used to mark up sections of text that represent computer code within a document.

 Code
<del>

Specifies deleted text. It is a semantic element used to mark up text that has been removed or deleted from a document.

 Code
<dfn>

Specifies a definition term. It is typically used within <dl> elements along with <dt> and <dd> tags

 Code
<em>

Specifies emphasized text.The <em> tag in HTML is used to emphasize text, typically by rendering it in italics.

 Code
<i>

Specifies italic text. The <i> tag in HTML is used to apply italic formatting to text, primarily for presentational purposes.

Code
<ins>

Specifies inserted text. The <ins> tag in HTML is used to mark up text that has been inserted into a document.

 Code
<kbd>

Specifies keyboard text. The <kbd> tag in HTML is used to indicate text that represents user input or keyboard input

 Code
<mark>

Specifies a text highlighted for reference purposes, that is for its relevance in another context.

Code
<meter>

The <meter> tag in HTML is used to represent a measurement within a predefined range.

Code
<pre>

The <pre> tag in HTML is used to define preformatted text, which is displayed exactly as it appears in the HTML code.

 Code
<progress>

The <progress> tag in HTML is used to represent the progress of a task or the completion status of an operation.

 Code
<q>

The <q> tag in HTML is used to indicate short inline quotations within a paragraph or text.

 Code
<rp>

Specifies to show browsers that do not support the ruby element.

 Code
<rt>

The <rt> tag in HTML is used to define the text component of a ruby annotation

 Code
<ruby>

Specifies an ruby annotation. This tag is typically used in conjunction with <rt> and <rp> tags.

 Code
<s>

It is used to render text with a strike through. The <s> tag specifies text that is no longer correct, accurate, or relevant

 Code
<samp>

It is used to enclose the inline text that represents the sample output from a computer program or a script.

 Code
<small>

The <small> tag in HTML is used to indicate smaller text within a document.

 Code
<strong>

The <strong> tag in HTML is used to indicate smaller text within a document.

 Code
<sub>

The <sub> tag in HTML is used to define subscripted text within a document.

 Code
<sup>

The <sup> tag in HTML is used to define subscripted text within a document.

 Code
<template>

It is a mechanism for holding some client-side content hidden from the user when the page loads.

 Code
<time>

The <time> tag in HTML is used to represent a specific time or date within a document.

 Code
<var>

The <var> tag in Html represents the name of a variable in a mathematical expression or a programming context.

 Code
<wbr>

Indicates a potential word break point within a <nobr> section.

 Code
<b>

It is used to highlight the text and specify the bold text.

 Code

Forms and Input

Forms plays a crucial role in a web page which is commonly used in collecting contact information, conducting surveys, and enabling user comments.

Following are the Forms and Input Tag tags that are listed below:

Tags Description Examples
<form>

Specifies form within a document which is commonly used in collecting contact information, conducting surveys, and enabling user comments.

 Code
<input>

<input> tag is used to specify input field within a document and used to create interactive controls within web based forms.

 Code
<textarea>

<textarea> tag is used to specify textarea within a document or multi-line text input control within an HTML form.

 Code
<button>

Html <button> tag is used to insert button element within an HTML form

 Code
<select>

<select> tag is used in HTML forms and provides a menu of choices that users can select from.

Code
<optgroup>

The <optgroup> tag in HTML is used to group related options within a <select> element (which represents a drop-down list).

Code
<option>

<option> tag is used to specify options within an Html <select> tag by creating selectable options within a dropdown list.

 Code
<label>

Specifies a label for a form control and serves as a caption for an item in a user interface.

 Code
<fieldset>

Html <fieldset> tag used to group form controls (such as input fields, checkboxes, and radio buttons) together.

 Code
<legend>

Html <legend> tag is used to specify title in a HTML <fieldset> tag.

 Code
<datalist>

The <datalist> tag in HTML specifies a list of pre-defined options for an <input> element.

 Code
<output>

The <output> tag is used to Specify the result of a calculation within HTML form tag.

 Code

Images

Images are crucial element of a web page, makes web page presentable and adds relativity towards the content.

Following are the Image tags that are listed below:

Tags Description Examples
<img>

The <img> tag is used to specify image within a Html document.

 Code
<map>

The <map> tag in HTML is used to define an image map and and visually appealing interfaces by dividing an image into multiple clickable areas .

 Code
<area>

The <area> tag in HTML is used within an <map> element to define clickable regions in an image map.

Code
<canvas>

The <canvas> tag in HTML is used to define an area on a webpage where graphics, animations, or visual elements can be dynamically rendered using JavaScript.

 Code
<figcaption>

The <figcaption> tag in HTML is used to provide a caption or description for a <figure> element and allows developers to add descriptive text with an image, illustration, diagram, video, or other multimedia content.

Code
<figure>

The <figure> tag Specifies self-contained content such as images, illustrations, diagrams within a Html document..

 Code
<picture>

Picture permits the specification of multiple images that are intended to more accurately fill the browser viewport.

 Code
<svg>

The <svg> tag in HTML is used to append Scalable Vector Graphics (SVG) directly into a webpage. It is a modular language used to describe visuals.

Code

Audio and Video

HTML <audio> and <video> tag appends visually appealing and informative content on a web page. This tags helps in enhancing user experiences.

Following are the Audio/Video tags that are listed below:

Tags Description Examples
<audio>

The <audio> tag is used to insert sound content in an HTML document, such as music or other audio streams.

 Code
<source>

Specifies a media resources for media elements, defined inside video or audio elements.

 Code
<track>

The <track> tag is used to specify text tracks for multimedia elements such as <audio> and <video> tags.

 Code
<video>

HTML <video> tag is used to insert video content in an HTML document, such as movie clips or other video streams. Specifies a text tracks used in media players.

Code

HTML Links are hyperlinks that means when you click on a link, it jump son another document. A webpage can contain various links that take us directly to other web pages or resources and even specific parts of a given page.

Following are the link tag that are listed below:

Tags Description Examples
<a>

Specifies an anchor. The HTML <a> tag creates hyperlinks within a HTML document.

 Code
<link>

HTML <link> tag is used to link external resource within a HTML document.

Code
<nav>

HTML <nav> tag is used to Specify a section that contains only navigation links.

 Code

Lists

HTML lists are fundamental elements used to organize and structure content on web pages in a variety of ways.

Following are the list tags that are listed below:

Tags Description Examples
<ul>

HTML <ul> tag Specifies an unordered list within a Html document. It is used to group to collection of items without any specific numerical order.

 Code
<ol>

HTML <ol> tag Specifies an ordered list within a Html document. It is used to group to collection of items in a specific numerical order.

 Code
<li>

HTML <li> is used to Specify a list item within a HTML document. It plays an important role in creating both ordered and unordered lists.

 Code
<dl>

HTML <dt> tag is used to Specify a definition list within a HTML document and serves a way to organize them.

 Code
<dt>

The <dt> tag is used to specify a term within a description or definition list.

 Code
<dd>

HTML <dd> tag plays a crucial role in Specifying a definition description within a discription list .

 Code

Tables

Tables in HTML are commonly used to organize and present detailed data in rows and columns. They allow users to quickly scan and understand the information.

Following are the table tags that are listed below:

Tags Description Examples
<table>

Specify a table within a HTML document in an organized and presentable Manner.

 Code
<caption>

Specify a table caption within a HTML document.

 Code
<th>

Specify a table heading within a HTML <table> tag .

 Code
<tr>

Specify a table row within a HTML <table>.

 Code
<td>

Specify a table cell within a HTML <table>.

 Code
<thead>

Specify a table heading within a HTML <table> and used to group header content within an HTML table.

 Code
<tbody>

Specify a table body within a HTML <table>.

 Code
<tfoot>

Specify a table footer within a HTML table and used to group footer content within an HTML table.

 Code
<col>

Specify attributes for table columns. The <col> element allows you to apply styles to entire columns.

 Code
<colgroup>

Specify groups of table columns. The <colgroup> tag must appear as a child of a <table> element.

 Code

Styles and Semantics

HTML includes list of style and semantic tags. The HTML style tag enhances it's appearance by adding style within HTML document. And HTML semantic tags embed simplicity by defining the meaning of the content they contain.

Following are the Styles and Semantics tags that are listed below:

Tags Description Examples
<style>

HTML <style> tag defines CSS (Cascading Style Sheets) for document styling. This tags are used to define the presentation style of elements within a web page

 Code
<div>

HTML <div> tag is a fundamental building block for structuring web pages and is used to defines a division or section in an HTML document.

 Code
<span>

HTML <span> tag is an inline container for inline elements and content used to mark up a part of text or a section within a document.

 Code
<header>

Specify a header for a document or section. It is a semantic element and contain introductory content and navigational elements within a web page.

 Code
<footer>

Specify a footer for a document or section. It is a semantic element used to define the footer section of a webpage.

 Code
<main>

Specifies the main or important content in the document. There is only one <main> element in the document.

 Code
<section>

Specify a section within a document. The HTML <section> tag adds a well organized sections within a document.

 Code
<article>

Specify an article within a HTML document. It is a semantic element used to define a self-contained piece of content.

Code
<aside>

Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense.

 Code
<details>

It is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the "open" state.

 Code
<dialog>

Specify a dialog box or window within a HTML document.

 Code
<summary>

Specify a summary, caption, or legend for a given <details>.

 Code
<data>

The HTML data tag is used to link the given piece of content with the machine-readable translation.

Code

Meta Info

HTML Meta tags is used to provide structured information within a webpage and it's content is not displayed on the web page.

Following are the meta-info tags that are listed below:

Tags Description Examples
<meta>

Specify meta data of an html document which is not displayed on the page.

 Code
<base>

Specify a base URL for all the links in a page. The <base> tag is typically placed within the <head> section of an HTML document.

Code

Programming

HTML Programming tags are building blocks of HTML document used to define different types of content within a document.

Following are the programming tags that are listed below:

Tags Description Examples
<script>

Specify a script within a HTML document and used to embed client-side scripting languages.

 Code
<noscript>

Specify a noscript section within a HTML document.

 Code
<embed>

Specify a container for an external (non-HTML) application.

 Code
<object>

Specify an embedded object within a HTML document.

 Code
Advertisements