Syntax error How do we display the main content in the document in HTML5?

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>
Updated on: 2023-10-10T13:06:01+05:30

282 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements