HTML — بخش اصلی (main)

آخرین بروزرسانی: 1404/08/07

قبلی: پیوند منبع (link) بعدی: نقشه تصویر (map)

بخش اصلی (main)

تگ «بخش اصلی (Main)» قسمت مرکزی محتوای صفحه است. اینجا همان چیزی است که کاربر باید بخواند. نوارکنار، منو یا لوگو اینجا نیستند. هدف این تگ، مشخص کردن محتوای یکتای هر صفحه است.

تعریف و کاربرد

طبق منبع، تگ <main> محتوای اصلی و یکتا را مشخص می کند. این بخش، بین صفحات تکراری نیست؛ مثل فوتر، هدر، یا جست وجو.

مثال ساده از بخش اصلی

&lt;main&gt;
  &lt;h1&gt;Most Popular Browsers&lt;/h1&gt;
  &lt;p&gt;Chrome, Firefox, and Edge are the most used browsers today.&lt;/p&gt;
  &lt;article&gt;
    &lt;h2&gt;Google Chrome&lt;/h2&gt;
    &lt;p&gt;Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
    &lt;h2&gt;Mozilla Firefox&lt;/h2&gt;
    &lt;p&gt;Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
    &lt;h2&gt;Microsoft Edge&lt;/h2&gt;
    &lt;p&gt;Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.&lt;/p&gt;
  &lt;/article&gt;
&lt;/main&gt;

مشاهده در ادیتور

قوانین مهم برای main

فقط یک <main> در هر سند مجاز است.
<main> نباید داخل <article> یا <aside> باشد.
همچنین داخل <footer>، <header> یا <nav> نباشد.
محتوای تکراری را در <main> قرار نده.

استایل دهی بخش اصلی با CSS

&lt;style&gt;
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main &gt; h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser &gt; h2, p {
  margin: 4px;
  font-size: 90%;
}
&lt;/style&gt;
&lt;main&gt;
  &lt;h1&gt;Most Popular Browsers&lt;/h1&gt;
  &lt;p&gt;Chrome, Firefox, and Edge are the most used browsers today.&lt;/p&gt;
  &lt;article class="browser"&gt;
    &lt;h2&gt;Google Chrome&lt;/h2&gt;
    &lt;p&gt;Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!&lt;/p&gt;
  &lt;/article&gt;
  &lt;article class="browser"&gt;
    &lt;h2&gt;Mozilla Firefox&lt;/h2&gt;
    &lt;p&gt;Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.&lt;/p&gt;
  &lt;/article&gt;
  &lt;article class="browser"&gt;
    &lt;h2&gt;Microsoft Edge&lt;/h2&gt;
    &lt;p&gt;Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.&lt;/p&gt;
  &lt;/article&gt;
&lt;/main&gt;

مشاهده در ادیتور

گام های تمرینی سریع

یک بخش <main> بساز و عنوان بگذار.
دو <article> با متن کوتاه اضافه کن.
با CSS پس زمینه <main> را کمی متفاوت کن.

نکته: برای مسیرهای مشترک مثل منو، از <nav> استفاده کن، نه <main>.

لینک های داخلی مرتبط

درباره المان های معنایی بخوان. همچنین صفحه پیوند منبع و نقشه تصویری را ببین تا ساختار کلی بهتر شود. از عبارت بخش اصلی برای مرور سریع استفاده کن.

جمع بندی سریع

<main> فقط یک بار در صفحه می آید.
داخل هدر، فوتر یا نویگیشن نیست.
محتوای یکتا را در <main> بگذار.
استایل دهی با CSS بسیار ساده است.