- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <main> Tag
The HTML <main> tag is used to represent the dominant content of the HTML body element. It specifies the main or important content of the document.
It can be used only once per page and can’t use as a descendent of the article, aside, footer, header, and nav elements
The content of the <main> tag should be unique to the document. The <main> tag does not affect the DOM’s concept of the structure of the page.
Syntax
Following is the syntax of the <main> tag −
<main>.....</main>
Example
The following program showing the usage the HTML <main> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML main tag</title> </head> <body> <!--create a main element--> <p>Example of the HTML 'main' element(tag).</p> <main> <article> <h1>HTML</h1> <p>Hyper Text Markup Language</p> <p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. </p> <h1>CSS</h1> <p>Cascading Style Sheet</p> <p>...</p> <p>...</p> </article> </main> </body> </html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage.
Example
Consider the following example, where we are going to use the <main> tag and applying the CSS properties.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML main tag</title> <style> header { font-size: 10px; } main { background-color: green; color: white; padding: 10px; } main p { margin: 10px 10px; } </style> </head> <body> <header>Frontend Development</header> <!--create a main element--> <main> <p>Front-end web development is the development of the graphical user interface of a website.</p> <p>Through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.</p> </main> </body> </html>
On running the above code, the output window will pop up, consisting of the text along with a CSS applied to it is displayed on the webpage.
Example
In this example, we are creating an anchor link that contains the source(destination) as the ‘id’ of the ‘main’ element. When the user clicks on the anchor link, it will skip the navigation links(i.e. between link and main element).
<!DOCTYPE html> <html lang="en"> <head> <title>HTML main tag</title> <style> ul { list-style: none; } ul li { width: 100px; background-color: aqua; padding: 10px; border-bottom: 1px solid black; } ul li a { text-decoration: none; margin: 10px; justify-content: space-between; } main { background-color: bisque; padding: 10px; letter-spacing: 1px; position: relative; } </style> </head> <body> <p>Example of the HTML 'main' element</p> <a href="#maincontent">Skip main content</a> <nav> <ul> <li> <a href="">Home</a> </li> <li> <a href="">About</a> </li> <li> <a href="">Blog</a> </li> <li> <a href="">ContantUs</a> </li> </ul> </nav> <main id="maincontent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quibusdam, veritatis quidem sit voluptates provident sunt enim. Enim, eum quisquam fugit reprehenderit fuga quibusdam voluptatem, perferendis impedit ducimus eligendi ea.</p> </main> </body> </html>
When we run the above code, it will generate an output consisting of the navigation text along with an anchor link on the webpage. When the user clicks the link, it starts to skip and takes them to the main content.