ساختاربندی XHTML بخشی از ساختاربندی: استفاده از XHTML برای بازسازی وب‌سایت

یکی از عنوان‌هایی که برای این بخش نوشته‌ایم: “XHTML: قوانین ساده، خطوط راهنما آسان” دلیل یکی از این دلایل این است که قوانین و خطوط راهنمای مورد بحث ساده و آسان هستند. دلیل دیگر این است که یک کتاب طراحی وب ساده و آسان، مانند کالاها رایگان جدید سوپرمارکت، اگرچه معمولی است اما می‌تواند به طور مؤثری توجه افراد را جلب کند، و این چیزها می‌توانند انگیزه ایجاد کنند و مردم را تشویق به تلاش کنند.

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

از سوی دیگر، بازسازی واقعی معنای XHTML است.

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

مختصری از قوانین XHTML

تبدیل HTML سنتی به XHTML 1.0 سریع و بدون دردسر است، به شرطی که شما از چند قانون ساده و خطوط راهنما پیروی کنید. مهم نیست که آیا قبلاً از HTML استفاده کرده‌اید یا خیر، این کار شما را از استفاده از XHTML باز نمی‌دارد.

  • از تعریف نوع مستند مناسب و نام فضای آن استفاده کنید.
  • از عنصر meta برای اعلان نوع محتوای خود استفاده کنید.
  • تمام عناصر و ویژگی‌ها را با حروف کوچک بنویسید.
  • برای مقادیر تمام ویژگی‌ها نقل قول استفاده کنید.
  • برای تمام ویژگی‌ها مقادیر اختصاص دهید.
  • تمام برچسب‌ها را ببندید.
  • برای بستن برچسب‌های خالی از فضاهای خالی و خط‌های مایل به بالا استفاده کنید.
  • نویسیدن دو خط زیرین در توضیحات را اجتناب کنید.
  • مطمئن شوید که کمتر از علامت و و علامت و به ترتیب < و & هستند

Unicode و سایر مجموعه‌های کاراکتر

مستندات XML، XHTML و HTML 4.0 از مجموعه‌ای از کاراکترهای Unicode به عنوان مجموعه‌ی پیش‌فرض استفاده می‌کنند، یک استاندارد که توسط اتحادیه Unicode تعریف شده است. Unicode یک مجموعه‌ی کامل از کاراکترها است که به هر کاراکتر یک شماره‌ی خاص و منحصر به فرد اختصاص می‌دهد، بدون توجه به پلتفرم، برنامه و زبان. Unicode نیز نزدیک‌ترین چیز به یک الفبای عمومی است، اگرچه یک الفبای نیست بلکه یک روش نقشه‌برداری از شماره‌ها به کاراکترهاست.

با اینکه Unicode به عنوان مجموعه‌ای از کاراکترهای پیش‌فرض در مستندات وب استفاده می‌شود، توسعه‌دهندگان همچنان می‌توانند مجموعه‌های کاراکترهای دیگر که برای آن‌ها مناسب‌تر است را انتخاب کنند. به عنوان مثال، وب‌سایت‌های آمریکایی و اروپای غربی اغلب از کدگذاری ISO-8859-1 (Latin-1) استفاده می‌کنند، در حالی که استاندارد ملی چین gb2312 است.

مستندات را برای نشان دادن معنای آن‌ها برچسب‌گذاری کنید، نه برای نمایش استایل

به یاد داشته باشید: از CSS به حداکثر برای طراحی استفاده کنید. در دنیای استانداردهای وب، برچسب‌های XHTML با عملکرد هیچ ارتباطی ندارند، بلکه فقط با ساختار مستندات سروکار دارند.

مستندات ساختاری خوب می‌توانند به مرورگرها بیشترین معنایی را انتقال دهند، خواه مرورگر در یک دستگاه موبایل قرار دارد یا یک مرورگر گرافیکی مدرن روی یک دسکتاپ. مستندات ساختاری خوب همیشه می‌توانند معنای بصری به کاربران انتقال دهند، حتی در مرورگرهای قدیمی یا در مرورگرهای مدرن که کاربر CSS را غیرفعال کرده است.

هر وب‌سایتی نمی‌تواند بلافاصله از ساختارهای جدول HTML صرف نظر کند. مخترع CSS، W3C، تا نوامبر 2002 وب‌سایت رسمی خود را به ساختارهای CSS تبدیل کرد. اما حتی استانداردگرایان سرسخت هم همیشه نمیتوانند عملکرد را از ساختار کاملاً جدا کنند، حداقل در XHTML 1 این امکان وجود نداشت. اما اکنون، می‌توانیم با جدا کردن عملکرد از ساختار (یا داده‌ها از طراحی)، حتی طرح‌های سنتی ترکیبی نیز از آن بهره‌مند شوند.

در اینجا چند نکته وجود دارد که می‌تواند به شما کمک کند تا به روشی ساختاری‌تر فکر کنید:

رنگ‌های درون نقشه‌برداری

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

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

وقتی شما متنی را برای استفاده در شبکه برچسب‌گذاری می‌کنید یا وقتی شما یک فایل متنی موجود را به وب‌سایت تبدیل می‌کنید، لطفاً از این ورودی‌های سنتی نقشه‌برداری سنتی فکر کنید.

<h1>موضوع من</h1>
<p>متن معرفی‌کننده</p>
<h2>نظرات تکمیلی</h2>
<p>متن مرتبط</p>

همچنین، از استفاده از عناصر HTML قدیمی مانند <font> یا عناصر غیرمعنایی مانند <br /> برای شبیه‌سازی ساختارهای واقعی خودداری کنید.

مثلاً، این‌گونه نباشید:

<font size="7">موضوع من</font><br />
متن معرفی‌کننده<br /><br />
<font size="6">نظرات تکمیلی</font><br />
متن مرتبط<br />

عناصر را بر اساس معنای آن‌ها استفاده کنید، نه بر اساس ظاهر آن‌ها

بعضی از ما در یک عادت بد گیر کرده‌ایم، وقتی که تنها به یک متن بزرگ نیاز داریم از h1 استفاده می‌کنیم، یا وقتی که نیاز به یک علامت نقطه دار در ابتدای آن داریم از li استفاده می‌کنیم. مانند آنچه که در فصل قبلی بحث کردیم، مرورگرها همیشه عادت دارند که ویژگی‌های طراحی را بر روی عناصر HTML اعمال کنند. ما همیشه عادت داریم که فکر کنیم h1 به معنای یک فونت بزرگ است، li به معنای نقطه است، یا blockquote به معنای جابجایی متن است. بیشتر ما همچنان از عناصر ساختاری برای شبیه‌سازی ویژگی‌های نمایشی به صورت نامناسب HTML می‌نویسیم.

به طور مشابه، اگر طراح بخواهد که تمامی عنوان‌ها از یک اندازه مشابه استفاده شوند، تمامی عنوان‌ها را به h1 تبدیل خواهد کرد، حتی اگر این کار هیچ معنای ساختاری ندارد.

<h1>این یک عنوان اصلی است، در صورتی که من متن را به صورت ساختار پوستی سازماندهی کنم.</h1>
<h1>این یک عنوان اصلی نیست، اما من امیدوارم که با عنوان بالا از یک فونت مشابه استفاده شود، اما نمی‌دانم چگونه از CSS استفاده کنم.</h1>
<h1>این اصلاً یک عنوان نیست. اما من بسیار امیدوارم که متن‌های صفحه با یک فونت مشابه استفاده شوند تا به آنچه که می‌خواهم، برسم.
اگر من CSS را می‌دانستم، می‌توانستم بدون مخدوش کردن ساختار مستند به این طراحی برسم.</h1>

ما باید شعبده‌های کوچک خود را کنار بگذاریم و شروع به استفاده از آن‌ها بر اساس معنای عناصر کنیم، نه بر اساس ظاهر آن‌ها. در واقع، h1 می‌تواند به هر شکلی که می‌خواهید باشد. با استفاده از CSS، h1 می‌تواند به یک فونت رومی کوچک و غیرخشک تبدیل شود، در حالی که متن p می‌تواند به یک فونت بزرگ و تیره تبدیل شود، li نیز می‌تواند بدون نقطه باشد (شما می‌توانید از تصاویر PNG، GIF یا JPEG کوچک گربه، سگ یا لوگوی شرکت به جای آن استفاده کنید).

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

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

چرا باید این کار را انجام دهید؟ هدف این است که در مرورگرهای تصویری ظاهر و احساس برند را داشته باشید، در حالی که در مرورگرهای متن، دستگاه‌های بی‌سیم و ایمیل‌های HTML، ساختار مستند حفظ شود.

ما نمی‌خواهیم در فصل مربوط به XHTML بیشتر در مورد CSS صحبت کنیم. ما فقط می‌خواهیم نشان دهیم که ساختار مستند و نمایش قابل مشاهده دو چیز کاملاً متفاوت هستند و عناصر ساختاری باید برای تبدیل متن استفاده شوند، نه برای اعمال نمایش.

از عناصر ساختاری استفاده کنید، نه زباله‌های بی‌معنا

به دلیل اینکه ما فراموش کرده‌ایم یا اصلاً نمی‌دانیم که استفاده از HTML و XHTML برای انتقال معانی ساختاری است، بسیاری از بحث‌کنندگان HTML از این برچسب‌ها برای وارد کردن لیست‌ها استفاده می‌کنند:

پروژه اول<br />
پروژه دوم<br />
پروژه سوم<br />

در نظر بگیرید که از لیست‌های مرتب یا نامرتب به جای آن استفاده کنید:

<ul>
<li>پروژه اول</li>
<li>پروژه دوم</li>
<li>پروژه سوم</li>
</ul>

"اما li یک نقطه به من می‌دهد، و من نقطه نمی‌خواهم!" ممکن است بگویید. بر اساس فصل بالا، CSS هیچ فرضی در مورد ظاهر مورد انتظار عناصر نمی‌گذارد. آن منتظر است که شما به آن بگویید که انتظار دارید عناصر چه ظاهری داشته باشند. بستن نقطه یکی از ابتدایی‌ترین توانایی‌های CSS است. آن توانایی دارد تا لیست‌ها را به نظر برساند که با متن عادی هیچ فرقی ندارند، و همچنین می‌تواند لیست‌ها را به نظر برساند که مانند ناوبری تصویری با تمامی اثرات معکوس دارند.

بنابراین، از عناصر لیست برای برچسب‌گذاری لیست‌ها استفاده کنید. به طور مشابه، از strong به جای b و از em به جای i استفاده کنید و غیره. در حالت پیش‌فرض اکثر مرورگرهای دسکتاپ، نمایش strong با b و em با i مشابه است، و شما می‌توانید بدون خراب کردن ساختار مستند، نمایش تصویری که انتظار دارید ایجاد کنید.

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

strong {
	font-weight: bold;
	font-style: normal;
	{}

عناصر بصری و ساختاری

استانداردهای وب نه تنها درخواست می‌کند که از چه فناوری‌هایی استفاده کنیم، بلکه همچنین باید از روش‌های استفاده از این فناوری‌ها پیروی کنیم. استفاده از XHTML برای نوشتن برچسب‌ها و استفاده از CSS برای پردازش بخشی یا تمامی طرح‌بندی‌ها، لزوماً نمی‌تواند وب‌سایت را قابل استفاده‌تر و سبک‌تر کند و همچنین می‌تواند باندwidth را تا چه حدی صرفه‌جویی کند. مانند فناوری‌هایی که در ابتدای استفاده می‌کردیم، XHTML و CSS نیز می‌توانند به اشتباه و به صورت نادرست استفاده شوند. XHTML طولانی و HTML طولانی مانند یکدیگر، باندwidth کاربران و زمان را هدر می‌دهند. CSS طولانی نیز نمی‌تواند کاملاً جایگزین کد HTML نمایشی شود؛ این تنها جایگزینی است که یک چیز بد جایگزین چیز دیگری شده است.