100% کامل شده تا

قالب‌بندی متن در اچ‌تی‌ام‌ال (HTML Text Formatting)

از موتو کد، دانشنامهٔ برنامه‌نویسی


HTML شامل چندین عنصر، برای تعریف متن با معنای خاصی است.[۱]



Responsive demo.svg

عناصر قالب‌بندی اچ‌تی‌ام‌ال (HTML Formatting Elements)

عناصر قالب‌بندی برای نمایش انواع خاصی از متن طراحی شده‌اند:



عناصر <b> و <strong> در اچ‌تی‌ام‌ال (HTML <b> and <strong> Elements)

عنصر <b> در HTML، متن bold بدون هیچ اهمیت اضافه‌ای را مشخص می‌کند.

مثال

<b>This text is bold</b>

مثال

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Responsive demo.svg


عنصر <strong> (به فارسی: قوی) در HTML متن را با اهمیت زیاد تعریف می‌کند. محتوای نمایش داده‌شده، معمولاً به صورت پررنگ نمایش داده می‌شود.

مثال

<strong>This text is important!</strong>

مثال

<!DOCTYPE html>
<html>
<body>

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

<p><strong>This text is important!</strong></p>

</body>
</html>

Responsive demo.svg


عناصر <i> و <em> در اچ‌تی‌ام‌ال (HTML <i> and <em> Elements)

عنصر <i> در HTML، قسمتی از متن را با صدا یا حالت متناوب تعریف می‌کند. محتوای داخل معمولاً به صورت ایتالیک نمایش داده می‌شود.

نکته: تگ <i> اغلب برای نشان دادن یک اصطلاح فنی، عبارتی از زبان دیگر، اندیشه، نام کشتی و غیره استفاده می‌شود.

مثال

<i>This text is italic</i>

مثال

<!DOCTYPE html>
<html>
<body>

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

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

</body></html>

Responsive demo.svg


عنصر <em> در HTML، متن با حالت تأکید شده را تعریف می‌کند. محتوای داخل آن معمولاً به صورت ایتالیک نمایش داده می‌شود.

نکته: خوانندهٔ صفحه، این گونه کلمات را که محتوای <em> دارند را با تأکید و استفاده از استرس کلامی تلفظ و ادا می‌کند.

مثال

<em>This text is emphasized</em>

مثال

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Responsive demo.svg


عنصر <small> در اچ‌تی‌ام‌ال (HTML <small> Element)

عنصر <small> در HTML، متن کوچکتر را مشخص می‌کند:

مثال

<small>This is some smaller text.</small>

مثال

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

</body>
</html>

Responsive demo.svg


عنصر <mark> در اچ‌تی‌ام‌ال (HTML <mark> Element)

عنصر <mark> در HTML، متن علامت‌دار یا مشخص‌شده (Highlighted) را مشخص می‌کند:

مثال

<p>Do not forget to buy <mark>milk</mark> today.</p>

مثال

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

Responsive demo.svg


عنصر <del> در اچ‌تی‌ام‌ال (HTML <del> Element)

عنصر <del> در HTML، متن پاک شده / حذف شده را مشخص می‌کند. مرورگرها معمولاً از طریق متن خط‌کشیده شده می‌فهمند متن حذف شده‌است:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


عنصر <ins> در اچ‌تی‌ام‌ال (HTML <ins> Element)

عنصر <ins> در HTML، متن وارد شده / اضافه شده را مشخص می‌کند. مرورگرها معمولاً زیر متن وارد شده / اضافه شده را خط می‌کشند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


عنصر <sub> در اچ‌تی‌ام‌ال (HTML <sub> Element)

عنصر <sub> در HTML، متن زیرنویس شده را مشخص می‌کند. متن زیرنویس در نیمی از نویسه و در زیر خط عادی ظاهر می‌شود و گاهی با فونت کوچکتری می‌آید. از متن زیر می‌توان برای فرمول‌های شیمیایی مانند H2O استفاده کرد:

v

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


عنصر <sup> در اچ‌تی‌ام‌ال (HTML <sup> Element)

عنصر <sup> در HTML، متن بالانویس شده را مشخص می‌کند. متن بالانویس در نیمی از نویسه و در بالای خط عادی ظاهر می‌شود و گاهی با فونت کوچکتری می‌آید. متن بالانویس را می‌توان برای پاورقی‌ها، مانند WWW [1] استفاده کرد:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


عناصر قالب‌بندی متن در اچ‌تی‌ام‌ال (HTML Text Formatting Elements)


منابع آموزشی




به‌روزرسانی شده: ۳۶ روز پیش