مثال ـ استفاده از تگ<main> براي محتوي اصلي سند.
<main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p> <article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article>
تگ<main> محتواي اصلي يك سند را مشخص ميكند .
محتوي داخل<main> بايد براي سند منحصر بفرد باشد، نبايد در آن محتوي تكراري سندها مثل نوار كناري، ناوبري، اطلاعات كپي رايت، لوگوي سايت وفرم جستجو باشد.
نكته ـ نبايد بيشتر از يك عنصر<main> در يك سند وجود داشته باشد.نبايد مطالبي ازنوع<footer> , <asie> ,<nav> ,<article> ,<header> در آن وجود داشته باشد.
اعداد در جدول زير اولين نسخه مرورگراست كه بطور كامل از<main> پشتيباني ميكنند.
Element | |||||
---|---|---|---|---|---|
<main> | 26.0 | 12.0 | 21.0 | 7.0 | 16.0 |
تگ<main> از ويژگي هاي جهانيHTML پيروي ميكند.
تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.
مثال ـ استايل نمودن عنصرmain با CSS
<html> <head> <style>main { margin: 0; padding: 5px; background-color: lightgray; } main > h1, p, .browser { margin: 10px; padding: 5px; } .browser { background: white; } .browser > h2, p { margin: 4px; font-size: 90%; } </style></head> <body> <main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </body> </html>