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

عناصر زیادی در HTML برای قالب بندی متون وجود دارند که تا این درس شما تنها با عنصر p آشنا شدید که کارش ایجاد یک پاراگراف است.

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

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

عناصر <b> و <strong> در HTML

عنصر <b> متن درونش را بصورت ضخیم نمایش می‌دهد.

<b>This text is bold</b>

عنصر <strong> هم متن درونش را بصورت ضخیم نمایش می‌دهد. علاوه بر این، عبارتی که درون این عنصر نوشته می‌شود، از اهمیت بالاتری نسبت به متون اطراف برخوردار است.

<strong>This text is strong</strong>

نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <strong> اهمیت بیشتری می‌دهند.

با توجه به نکته بالا، هرجا می‌خواهید کلمات کلیدی خود را بصورت ضخیم نمایش دهید از عنصر <strong> و هرگاه می‌خواهید یک عبارت معمولی را بصورت ضخیم نمایش دهید از عنصر <b> استفاده کنید.

عناصر <i> و <em> در HTML

عنصر <i> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد.

<i>This text is italic</i>

عنصر <em> عبارت درونش را بصورت کج (Italic) نمایش می‌دهد و حالت تاکید شده (Emphasized) به آن می‌دهد.

<em>This text is emphasized</em>

نکته: خروجی این دو عنصر باهم هیچ تفاوتی ندارند. تفاوت آنها در میزان اهمیت عبارت درون آنهاست. موتورهای جستجو به عبارت درون عنصر <em> اهمیت بیشتری می‌دهند.

عنصر <mark> در HTML

عنصر <mark> عبارت درونش را بصورت هایلایت شده نمایش می‌دهد.

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

عنصر <del> در HTML

عنصر <del> یک عبارت حذف شده را تعیین می‌کند. در خروجی یک خط روی عبارتی که درون این عنصر نوشته شود کشیده می‌شود.

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

عنصر <sub> در HTML

عنصر <sub> یک متن زیر‌نویس (Subscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی پایین‌تر از سایر متون نمایش داده می‌شود.

<p>This is <sub>subscripted</sub> text.</p>

عنصر <sup> در HTML

عنصر <sup> یک متن بالانویس (Superscripted) تعریف می‌کند. عبارتی که درون این عنصر نوشته شود کمی بالا‌تر از سایر متون نمایش داده می‌شود.

<p>This is <sup>superscripted</sup> text.</p>

خروجی ۲ کد ابتدایی در همان بخش مشخص شده اما برای مشاهده‌ی خروجی ۴ کد بالا به تصویر زیر توجه کنید: