In HTML (HyperText Markup Language), a website's structure is described by using many tags. Three essential tags that assist in organizing and formatting the content material of a website are the <header>, <body>, and <footer> tags.
Here’s an overview of each:
1. <header> Tag
The <header> tag defines the introduction to material or a fixed of navigational hyperlinks for a website or a section of the web page. Typically, the header consists of elements like:
- Logo or website call
- Navigation menu
- Headline or page title
- Introduction or tagline
The <header> detail can be used within the <body> of a file and can also be used inside other sectioning elements like <article>, <section>, or <aside>.
Example:
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
2. <body> Tag
The <body> tag encloses the principal content material of an HTML record that is visible to customers. This is where all of the content along with text, snapshots, videos, links, and different elements are placed. The <body> tag is an instantaneous child of the <html> element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<main>
<p>This is the main content of the page.</p>
<img src="image.jpg" alt="Sample Image">
</main>
<footer>
<p>© 2024 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
3. <footer> Tag
The <footer> tag is used to define the footer for a report or a phase. A footer commonly incorporates information approximately the writer, copyright records, links to terms of provider, privacy coverage, and contact with statistics.
The <footer> element can be used within the <body> of a record and also can be used inside different sectioning elements like <article>, <section>, or <aside>.
Example:
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<p>Contact: <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></p>
</footer>
Putting It All Together
Here’s an instance of an HTML document utilizing <header>, <body>, and <footer> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The <head> section contains metadata about the document -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Webpage</title>
</head>
<body>
<!-- The <header> section contains the introductory content and navigation -->
<header>
<h1>Sample Webpage Header</h1>
<nav>
<ul>
<!-- Navigation links -->
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- The <main> section contains the main content of the webpage -->
<main>
<!-- The <section> tag defines sections in the document -->
<section id="home">
<h2>Home</h2>
<p>Welcome to the home section.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>Details about services offered.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Contact information goes here.</p>
</section>
</main>
<!-- The <footer> section contains the footer content -->
<footer>
<p>© 2024 Sample Webpage. All rights reserved.</p>
</footer>
</body>
</html>
Output :
Explanation
<head> Section: Show the metadata about the webpage such as character set, viewport settings, and the document's title.
<header> Section: Contains the introduction to navigation links for the webpage.
<main> Section: The main content of the webpage is placed here, divided into sections (<section> tags) for better organization.
<footer> Section: It Contains the footer content like more links, legal page links, and copyright information.
Leave Comment