What is an HTML Tag?
While creating a web page in HTML, programmers use HTML tags to tell the web page about the type of content and how the content should appear. They come in pairs (<>, </>), with an opening tag (<>) indicating the start of an element and a closing tag (</>) indicating its end. Between these tags, we specify the action or data we want to include.
They indicate whether the content is a web page element (like header, body, or title), a formatting style (such as bold or italics), or functionality (like onclick or onsubmit). For example, the <h1> </h> tag defines a heading (element) at the highest level, the <p> </p> tag defines a paragraph (formatting style), and so on.
Table of Contents
- What is an HTML Tag?
- List of basic HTML tags (Explained with Camping Web Page Example)
- Example: The Burger Hub Web Page
List of Basic HTML Tags (Explained with Camping Web Page Example)
To help you understand every basic HTML tag, here is an example of a camping web page in HTML. Let us use this output to see how to write various HTML tags and why they are important.
Click here to view the code for this web page.
1. HTML Tag
Syntax:
<html></html>What is it?: The <html> tag marks the starting point of an HTML document, while </html> marks the end of the entire document. It gives the web page a structure that shows how to define and arrange all the elements.
What it does?: As it defines the start and end of the document, it contains all the two other important tags <head> and <body> within its structure.
Visuals in the compiler:
In the above compiler visual, you can see that we have added <!DOCTYPE html> declaration before the <html> tag. This <!DOCTYPE> declaration is not considered an HTML tag; rather, it is an instruction provided to the web browser. It informs the browser about the specific version and type of HTML employed in the document.
2. Head Tag
Syntax:
<head></head>What is it?: The <head> tag is like a book cover page for a web page. Just like the cover of a book shows its title and description, the <head> tag contains important information for web browsers like Google Chrome and Mozilla Firefox.
What it does?: It contains elements like <title>, <meta>, <style>, and <link>. These tags give the browser the metadata about the web page, such as its title, character encoding, description, CSS style, etc. These elements help search engines index the web page’s content accurately.
Visuals in the compiler:
3. Title Tag
Syntax:
<title></title>What is it?: The title tag defines the title of a web page that appears in the browser’s title bar, tab, and bookmarks. For example – <title>Welcome to Camping Adventures</title> will come under the <head> section of HTML code
What it does?: It plays a crucial role in both user experience and search engine optimization. By writing an informative and relevant title, webmasters can improve the visibility, click-through rates, and overall usability of their web pages.
Code:
<title>Welcome to Camping Adventures</title>Visuals in the compiler:
4. Body Tag
Syntax:
<body></body>What is it?: The <body> tag in HTML is the primary container that holds all the visible content a user sees on a web page.
What it does?: We add the <body> tag within the <html> tag, which holds text, images, videos, and links. Whatever you put inside the <body> tag will be displayed on the web page.
Code:
<body>
<!-- content goes here -->
</body>Visuals in the compiler:
5. Heading Tags
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>| Tag | What is it? | What it does? |
| <h1> | It is the highest heading level on a web page that we can use only once per web page. It represents the page’s main heading. | It provides a clear title or heading for the content helping users understand the page’s main topic. It also helps search engines determine if the content is relevant. |
| <h2> | It denotes a section or subsection that is slightly less important than the page’s main heading. | It adds a proper structure to the web page, making it easy for users to search any particular section. Search engines use headings for indexing and ranking, so using proper heading tags can improve SEO. |
| <h3> | <h3> is like a subheading with a section that breaks down the content into smaller sections. | It’s useful for dividing a web page into distinct parts, allowing readers to quickly scan and understand the different topics covered. |
| <h4> | <h4> adds another subsection within <h3> sections to add visual emphasis to the text within it. | When you use <H4>, it indicates to web browsers and search engines that the enclosed text is a subheading of lesser importance compared to <H1>, <H2>, and <H3>. |
| <h5> | We can use <h5> to write headings under the <h4> tag. | It helps organize and structure the content, making it easier for people to read and understand. |
| <h6> | <h6> adds content that is not of much importance. | It can be useful for adding elements like footnotes, page numbers, etc. |
Code:
<h1>Welcome to Camping Adventures</h1>
<h2>Popular Camping Destinations</h2>
<h3>Upcoming Camping Event</h3>
<h4>Testimonials</h4>
<h5>Sarah Smith</h5>
<h6>Book Your Camping Trip</h6>Visuals in the compiler:
Output:
6. Paragraph Tag
Syntax:
<p></p>What is it?: The `<p>` tag in HTML creates paragraphs on a web page. It helps structure and organize text content.
What it does?: When you enclose a text block within `<p>` tags, it appears as a separate paragraph with some space before and after it. It’s common in articles or blog posts to make the text more readable and visually distinct from other content on the page.
Code:
<p>Experience the beauty of nature! Embark on unforgettable camping trips that will rejuvenate your soul.</p>
<p>"Camping Adventures offered the perfect escape from city life. The serene mountain views were breathtaking."</p>Visuals in the compiler:
Output:
7. Link Tag
Syntax:
<a></a>What is it?: <a> tag creates a hyperlink, also known as an anchor link, which can help you move to another web page or a specific section within the same page.
What it does?: When you want to create a clickable link on a web page, you use the <a> tag. This tag requires an attribute called href (hypertext reference) that specifies the URL or destination of the link.
Code:
<h6><a href="https://campingadventures.com">Book Your Camping Trip</a></h6>Visuals in the compiler:
Output:
8. Image Tag
Syntax:
<img>What is it?: The <img> tag is an HTML element we can use to display an image on a web page. Unlike all other tags, the <img> tag does not have a closing tag </img>. Thus, it is also known as a self-closing tag.
What it does?: It has two important attributes: src (which specifies the image file or URL) and alt (which provides the text for the image).
Code:
<img src="C:\Users\cba_17\Downloads/camping.png" width="450" height="250">Visuals in the compiler:
Output:
9. Ordered List Tag
Syntax:
<ol></ol>What is it?: The <ol> tag is useful when you want to create an ordered list on a web page. It displays items in a specific numerical or alphabetical order.
What it does?: The <ol> tag helps you present information such as steps in a process, rankings, or any other situation where the order matters.
Code:
<ol>
</ol>Visuals in the compiler:
10. List Item Tag
Syntax:
<li></li>What is it?: The <li> tag creates and separates items in a list, making it easy to display each thing on the list separately.
What it does?: The <li> tag is used to represent each item in a list, which we can create either with the <ul> (Unordered List) or <ol> (Ordered List) tags. It helps in organizing and locating items within the list more conveniently.
Code:
<ol>
<li>Mountain Wilderness Camp</li>
<li>Lakeside Retreat</li>
<li>Coastal Camping Paradise</li>
</ol>Visuals in the compiler:
Output:
11. Unordered List Tag
Syntax:
<ul></ul>What is it?: The <ul> tag is the list tag that arranges a group of items into a bulleted list.
What it does?: It creates an Unordered List that does not have a specific order or sequence. The <li> (list item) tag represents the items in the list, and we enclose these list item tags within the <ul> tags.
Code:
<ul>
<li>Forest Camping Weekend #Dates: August 20th - 22nd</li>
</ul>Visuals in the compiler:
Output:
12. Division Tag
Syntax:
<div></div>What is it?: The <div> tag in HTML defines a division or section within an HTML document.
What it does?: It allows developers to apply specific styles to specific sections of a web page. The content within the <div> can include text, images, forms, headings, and other HTML elements.
Code:
<div class="container">
<h1>Welcome to Camping Adventures</h1>
<p>Experience the beauty of nature! Embark on unforgettable camping trips that will rejuvenate your soul.</p>
<img src="C:\Users\cba_17\Downloads\camping.png" width="450" height="250">
</div>
<div>Dates: August 20th - 22nd</div>Visuals in the compiler:
Output:
13. Span Tag
Syntax:
<span></span>What is it?: The Span Tag, or the <span> tag in HTML, allows web designers to style specific parts of the text differently than the rest.
What it does?: It can group a small part of your text and give it a unique style or format. It is an inline element that can change the color, font, size or even add special effects to that part without affecting the rest of the text.
Code:
<h1><span style="color:#016e38;">Welcome to Camping Adventures</span></h1>Visuals in the compiler:
Output:
14. Line Break Tag
Syntax:
<br>What is it?: The Line Break or the <br> tag creates a line break or newline within a web page. It simply works as the “Enter” key for HTML.
What it does?: When the browser comes across the <br> tag, it inserts a single line break, which moves the next word, sentence, or para to the next line. It is useful when you want to create a new line without starting a new paragraph or adding extra spacing between elements.
Code:
<p>Experience the beauty of nature!<br>Embark on unforgettable camping trips that will rejuvenate your soul.</p>Visuals in the compiler:
Output:
Complete Code for Camping Web Page:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Camping Adventures</title>
</head>
<body>
<div class="container">
<h1>Welcome to Camping Adventures</h1>
<p>Experience the beauty of nature!<br>Embark on unforgettable camping trips that will rejuvenate your soul.</p>
<img src="C:\Users\cba_17\Downloads/camping.png" width="450" height="250">
</div>
<h2>Popular Camping Destinations</h2>
<ol>
<li>Mountain Wilderness Camp</li>
<li>Lakeside Retreat</li>
<li>Coastal Camping Paradise</li>
</ol>
<h3>Upcoming Camping Event</h3>
<ul>
<li>Forest Camping Weekend</li>
<div>Dates: August 20th - 22nd</div>
</ul>
<h4>Testimonials</h4>
<h5>Sarah Smith</h5>
<p>"Camping Adventures provided the perfect escape from city life. The serene mountain views were breathtaking."</p>
<h6><a href="https://campingadventures.com">Book Your Camping Trip</a></h6>
</body>
</html>Now that we know all about basic HTML tags, let’s create a web page for a burger shop using basic HTML tags.
Example: The Burger Hub Web Page
The Burger Shop web page includes a menu, information about the shop, contact details, and a link to their Instagram page.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Burger Shop</title>
</head>
<body>
<h1>Welcome to The Burger Hub</h1>
<img src="C:\Users\Demo103\Downloads\Burger.jpg" alt="Burger Shop" width="700" height="300">
<h2>Menu</h2>
<ul>
<li>Double Cheeseburger</li>
<li>BBQ Burger</li>
<li>Milkshake</li>
</ul>
<h2>About Us</h2>
<p>
The Burger Hub, established in 1990, is a cherished family-owned eatery renowned for its delectable burgers. We place utmost importance on utilizing the freshest ingredients available and ensuring an exceptional dining experience for our valued customers.
</p>
<h2>Contact Us</h2>
<p>
Visit us at: 123 Main Street, MyCity<br>
Call us: 555-1234<br>
Email: [email protected]
</p>
<span>Follow us on <a href="https://www.instagram.com/burgerhub">Instagram</a> for the latest updates!</span>
</body>
</html>Output:
Now let us see and understand the tags we used in the above example with the help of visuals from the compiler.
Frequently Asked Questions (FAQs)
Q1. What are the four main elements of HTML?
Answer: The four main elements of HTML are:
- <html> represents the root of an HTML document.
- <head> element contains metadata about the HTML document.
- <title> element is a child of the <head> element and specifies the title of the HTML document.
- <body> element represents the content of the HTML document displayed in the browser window.
Q2. What is an empty tag?
Answer: In HTML, empty tags are self-closing elements that don’t require a closing tag. They are used to insert specific elements without content or nested elements. Examples include <br> for line breaks, <img> for images, and <input> for input fields.
Q3. What is an HTML semantic tag?
Answer: HTML semantic tags are specific elements in HTML that provide a way to describe the purpose or role of different parts of a web page, making it easier for accessibility tools, search engines, and other technologies to understand and process the content. Examples include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`, `<figure>`, `<figcaption>`, `<time>`, `<blockquote>`, and `<cite>`.
Recommended Articles
This is a guide to Basic HTML Tags. Here we also discuss what an HTML tag is and different basic HTML Tags, along with an example. You may also have a look at the following articles to learn more –
