دسته‌بندی عناصر HTML

مقدمه

هر عنصر HTML دارای یک مدل محتوا (content model) است که توصیفی از محتوای قابل انتظار برای آن عنصر، ارائه می‌دهد. عناصری که مدل محتوای مشابهی دارند، در یک گروه قرار می‌گیرند و به این ترتیب، یک گروه‌بندی یا دسته‌بندی محتوایی (content categories) از عناصر بدست می‌آید. دو روش یا رویکرد متفاوت برای دسته‌بندی محتوایی عناصر وجود دارد که یک روش به قبل از HTML5 و روش دیگر به بعد از انتشار HTML5 مربوط است. در حقیقت، مطابق مستندات HTML تا قبل از HTML5، عناصر این زبان در دو دسته‌ی عناصر Inline-level و Block-level قرار می‌گیرند اما با انتشار مستندات HTML5، دسته‌بندی پیچیده‌تری برای عناصر در نظر گرفته شد. در این درس، ابتدا در مورد روش دسته‌بندی قبل از HTML5 صحبت می‌کنیم که می‌توانیم آن را روش دسته‌بندی کلاسیک بنامیم و سپس، در مورد روش مدرن دسته‌بندی محتوایی عناصر HTML صحبت خواهیم کرد.

روش‌های دسته‌بندی محتوایی عناصر HTML

همانطور که در مقدمه‌ی این درس نیز اشاره شد، منظور از دسته‌بندی محتوایی عناصر HTML این است که عناصر را از نظر نوع محتوایی که می‌توانند داشته باشند، در دسته‌ها یا گروه‌هایی (content categories) قرار دهیم. در ضمن، گفتیم که ما با دو رویکرد برای دسته‌بندی عناصر مواجهیم: یکی رویکرد کلاسیکی که تا HTML4.01 ادامه داشت و دیگری رویکرد جدیدی که در HTML5 برای دسته‌بندی عناصر، معرفی شده است. تصویر زیر، تفاوت بین این دو روش دسته‌بندی را نمایش می‌دهد.

در سمت چپ تصویر، روش دسته‌بندی کلاسیکی را مشاهده می‌کنید که تا قبل از HTML5 مورد استناد بود و بر این اساس، عناصر HTML در دو گروه عناصر inline-level و block-level قرار می‌گیرند. همانطور که می‌بینید، این دو گروه، مجزا هستند و هیچ اشتراکی ندارند. اما از زمان انتشار مستندات HTML5، دسته‌بندی پیچیده‌تری برای عناصر ارائه شد که تصویر شماتیکی از این دسته‌بندی را در سمت راست تصویر بالا می‌بینید. دقت داشته باشید که در اینجا بر خلاف دسته‌بندی قدیمی، گروه‌های عناصر، مجموعه‌های مجزا نیستند. برای نمونه، گروه Embedded زیرمجموعه‌ی گروه Phrasing است؛ یعنی هر عنصر Embedded یک عنصر Phrasing هم هست. یا مثلاً گروه‌های Phrasing و Metadata با هم اشتراک دارند؛ یعنی عناصری وجود دارند که به هر دوی این گروه‌ها تعلق دارند. همچنین، همانطور که از تصویر مشخص است، همه‌ی عناصرِ همه‌ی گروه‌ها به جز تعدادی از عناصر گروه Metadata به گروه Flow تعلق دارند. در حقیقت، تصویر بالا گروه‌های عناصر و رابطه‌ی بین آنها را با استفاده از نمودارهای ون نشان می‌دهد.

حالا اجازه دهید هر یک از این دو روش دسته‌بندی عناصر را به صورت مجزا بررسی کنیم و توضیحات و جزئیات بیشتری از هر روش بیان کنیم و ببینیم در هر یک از این دو روش، هر گروه شامل چه عناصری است.

دسته‌بندی عناصر به روش کلاسیک

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

برای درک تفاوت بین عناصر inline و block، ابتدا به تصویر زیر نگاه کنید که فرمت‌بندی پیش‌فرض (default formatting) این عناصر را نشان می‌دهد. در این تصویر، هر مستطیل قرمز نشانگر یک عنصر block و سایر مستطیل‌ها نشانگر عناصر inline هستند.

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

توجه داشته باشید که این تفاوت در نحوه‌ی نمایش عناصر inline و block از تفاوت در مدل محتوای این عناصر ناشی می‌شود. بر این اساس، یک عنصر block می‌تواند شامل متن، عناصر inline و برخی عناصر block دیگر باشد اما یک عنصر inline نمی‌تواند شامل هیچ عنصری از نوع block باشد. ایده‌ی نهفته در این تمایزِ ساختاری این است که عناصر block نسبت به عناصر inline ساختارهای بزرگتری را ایجاد می‌کنند. البته در اینجا یک عنصر استثنا وجود دارد که از نوع inline است اما می‌تواند شامل عناصر block باشد؛ این عنصر a نام دارد و برای ایجاد لینک در صفحات وب کاربرد دارد.

جدول زیر لیست کاملی از عناصر block و inline ارائه می‌دهد. از این جدول می‌توانید به عنوان یک منبع استفاده کنید و لازم نیست محتویات آن را به خاطر بسپارید.

برای مثال، عنصر p که یک عنصر block است، از یک خط جدید شروع می‌شود و فارغ از اینکه محتوای این عنصر به چه مقدار فضا نیاز دارد، کل فضای افقی عنصر والد خود را اشغال می‌کند. اما عنصر span که یک عنصر inline است، در ادامه‌ی خط جاری می‌آید (مگر اینکه فضای کافی وجود نداشته باشد یا اینکه عنصر قبل از آن یک عنصر block باشد) و تنها به اندازه‌ی محتوای خود از عرض عنصر والدش اشغال می‌کند. به علاوه، چون عنصر div یک عنصر block است، می‌تواند شامل عناصر block دیگر مانند p باشد اما یک عنصر inline مانند span نمی‌تواند شامل یک عنصر block باشد. این موارد را می‌توانید با اجرای کدهای زیر ببینید:

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Block and Inline elements</title>
</head>
<body>
  <p>Hello World!</p>
  <p>It's raining <span>today</span>and everything is ok.</p>
  <div>
    <p>How are you my friend? is everythimg <em>alright</em>for you?</p>
  </div>
</body>
</html>

دسته‌بندی عناصر به روش جدید

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

• گروه Metadata: شامل عناصری است که هیچ محتوای قابل نمایشی را به صفحه اضافه نمی‌کنند، بلکه اطلاعاتی در مورد نمایش و رفتار سایر عناصر صفحه برای مرورگرها و سایر مفسرها ارائه می‌کنند. برای مثال، وقتی با استفاده از عنصر link یک استایل‌شیت (stylesheet) به صفحه لینک می‌کنیم، مرورگر، کدهای CSS موجود در استایل‌شیت را روی صفحه اعمال می‌کند.
• گروه Flow: بزرگترین گروه عناصر است که یک اَبَرمجموعه (hyperset) برای سایر گروه‌ها (به جز گروه Metadata) است و تقریباً شامل همه‌ی عناصری است که می‌توانند درون قسمت body صفحه قرار داشته باشند (وقتی A زیرمجموعه‌ی B باشد، B را ابرمجموعه‌ی A می‌گویند).
• گروه Sectioning: شامل عناصری است که برای ایجاد یک بخش یا ناحیه در سند کاربرد دارند. هر عنصر این گروه می‌تواند دارای یک عنوان یا هدینگ (heading) و یک outline باشد؛ جزئیات این موضوع را در دروس آینده خواهیم دید.
• گروه Heading: عناصر این گروه، برای تعریف هدینگ یک بخش از صفحه کاربرد دارند.
• گروه Phrasing: این گروه را می‌توانیم تقریباً معادل گروه inline در دسته‌بندی قدیمی عناصر بدانیم. عناصر این گروه در سطح داخل پاراگراف‌ها (intra-paragraph) قرار دارند.
• گروه Embedded: از عناصری تشکیل می‌شود که منابع خارجی (external resources) یا محتوایی از یک نوع و گرامر دیگر را در صفحه قرار می‌دهند. برای نمونه، عنصر iframe برای جاسازی یک صفحه‌ی وب دیگر (به عنوان یک منبع خارجی) درون صفحه‌ی جاری کاربرد دارد و عناصر canvas و svg می‌توانند گرافیک‌های دوبعدی را که به ترتیب، با استفاده از جاوااسکریپت و SVG (یک زبان مارکاپ مبتنی بر XML) ایجاد می‌شوند، در صفحه قرار دهند.
• گروه Interactive: شامل عناصری است که به طور خاص، برای تعامل با کاربر در نظر گرفته شده‌اند. برای نمونه، عنصری مانند button که برای ایجاد یک دکمه کاربرد دارد، به این دلیل که کاربر می‌تواند روی آن کلیک کند، به این گروه تعلق دارد.

در پایان این درس، دو نکته را متذکر می‌شوم: اول اینکه گروه‌های دیگری از عناصر نیز وجود دارد که ما در اینجا به دو دلیل از اشاره به آنها اجتناب کردیم: یکی طولانی شدن بیش از حد بحث و دیگری غیرضروری بودن آن. نکته‌ی دوم اینکه عناصری وجود دارند که به هیچ‌یک از گروه‌های معرفی‌شده، تعلق ندارند و به عبارت دیگر، مدل محتوای آنها nothing است. از فصل اول یادآوری می‌کنم که یک عنصر empty یا void عنصری است که فاقد محتواست. با وجودی که اینها دو مفهوم متفاوت هستند، اما اغلب عناصری که مدل محتوای آنها nothing است، عناصر void هستند.