بخش‌بندی صفحه با عناصر معنایی HTML5

مقدمه

در این درس، قصد داریم با نحوه‌ی بخش‌بندی منطقی صفحه (logical sectioning) و به عبارت دیگر، ایجاد بخش‌ها یا نواحی اصلی یک صفحه‌ی وب آشنا شویم. یک صفحه‌ی وب را می‌توان به چند بخش یا ناحیه‌ی اصلی تقسیم کرد و در هر یک از این بخش‌ها محتوای مناسب را قرار داد. در HTML5 چند عنصر معنایی (semantic) مانند article و section و main برای تعریف بخش‌های اصلی صفحه معرفی شدند اما تا قبل از HTML5 به جای همه‌‌ی این عناصر از عنصر div استفاده می‌شد که با تخصیص مقادیری مانند article و main به صفت‌های class یا id این عنصر، نقش هر عنصر div و نوع ناحیه‌ی ایجاد شده توسط این عنصر را تعیین می‌کردیم. در این درس، عناصر مربوط به بخش‌بندی صفحات وب را که اغلب آنها در HTML5 معرفی شده‌اند، بررسی می‌کنیم و با نقش هر یک آشنا خواهیم شد.

تعریف بخش‌های اصلی یک صفحه‌ی وب

یکی از مهمترین تغییراتی که از زمان انتشار HTML5 در استاندارد HTML ایجاد شد، تأکید بیشتر روی جنبه‌ی معنایی (semantic) عناصر است. در نسخه‌های قبل از HTML5، از عنصر div برای ایجاد بخش‌های اصلی صفحه استفاده می‌شد. اما div یک عنصر گروه‌بندی عمومی یا جنریک و فاقد بار معنایی است؛ یعنی نقش و محتوای این عنصر از روی نامش مشخص نمی‌شود. برای جبران این نقیصه، عباراتی را که نشان‌دهنده‌ی نقش و محتوای عنصر است، به صفت‌های id و class عناصر div اختصاص می‌دادیم. به عنوان مثال، برای مشخص کردن قسمتی از صفحه به عنوان هدر یا بخش مقدماتی صفحه، از یک عنصر div به صورت زیر استفاده می‌شد:

HTML

<div id="header"></div>

و محتوای مربوط به هدر صفحه درون این عنصر div قرار داده می‌شد. اما در HTML5 از یک عنصر معنایی با نام header به جای عنصر div بالا استفاده می‌شود. عنصر معنایی، عنصری است که نقش آن و محتوایی که می‌تواند درون آن قرار گیرد، از نامش مشخص است. به این ترتیب، برنامه‌نویسان از استفاده از تگ‌های متعدد div در صفحه که مقدار id آنها نشان دهنده‌ی عملکردشان بود و هیچ معنای خاصی برای مرورگرها نداشت، بی‌نیاز شده و در عوض از عناصر معنایی مانند header و footer استفاده می‌کنند.

یک مشکل مربوط به رویکرد قدیمی، یعنی استفاده از عنصر div برای بخش‌بندی صفحه، این است که قاعده‌ی استانداردی برای تعیین مقدار صفت id مربوط به عنصر div وجود ندارد؛ یک طراح وب ممکن است برای ایجاد ناحیه‌ی هدر یا سرصفحه‌ی سند خود از عنصر div با مقداری مثل header برای صفت id این عنصر استفاده کند و دیگری ممکن است مقادیری مانند top یا intro را به صفت id اختصاص دهد. این ناهماهنگی‌ها مضرات زیادی دارد؛ به عنوان نمونه، کار موتورهای جستجو را برای تشخیص موضوعات اصلی صفحه مشکل می‌کند. اما در مقابل، مزیت استفاده از عناصر بخش‌بندی HTML5 این است که نام این عناصر، کارکرد و نقش آنها در صفحه را نشان می‌دهد و در این مورد، جای ابهامی باقی نمی‌ماند.

نتیجه‌ی نهاییِ استفاده از رویکرد جدید HTML5 در بخش‌بندی صفحه، یکنواختی و هماهنگی بیشتر در کار طراحی و تفسیر صفحات وب است. در ادامه، با عناصر بخش‌بندی HTML5 آشنا شده و خواهیم دید که هر یک از آنها دقیقاً‌ چه نقشی در اسناد وب دارند و چه نوع ناحیه‌ای را ایجاد می‌کنند و می‌توانند شامل چه محتوایی باشند. ابتدا یک معرفی مختصر از این عناصر در جدول زیر ارائه شده که شما را با نقش کلی هر یک از آنها آشنا می‌کند.

جدول بالا یک دید کلی در مورد عناصر بخش‌بندی صفحه به ما می‌دهد. اما اطلاع از نقش دقیق هر یک از این عناصر و استفاده‌ی صحیح و به‌جا از آنها، به آگاهی از جزئیات و نکاتی نیاز دارد که در ادامه بیان خواهیم کرد.

ایجاد یک بحش مستقل (article)

article یک عنصر معنایی است و نام این عنصر (که به معنای مقاله است)‌ کارکرد آن را نشان می‌دهد. یک بخش article در یک صفحه‌ی وب، همانند یک مقاله در یک روزنامه یا مجله، شامل محتوایی است که به بقیه‌ی مطالب وابستگی ندارد و می‌تواند مستقلاً مورد استفاده‌ و انتشار مجدد قرار بگیرد. به عبارت دیگر، درک محتوای یک عنصر article به سایر مطالب صفحه نیاز ندارد و اگر این محتوا در هر جای دیگری منتشر شود، مشکلی به وجود نخواهد آمد.

در صفحات وب، برخی از انواع محتواهایی که می‌توانند به یک عنصر article تعلق داشته باشند، عبارتند از:

• پستی که در یک وبلاگ منتشر شده
• یک کامنت ثبت‌شده توسط یک کاربر
• کارت معرفی یک محصول در یک فروشگاه اینترنتی
• یک ویجت تعاملی (interactive widget)

اینها فقط نمونه‌هایی از مواردی هستند که می‌توانند در یک عنصر article قرار گیرند و به طور کلی، هر محتوایی که بتواند مستقل از سایر بخش‌های صفحه در نظر گرفته شود، می‌تواند به یک عنصر article تعلق داشته باشد. مثال زیر را ببینید:

HTML

<article>
  <h1>Weather forecast for Seatle</h1>
  <article>
    <h2>10 November 2023</h2>
    <p>Rain.</p>
  </article>
  <article>
    <h2>11 November 2023</h2>
    <p>Rain.</p>
  </article>
  <article>
    <h2>12 November 2023</h2>
    <p>Rain.</p>
  </article>
</article>

در این مثال، یک عنصر article برای نمایش نتایج پیش‌بینی آب‌و‌هوا برای یک شهر نمونه ایجاد شده است. عنصر h1 عنوان اصلی مربوط به این عنصر را تعریف کرده است. سپس، درون این بخش، سه عنصر article دیگر ایجاد شده که هر یک حاوی پیش‌بینی مربوط به یک روز مشخص است. همانطور که می‌بینید، هر یک از این سه بخش، شامل یک عنصر h2 برای عنوان خود هستند.

با توجه به نقش عنصر article، واضح است که محدودیتی در مورد تعداد عناصر article در یک صفحه وجود ندارد؛ برای مثال، در یک وبلاگ که پست‌ها به صورت پشت سر هم و با اسکرول توسط کاربر نمایش داده می‌شوند، هر پست می‌تواند در یک عنصر article قرار گیرد. در ضمن، همانطور که در مثال بالا هم دیدیم، امکان تودرتو کردن عناصر article (یعنی قرار دادن یک عنصر article درون یک article دیگر) نیز وجود دارد. برای مثال، درون عنصر article مربوط به یک پست از یک وبلاگ، می‌توان یک عنصر article برای هر کامنت ثبت‌شده توسط یک کاربر، ایجاد کرد.

ایجاد یک بخش جنریک (section)

عنصر معنایی section برای ایجاد یک بخش عمومی (generic section) در صفحه کاربرد دارد. این عنصر را می‌توانید معادل یک فصل از یک کتاب و یا یک بخش شماره‌گذاری‌شده از یک پایان‌نامه تصور کنید. توجه داشته باشید که با وجودی که عنصر section همانند عنصر article برای ایجاد یک بخش جدید در صفحه کاربرد دارد، اما چیزی که تفاوت بین این دو عنصر را رقم می‌زند، استقلال یا وابستگی محتوای مورد نظر از سایر مطالب صفحه است. در واقع، بر خلاف article، بخش ایجاد شده توسط section می‌تواند به سایر مطالب صفحه وابسته باشد و لزوماً یک بخش یا ناحیه‌ی مستقل محسوب نمی‌شود.

در صفحات وب، برخی از انواع محتواهایی که می‌توانند درون یک عنصر section قرار گیرند، عبارتند از:

• لیست نتایج یک جستجو
• یک نقشه (map) و کنترل‌های مربوط به آن
• در یک کادر محاوره‌ای (dialog box) که چند صفحه را در قالب چند زبانه (tab) نمایش می‌دهد، هر زبانه می‌تواند یک عنصر section باشد.

در مثال زیر، ابتدا با استفاده از یک عنصر هدینگ h1، عنوان موضوع اصلی یعنی «انتخاب بهترین فوتبالیست» مشخص شده و سپس، از یک عنصر section برای ایجاد بخشی تحت عنوان Criteria برای پرداختن به معیارهای انتخاب فوتبالیست برتر استفاده شده و یک عنصر section دیگر نیز برای نام بردن از چند فوتبالیست برتر تاریخ، ایجاد شده است:

HTML

<h1>Choosing the best football player</h1>
<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be
    considered when choosing the best player:
    intelligence, physical ability, reflex, technique, etc
  </p>
</section>
<section>
  <h2>The Best</h2>
  <p>
    Zinedine Zidane, Lionel Messi, Cristiano Ronaldo,
    Diego Maradona, Ronaldinho
  </p>
</section>

در این مثال، نمی‌توانیم به جای عناصر section از article استفاده کنیم؛ چون محتوای این دو عنصر section، مستقل نیستند. اما حالا فرض کنید بخواهیم بخشی شامل همه‌ی کدهای بالا ایجاد کنیم. این بار، انتخاب ما به جای section عنصر article خواهد بود. زیرا اضافه‌شدن عنصر h1 در این مثال، شرط استقلال موضوع را برآورده می‌کند:

HTML

<article>
  <h1>Choosing the best football player</h1>
  <section>
    <h2>Criteria</h2>
    <p>
      There are many different criteria to be
      considered when choosing the best player:
      intelligence, physical ability, reflex, technique, etc
    </p>
  </section>
  <section>
    <h2>The Best</h2>
    <p>
      Zinedine Zidane, Lionel Messi, Cristiano Ronaldo,
      Diego Maradona, Ronaldinho
    </p>
  </section>
</article>

از عنصر section باید فقط در مواردی استفاده کنیم که عنصر دیگری برای ایجاد بخش مورد نظر، مناسب نباشد. اگر محتوای بخشی که قصد ایجاد آن را داریم، مستقل از سایر مطلب صفحه باشد، باید از عنصر article استفاده کنیم. به علاوه، عنصر section یک بخش مجزا و جنریک را ایجاد می‌کند و نباید این عنصر را به عنوان یک کانتینر عمومی (generic container) مانند div برای گروه‌بندی عناصر به کار ببریم. به طور کلی:

• اگر محتوای مورد نظر را بتوان یک بخش مجزا و مستقل در نظر گرفت، بهتر است از عنصر article استفاده کنیم.
• اگر محتوای مورد نظر، اطلاعات جانبی در مورد محتوای اصلی صفحه باشد، بهتر است از یک عنصر aside استفاده کنیم (که در ادامه، معرفی خواهد شد).
• اگر قصد داشته باشیم از عنصر section تنها با هدف گروه‌بندی عناصر جهت استایل‌دهی استفاده کنیم یا اینکه بخواهیم چند عنصر را در یک گروه قرار دهیم تا مقدار یکسانی را به یک صفت مشخص آن عناصر اختصاص دهیم، باید بدانید که در اینگونه موارد، عنصر div، انتخاب صحیح است.

تعریف هدر صفحه یا یک بخش (header)

عنصر header نیز نقشی دارد که از نامش پیداست؛ این عنصر، شامل محتواي مقدماتی یا سرصفحه‌ی سند یا بخشی از سند است. اگر از این عنصر مستقیماً‌ درون عنصر body استفاده شود، حکم ظرفی برای محتوای مقدماتی صفحه را دارد و معمولاً شامل مواردی مثل عنوان اصلی، فرم جستجو، لینک‌های navigation، لوگوی سایت یا شرکت، شعارها و اهداف و سایر موارد مربوط به برندسازی است. اما این عنصر می‌تواند درون عناصری مانند section و article نیز استفاده شود که در این صورت باید شامل محتوای مقدماتی یا هدر مربوط به این عناصر یا بخش‌ها باشد.

توجه داشته باشید که عنصر header یک عنصر بخش‌بندی نیست و بخش جدیدی را ایجاد نمی‌کند، بلکه برای تعیین هدر یک بخش موجود کاربرد دارد. با این حساب، در یک سند می‌توان بیش از یک عنصر header ایجاد کرد اما نمی‌توان از این عنصر به عنوان فرزند یک عنصر header دیگر استفاده کرد. مثال زیر را ببینید:

HTML

<body>
  <header>
    <h1>Main Page title</h1>
    <p>logo, nav links, search form and etc</p>
  </header>
  <article>
    <header>
      <h2>The Planet Earth</h2>
      <p>
         posted on Wednesday, 8 November 2023
         by Professor Dumbledore
      </p>
    </header>
    <p>
        We live on blue and green planet,
        with so many things still unseen.
    </p>
    <p>continue reading....</p>
  </article>
</body>

در مثال بالا، عنصر header که مستقیماً درون body قرار دارد، هدر کل صفحه است و عنصر header دیگر که درون عنصر article قرار دارد، هدر همین ناحیه‌ی article محسوب می‌شود.

تعریف فوتر صفحه یا یک بخش

عنصر footer نیز یک عنصر بخش‌بندی محسوب نمی‌شود؛ چون ناحیه‌ی جدیدی را به صفحه اضافه نمی‌کند، بلکه به عنوان پاورقی یک بخش موجود استفاده می‌شود. همانند header عنصر footer نیز می‌تواند مستقیماً درون عنصر body و یا درون یکی از عناصر بخش‌بندی استفاده شود. اطلاعات درون footer، پاورقی یا دیگر اطلاعات ارجاعی است که به تعریف یا شناسایی تکمیلی محتواي اصلی سند کمک می‌کند و معمولاً شامل مواردي مثل اطلاعات مربوط به کپی‌رایت، اطلاعات لازم برای تماس با نویسنده یا لینک‌هایی به دیگر اسناد مرتبط است. در کدهای زیر از عنصر footer برای ایجاد بخش پاصفحه برای سند (یعنی درون عنصر body) و نیز برای یک بخش article استفاده کرده‌ایم و مثال قبلی را بسط داده‌ایم:

HTML

<body>
  <header>
    <h1>Main Page title</h1>
    <p>logo, nav links, search form and etc</p>
  </header>
  <article>
    <header>
      <h2>The Planet Earth</h2>
      <p>
         posted on Wednesday, 8 November 2023
         by Professor Dumbledore
      </p>
    </header>
    <p>
        We live on blue and green planet,
        with so many things still unseen.
    </p>
    <p>continue reading....</p>
    <footer>
      <p>footer information for this article</p>
      <p>Copyright 2023 NASA</p>
    </footer>
  </article>
  <footer>
    <p>footer information for document</p>
  </footer>
</body>

ایجاد بخش ناوبری (nav)

یک بخش navigation شامل لینک‌هایی به سایر صفحات سایت یا بخش‌های دیگری از صفحه‌ی جاری است و عنصر nav برای ایجاد چنین بخشی در صفحه کاربرد دارد. این عنصر با توجه به کارکردش، معمولاً حاوی عناصر لینک یا a است اما اجباری برای این موضوع وجود ندارد و عنصر nav می‌تواند مثلاً از یک یا چند پاراگراف تشکیل شود که لینک‌های navigation را معرفی کرده‌اند. منوها، جداول محتوا و فهرست‌های مطالب، نمونه‌هایی از بخش‌های navigation در یک سند هستند.

اجازه دهید از عنصر nav برای تکمیل مثال قبلی استفاده کنیم:

HTML

<body>
  <header>
    <h1>Main Page title</h1>
    <p>logo, nav links, search form and etc</p>
    <nav>
      <a>Home</a>
      <a>Contact</a>
      <a>About</a>
    </nav>
  </header>
  <article>
    <header>
      <h2>The Planet Earth</h2>
      <p>
         posted on Wednesday, 8 November 2023
         by Professor Dumbledore
      </p>
    </header>
    <p>
        We live on blue and green planet,
        with so many things still unseen.
    </p>
    <p>continue reading....</p>
    <footer>
      <p>footer information for this article</p>
      <p>Copyright 2023 NASA</p>
    </footer>
  </article>
  <footer>
    <p>footer information for document</p>
  </footer>
</body>

مثال بالا یکی از مهمترین کاربردهای عنصر nav یعنی ایجاد منوی سایت را نشان می‌دهد. البته در عمل، با استفاده از CSS ظاهر منوی یک سایت را بهبود می‌دهیم.

توجه داشته باشید که یک صفحه‌ی وب می‌تواند شامل بیش از یک عنصر nav باشد. برای مثال، یک صفحه می‌تواند شامل یک عنصر nav برای پیمایش در سایت و یک عنصر nav دیگر برای پیمایش در صفحه‌ی جاری باشد.

ایجاد بخش اصلی صفحه (main)

برای ایجاد بخش اصلی یک صفحه از عنصر main استفاده می‌شود. محتوایی که درون عنصر main قرار می‌گیرد، مستقیماً مربوط به موضوع اصلی و مرکزی صفحه است. در حقیقت، معمولاً بخش‌هایی مثل header و footer و nav بین همه‌ی صفحات یک وبسایت، مشترک هستند اما عنصر main شامل محتوایی است که منحصر به صفحه است و با محتوای سایر صفحات سایت تفاوت دارد.

HTML

<header>Gecko facts</header>
<main>
  <p>
    Geckos are a group of usually small, usually nocturnal lizards.
    They are found on every continent except Australia.
  </p>
  <p>
    Many species of gecko have adhesive toe pads which enable
    them to climb walls and even windows
  </p>
</main>

در مورد عنصر main و استفاده از آن در صفحات وب، باید به دو نکته‌ی زیر توجه داشته باشید:

• در مورد تعداد عناصر main در یک صفحه، محدودیتی وجود ندارد اما باید بدانید که در هر لحظه تنها یک عنصر main می‌تواند visible باشد (یعنی شامل صفت hidden نباشد). به عبارت دیگر، اگر n عنصر main در صفحه داشته باشیم، در هر لحظه باید n-1 مورد از این عناصر دارای صفت hidden باشند.
• به جز عناصر body و html تنها عناصری که می‌توانند والد یک عنصر main باشند، عناصر div و form هستند.

ایجاد یک بخش جانبی (aside)

عنصر aside یک بخش اطلاعاتی جانبی در سند ایجاد می‌کند که محتوای آن باید مرتبط با محتوای اطرافش باشد و در عین حال بتوان آن را یک مطلب مجزا در نظر گرفت؛ به عبارت دیگر، یک ارتباط غیرمستقیم بین محتوای این عنصر و محتوای اصلی وجود داشته باشد. این عنصر را می‌توان برای افکت‌های تایپوگرافیک مانند نوارهای جانبی (sidebars) و نقل‌قول‌ها یا برای تبلیغات و هر محتوای دیگری که بتوان آن را به طور غیر مستقیم مرتبط به محتوای اصلی در نظر گرفت، به کار برد. مثال زیر را ببینید:

HTML

<body>
  <article>
    <p>
      The Postscript technology was first released to Adobe company in 1982.
    </p>
    <aside>
      <p>
        This product earned $83000 during its initial release.
      </p>
    </aside>
    <p>More info....</p>
  </article>
</body>

در مثال بالا، موضوع اصلی بخش article، تکنولوژی postscript است که یک PDL یا Page Description Language است که توسط شرکت Adobe در اولین سال تأسیس این شرکت، ارائه شد. در ادامه، از یک عنصر aside استفاده شده تا به یک موضوع جانبی اما مربوط به بحث اصلی (یعنی درآمدی که Adobe در سال اول از این تکنولوژی کسب کرد) اشاره شود.

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

ایجاد بخش مربوط به اطلاعات تماس (address)

عنصر address همانطور که از نامش پیداست، می‌تواند شامل اطلاعات مربوط به تماس با یک شخص، شرکت یا سازمان باشد. این اطلاعات می‌تواند به فرم‌های مختلف مانند آدرس فیزیکی، شماره تلفن، آدرس ایمیل، آدرس url، آدرس شبکه‌های اجتماعی، مختصات جغرافیایی و غیره باشد؛ البته مشروط بر اینکه آدرس‌های فوق در حقیقت، روشی برای برقراری تماس باشند. مثال زیر را ببینید:

HTML

<footer>
  <address>
    For more details, Contact
    <a>Professor Dumbledore</a>
  </address>
  <p>copyright 2023 Example corp.</p>
</footer>

عنصر address می‌تواند در بخش‌های مختلف یک صفحه‌ی وب قرار گیرد. برای ارائه‌ی اطلاعات تماس مربوط به شرکت، سازمان یا هر کسب‌و‌کاری که پشت سایت قرار دارد، می‌توانیم از یک عنصر address درون عنصر footer استفاده کنیم. از طرف دیگر، با قرار دادن عنصر address درون یک عنصر article می‌توانیم اطلاعات تماس با نویسنده‌ی آن مقاله را ارائه دهیم. در ضمن، توجه داشته باشید که عنصر address نباید شامل چیزی به جز اطلاعات تماس باشد. برای مثال، اطلاعاتی مانند تاریخ انتشار مطلب، باید از طریق عنصر time ارائه شود.