قالب بندی متون در HTML
آخرین بروزرسانی: 24 شهریور 1400
عناصر قالب بندی متون در HTML | تگ‌های مهم Formatting
عناصر زیادی در HTML برای قالب بندی متون وجود دارند که تا این درس شما تنها با عنصر p آشنا شدید که کارش ایجاد یک پاراگراف است.
اصلا قالب بندی متون یعنی چه؟ فرض کنید می‌خواهید یک عبارت ریاضی در صفحه وب خود بنویسید که باید از توان در آن استفاده کنید. چگونه باید اینکار را انجام داد؟ با استفاده از عناصر قالب بندی متون.
همانطور که گفتیم عناصر زیادی برای قالب‌بندی متون وجود دارند که ما در این آموزش کاربردی‌ترین آنها را معرفی خواهیم کرد.
عناصر <b> و <strong> در HTML
فهرست عناوین
عنصر <b> متن درونش را بصورت ضخیم نمایش می‌دهد.
عنصر <strong> هم متن درونش را بصورت ضخیم نمایش می‌دهد. علاوه بر این، عبارتی که درون این عنصر نوشته می‌شود، از اهمیت بالاتری نسبت به متون اطراف برخوردار است.
|
1 2 |
<br /><br /> <strong>This text is strong</strong> |
نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <strong> اهمیت بیشتری می‌دهند.
با توجه به نکته بالا، هرجا می‌خواهید کلمات کلیدی خود را بصورت ضخیم نمایش دهید از عنصر <strong> و هرگاه می‌خواهید یک عبارت معمولی را بصورت ضخیم نمایش دهید از عنصر <b> استفاده کنید.
عناصر <i> و <em> در HTML
عنصر <i> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد.
|
1 2 |
<br /><br /><br /><br /> <i>This text is italic</i> |
عنصر <em> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد و حالت تاکید شده (Emphasized) به آن می‌دهد.
|
1 2 |
<br /><br /><br /><br /> <em>This text is emphasized</em> |
نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <em> اهمیت بیشتری می‌دهند.
مقاله های پیشنهادی:
عنصر <mark> در HTML
عنصر <mark> عبارت درونش را بصورت هایلایت شده نمایش می‌دهد.
|
1 2 |
<br /><br /><br /><br /> <h2>HTML <mark>Marked</mark> Formatting</h2> |
عنصر <del> در HTML
عنصر <del> یک عبارت حذف شده را تعیین می‌کند. در خروجی یک خط روی عبارتی که درون این عنصر نوشته شود کشیده می‌شود.
|
1 2 |
<br /><br /><br /><br /> <p>My favorite color is <del>blue</del> red.</p> |
عنصر <sub> در HTML
عنصر <sub> یک متن زیر‌نویس (Subscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی پایین‌تر از سایر متون نمایش داده می‌شود.
|
1 2 |
<br /><br /><br /><br /> <p>This is <sub>subscripted</sub> text.</p> |
عنصر <sup> در HTML
عنصر <sup> یک متن بالانویس (Superscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی بالا‌تر از سایر متون نمایش داده می‌شود.
|
1 2 |
<br /><br /><br /><br /> <p>This is <sup>superscripted</sup> text.</p> |
خروجی ۲ کد ابتدایی در همان بخش مشخص شده اما برای مشاهده‌ی خروجی ۴ کد بالا به تصویر زیر توجه کنید:
مطالب زیر را حتما مطالعه کنید
معرفی سايت های برتر برای فتوشاپ آنلاين
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
افزایش سرعت گوگل کروم
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
دیدگاهتان را بنویسید