HTML Tags
Tags are instructions that are embedded directly into the text of a HTML document. Each HTML tag describes that the browser should do something instead of simply displaying the text. In HTML, the tags begin with (<) and end with (>)HTML tags can be of two types. They are
1. Paired Tags
2. Unpaired Tags
HTML basic tags and understanding of types structure meta with formatting & control of page layout
Paired Tags:
A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag.Example
<i>This text is in italics.</i>Unpaired Tags:
An unpaired tag does not have a companion tag or closing tag. Unpaired tags are also known as Singular or Stand-Alone Tags.Example
<br> , <hr>Tags Based on their utility
We can differentiate tags based on the purpose they used. Basically we have four types hereFormatting tags
We manage the size of the font, underline part of the text, make the text bold etc by using tags like <font>, <u>,<b> etc.Tables , Div, span tags are used for layout and formatting of content.
Tool to create your own basic HTML page with tags
Meta Tags
These tags are used to give Information about the page. <title> , <Description> , <KEYWORDS> are meta tags. Read more on Meta Tags here.Page Structure tags
<head> , <body> etc are part of the page structure tags. They are part of the basic html page and does not directly affect the formatting of text or image.Control tags
Form tags, Script tags, Radio buttons etc are part of the control tags. These tags are used to manage content or mange external scripts or libraries ( JQuery , Bootstrap )All form tags like input text box, dropdown list, radio buttons etc are used for interaction with user. These tags can be formatted by using style properties.
Example 2: Semantic HTML Tags for Better Structure
Semantic HTML helps improve both accessibility and SEO. Some commonly used semantic tags include:
- <article>: Defines self-contained content.
- <section>: Groups content related by theme.
- <aside>: Represents content related to the main content, like sidebars.
- <header>, <footer>: Define page or section headers and footers.
<article>
<header><h1>Blog Post Title</h1></header>
<p>This is a blog post.</p>
<footer>Written by Author</footer>
</article>
Example 3: Interactive Tags in HTML
Interactive tags help create interactive elements in a webpage:
<details>
<summary>More Information</summary>
<p>This is additional information revealed when clicking.</p>
</details>
Example 4: ARIA Attributes for Enhanced Accessibility
ARIA (Accessible Rich Internet Applications) attributes improve web accessibility for users with disabilities by adding information to HTML elements:
<button aria-label="Close">
X
</button>
This provides screen readers with a more meaningful label for the button, enhancing the user experience for visually impaired users.
Example 5: Using <figure> and <figcaption> for Images with Captions
The <figure> tag is used to group media content with its caption:
More on <figure> and <figcaption><figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>A caption for the image.</figcaption>
</figure>
Introduction to HTML Page Structure Meta Tags
Standard Layout of web pages
HTML
This article is written by plus2net.com team.
| edward | 17-05-2012 |
| I found the best answer on your site.Thank you very much!! | |
| Mohd abdulla | 08-09-2012 |
| your theory for tag is very nice i like this | |
| Sayli | 09-10-2012 |
| I found the exact info... Thanx | |
| Suhail mir | 15-11-2012 |
| I have found the best material on your notes .......thnx......... | |
| rahul | 01-12-2012 |
| awsm babe | |
| suresh kumar | 06-01-2013 |
| please i neeed specialtags | |
| harriet | 09-04-2013 |
| very limited information but still good | |
| rohan | 29-04-2013 |
| thnx! u saved my life....cas I was in desperate need of tat answer!!!!! | |
| piyush | 31-07-2013 |
| thnk u...i got d bst ans....n it saved me!..as i hv to do my work ........thank a lot | |
| aman | 10-11-2013 |
| i find a good answer on this site but it is very limited. pls extend the answer so tha it can be more useful for the users. thnx.... | |
| anil | 04-02-2014 |
| ohho in this complex technologies. this website provide very easy defination thank u | |
| Shallyn S M | 23-04-2014 |
| You refreshed my memory about tags. Thanks for enlightening me about it again. | |
| daph | 30-05-2014 |
| thank u so much for uploading this it has helped a lot and i'm grateful unto u | |
| pramod kumar | 11-09-2014 |
| thank you, i am satisfied, i found answer my question | |
| Faryad Ali | 16-09-2014 |
| Thanks | |
| Moshiur Rahman | 22-09-2014 |
| Thank you for your note. It is so helpful for me. | |
| Don Bensua | 18-12-2014 |
| tanks 4 given me answer 2 my question | |
| Ali Tunio | 18-04-2015 |
| thank u so much for uploading this it has helped a lot and i'm grateful into u It is so helpful for me thanks a lot. | |
| Kriya Khandelwal | 25-09-2015 |
| thnx.... I've got the gud ans... it saved me.. | |
| jackson | 04-10-2015 |
| I found my answer on your site.... nice site!! | |
| gueutsop christian | 02-03-2016 |
| i love the information on dis page it was very instructive | |
| bishal | 08-08-2016 |
| i find a good answer on this site but it is very limited. pls extend the answer so tha it can be more useful for the users. thnx.... | |
| Umusu okiemute emily | 02-04-2017 |
| how do I start the front page of a web site | |
| rajendra kumhar | 26-07-2017 |
| how to make a website simple page | |
13-10-2020 | |
| img is a single tag or pair | |
15-10-2020 | |
| Thnx..... I got my answer.......It saved me | |