Table of Content
1.What is an HTML Tags
2.List of basic HTML Tags
i.<html> - Document Root
ii.<head> - Document Metadata
iii.<body> - Page Content
iv.<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Headings
v.<p> - Paragraphs
vi.<a> - Hyperlinks
vii.<img> - Images
viii.<ul> and <li> - Unordered Lists
ix.<ol> and <li> - Ordered Lists
x.<div> - Division
3.Uses of each HTML Tags
4.Conclusion
What is an HTML Tags
HTML (Hypertext Markup Language) is the fundamental building block of the World Wide Web. It provides structure to web content by using a variety of tags. They are special words wrapped in angle brackets (< >) which are used to define different types of content on a webpage.
The browsers use the tags to decide how to render or display content on the screen.In this article, I will explain the basic HTML tags and their practical uses with illustrative code examples.
List of basic HTML Tags and their uses
a. HTML Tag
<html> </html>:
The <html> tag serves as the root element of an HTML document. It enclose all other HTML elements and is the starting point of every webpage.
<!DOCTYPE html>
<html>
<!-- Your webpage content here -->
</html>
b. Head Tag
<head></head >:
Inside the <head> tag, you define metadata about the document, such as the title, character encoding, and linked stylesheets.
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
c. Body Tag
<body></body>:
The <body> tag encloses the visible content of your webpage, including text, images, links, and more.
<body>
< ! - - content goes here - - >
</body>
d. Heading Tag
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>:
These tags represent headings of varying levels. They provide structure to your content, with <h1> being the highest and <h6> the lowest.
html
<h1>Main Heading</h1>
<h2>Subheading</h2>
e. Paragraph Tag
<p></p>:
The <p> tag defines a paragraph of text. It's commonly used for organizing and styling text content.
<p>This is a paragraph of text.</p>
f. Link Tag
<a></a>:
The <a> tag creates hyperlinks to other webpages or resources. The href attribute specifies the link's destination.
<a href="https://www.example.com">Visit Example.com</a>
g. Image Tag
<img> :
Use the <img> tag to embed images on your webpage. The src attribute points to the image file.
<img src="image.jpg" alt="Description of the image">
h. <ul> and <li> - Unordered Lists:
<ul> and <li> tags are used to create unordered (bulleted) lists. Each list item is enclosed within an <li> tag.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
I. <ol> and <li> - Ordered Lists:
For ordered (numbered) lists, you can use the <ol> tag in combination with <li> tags.
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
J. Division Tag
<div>:
The <div> tag is a generic container for grouping and styling content. It's often used with CSS for layout purposes.
<div class="container">
<!-- Content goes here -->
</div>
Conclusion
Understanding basic HTML tags is crucial for web development. These tags lay the foundation for creating structured and visually appealing webpages. By incorporating these tags into your HTML documents, you can effectively organize and present your content on the web.