الفرق بين المراجعتين ل"HTML/main"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
(إضافة قسمين ومثال)
 
سطر 8: سطر 8:
  
 
<main>
 
<main>
−
  <h1>Apples</h1>
 
−
  <p>The apple is the pomaceous fruit of the apple tree.</p>
 
−
 
 
 
   <article>
 
   <article>
−
     <h2>Red Delicious</h2>
+
     <h1>التفاح</h1>
−
    <p>These bright red apples are the most common found in many
+
    <section>
−
     supermarkets.</p>
+
      <h2>أصناف التفاح</h2>
−
     <p>... </p>
+
      <p>فقرة أو فقرات تشرح أنواع التفاح المختلفة</p>
−
    <p>... </p>
+
     </section>
−
  </article>
+
     <section>
−
 
+
      <article>
−
  <article>
+
        <h2>تعليق لبروفيسور في علم النبات</h2>
−
    <h2>Granny Smith</h2>
+
        <p>فقرة توضِّح رأي البروفيسور</p>
−
    <p>These juicy, green apples make a great filling for
+
        <footer>
−
     apple pies.</p>
+
          <p>
−
     <p>... </p>
+
            نشر في
−
     <p>... </p>
+
            <time datetime="2017-05-16 19:00">16 أيار/مايو</time>
 +
          </p>
 +
        </footer>
 +
      </article>
 +
      <article class="user_review">
 +
        <h2>رأينا في تعليق البروفيسور</h2>
 +
        <p>فقرة نوضح فيها رأينا فيما قاله البروفيسور</p>
 +
        <time datetime="2017-05-17 19:00"></time>
 +
      </article>
 +
     </section>
 +
     <footer>
 +
      <p>
 +
        نشر المقال في
 +
        <time datetime="2017-05-15 19:00">20 أيار/مايو</time> من قبل عبد اللطيف.
 +
      </p>
 +
     </footer>
 
   </article>
 
   </article>
 
</main>
 
</main>
سطر 31: سطر 43:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 71: سطر 84:
  
 
لا يساهم العنصر <code><main></code> في تخطيط المستند، وعلى النقيض من العناصر مثل <code>[[HTML/body|<body>]]</code> أو الترويسات مثل <code>[[HTML/h1-h6|<nowiki><h2></nowiki>]]</code>، فالعنصر <code><main></code> لا يؤثر على بنية الصفحة من وجهة نظر DOM، فالغرض منه زيادة توصيف محتويات الصفحة ليس إلا.
 
لا يساهم العنصر <code><main></code> في تخطيط المستند، وعلى النقيض من العناصر مثل <code>[[HTML/body|<body>]]</code> أو الترويسات مثل <code>[[HTML/h1-h6|<nowiki><h2></nowiki>]]</code>، فالعنصر <code><main></code> لا يؤثر على بنية الصفحة من وجهة نظر DOM، فالغرض منه زيادة توصيف محتويات الصفحة ليس إلا.
 +
 +
== التنسيق الافتراضي ==
 +
تعرض أغلبية المتصفحات العنصر <code><main></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
 +
main {
 +
  display: block;
 +
}
 +
</syntaxhighlight>
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==

المراجعة الحالية بتاريخ 07:16، 18 فبراير 2018

يُمثِّل العنصر <main> المحتوى الرئيسي لجسم المستند (العنصر <body>) أو لجزءٍ من المستند أو التطبيق. تضم منطقة المحتوى الرئيسي جميع المحتوى المرتبط مباشرةً بموضوع المستند أو يضيف عليه، أو يمثِّل الوظيفة الرئيسية للتطبيق.

يمكنك استخدام عدِّة عناصر <main> في الصفحة إن كان ذلك ملائمًا، فمثلًا لو كان هنالك صفحةٌ تُمثِّل عدِّة مقالات (كل واحدة منها ضمن عنصر <article>، وكل منها لها محتوى إضافي داخلها مثل معلومات الكاتب والإعلانات ...إلخ.) فمن المنطقي وضع العنصر <main> داخل كل مقالة لتعريف المحتوى الرئيسي لتلك المقالة.

يبيّن هذا المثال كيف يستعمل العنصر <main> مع عناصر <article> استعمالًا صحيحًا:

<!-- بقية المحتوى -->

<main>
  <article>
    <h1>التفاح</h1>
    <section>
      <h2>أصناف التفاح</h2>
      <p>فقرة أو فقرات تشرح أنواع التفاح المختلفة</p>
    </section>
    <section>
      <article>
        <h2>تعليق لبروفيسور في علم النبات</h2>
        <p>فقرة توضِّح رأي البروفيسور</p>
        <footer>
          <p>
            نشر في
            <time datetime="2017-05-16 19:00">16 أيار/مايو</time>
          </p>
        </footer>
      </article>
      <article class="user_review">
        <h2>رأينا في تعليق البروفيسور</h2>
        <p>فقرة نوضح فيها رأينا فيما قاله البروفيسور</p>
        <time datetime="2017-05-17 19:00"></time>
      </article>
    </section>
    <footer>
      <p>
        نشر المقال في
        <time datetime="2017-05-15 19:00">20 أيار/مايو</time> من قبل عبد اللطيف.
      </p>
    </footer>
  </article>
</main>

<!-- بقية المحتوى -->

بطاقة العنصر

تصنيفات المحتوى محتوى تنظيمي.
المحتوى المسموح المحتوى تنظيمي.
الوسم المختصر يجب أن يملك وسم بداية، ولا يجب أن يملك وسم نهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي، على ألّا يكون أحد العناصر الآتية: <aside> أو <footer> أو <header> أو <nav>.
واجهة DOM HTMLElement

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

Chrome Firefox Edge Safari Opera
26 21.0 مدعوم 7 16

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

يجب أن يكون محتوى العنصر <main> فريدًا بالنسبة إلى المستند أو أقسام المستند، فالمحتوى المكرر في مجموعة من المستندات أو في أكثر من قسم من المستند مثل الشريط الجانبي أو روابط التنقل أو حقوق النشر أو شعار الموقع أو نماذج البحث يجب ألّا تُضمَّن داخل العنصر <main> إلا إذا كان نموذج البحث (مثلًا) هو جزء رئيسي من وظيفة المستند.

لا يساهم العنصر <main> في تخطيط المستند، وعلى النقيض من العناصر مثل <body> أو الترويسات مثل <h2>، فالعنصر <main> لا يؤثر على بنية الصفحة من وجهة نظر DOM، فالغرض منه زيادة توصيف محتويات الصفحة ليس إلا.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <main> مع ضبط الخاصية display إلى block:

main {
  display: block;
}

مصادر ومواصفات

  • معيار HTML Living Standard، سمح هذا المعيار باستخدام العنصر <main> عدِّة مرات في المستند، أو كأبن للعنصر <article>.
  • مواصفة HTML 5.1.
  • مواصفة HTML5.
مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/main&oldid=2597"