Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we display the main content in the document in HTML5?
To display the main content in the document, we use <main> tag. The <main> tag consists of open and closing tags, the content present in between <main> element is unique to the document, it does not contain any content which is repeated across documents like navigation links, site logos, sidebars and search forms.
In a document there should be only one <main> element. The main is not a descendent of <aside>, <footer>, <article>, or <nav> element.
The <main> tag supports almost all browsers and it also supports global and event attributes.
Syntax
Following is the usage of <main> tag in HTML −
<main> …….. </main>
Example
Following example demonstrates how to display the main content of document.
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Learning</h1>
<p>Learn to gain experience and try to share your knowledge with others.</p>
<article>
<h3>Web Development Tutorials</h3>
<p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.</p>
</article>
<article>
<h3>Academic Tutorials</h3>
<p>Consist of Computer Fundamental, Computer Network tutorials for 1st Semester exams.</p>
</article>
</main>
</body>
</html>
The <article> tag in HTML5
In the above example, we used <article> tag which is placed in between opening and closing of <main> tags. The <article> tag is used to represent an article; it is new sectioning element in HTML5.
The content within <article> tag is independent when compare to other content of the site. or it represents the component of a page which consists of self-contained composition in a page, site or document.
Example
Following example explains the usage of <article> tag in HTML5 -
<!DOCTYPE html>
<html>
<head>
<title> Display the main content of a document using HTML5 </title>
</head>
<body>
<h2>TutorialsPoint</h2>
<article style="width: 300px; border: 2px solid gray; padding: 10px; border-radius: 10px; margin: 5px;">
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="tutorials" width="300" height="50" class="alignnone size-medium wp-image-560930" />
<h1>TutorialsPoint</h1>
<p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</article>
</body>
</html>
Example
Let’s see another example display the main content in the document using <main> and <article> tags -
<!DOCTYPE html>
<html>
<head>
<style>
main {
margin: 0;
padding: 5px;
background-color: lightgreen;
}
main>h1,
p,
.browser {
margin: 10px;
padding: 5px;
}
.web {
background: white;
}
.web>h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<h1>Displaying main content in document by applying CSS</h1>
<main>
<h1>Popular Web Development Languages</h1>
<p>HTML, JavaScript, and Angular are the most used Web Development Language</p>
<article class="web">
<h2>HTML</h2>
<p>HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. </p>
</article>
<article class="web">
<h2>JavaScript</h2>
<p>JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.</p>
</article>
<article class="web">
<h2>Angular</h2>
<p>Angular 8 is an open source, TypeScript based frontend web application framework. Angular 8 has been released by Google’s Angular community.</p>
</article>
</main>
</body>
</html>
157 Views
