HTML tags are keywords that define how a web browser will format and display content. They help distinguish between HTML content and plain text, ensuring proper rendering of the document. HTML tags typically consist of three main parts: an opening tag, content, and a closing tag. However, some HTML tags are self-closing.
Opening Tag: Denoted by <tag>, it marks the beginning of an HTML element.
Content: The text or elements enclosed within the opening and closing tags.
Closing Tag: Denoted by </tag>, it marks the end of an HTML element. Some tags, like <img>, are self-closing and do not require a closing tag.
When a web browser reads an HTML document, it processes the content from top to bottom and left to right. HTML tags create the structure and format of the document, defining how various elements are displayed.
An HTML file must include certain essential tags to ensure the browser can differentiate between plain text and HTML text. These tags provide the basic structure of an HTML document.
Enclosure: All HTML tags must be enclosed within angle brackets <>
Task Performance: Each tag performs a specific task and has unique properties.
Tag Pairs: Most HTML elements use both an opening tag <tag> and a closing tag </tag>, except for self-closing tags.
<p> Paragraph Tag </p>
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
DOCTYPE, title, link, meta and style
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
<a> and <base>
<img>, <area>, <map>, <param> and <object>
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
script and noscript
With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser does not render it. Also, these comments parts are not displayed on the web page. But these commented codes are available in the source code.
<strong><!-- --></strong>
With the help of this tag, we can declare the version of the markup language to the web browser.
<!DOCTYPE html>
Syntex:
<a href="url">Link Text</a>
Syntex:
<article> Contact Information Goes Here </article>
With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for additional plug-ins like Flash.
<audio src="audio-file.mp3"> </audio>
With the help of this tag, we can define the content related to the web page's main content, but they are not constituted to the web page.
<aside>Content goes here </aside>
With the help of this tag, we can make the text bold without any additional significance.
Syntex:
<b>Text to be displayed in bold </b>
With the help of this tag, we can create the target address, which is targeted by all the URLs present in the document
<base href="base-url" target="base-target">
With the help of this tag, we can provide a way to insert the quotation in the document from another source. By default, the browser takes the text inside a quote tag as indented.
<blockquote> Quoted content goes here. </blockquote>
With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.
<body> content goes here. </body>
With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.With the help of this tag, we can produce a line break on the web page. We can use this tag basically during the writing of poems or addresses that require line breaks.
<br>
With the help of this tag, we can create a clickable button on the web page. We can use the button tag in forms or anywhere in a document.
<button> Button Text </button>
With the help of this tag, we can create the table caption, which is used to create the title for the table.
<table>
<caption> Button Text</caption>
</table>
With the help of this tag, we can specify all the column's properties. We can specify it inside the <colgroup> element.
<col>
With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply the style to the entire column without repeating the style for every column and every row.
<colgroup> col elements go here </colgroup>
With the help of this tag, we can define the definition description in the HTML. It is also used to describe an item in the list of descriptions.
<dl>
<dt><dt>
<dd> Description or definition goes here</dd>
</dl>
With the help of this tag, we can declare the particular section that will be deleted from the document. After doing this, the web browser strike over that particular section in the webpage.
<del> Deleted Text </del>
With the help of this tag, we can create a toggle. This toggle contains all the information but is in a closed state. When we mouse hover over it, it comes to an open state and displays all the hidden information.
<details>
<summary>Summary Tex</summary>
Content goes here
</details>
With the help of this tag, we can create a generic container that can hold the flow of the content. It also does not have the default rendering
<div> Content goes here </div>
With the help of this tag, we can define the list of items on the web page. We can also represent the metadata with the help of this tag.
<dl>
<dt>way to code<dt>
<dd> Description or definition goes here</dd>
</dl>
With the help of this tag, we can define the definition list on the web page. we have to write the <dt> tag within the <dl> tag. We can also flow this element with the help of <dd> tag
<dl>
<dt>way to code<dt>
Definition or description goes here
</dl>
With the help of this tag, we can emphasize a particular word or phrase within a sentence. It converts the normal word or sentence into italic and semantic styles.
<em> Emphasized Text </em>
With the help of this tag, we can create a group of related elements inside a form. Also, with the help of this, we can create a box around the element
<fieldset>
<legend></legend>
</fieldset>
With the help of this tag, we can attach the caption for the image, table, or chart contained within the <figcaption> element
<figure>
<figcaption>Caption or Description</figcaption>
</figure>
With the help of this element, we can represent the footer part in the root element.
<footer> Footer content goes here </footer>
With the help of this tag, we can receive the information from the user
<form action="form-handler-url" method="HTTP-method"> </form>
With the help of this tag, we can specify the header part of the header section of the code. It contains all the information regarding the document.
<head>Head content goes here </head>
With the help of this tag, we can define the webpage's header. It also contains information regarding the title and heading of the document and section.
<header>Header content goes here </header>
With the help of this tag, we can represent the heading group. It is also used for group heading elements, such as headings and subheadings, from <h1> to <h6>.
Syntex:
With the help of this tag, we can define the web page's heading. It also makes the heading as large and bold by default. the <h1> headings are displayed in the largest font, whereas the <h6> headings are displayed in the smallest font.
With the help of this tag, we can divide the web page. It stands for horizontal rule or theme break.
<hr>
With the help of this tag, all other elements are contained by it. It is also known as the root of the HTML element
<!DOCTYPE html>
<html>
HTML content goes here
</html>
With the help of this tag, we can make any content italicized. It Highlights an important term, phrase, or technical term
<i>Italicized Text </i>
With the help of this tag, we can embed another HTML page into the current webpage.
<iframe src="url"> </iframe>
With the help of this tag, we can embed an image into the current web page. It links an image to the image without directly inserting it into the web page
<img src="image-url" alt="alternative-text">
With the help of this tag, we can enable interactive control in the form. It also depends on the various fields of the attribute type.
<input type="input-type" name="input-name" value="default-value">
With the help of this tag, we can specify the block of the inserted text. It also signifies that a particular range of text has been added to the document
<ins>Inserted Text </ins>
With the help of this tag, we can improve the usability for mouse users, i.e., clicking on the label will toggle the control
<label for="input-id">Label Text </label>
With the help of this tag, we can define the title for the child's content. Legends are the parent element of all the child elements. We can define these elements with the help of <fieldset>.
<fieldset>
<legend>Form controls go here</legend>
</fieldset>
With the help of this tag, we can represent the list of items on the web page. It contains an ordered list (an unordered or a menu) as a parent element
<ul>
<li>List Item 1<li>
<li>List Item 2<li>
<li>List Item 3<li>
<ul>
With the help of this tag, we can link external resources to the current webpage.
<link rel="stylesheet" href="stylesheet.css">
With the help of this tag, we can make an ordinary element the most important element. We have to write this tag inside the <body> tag
<main>
Main content goes here
</main>
With the help of this tag, we can represent the text as highlighted, which will be used for reference or notation purposes. Based on the importance of the content, it highlighted the text
<mark>Highlighted Text </mark>
WitWith the help of this tag, we can represent the document's metadata. The metadata contains page description, keywords, copyright, the language used, and the author.
<meta name="metadata-name" content="metadata-value">
With the help of this tag, we can represent the text as highlighted, which will be used for reference or notation purposes. Based on the importance of the content, it highlighted the textWith the help of this tag, we can represent the section of navigational links in a document. Some examples of nav tags are Menus, tables of contents, indexes, etc
<nav>
Navigation links or menus go here
</nav>
With the help of this tag, we can display multimedia like audio, videos, images, PDFs, and Flash on web pages.
<object data="resource-url"></object>
This tag is used for the creation of the ordered list. The ordered list can be numerical or alphabetical. Inside the <ol> tag, we can create the list using the <li> tag. It will then follow the order.
<ol>
<li>List Item 1<li>
<li>List Item 2<li>
<li>List Item 3<li>
<ol>
With the help of this tag, we can define the option in the drop-down list by using the <select> tag.
<select>
<option value="option-value">Option Text</option>
Additional options
</select>
With the help of this tag, we can create the container for the element that injects the result of the calculation.
<output> for="input-id"> </output>
With the help of this tag, we can define the paragraph tag. With the help of a paragraph tag, we can represent the visual media as blocks of text separated from adjacent blocks by blank lines or first-line indentation.
<p> Paragraph text goes here. </p>
With the help of this tag, we can provide flexibility to the web page by specifying the image. It also contains tags like <source> and <img>.
<picture> for="input-id">
<source srcset="image1.jpg" media="media-query">
<source srcset="image2.jpg" media="media-query">
<img src="wayToCode.jpg" alt="wayToCode Image">
</picture>
With the help of this tag, we can create an inline quotation on the web page. The text is contained inside the quotation marks in most browsers today.
Here is a <q>short quotation</q> within a sentence.
With the help of this tag, we can insert the client-side scripting. It also enables the insertion of the script in the HTML web page
<script src="script.js"></script>
With the help of this tag, we can create the header and footer or any other section on the web page.
<section>
Content goes here
</section>
With the help of this tag, we can reduce the font size by one size smaller than its base size, for instance, from large to small
<small> Small text goes here </small>
With the help of this tag, we can define the list of options inside the list.
<select>
<option value="option-value">Option Text</option>
</select>
With the help of this tag, we can link multiple media resources like <audio> and <video>
<source src="media-file.mp3" type="audio/mp3">
With the help of this tag, we can define the content as very important. The browser will display that element in bold.
<strong>Emphasized text </strong>
It is the most generic element in the HTML. We can apply the style by grouping the elements
<span>Text or content goes here </span>
We can provide the style information for the document with the help of this tag
<style>
CSS rules go here
</style>
With the help of this tag, we can display the subscript element only for typographical reasons.
<sub>
Subscript text
</sub>
With the help of this tag, we can create a box with the help of <details> element that contains the summary, caption, or legend. When we click on the summary button, it performs the open/closed state of the parent *details> element.
<details>
<ssummary>
Summary text
</summary>
Collapsible content goes here
</details>
With the help of this tag, we can display any text as the superscript of the inline element.
<sup> Superscript text </sup>
With the help of this tag, we can embed the SVG graphs into the web page. Also, we can define the vector graphics in an XML format with the help of this tag.
<svg> SVG content goes here </svg>
With the help of this tag, we can define the data in a tabular format in HTML. It will create a two-dimensional table that has some rows and columns.
<table>
Table content goes here
</table>
With the help of this tag, we can encapsulate the table's rows associated with the table body
<table>
<tbody>
Table content goes here
</tbody>
</table>
With the help of this tag, we can define the table's cell. A table row may consist of more than one <td> element. The default alignment is left in this element.
<tr>
<td>
Table content goes here
</td>
</tr>