HTML tags are the fundamental building blocks of every webpage. They are special keywords written inside angle brackets that tell the web browser how to display and organize content.
Every HTML webpage is created by combining different types of tags such as headings, paragraphs, images, links, tables, and forms. Each tag performs a specific task and helps browsers understand the structure of webpage content.
Learning HTML tags is the first and most important step for beginners who want to start web development. A strong understanding of tags helps developers create structured, readable, and professional websites.
HTML provides a large collection of built-in tags that allow developers to create different types of webpage components without writing complex programming logic.
HTML tags are predefined instructions used to define the structure and presentation of content on a webpage. These tags are written inside angle brackets (< >).
The browser reads HTML tags and converts them into visual elements that users can see and interact with.
<h1> Welcome to HTML </h1>
In this example, the <h1> tag instructs the browser to display the text as a main heading.
HTML tags are important because they provide structure and meaning to webpage content. Without HTML tags, browsers would not know how to display different types of information.
A webpage is created by combining multiple HTML tags together in a meaningful way.
HTML tags follow a simple syntax where the tag name is written inside angle brackets.
<tagname> Content </tagname>
Most HTML tags contain two parts:
<p> This is a paragraph. </p>
Here:
Most HTML tags use a pair of tags. The first tag is called the opening tag, and the second tag is called the closing tag.
The closing tag contains a forward slash (/) before the tag name.
<h2> HTML Tutorial </h2>
| Tag | Description |
|---|---|
| <h2> | Opening heading tag. |
| HTML Tutorial | Content displayed on webpage. |
| </h2> | Closing heading tag. |
Some HTML tags do not require a closing tag. These tags are called empty tags or void tags.
Empty tags perform specific functions without containing any content inside them.
<tagname>
| Tag | Purpose |
|---|---|
| <br> | Creates a line break. |
| <hr> | Creates a horizontal line. |
| <img> | Displays an image. |
| <input> | Creates input fields. |
Hello<br> Welcome to HTML
Hello
Welcome to HTML
HTML tags are mainly divided into two categories based on their structure:
Paired tags contain both opening and closing tags. They wrap content between them.
<p> Paragraph Content </p> <h1> Heading </h1>
Unpaired tags contain only a single tag and do not require closing tags.
<br> <hr> <img src="image.jpg">
An HTML tag may contain a tag name, attributes, and content.
<a href="https://example.com"> Visit Website </a>
| Part | Description |
|---|---|
| a | Tag name used for creating links. |
| href | Attribute that defines link address. |
| Visit Website | Visible content. |
Many beginners consider HTML tags and HTML elements the same, but they have a slight difference.
| HTML Tags | HTML Elements |
|---|---|
| Tags are the keywords enclosed in angle brackets. | Elements include opening tag, content, and closing tag. |
| Example: <p> | Example: <p>Hello</p> |
| Used to define structure. | Represents complete webpage components. |
HTML provides different types of tags that are used for creating various parts of a webpage. Each HTML tag has a specific purpose and helps browsers understand how content should be displayed.
Based on their functionality, HTML tags can be divided into different categories such as structure tags, text tags, formatting tags, multimedia tags, table tags, and form tags.
Document structure tags define the basic framework of an HTML webpage. These tags create the foundation on which other HTML elements are placed.
| Tag | Description |
|---|---|
| <html> | Defines the root element of an HTML document. |
| <head> | Contains webpage information and settings. |
| <title> | Defines the browser tab title. |
| <body> | Contains visible webpage content. |
<html> <head> <title> My Website </title> </head> <body> Welcome to HTML </body> </html>
These tags create the basic structure of every HTML webpage.
Heading tags are used to create titles and subtitles on webpages. HTML provides six heading levels from h1 to h6.
The h1 tag represents the most important heading, while h6 represents the lowest level heading.
<h1> Heading Text </h1>
<h1> Introduction to HTML </h1> <h2> HTML Tags </h2>
| Tag | Purpose |
|---|---|
| <h1> | Main heading |
| <h2> | Section heading |
| <h3> | Subsection heading |
| <h4> to <h6> | Lower-level headings |
The paragraph tag is used to display normal text content on a webpage. It creates a separate block of text with automatic spacing.
<p> Paragraph Content </p>
<p> HTML is used to create webpages. </p>
HTML is used to create webpages.
HTML formatting tags are used to change the appearance and meaning of text on webpages.
These tags help developers highlight important information.
| Tag | Purpose |
|---|---|
| <b> | Makes text bold. |
| <i> | Displays italic text. |
| <u> | Underlines text. |
| <strong> | Shows important text. |
| <em> | Emphasizes text. |
| <mark> | Highlights text. |
<b> Bold Text </b> <i> Italic Text </i> <mark> Important Text </mark>
The anchor tag is used to create hyperlinks in HTML. It allows users to navigate from one webpage to another.
<a href="URL"> Link Text </a>
<a href="https://csegyan.com"> Visit CSE Gyan </a>
The image tag is used to display images on webpages. It is a void tag because it does not require a closing tag.
<img src="image.jpg" alt="Image Description">
<img src="logo.png" alt="Website Logo">
| Attribute | Purpose |
|---|---|
| src | Defines image location. |
| alt | Provides alternative text. |
| width | Sets image width. |
| height | Sets image height. |
Lists are used to display related information in an organized format.
HTML supports three types of lists:
<ul> <li> HTML </li> <li> CSS </li> </ul>
HTML table tags are used to display data in rows and columns.
| Tag | Purpose |
|---|---|
| <table> | Creates a table. |
| <tr> | Creates a table row. |
| <th> | Creates table heading. |
| <td> | Creates table data. |
Semantic HTML tags are those tags that clearly describe the meaning and purpose of the content inside them. These tags help browsers, developers, and search engines understand the structure of a webpage.
Unlike generic tags, semantic tags provide meaningful information about different sections of a webpage.
| Tag | Purpose |
|---|---|
| <header> | Defines the top section of a webpage. |
| <nav> | Defines navigation links. |
| <section> | Defines a specific section of content. |
| <article> | Defines independent content. |
| <aside> | Defines side information. |
| <footer> | Defines the bottom section of webpage. |
<header> Website Header </header> <section> HTML Tutorial Content </section> <footer> Copyright Information </footer>
Semantic tags improve webpage organization and make HTML code easier to understand.
HTML layout tags are used to create the structure and arrangement of webpage sections. They divide webpages into meaningful parts.
<body> <header> Website Logo </header> <main> <section> Main Content </section> <aside> Related Links </aside> </main> <footer> Website Footer </footer> </body>
HTML form tags are used to collect information from users. Forms are commonly used for login pages, registration forms, feedback forms, and search boxes.
| Tag | Purpose |
|---|---|
| <form> | Creates an HTML form. |
| <input> | Creates input fields. |
| <label> | Defines input labels. |
| <textarea> | Creates multi-line text input. |
| <button> | Creates clickable buttons. |
| <select> | Creates dropdown menus. |
<form> <label> Name: </label> <input type="text"> <br> <button> Submit </button> </form>
Multimedia tags allow developers to add audio, video, and other media content to webpages.
| Tag | Purpose |
|---|---|
| <audio> | Adds audio content. |
| <video> | Adds video content. |
| <source> | Defines media source. |
<audio controls> <source src="music.mp3"> </audio>
<video controls> <source src="video.mp4"> </video>
HTML tags are also classified based on how they appear on a webpage.
Block elements always start from a new line and occupy the full available width.
Inline elements do not start from a new line and occupy only the required space.
| Tag | Use |
|---|---|
| <html> | Root element of HTML document. |
| <head> | Contains document information. |
| <body> | Contains visible content. |
| <h1> - <h6> | Creates headings. |
| <p> | Creates paragraphs. |
| <a> | Creates links. |
| <img> | Displays images. |
| <table> | Creates tables. |
| <form> | Creates forms. |
The following example combines different HTML tags to create a simple webpage.
<!DOCTYPE html> <html> <head> <title> HTML Tags Example </title> </head> <body> <header> CSE Gyan Website </header> <h1> Learn HTML Tags </h1> <p> HTML tags create webpage structure. </p> <img src="html.jpg" alt="HTML Image"> <a href="#"> Read More </a> <footer> Copyright CSE Gyan </footer> </body> </html>
HTML tags are the foundation of web development. They define the structure, content, and functionality of webpages.
By understanding different types of HTML tags such as headings, paragraphs, images, links, tables, forms, and semantic tags, developers can create professional and user-friendly websites.
A strong knowledge of HTML tags helps beginners build a solid foundation before learning advanced technologies like CSS, JavaScript, and frontend frameworks.