Basic HTML tags: HTML tags are important building blocks for building the web page structure or framework. They are used to define various elements on a web page, such as titles, headings, images, forms, lists, etc. Many HTML tags are used for web development. Read the article below to gain a better understanding of HTML tags.
What are Basic HTML tags?
HTML tags are the basic components of the Hypertext Markup Language (HTML) used to define the structure and framework of the web page. These HTML tags are enclosed within an angular bracket (<>). These basic HTML tags are used in pairs, starting with an opening tag and ending with a closing tag.
The opening tags mark the start of an HTML tag, and the closing tags mark the close of a particular element in a basic HTML page. Let us check the basic syntax of basic HTML tags.
| Basic HTML tags |
| <tag>HTML Tags</tag> |
The <tag> is the opening tag, and </tag> marks the end of the html tag. Now, the HTML tag in bold letters is used to enclose the content inside the basic HTML tags.
Basic Structure of HTML Tags
Let us check out the basics of HTML tags in the table below. Given here are some important elements of HTML, such as <!DOCTYPE >, <head>, <body>, etc.
| Basic HTML tags |
| <!DOCTYPE html>
<html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Web Page</h1> <p>This is a paragraph of text.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html> |
Basic HTML Tags: Why do we need to have an opening and closing tag?
Opening and closing tags are very important, as they tell the browser when a particular tag is starting and where it is ending so that it can easily provide the function according to the tag present.
If we miss either opening or closing, it might produce improper results. It can create a discontinuity in the HTML document. Hence, it is crucial to use every tag properly and meaningfully. Let us first learn about the four basic HTML tags used in every HTML document.
Recommended Technical Course
- Full Stack Development Course
- Generative AI Course
- DSA C++ Course
- Data Analytics Course
- Python DSA Course
- DSA Java Course
Basic HTML Tags: The Four Basic Tags of HTML Document
Let us know about the four important tags used in the HTML document format.
1. <!DOCTYPE html>
This tag is used to indicate the type of document. It is used at the top of an HTML document. It also tells the version of the HTML Document to let the browser adjust the contents specifically. All documents in HTML must start with <!DOCTYPE html>.
| Basic HTML tags |
| <!DOCTYPE html> OR <!doctype html> |
2. <html></html>
This tag is used to enclose the complete content inside the HTML document. It is used after the <!DOCTYPE html> and is closed at the end of the document. It tells the beginning and ending of an HTML document.
| Basic HTML tags |
| <html> Complete Content inside </html> |
3. <head></head>
The <head> tag in HTML is used to represent the heading section of an HTML document. It contains crucial information related to the web page, such as metadata, links to other sheets, etc. It also contains tags such as <title>, <link>, <meta>, etc.
| Basic HTML tags |
| <head>
<title> Place your title here</title> // set page title <meta charset =”UTF-8”> <meta name =”author” content= “PW Skills”> // Setting author <link rel=”icon” href=”/images/favicons/favicon.ico> // add favicons </head> |
4. <body></body>
The <body> tag consists of all major information prepared for users. It contains all the information to be displayed on the web page. All these contents are enclosed inside the <body> tags.
It consists of both opening and closing tags. Close the <body> tag when the elements are enclosed. It can contain tags such as <p>,<a>, strong>, etc tags inside.
| Basic HTML tags |
| <body>
<h1>Hello, World!</h1> <p>This is a simple HTML document.</p> </body> |
Basic HTML Tags: What are Self-Closing Tags in HTML?
Self-closing tags are used to enclose elements without content, as they are pointers to specific elements or paths to a website. They are also called null and void components in HTML.
These self-closing tags do not require an explicit closing tag as required in traditional elements of HTML. Some of the self-closing tags in HTML are given in the table below.
| Basic HTML Tags: Self-Closing Tags |
| <area/> |
| <base/> |
| <br/> |
| <col/> |
| <embed/> |
| <hr/> |
| <meta/> |
| <link/> |
| <input/> |
| <img/> |
| <source/> |
| <wbr/> |
Also some with HTML5 the use of slash at the end is optional. You can use it on your own. However, slash is required in other HTML versions like HTML4 or XHTML.
Also Read Technical Topics
- Java Tutorial
- What is Data Science?
- What is C?
- What is Data Analysis?
- Web Development
- Python Tutorial
Basic HTML Tags: Important Tags in the HTML Document
Now, let us know some of the most frequently used tags in the document.
1. Heading Tags
HTML documents have six heading tags: h1, h2, h3, h4, h5, and h6. Let us know some of these heading tags below.
| Basic HTML Tags: Heading tags | ||
| Tag | Description | Functions |
| <h1> | We are only allowed to use the top heading level once per page. That is the main heading for this page. | It provides a clear heading or title for the content, assisting users in understanding the primary subject of the page. |
| <h2> | It designates a subsection or section marginally less significant than the page’s main heading. |
|
| <h3> | A section that divides the content into smaller chunks is <h3> tag. It is similar to a subheading with <h3>. | This separates the content into manageable chunks so that readers can scan and understand the different topics on a web page more quickly. |
| <h4> | <h4> adds another subsection within <h3> sections to add visual emphasis to the text. | The <h4> tags are used to tell browsers that the subheading enclosed inside is of lesser importance as compared to other tags like <h1>, <h2>, <h3> |
| <h5> | We can use <h5> to write headings under the <h4> tag. | It helps organise and structure the content, making it easier for people to read and understand. |
| <h6> | <h6> adds content that is not crucial. | It can be helpful when adding components such as page numbers and footnotes. |
2. Link Tags
The link tags create a hyperlink address that can help you move directly to another web page using the embedded link. It is used to create a clickable text highlight, which can redirect users to a specific website.
| Basic HTML tags |
| <a src=”https://pwskills.com” alt= “Learn with PW Skills” target= “_blank”> Learn with PW Skills </a> |
Candidates can also use several attributes to make the anchor link effective. Some of the major attributes of anchor tags are mentioned below.
| Basic HTML Tags: Anchor Tags Attributes | ||
| Attribute | Description | Example |
| href | Specifies the URL of the linked resource | <a href=”https://example.com”>Link Text</a> |
| target | Specifies where to open the linked document | <a href=”https://example.com” target=”_blank”> Link Text</a> |
| download | Specifies that the target will be downloaded when clicked | <a href=”document.pdf” download=”Document”>Download</a> |
| title | Provides additional information about the link | <a href=”https://example.com” title=”Visit Example”>Link Text</a> |
| rel | Defines the relationship between the current document and the linked document | <a href=”https://example.com” rel=”nofollow”>Link Text</a> |
| id | Specifies a unique identifier for the element | <a href=”#section1″ id=”link1″>Link to Section 1</a> |
3. List Tags in HTML
There are three types of list tags in HTML: ordered list, unordered list, and description list.
1. Ordered List <ol>
It represents a list in an ordered way. It is represented by <ol> tags.
| Basic HTML tags: <ol> List |
| <ol>
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
2. Unordered List <ul>
It represents a list in an unordered way. There are no specific orders of listing elements using this tag. It is represented by <ul> tags.
| Basic HTML tags: <ul> List |
| <ul>
<li>Item A</li> <li>Item B</li> <li>Item C</li> </ul> |
3. Description List <dl>
It represents a description list that can be presented in two parts, mainly <dt> and <dd>. The <dd> tag is used to enclose the description, and <dt> tag is used to represent the terms inside the description list.
| Basic HTML tags: <dl> List |
| <dl>
<dt>Term 1</dt> <dd>Description 1</dd> <dt>Term 2</dt> <dd>Description 2</dd> </dl> |
4. <img> tags
The <img> tags are used to insert image contents on a web page. The <img> tag consists of no closing tags. Some of the major attributes of image tags are src, alt, width, and height.
| Basic HTML Tags: Attributes |
| <img src = “pwskills.jpg” alt=”Learn with pw skills” width=”100” height = “100” |
- The “alt” tag is used to provide an alternate text when the image fails to load. This text is displayed on the web page. It is a good practice to include an alt attribute when using <img> tag.
- The width and height attributes help to adjust the dimensions of the image to be displayed on the web page.
5. <! –Comment tags –>
We use HTML tags to enclose a description for later use or directions. It is not displayed on the web page and is not executed during compilation of codes. You can use <!–> tags to enclose multiline or single-line comments easily in HTML.
| Basic HTML Tags: Attributes |
| <!–
This is a multi-line comment. It can span across multiple lines. –> |
Learn Web Development with PW Skills
Join our Full Stack Web Development Course and learn all the fundamentals and important concepts related to web development. Prepare yourself for a bright future in web development with our experienced faculty and a lot of perks enclosed within a single course.
The course covers doubt-solving sessions, assignments and exercises, PW lab access, job assistance, resume building, and 100% placement assistance. Hurry know more about our course only at @pwskills.com
For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group
Basic HTML Tags FAQs
What are HTML tags used for?
HTML tags are the basic components of the Hypertext Markup Language (HTML) used to define the structure and framework of the web page.
What are list tags in HTML?
List tags are used to add contents inside the html documents in a listed order. There are three types of list tags used in HTML. Read this article to learn more about list tags.
Do all HTML tags consist of a closing tag?
No, all HTML tags do not consist of closing tags such as , ,
Does tag contain a closing tag?
No, the tag is a self-closing tag and it does not require a closing tag.
