آموزش تگ های قالب بندی در HTML

در این مقاله از آموزشگاه طراحی سایت پرتو به‌ صورت کامل و کاربردی با تگ‌های قالب‌بندی متن در HTML آشنا می‌شوید؛ تگ‌هایی که به شما امکان می‌دهند ظاهر متن، اهمیت آن و نحوه نمایش بخش‌های مختلف متن در صفحات وب را کنترل کنید. این تگ‌ها پایه‌ای‌ترین بخش‌های HTML هستند که در کلاس های طراحی سایت یاد می‌گیرید.

قالب‌بندی متن در HTML چیست؟

قالب‌بندی متن در HTML به معنای استفاده از تگ‌هایی است که ظاهر و ویژگی نمایش متن را تعیین می‌کنند، مثل پررنگ کردن متن، مورب کردن، زیرخط، یا نمایش متن‌های خاص مثل سرآمد (superscript) و زیرآمد (subscript).

این تگ‌ها به دو دسته تقسیم می‌شوند:

• تگ‌های معنایی (Semantic / Logical) – معنا و اهمیت متن را نشان می‌دهند و برای موتورهای جستجو و دسترس‌پذیری مفید هستند.
• تگ‌های ظاهری (Physical) – ظاهر متن را تغییر می‌دهند اما لزوماً معنی آن را تعیین نمی‌کنند.

تگ‌های مهم قالب‌بندی متن در HTML

در ادامه لیست مهم‌ترین تگ‌هایی که در قالب‌بندی متن استفاده می‌شوند را می‌بینید:

 ۱. strong – متن با اهمیت و پررنگ

این تگ متن را پررنگ و برجسته می‌کند و به معنای اهمیت بالای محتوا نیز اشاره دارد (از نظر سئو و دسترس‌پذیری).

بهترین روش برای تأکید معنایی متن در HTML.

 ۲. b – متن پررنگ

این تگ فقط ظاهر متن را پررنگ می‌کند بدون اینکه معنی خاصی منتقل کند.

بیشتر برای ظاهر، بدون معنای معنایی

۳. em – متن تأکید شده (Italic)

این تگ متن را به صورت مورب (Italic) نمایش می‌دهد و نشان‌دهنده تأکید معنایی است.

برای نمایش تأکید معنایی در محتوا مناسب است.

۴. i – متن مورب

این تگ فقط متن را مورب می‌کند ولی اهمیت معنایی را القا نمی‌کند.

کاربرد بیشتر برای سبک نمایشی.

 ۵. mark – متن برجسته

این تگ متن را همانند هایلایت چشم‌گیر می‌کند.

برای جلب توجه کاربر به بخش خاصی از متن کاربرد دارد.

 ۶. small – متن کوچک

این تگ متن را نسبت به بقیه کوچک‌تر نمایش می‌دهد.

برای توضیحات جانبی یا تنظیم اندازه سبک متن.

 ۷. sub – زیرنویس

این تگ برای نمایش متن زیرپاورقی استفاده می‌شود.

برای فرمول‌ها یا اندیس‌های پایین‌رتبه کاربرد دارد.

۸. sup – بالانویس

برای متن‌هایی که باید بالاتر از خط اصلی باشند، مثل توان ریاضی.

مناسب فرمول‌ها و نمایشی‌های علمی.

۹. del – متن حذف‌شده

این تگ متن را با خط میانی نشان می‌دهد که معمولاً معنای حذف یا نامعتبر بودن دارد.

برای نمایش نسخه قبلی یا اصلاحات متن.

۱۰. ins – متن اضافه‌شده

این تگ برای نمایش متن تازه افزوده‌شده به کار می‌رود.

برای نشان‌دادن ویرایش‌های جدید متن.

نکات حرفه‌ای درباره قالب‌بندی متن

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

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

البته لازم است که شما html را به صورت حرفه ای و درجه یک آموزش ببینید که برای این منظور می توانید در مجموعه کلاس های کلاس آموزش طراحی سایت و کلاس آموزش html – css  شرکت نمایید