| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
In HTML, the ‘<header>‘, ‘<footer>‘, and ‘<main>‘ elements are semantic elements used to structure web pages. They define different sections of the page and provide meaning to the content within them. Let’s go over each one in detail with examples.
1. 'header' Element
The ‘<header>‘ element represents the introductory content or a group of navigational links for the webpage or a section of the page. Typically, it includes elements like the logo, site name, navigation menu, and other relevant introductory content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Example</title>
</head>
<body>
<header>
<img decoding="async" src="logo.png" alt="Site Logo" width="50" height="50">
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
- The ‘
<header>‘ contains a logo, a heading (‘<h1>‘), and a navigation menu (‘<nav>‘). - This section is typically placed at the top of the page or a section, serving as an introduction.
2. 'footer' Element
The ‘<footer>‘ element represents the footer of a webpage or a section. It often contains information like copyright notices, links to privacy policies, contact information, or secondary navigation links.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Example</title>
</head>
<body>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<nav>
<ul>
<li><a href="#privacy-policy">Privacy Policy</a></li>
<li><a href="#terms-of-service">Terms of Service</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
- The ‘
<footer>‘ contains a copyright notice and a secondary navigation menu. - It is typically placed at the bottom of the page.
3. 'main' Element
The ‘<main>‘ element represents the dominant content of the ‘<body>‘ of a document. It contains the content that is directly related to or expands upon the central topic of the document. There should be only one ‘<main>‘ element per page, and it should not be a descendant of ‘<header>‘, ‘<footer>‘, ‘<article>‘, ‘<aside>‘, or ‘<nav>‘.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Element Example</title>
</head>
<body>
<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>
<main>
<h2>About Our Company</h2>
<p>Our company has been providing excellent service for over 10 years. We specialize in delivering high-quality products to our customers.</p>
<h3>Our Services</h3>
<p>We offer a wide range of services including web development, mobile application development, and digital marketing.</p>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
- The ‘
<main>‘ element contains the main content of the webpage, such as an introduction to the company and its services. - It is the central content area of the webpage, surrounded by the ‘
<header>‘ and ‘<footer>‘.
Summary
<header>: Defines the top or introductory section of a webpage or a section, often containing logos, headings, and navigation.<footer>: Defines the bottom or concluding section of a webpage or a section, often containing copyright, contact info, and secondary links.<main>: Defines the primary content area of the webpage, containing the main topics or content of the document.
