اچ تی ام ال (HTML)برنامه نویسی طراحی سایت فرانت اند (Front-end)

تگ main چیست؟ | آموزش تگ main در HTML

۰ 282 زمان مطالعه یک دقیقه

از زمانی که HTML5 تعریف و عرضه شد، شاهد تگ جدیدی بنام تگ main بودیم که در این پست از بلاگ ویتکس به معرفی تگ main در HTML5 و اهمیت آن در برنامه نویسی HTML خواهیم پرداخت. پس بار دیگر با بلاگ ویتکس همراه شوید … .

فهرست مطالب

تگ main چیست؟

تگ main، یک تگ کاربردی و بسیار مهم است که به عنوان فرزند تگ body درون آن نوشته می شود و برای درج محتوای اصلی و منحصر به فرد برای سند HTML کاربرد دارد و بطور کلی این تگ مهم بیانگر محتوای کلی سند HTML مورد نظری است که در آن استفاده شده اما نکاتی که حائز اهمیت میباشد این است که :

به هیچ عنوان نباید این سند حاوی محتوای تکراری در یک سند HTML باشد، مانند ستون های فرعی (تگ aside) ، لینک های ناوبری (تگ nav) ، اطلاعات کپی رایت سند (تگ footer) ، لوگوی سایت (تگ footer) ، فرم جستجو (تگ header) و… .
در هر سند HTML حداکثر یکبار میتوانیم از این تگ استفاده کنیم. ( طبق استاندارد HTML 5 هر صفحه HTML فقط یک تگ main می تواند داشته باشد، اما اگر رعایت نکنید، مشکلی در نمایش پیش نخواهد آمد بلکه شاید از نظر SEO و گوگل نمره منفی به سایتتان داده شود.)
بهترین مکان برای استفاده از این تگ بلافاصله بعد از تگ body است. ( فرزند تگ body )
این تگ از رویداد های عمومی (Global Attributes) و ویژگی های عمومی (Event Attributes) پشتیبانی میکند.

مثال : نمونه کد استفاده از تگ main در HTML

<!DOCTYPE html>
<html>
<body>

<h1>موضوع اصلی صفحه</h1>

<main>
  <h1>پرطرفدارترین برند های گوشی دنیا</h1>
  <p>اپل، سامسونگ و هوآووی بیشترین استفاده را
 در بین دیگر برندهای تلفن های هوشمند دارا هستند.</p>

  <article>
    <h2>اپل</h2>
    <p>اپل یک کمپانی بزرگ آمریکایی بوده که علاوه 
بر تلفن همراه در ساخت لبتاپ و لوازم دیگر با 
سیستم عامل اختصاصی خود (ios) فدرتمند است.</p>
  </article>

  <article>
    <h2>سامسونگ</h2>
    <p>سامسونگ یک کمپانی کره ای بوده و از
 قوی ترین شرکتها در ساخت تلفن های همراه با
 سیستم عامل اندروید است. </p>
  </article>

  <article>
    <h2>هوآووی</h2>
    <p>هوآووی نیز کمپانی ای چینی بوده که علاوه بر 
قدرت نمایی در سیستم عامل اندروید شرط اقتصادی بودن
 کالاهای خود را هم رعایت کرده است.</p>
  </article>
</main>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

<!DOCTYPE html>

<html>

<body>

<h1>موضوع اصلی صفحه</h1>

<main>

<h1>پرطرفدارترین برند های گوشی دنیا</h1>

<p>اپل، سامسونگ و هوآووی بیشترین استفاده را

در بین دیگر برندهای تلفن های هوشمند دارا هستند.</p>

<p>اپل یک کمپانی بزرگ آمریکایی بوده که علاوه

بر تلفن همراه در ساخت لبتاپ و لوازم دیگر با

سیستم عامل اختصاصی خود (ios) فدرتمند است.</p>

</article>

<h2>سامسونگ</h2>

<p>سامسونگ یک کمپانی کره ای بوده و از

قوی ترین شرکتها در ساخت تلفن های همراه با

سیستم عامل اندروید است. </p>

</article>

<h2>هوآووی</h2>

<p>هوآووی نیز کمپانی ای چینی بوده که علاوه بر

قدرت نمایی در سیستم عامل اندروید شرط اقتصادی بودن

کالاهای خود را هم رعایت کرده است.</p>

</article>

</main>

</body>

</html>

مثال : نمونه کد استفاده از تگ main در HTML به همراه CSS

<!DOCTYPE html>
<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>

<h1>موضوع اصلی صفحه</h1>

<main>
<h1>پرطرفدارترین برند های گوشی دنیا</h1>
<p>اپل، سامسونگ و هوآووی بیشترین استفاده را در بین دیگر برندهای تلفن های هوشمند دارا هستند.</p>
<article class="browser">
<h2>اپل</h2>
<p>اپل یک کمپانی بزرگ آمریکایی بوده که علاوه بر تلفن همراه در ساخت لبتاپ و لوازم دیگر با سیستم عامل اختصاصی خود (ios) فدرتمند است.</p>
</article>
<article class="browser">
<h2>سامسونگ</h2>
<p>سامسونگ یک کمپانی کره ای بوده و از قوی ترین شرکتها در ساخت تلفن های همراه با سیستم عامل اندروید است. </p>
</article>
<article class="browser">
<h2>هوآووی</h2>
<p>هوآووی نیز کمپانی ای چینی بوده که علاوه بر قدرت نمایی در سیستم عامل اندروید شرط اقتصادی بودن کالاهای خود را هم رعایت کرده است.</p>
</article>
</main>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

<!DOCTYPE html>

<html>

<head>

<style>

main {

margin: ۰;

padding: ۵px;

background-color: lightgray;

}

main > h1, p, .browser {

margin: ۱۰px;

padding: ۵px;

}

.browser {

background: white;

}

.browser > h2, p {

margin: ۴px;

font-size: ۹۰%;

}

</style>

</head>

<body>

<h1>موضوع اصلی صفحه</h1>

<main>

<h1>پرطرفدارترین برند های گوشی دنیا</h1>

<p>اپل، سامسونگ و هوآووی بیشترین استفاده را در بین دیگر برندهای تلفن های هوشمند دارا هستند.</p>

<p>اپل یک کمپانی بزرگ آمریکایی بوده که علاوه بر تلفن همراه در ساخت لبتاپ و لوازم دیگر با سیستم عامل اختصاصی خود (ios) فدرتمند است.</p>

</article>

<h2>سامسونگ</h2>

<p>سامسونگ یک کمپانی کره ای بوده و از قوی ترین شرکتها در ساخت تلفن های همراه با سیستم عامل اندروید است. </p>

</article>

<h2>هوآووی</h2>

<p>هوآووی نیز کمپانی ای چینی بوده که علاوه بر قدرت نمایی در سیستم عامل اندروید شرط اقتصادی بودن کالاهای خود را هم رعایت کرده است.</p>

</article>

</main>

</body>

</html>

نمایش خروجی

مرورگرهای سازگار

در جدول زیر، لیست مرورگرها و نسخه های سازگار آن ها با این تگ را مشاهده می کنید:

پلتفرم
مرورگر	گوگل کروم	مایکروسافت اج	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	وب ویو اندروید	گوگل کروم اندروید	فایرفاکس اندروید	اپرا اندروید	سافاری iOS	سامسونگ اینترنت
نسخه	۲۶+	۱۲+	۲۱+		۱۶+	۷+			۲۱+		۷+