HTML <main> العلامة

  • الصفحة السابقة <link>
  • الصفحة التالية <map>

التعريف والاستخدام

<main> يحدد العنصر محتوى الوثيقة الرئيسي.

<main> المحتوى في العنصر يجب أن يكون فريدًا للوثيقة. لا يجب أن يحتوي على محتوى مكرر يظهر في عدة وثائق، مثل الروابط الجانبية، والروابط التوجيهية، والمعلومات المتعلقة بالحقوق، والشعار، والنموذج البحثي، وما إلى ذلك.

ملاحظة:لا يمكن أن يكون هناك أكثر من <main> العنصر. <main> العنصر لا يمكن أن يكون <article>و<aside>و<footer>و<header> أو <nav> النسب الأبوية للعنصر.

مثال

مثال 1

تحديد محتوى الملف الرئيسي:

<main>
  <h1>أكثر المتصفحات شعبية</h1>
  <p>كروم، فايرفوكس و إيدج هي المتصفحات الأكثر استخدامًا اليوم.</p>
  <article>
    <h2>جوجل كروم</h2>
    <p>جوجل كروم هو متصفح ويب تم تطويره من قبل جوجل، تم إطلاقه في عام 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox هو متصفح إنترنت مفتوح المصدر تم تطويره من قبل Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge هو متصفح إنترنت تم تطويره من قبل Microsoft تم إطلاقه في عام 2015......&</p>
  </article>
</main>

جربها بنفسك

مثال 2

استخدام CSS لتعيين <main> نمط العنصر:

<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>أكثر المتصفحات شعبية</h1>
  <p>كروم، فايرفوكس و إيدج هي المتصفحات الأكثر استخدامًا اليوم.</p>
  <article>
    <h2>جوجل كروم</h2>
    <p>جوجل كروم هو متصفح ويب تم تطويره من قبل جوجل، تم إطلاقه في عام 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox هو متصفح إنترنت مفتوح المصدر تم تطويره من قبل Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge هو متصفح إنترنت تم تطويره من قبل Microsoft تم إطلاقه في عام 2015......&</p>
  </article>
</main>
</body>
</html>

جربها بنفسك

خصائص العالمية

<main> يدعم العلامة أيضًا خصائص العالمية في HTML.

خصائص الحدث

<main> يدعم العلامة أيضًا خصائص الحدث في HTML.

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذا العلامة بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0
  • الصفحة السابقة <link>
  • الصفحة التالية <map>