ساختاربندی XHTML 2: بررسی موردی: تگ‌های ساختاربندی‌شده W3school

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

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

این عادات بد بسیاری از وب‌سایت‌های اینترنتی را آزار می‌دهد، به ویژه آنهایی که کد CSS را با چیدمان مبتنی بر جدول ترکیب می‌کنند. این روش ناخوشایند و ناکارآمد است، حتی برای طراحانی که در زمینه‌های دیگر تجربه دارند. همچنین، احتمال بروز این مشکل برابر است، چه وب‌سایت‌هایی که کد را به صورت دستی می‌نویسند و چه وب‌سایت‌هایی که از ابزارهای ویرایش واضح، مانند Dreamweaver و GoLive، برای ایجاد آن‌ها استفاده می‌کنند.

این بخش این خطاهای رایج را بررسی می‌کند تا بتوانید آن‌ها را شناسایی و جلوگیری کنید و یاد بگیرید که چگونه آن‌ها را تصحیح کنید. ما به طور دقیق ویژگی شناسه منحصر به فرد (id) را توضیح می‌دهیم و نشان می‌دهیم که چگونه شما می‌توانید XHTML بسیار خلاصه‌ای بنویسید، چه در حال ایجاد یک چیدمان ترکیبی یا یک چیدمان CSS خالص باشید.

آیا هر عنصری باید ساختاری شود؟

همانطور که در بخش قبلی توضیح دادیم، هر عنصری می‌تواند ساختاری شود، CSS می‌تواند یک لیست مرتب یا نامرتب را به یک منوی پیچیده تبدیل کند که دارای دکمه‌های معکوس نیز باشد. محتوای مستند می‌تواند با استفاده از عناصر معمولی تگ‌زده شود، که با استفاده از ویژگی‌های ساختاری خاص نشان‌دهنده نقش معنایی آن‌ها در طراحی وب‌سایت هستند.

ما در سال 2006 نسخه اولیه چینی CodeW3C.com را ایجاد کردیم، ما از CSS برای چیدمان استفاده کردیم و از XHTML برای ساختاردهی مستند استفاده کردیم. هر یک از عناصر در اینجا ساختاری هستند، از عنوان تا لیست‌ها و حتی پاراگراف‌ها. شما می‌توانید در هر صفحه از CodeW3C دکمه‌های اصلی با اثر معکوس و دکمه‌های منوی سطح دوم را ببینید. در زیر کد XHTML این دو کامپوننت آورده شده است:

<div id="header"><h1><a href="/">codew3c آموزش آنلاین</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="آموزش html">آموزش html</a></li>
<li id="x"><a href="/x.asp" title="آموزش XML">آموزش XML</a></li>
<li id="b"><a href="/b.asp" title="بروزر اسکریپت">بروزر اسکریپت</a></li>
<li id="s"><a href="/s.asp" title="اسکریپت‌های سرور">اسکریپت‌های سرور</a></li>
<li id="d"><a href="/d.asp" title="آموزش dot net">آموزش dot net</a></li>
<li id="m"><a href="/m.asp" title="آموزش‌های چندرسانه‌ای">آموزش‌های چندرسانه‌ای</a></li>
<li id="w"><a href="/w.asp" title="راهنمای ساخت وب">راهنمای ساخت وب</a></li>
</ul>
</div>

div، id و دیگر کمک‌کنندگان

اگر به درستی استفاده شود، div می‌تواند یک دستیار عالی برای تگ‌های ساختاری باشد، و id یک ابزار کوچک اما شگفت‌انگیز است که به شما امکان می‌دهد XHTML بسیار خلاصه‌ای بنویسید، از CSS به زیبایی استفاده کنید و رفتارهای پیچیده و دقیق به مستند اضافه کنید.

W3C در مدل ساختار XHTML2 در سند XHTML جدید خود div را به این صورت تعریف کرده است:

عنصر div، با همکاری ویژگی‌های id، class و role، یک مکانیزم عمومی برای افزودن ساختار اضافی به مستند ارائه می‌دهد. این عنصر به هیچ وجه سبک نمایش را بر محتوای خود تعریف نمی‌کند. بنابراین، سازنده می‌تواند این عنصر را با استفاده از فایل‌های استایل، xml:lang و ویژگی‌ها ترکیب کند تا XHTML به نیازها و سلیقه خود تطبیق یابد.

div مخفف division است. division به معنای تقسیم، منطقه، گروه است. به عنوان مثال، وقتی یک سری از لینک‌ها را با هم ترکیب می‌کنید، یک division از مستند ایجاد می‌شود.

مکانیزم عمومی ساختار

هر کسی که HTML می‌نویسد با عناصر رایج مانند پاراگراف و عنوان آشنا است، اما ممکن است با div آشنا نباشند. در توضیحات W3C می‌توانید کلید درک عنصر div را پیدا کنید، "یک مکانیزم عمومی برای افزودن ساختار."

در صفحه اصلی این وب‌سایت، فهرست آموزش‌ها در یک div محبوس شده است، زیرا فهرست آموزش‌ها بخشی از هیچ یک از عناصر متن نیست. در اینجا، عناصر h2 عنوان هر آموزش را نشان می‌دهند و عناصر لیست ul جزئیات هر آموزش را نشان می‌دهند. اما در معنای بزرگتر و دقیق‌تر، این فهرست آموزشی نقش یک ساختار را ایفا می‌کند، یعنی یک عنصر هدایت ثانویه. برای تاکید بر این نقش، از id navsecond برای این div استفاده می‌کنیم.

<div id="navsecond">
<h2>آموزش HTML</h2>
<ul>
<li><a href="/html/index.asp" title="آموزش HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="آموزش XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="آموزش CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="آموزش TCP/IP">TCP/IP</a></li>
</ul>
<h2>آموزش XML</h2>
<ul>
<li><a href="/xml/index.asp" title="آموزش XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="زبان‌های XSL">XSL</a></li>
... ...
... ...
</div>

شما می‌توانید از هر نامی استفاده کنید. "Gladys" و "orangebox" کاملاً با قوانین نام‌گذاری XHTML سازگار هستند. اما نام‌گذاری معنایی (semantic) یا ساختاری (meta-structural) بهترین است (یعنی نام‌هایی که عملکرد عناصر درون آن‌ها را توضیح می‌دهند).

وقتی مشتری تصمیم می‌گیرد از رنگ آبی استفاده کند، احساس می‌کنید که نام

بنابراین، قرار دادن id به عنوان "menu"، "content" یا "searchform" به شما

id در برابر class

خصوصیت id برای XHTML تازه نیست؛ خصیصه class یا عنصر div نیز همینطور. آن‌ها

<div id="searchform">عناصر فرم جستجو اینجا می‌روند. این
بخش صفح است منحصر به فرد است.</div>
<div class="blogentry">
   <h2>نوشته وبلاگ امروز</h2>
   <p>محتوای وبلاگ اینجا می‌رود.</p>
   <p>اینجا یک پاراگراف دیگر از محتوای وبلاگ است.</p>
   <p>همانطور که می‌تواند بسیاری از پاراگراف‌ها در یک صفحه باشد، به همین
   می‌تواند ورودی‌های بسیاری در یک وبلاگ باشد. یک صفحه وبلاگ می‌تواند
   مثال‌های چندگانه از کلاس "blogentry" (یا هر کدام از
   class).</p>
</div>
<div class="blogentry">
   <h2>مقاله وبلاگ دیروز</h2>
   در واقع، ما در داخل div دیگری با کلاس
   "blogentry."
   آن‌ها مانند خرگوش‌ها تولید می‌شوند.
   اگر در این صفحه 10 مقاله وبلاگ وجود داشته باشد، ممکن است
   همینطور 10 div با کلاس "blogentry".
</div>

در این مثال، div به نام searchform برای بسته‌بندی منطقه‌ای که شامل فرم جستجو است، استفاده می‌شود، و div class="blogentry" برای بسته‌بندی هر ورودی مقاله در وبلاگ استفاده می‌شود. در صفحه فقط یک فرم جستجو وجود دارد، بنابراین ما از id برای برجسته‌سازی این عنصر منحصر به فرد استفاده می‌کنیم. اما وبلاگ‌ها دارای چندین ورودی (مقاله) هستند، بنابراین از ویژگی class در این شرایط استفاده می‌شود. همچنین، وبلاگ‌های خبری معمولاً دارای چندین div هستند که کلاس‌های آن‌ها می‌توانند "newsitem" یا هر چیز دیگری باشند.

اما همه وب‌سایت‌ها نیاز به div ندارند. وبلاگ‌ها می‌توانند فقط از عناوین h1، H2 و H2 و پاراگراف‌های <p> استفاده کنند، وبلاگ‌های خبری هم همینطور. ما در اینجا از div با کلاس blogentry استفاده می‌کنیم، نه این که بخواهیم شما div‌ها را در وب‌سایت خود پر کنید، بلکه فقط برای نشان دادن این اصل است: در یک مستند HTML، کلاس‌ها می‌توانند چندین بار استفاده شوند، اما id فقط می‌تواند یک بار استفاده شود.

مطالعه چسباننده‌های چسبناک

فکر کردن به ویژگی id به عنوان چسباننده‌های چسبناک می‌تواند کمک کند. من یک برچسب چسبناک روی یخچال می‌زنم تا به خودم یادآوری کنم که شیرینی بخرم، روی تلفن هم یک برچسب چسبناک می‌زنم تا به خودم یادآوری کنم که به یک مشتری که به تعهد خود عمل نکرده است، زنگ بزنم. و یکی دیگر، روی جلد دفترچه حساب‌ها، تا به من یادآوری کند که باید تا 15 روز این ماه حساب‌ها را پرداخت کنم.

id می‌تواند مناطق خاصی از مستند را برجسته کند، تا به شما یادآوری کند که کدام مناطق نیاز به پردازش خاص دارند، در این زمینه، ویژگی id مشابه چسباننده‌های چسبناک است. برای دستیابی به پردازش خاصی که به آن اشاره می‌شود، باید از این id خاص در جدول استایل استفاده کنید و چندین قاعده بنویسید، یا چند خط کد به فایل JavaScript اضافه کنید. به عنوان مثال، ممکن است در فایل CSS خود چندین قاعده خاص داشته باشید که فقط به عناصر داخل div به نام searchform اعمال می‌شوند.

وقتی یک خاصیت id به عنوان یک شیء خاص‌کننده (مثل آهنربا) برای یک مجموعه خاص از قوانین CSS استفاده می‌شود، آن را انتخاب‌کننده CSS می‌نامند. تعداد زیادی ازایجاد انتخاب‌کننده‌هاروش‌ها، اما id به راحتی قابل استفاده است و کاربردهای زیادی دارد.

قدرت id

نوع id به طور باورنکردنی قدرتمند است. دارای قابلیت‌های زیر است:

  • به عنوان یک انتخاب‌کننده پوسته، ما را قادر می‌سازد تا XHTML مینیاتوری و ساده‌سازی شده ایجاد کنیم.
  • به عنوان هدف یک ابر‌تصویر هیدروژنی، جایگزین برای خاصیت قدیمی name.
  • به عنوان روشی برای قرار دادن عناصر خاص از کد DOM.
  • به عنوان نام یک عنصر جعبه‌ای.
  • به عنوان ابزار پردازش عمومی (general purpose processing) (در مثال‌های W3C، "وقتی داده‌ها از صفحه HTML به پایگاه داده‌ها منتقل می‌شوند، یا مستند HTML به فرمت‌های دیگر تبدیل می‌شوند و غیره، به عنوان ابزار شناسایی حوزه استفاده می‌شود.").

قوانین id

مقدار id باید با حرف یا خط تیره شروع شود؛ نمی‌توان با عدد شروع کرد. اگرچه ویرایشگرهای W3C این خطا را قابلیت‌سنجی نمی‌کنند، اما پردازش‌کنندگان XML آن را می‌کنند. همچنین، اگر از id در فرم‌های JavaScript استفاده کنید، نام و مقدار id باید متغیرهای JavaScript قانونی باشند. فضاهای خالی و خطوط مایل، به ویژه خطوط مایل، ممنوع هستند. علاوه بر این، استفاده از خط تیره در نام class یا id نیز اصلاً خوب نیست، زیرا این محدودیت‌ها در CSS2.0 (و برخی مرورگرها) وجود دارد.

تگ‌های معنایی و دسترسی‌پذیری

حالا، ما عنصرهای XHTML عمومی استفاده شده (به ویژه div و id) را بحث کرده‌ایم، بیایید به مثال‌های مربوط به صفحه اصلی این وب‌سایت نگاه کنیم. ابتدا بیایید به این منوی قرار گرفته در سربرگ برگردیم:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="آموزش html">آموزش html</a></li>
<li id="x"><a href="/x.asp" title="آموزش XML">آموزش XML</a></li>
<li id="b"><a href="/b.asp" title="بروزر اسکریپت">بروزر اسکریپت</a></li>
<li id="s"><a href="/s.asp" title="اسکریپت‌های سرور">اسکریپت‌های سرور</a></li>
<li id="d"><a href="/d.asp" title="آموزش dot net">آموزش dot net</a></li>
<li id="m"><a href="/m.asp" title="آموزش‌های چندرسانه‌ای">آموزش‌های چندرسانه‌ای</a></li>
<li id="w"><a href="/w.asp" title="راهنمای ساخت وب">راهنمای ساخت وب</a></li>
</ul>
</div>

ما هفت لینک داریم که هر کدام یک شناسهid برای محتوای مربوطه دارند: به عنوان مثال، شناسه h برای آموزش HTML، و به همین ترتیب. این لینک‌ها در یک عناصر لیست به نام menu بسته شده‌اند، شناسه menu نشان‌دهنده وظیفه این لیست است - یک لیست منو، و div بیرونی به نام navfirst برای مشخص کردن این بخش (section) در صفحه استفاده می‌شود، تا آن را از عناصر دیگری مانند محتوای اصلی (maincontent)، ستون کناری (sidebar) و پاورقی (footer) جدا کند.

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

لطفاً توجه داشته باشید که این علامت‌ها شامل تگ img نیستند، بنابراین به width، height، background یا border و غیره مرتبط نمی‌شوند. همچنین از سلول‌های جدول استفاده نمی‌کنند و به مجموعه‌ای از ویژگی‌های مرتبط با آن‌ها مرتبط نمی‌شوند. آن‌ها بسیار ساده و کوچک هستند و تمامی اطلاعات مورد نیاز برای درک آن‌ها را ارائه می‌دهند.

با همکاری CSS، این علامت‌ها به بازدیدکنندگان وب‌سایت ارائه‌دهنده یک طرح قابل اعتماد و قابل بارگذاری سریع هستند. همچنین، امکان ایجاد ظاهری متنوع و انعطاف‌پذیر برای بازدیدکنندگان را فراهم می‌کنند. و در محیط‌های بدون CSS، علامت‌های ساختاربندی خوب ما همچنان می‌توانند بدون هرج و مرج تمامی محتوا را ارائه دهند.

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

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