قالببندی متن HTML
قبلاً با ویژگی style ظاهر متن را عوض کردید. تگهای قالببندی سؤال دیگری را جواب میدهند: این تکه متن چه معنایی دارد؟ هشدار مهم، تأکید گفتاری، هایلایت، ویرایش، نوشتهٔ ریز و اندیسهایی مثل H₂O در عنصرهای اختصاصی HTML جا میگیرند. مرورگر اغلب آنها را بهصورت پیشفرض ضخیم یا کج نشان میدهد، ولی ابزار کمکی و جستوجو هم میتوانند از معنا استفاده کنند — چیزی که فقط رنگ فراهم نمیکند.
قالببندی متن HTML چیست؟
عنصرهای قالببندی متن، یک واژه یا عبارت را داخل پاراگراف (یا متن مشابه) میپوشانند تا نقشش مشخص شود: اهمیت، تأکید، هایلایت، حذف، درج و بیشتر. اینها عنصرهای درونخطیاند. مثل p یا h1 بلوک جدید شروع نمیکنند. دور همان بازهای که آن نقش را دارد میگذاریدشان و میبندید تا بقیهٔ جمله عادی بماند.
پاسخ مستقیم
برای معنا از تگهای معنایی استفاده کنید: strong برای اهمیت قوی، em برای تأکید فشاری (مثل وقتی موقع حرف زدن روی واژه فشار میآورید)، mark برای هایلایت مرتبط، small برای نوشتهٔ ریز یا توضیح فرعی، del و ins برای متن حذفشده یا اضافهشده، و sub / sup برای زیرنویس و بالانویس. وقتی معنا مهم است این تگها را ترجیح دهید. وقتی فقط ظاهر ضخیم یا کج میخواهید بدون معنای اضافه، از CSS استفاده کنید — از جمله ایدههای style جلسهٔ قبل — نه اینکه strong یا em را بد به کار ببرید.
مرجع تگها در یک نگاه
📊 تگهای رایج قالببندی
| تگ | معنای رایج | ظاهر پیشفرض (اغلب) |
|---|---|---|
| strong | اهمیت قوی | ضخیم |
| em | تأکید / فشار گفتاری | کج |
| mark | هایلایت / مرتبط | پسزمینهٔ زردمانند |
| small | توضیح فرعی / نوشتهٔ ریز | متن کوچکتر |
| del | متن حذفشده | خطخورده |
| ins | متن اضافهشده | زیرخط |
| sub | زیرنویس | متن پایینتر و کوچکتر |
| sup | بالانویس | متن بالاتر و کوچکتر |
اول strong و em
strong و em جفتی هستند که بیشتر به کارتان میآید. وقتی محتوا مهم است سراغ strong بروید — اصطلاح کلیدی، هشدار، برچسب فیلد لازم در متن. وقتی موقع حرف زدن روی واژه فشار میآورید سراغ em بروید. ضخیم و کجِ پیشفرض فقط نمایش رایجاند؛ اگر stylesheet بعداً ظاهر را عوض کند، تگها همچنان معنا دارند.
اهمیت و تأکید
html<p>
The <strong>final price</strong> includes tax.
Please read the refund rules <em>before</em> you pay.
</p>خواندن نمونه
strongدور «final price» است چون آن عبارت در جمله مهم استemدور «before» است چون زمان، ایدهٔ تأکیدشده است- هر دو داخل یک پاراگرافاند؛ جایگزین
pنیستند - اگر فقط متن سرمهای بدون معنای اهمیت میخواستید،
style(یا بعداً CSS) ابزار بهتر بود
چند تگ قالببندی در یک پاراگراف
وقتی strong و em جا افتاد، کمکهای هایلایت، ویرایش، نوشتهٔ ریز و اندیس را اضافه کنید. تودرتویی را کم نگه دارید: فقط دور واژههایی بپیچید که آن نقش را دارند.
چند تگ قالببندی با هم
html<p>
Water is H<sub>2</sub>O. The safety note is <strong>important</strong>.
Please read this <em>carefully</em>.
The deadline moved from <del>Friday</del> to <ins>Monday</ins>.
Note: <small>prices may change</small>.
Search hit: <mark>HTML</mark> formatting.
Area: 12<sup>2</sup> square meters.
</p>هر کمک چه میکند
subعدد «۲» فرمول آب را پایین میبرد؛supتوان در ۱۲² را بالا میبردdelوinsرد ویرایش را نشان میدهند — مقدار قدیمی بیرون، جدید داخلsmallنوشتهٔ ریز فرعی را علامت میزند، نه ادعای اصلیmarkبرخورد مرتبط را هایلایت میکند، شبیه هایلایت جستوجوstrongوemهنوز اهمیت و تأکید را داخل همان پاراگراف علامت میزنند
لازم نیست هر جمله همهٔ تگها را داشته باشد. همانهایی را بردارید که با معنای واقعی متن جورند.
تگ معنا در برابر استایل فقطظاهر
صفحههای قدیمی گاهی b و i را برای ضخیم و کج بدون معنای قوی به کار میبرند. در این کورس وقتی محتوا مهم است strong و وقتی موقع حرف زدن روی واژه فشار میآورید em را ترجیح دهید. وقتی فقط ظاهر میخواهید از CSS استفاده کنید. این عادت HTML را صادق نگه میدارد: تگ قالببندی محتوا را توصیف میکند و stylesheet ظاهر را.
تمرین در ویرایشگر
- یک پاراگراف عادی دربارهٔ قیمت محصول بنویسید.
- نام محصول را در
strongبپیچید. - یک واژهٔ هشدار را در
emبپیچید. - قیمت قدیمی را با
delو قیمت جدید را باinsعلامت بزنید. - اختیاری: با
smallیادداشت ریز، یا باsub/supتکهای از فرمول اضافه کنید. - ذخیره کنید و صفحه را باز کنید. تأیید کنید تگها بسته شدهاند و معنا واضح است.
- عمداً یک تگ پایانی را جا بگذارید، تازه کنید، ببینید بقیهٔ خط چطور استایل میماند، بعد درستش کنید.
دیدن نشت استایل از تگ بازِ بستهنشده، تودرتویی را سریعتر از کپی نمونههای بینقص یاد میدهد.
اشتباهاتی که قالببندی را ضعیف میکنند
- فقط
style="font-weight: bold"وقتی واژه واقعاً مهم است — برای معناstrongرا ترجیح دهید - همهجا
strongفقط برای کلفتتر شدن متن — اهمیت را رقیق میکند - پنج تگ قالببندی تودرتو بدون دلیل
sup/subبرای تزئین بهجای اندیس واقعی (ریاضی، شیمی، پاورقی)- فراموش کردن تگ پایانی تا بقیهٔ صفحه ضخیم، کج یا هایلایت بماند
- استفاده از
markمثل رنگ زرد عمومی برای کل پاراگرافهای نامرتبط
خلاصه
- تگهای قالببندی داخل متن معنا میگذارند، نه فقط تزئین
- با
strongوemشروع کنید؛ بعد در صورت نیازmark،small،del،ins،subوsupرا اضافه کنید - وقتی اهمیت، تأکید، ویرایش یا اندیس مهم است تگ معنایی را ترجیح دهید
- وقتی فقط ظاهر میخواهید بدون معنای اضافه از CSS استفاده کنید
- تودرتویی را ساده نگه دارید و هر تگ باز را ببندید
- تگ را از معنای جمله انتخاب کنید، نه از عادت ضخیمکردن همهچیز
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود