In this article, you will learn about some basic HTML tags that will get you started in HTML. After getting an introduction to HTML, now you will cover tags like <html>, <head>, <title>, <body>, <h1>, <h2>, <h3>,<p> and <footer>. You’ll also explore other interesting things about HTML tags, syntax, and examples to help you understand better. This guide is designed to be clear and simple, making it easy for beginners to grasp the basics of HTML tags.
What Are HTML Tags
The first question that comes to mind when learning HTML is What is a Tag? Tags are the building blocks of HTML and are used to create and define elements on a web page. In HTML, tags are enclosed in angle brackets, like <this>, and they come in pairs, with an opening tag <this> and a closing tag </this>. These tags tell the browser how to display the content between them, such as text, images, and links, making it easy to organize and structure a webpage.
Types of HTML Tags
HTML tags are the building blocks of web pages. There are two main types: closed tags and void tags.
Closed tags, also known as container tags, have an opening and a closing part. For example, <p> starts a paragraph and </p> ends it.
Void tags, also called self-closing tags, do not need a closing part. Examples include <img> for images and <br> for line breaks. All HTML tags are enclosed in angle brackets, making it easy to identify them. Understanding what HTML tags are is crucial for creating structured and functional web pages.
Following are some basic Container and Self-closing Tags
| Container Tags Or Paired Tags | Void Tags Or Self-Closing Tags |
| <html></html> | <img> |
| <head></head> | <br> |
| <body></body> | <hr> |
| <title></title> | <input> |
| <p></p> | <meta> |
Learning Basic Tags
In this section, you will explore some of the fundamental HTML tags that form the base and core building blocks of any webpage or website.
A simple example of this can be the human body, the different parts of the body representing the different types of tags in HTML.
<HTML> Tag
The <html> tag is like the backbone of your webpage. It wraps around everything in your HTML document, acting as a container that tells the browser the content inside is part of an HTML page. At the top of your document, you should also include the <!DOCTYPE html> declaration to tell the browser that you’re using HTML5. Inside the <html> tag, you’ll find the <head> section, where you include the page title and other metadata, and the <body> section, which holds the main content like text and images. Think of the <html> tag as the main structure that holds everything together.
Example Code
<!DOCTYPE html> </html
<head> Tag
The <head> tag is a paired tag that acts as a container for the meta-information about your webpage. It doesn’t display any content on the page itself but includes important details like the page title, links to stylesheets, and meta tags for search engines. Everything inside the <head> tag helps configure how your webpage behaves and appears when loaded by a browser. Think of it as the behind-the-scenes setup for your webpage.
Example Code
<!DOCTYPE html> <head> </head> </html>
<title> Tag
The <title> tag is a paired tag used within the <head> section to set the title of your webpage. This title appears on the browser tab and is what search engines display in their search results. Although it doesn’t show up on the actual webpage content, it’s crucial for identifying and summarizing your page’s purpose. The <title> tag helps users and search engines understand what your webpage is about.
Example Code
<!DOCTYPE html>
<head>
<title>
Syntax Scenarios
</title>
</head>
</html>Output
<body> Tag
The <body> tag is a paired tag that contains all the main content of your webpage. Everything you want to display on the webpage, such as text, images, links, and other elements, goes inside the <body> tag. This tag is essential because it holds all the visual and interactive parts of your page that users will see and interact with. The <body> tag helps structure your webpage’s content and make it accessible to visitors.
Example Code
<!DOCTYPE html>
<head>
<title>
Syntax Scenarios
</title>
</head>
<body>
</body>
</html>Heading Tags
There is a variety of heading tags in total there are 6 different heading tags, The heading tags in HTML, from <h1> to <h6>, help to organize your content by creating headings of different importance levels. The <h1> tag is the biggest so used for the most important heading, like the title of a page, while <h6> is the smallest so used for the least important subheadings. These tags help improve readability and structure, making it easier for users and search engines to understand the main topics and subtopics of your webpage. They are paired tags, meaning they require an opening tag and a closing tag.
A simple example of this can be the different heights of humans as they grow their size changes similarly the size of the heading varies with headings as there are different types of tags in HTML for heading sizes.
Example Code
<!DOCTYPE html>
<head>
<title>
Syntax Scenarios
</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>Output
<p> – Paragraph Tag
The <p> tag is a paired tag used to define paragraphs in your HTML document. It helps organize your text into separate blocks, making it easier to read and understand. Each <p> tag creates a new paragraph, adding space before and after the text automatically. This tag is essential for structuring written content on your webpage, ensuring it looks clean and is easy to follow for readers.
Example Code
<!DOCTYPE html>
<head>
<title>
Syntax Scenarios
</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<p>Hello and welcome to my first website</p>
</body>
</html>Output
<footer>
The <footer> tag defines the footer (ending) section of a webpage. It usually appears at the bottom of the page and contains information like copyright details, contact info, or links to important pages. Think of it as the bottom part of a document where you add final details or extra information. The <footer> tag is a paired tag, meaning it has an opening <footer> and a closing </footer>.
Example Code
<!DOCTYPE html>
<head>
<title>
Syntax Scenarios
</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<p>Hello and welcome to my first website</p>
</body>
<footer>
<p>this is the footer</p>
</footer>
</html>Output
After using all the basic HTML tags we can have a starter webpage, Since HTML tags are like building blocks after all the basic tags have been used we can have something like this.
Conclusion
In conclusion, you’ve explored the basic HTML tags such as <head>, <title>, <body>, <h1>, <p>, and <footer>, along with all the heading tags. By understanding and using these tags, you can start building your own web pages. The examples and outputs provided should help you see how each tag works in practice. With these building blocks, you’re now ready to create simple and structured websites. Keep practicing, and you’ll become more confident in your HTML skills.
