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)


منابع آموزشی




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