HTML <main> Tag
In this post, we will talk about Tag main with examples. We aspire to meet the demands of learning.
The HTML <main> tag is used to define the main content of a webpage. It should contain the primary content of the document, such as articles, sections, or any other content that is directly related to the main purpose of the page.
The <main> tag is part of the HTML5 specification and should be used to replace the use of the <div> tag for the main content. This tag has no specific visual styling, but it provides semantic meaning to the document, which can improve accessibility and search engine optimization (SEO).
Describe the document’s main content:
Example:
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Most Famous Companies in the World</h1>
<p>ServiceNow, Tesla, and Netflix are the most popular companies today.</p>
<article>
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article>
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation, and storage systems. Jeffrey B. Straubel founded the company with Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article>
<h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997, </p>
</article>
</main>
</body>
</html>
You can also style the <main> element with CSS:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.companies {
margin: 0;
padding: 8px;
background-color: lightblue;
}
.companies{
margin: 10px;
padding: 8px;
}
</style>
</head>
<body>
<article class="companies">
<h1>Most
Popular Companies</h1>
<article class="companies">
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article class="companies">
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation, and storage systems. Jeffrey B. Straubel founded the company Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article class="companies">
<h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997.</p>
</article>
</article></body>
</html>
Here is an example of <main> tag with some other tags:
Example:
<!DOCTYPE html>
<html>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a team of experienced web developers, designers and digital marketers who are passionate about creating beautiful, functional and user-friendly websites. We have a proven track record of delivering high-quality projects on time and within budget.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Website Design and Development</li>
<li>E-commerce Solutions</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
<li>Pay-per-click Advertising</li>
</ul>
</section>
<section id="portfolio">
<h2>Our Portfolio</h2>
<ul>
<li><a href="https://www.example1.com">Example 1</a></li>
<li><a href="https://www.example2.com">Example 2</a></li>
<li><a href="https://www.example3.com">Example 3</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>Copyright 2023 Mr Examples</p>
</footer>
</body>
</html>
Here is how you can style the above code:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: black;
}
main {
margin: 20px;
}
section {
margin-bottom: 20px;
}
section#about {
background-color: #f5f5f5;
padding: 20px;
}
section#services ul {
list-style: none;
margin: 0;
padding: 0;
}
section#services li {
margin-bottom: 10px;
}
section#portfolio ul {
list-style: none;
margin: 0;
padding: 0;
}
section#portfolio li {
margin-bottom: 10px;
}
section#contact form {
margin-top: 20px;
}
section#contact label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
section#contact input[type="text"], section#contact input[type="email"], section#contact textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a team of experienced web developers, designers and digital marketers who are passionate about creating beautiful, functional and user-friendly websites. We have a proven track record of delivering high-quality projects on time and within budget.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Website Design and Development</li>
<li>E-commerce Solutions</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
<li>Pay-per-click Advertising</li>
</ul>
</section>
<section id="portfolio">
<h2>Our Portfolio</h2>
<ul>
<li><a href="https://www.example1.com">Example 1</a></li>
<li><a href="https://www.example2.com">Example 2</a></li>
<li><a href="https://www.example3.com">Example 3</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>Copyright 2023 Mr Examples</p>
</footer>
</body>
</html>
Table Of Content-
Tag main Usage
The Tag main <main> indicates the document’s main content.
In the <main> element, the content should be authentic to the document. No duplicate content should appear in it, for instance, sidebars, navigation links, copyright details, site logos, and search forms.
IMPORTANT: Having more than one <main> element in a document is not permissible. The Tag <main> main element cannot be subordinate to an <article>, <aside>, <footer>, <header>, or <nav> element.
The <main> tag is useful for several reasons:
- By using the <main> tag, you provide semantic meaning to your HTML document. This helps search engines and other tools understand the structure of your page and can improve accessibility for users with disabilities who use screen readers.
- Using the <main> tag allows you to organize your page more effectively. It helps you separate the main content from other elements, such as headers and footers, and makes it easier to apply styles to just the main content.
- The <main> tag can help improve accessibility for users with disabilities who use screen readers. By clearly defining the main content of the page, it makes it easier for these users to navigate the content and understand its structure.
HTML main Tag Daily Uses
Here are some scenarios where using the <main> tag could ease your efforts:
- In a blog post, you might use the <main> tag to contain the article content.
- In an e-commerce site, you might use the <main> tag to contain the product listings.
- In a news site, you might use the <main> tag to contain the articles or news stories.
Attributes
Global
The Tag <main> is also compatible with Global Attributes in HTML.
Event
In HTML, the Tag <main> also accepts Event Attributes.
Browser Compatibility
Table numbers indicate the initial version of the browser that accepts the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <main> | 26.0 | 12.0 | 21.0 | 7.0 | 16.0 |
HTML <main> Tag Benefits
The HTML <main> tag provides several benefits when used in a web page:
- The <main> tag helps to clearly define the primary content of the web page, providing semantic meaning to the document. This can improve accessibility, SEO, and the overall structure of the page.
- The <main> tag helps improve accessibility by providing a clear and consistent way to identify the main content of a page for users who rely on assistive technologies such as screen readers.
- By using the <main> tag to wrap around the main content of a page, you can make the content more readable and easier to understand for users. It helps to separate the main content from other parts of the page, such as navigation or footers.
- The <main> tag helps to better organize the structure of the web page. It separates the main content from other parts of the page, such as headers and footers, and makes it easier to apply styles specifically to the main content.
- The <main> tag is part of the HTML5 specification, which means it’s a standard way to define the main content of a web page. By using it, you’re future-proofing your code and making it easier for other developers to understand and work with your code.
If this article was informative enough to fulfill your educational desires, do share this meaningful information with your friends as well by clicking on the links below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
