قالب بندی و فرمت بندی متون در HTML

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

قالب متنی

در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!

 متون را bold (پررنگ) می کند.
 نشان دهنده ی یک متن مهم است.
 متون را italic (مورب) می کند.
 بر متن تاکید می کند.
 متن را علامت گذاری می کند.
 متن را کوچک می کند.
<del> نشان دهنده ی متن حذف شده است.
<ins> نشان دهنده ی متن اضافه شده است.
 نشان دهنده ی متن زیروند است.
 نشان دهنده ی متن بالاوند است.

سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟

پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.

تگ های و

حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که  تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

مشاهده ی خروجی در JSBin

اما تگ  علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is strong.</strong></p>

</body>
</html>

مشاهده ی خروجی در JSBin

تگ های و

دقیقا مانند تفاوت تگ های قبلی، تگ  در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهم به طور خلاصه بگویم:

مرورگرها تگ های  و  و تگ های  و  را به یک شکل نمایش می دهند اما تگ های  و  تنها کارکرد نمایشی دارند در حالی که  و  به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.

تگ

تگ  متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>Small</small> Formatting</h2>
  
<p>This is a paragraph and <small>smaller text goes here</small></p>

</body>
</html>

مشاهده ی خروجی در JSBin

تگ

تگ  در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:

<!DOCTYPE html>
<html>
<body>

<h2>HTML <mark>Marked</mark> Formatting</h2>

</body>
</html>

مشاهده ی خروجی در JSBin

تگ های <del>

در ابتدای مقاله در مورد تگ <del> به طور خلاصه نوشتم «نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del> استفاده می کنیم.

سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟

پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del> استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تگ <ins>

تگ <ins> نشان دهنده ی متن اضافه شده است. این یعنی چه؟

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

مثال:

<!DOCTYPE html>
<html>
<body>

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تگ

تگ  در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co₂) به کربن مونو اکسید (co) را نشان می دهد:

CO₂ + 2 e⁻ + 2H⁺ → CO + H₂O

می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!

تگ

تگ  دقیقا بر خلاف تگ  عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با «هم ارزی جرم و انرژی» بنویسیم:

E=mc²

می بینید که برای اضافه کردن توان 2 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.

امیدوارم از این قسمت لذت برده باشید.