8
تشکر

نگاهی به عناصر HTML5 بخش دوم

عناصر HTML5

عناصر HTML5

در بخش اول این مطلب “نگاهی به عناصر HTML5” در باره عناصر جدید HTML5 مانند header , footer و nav صحبت کردیم. در بخش دوم این مطلب درباره عنصر جدیدی به نام main صحبت خواهیم کرد.

طبق تعریف W3 عنصر main دربرگیرنده محتوای اصلی صفحه HTML است. این عنصر هیچ تاثیر نمایشی در صفحه ندارد و دارای Outline نیست.

همانطور که میدانید شما میتوانید از عناصر header و footer و nav به هر تعدادی که بخواهید در صفحه استفاده کنید اما عنصر main مانند body عمل میکند. و فقط یکی از آن در صفحه باید باشد. همچنین این عنصر نباید فرزند هیچ یک از عناصر article , aside , footer , header و nav باشد.

همچنین برای مرورگرهای قدیمی شما باید از خصوصیت role با مقدار main استفاده کنید.  برای شناساندن عناصر جدید HTML5 به مرورگرهای قدیمی میتوانید از فایل جاوااسکریپت HTML5 shiv استفاده کنید.

نمونه کدهایی از استفاده عنصر main در صفحه:

<!DOCTYPE html>
<html>
<head>
  <title>Graduation Ceremony Summer 2022</title>
</head>
<body>

  <header>The Lawson Academy:
    <nav>
      <ul>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="fees.html">Fees</a></li>
        <li><a>Graduation</a></li>
    </nav> 
  </header>


  <main>


    <h1>Graduation</h1>

    <nav>
      <ul>
        <li><a href="#ceremony">Ceremony</a></li>
        <li><a href="#graduates">Graduates</a></li>
        <li><a href="#awards">Awards</a></li>
      </ul>
    </nav>

    <H2 id="ceremony">Ceremony</H2>
    <p>Opening Procession</p>
    <p>Speech by Valedictorian</p>
    <p>Speech by Class President</p>
    <p>Presentation of Diplomas</p>
    <p>Closing Speech by Headmaster</p>

    <h2 id="graduates">Graduates</h2>
    <ul>
      <li>Eileen Williams</li>
       <li>Andy Maseyk</li>
      <li>Blanca Sainz Garcia</li>
      <li>Clara Faulkner</li>
      <li>Gez Lemon</li>
      <li>Eloisa Faulkner</li>
    </ul>

    <h2 id="awards">Awards</h2>
    <ul>
      <li>Clara Faulkner</li>
      <li>Eloisa Faulkner</li>
      <li>Blanca Sainz Garcia</li>
    </ul>

  </main>

  <footer> Copyright 2012 B.lawson</footer>

</body>
</html>
  • Ali Amini می‌گه:

    سلام
    خیلی مفید و مختصر بود.
    تشکر
    یا علی

  • حسن می‌گه:

    در آموزشهای html5 و Cheat-sheet های آن عنصر main تعریف نشده چرا ؟


  • نظرات این مطلب بسته است.