آموزش HTML - قالب‌بندی

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

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

بیا‌یید درک کنیم که تگ‌های فیزیکی و منطقی چه هستند:

• تگ‌های فیزیکی (Physical Tags): این تگ‌ها برای بخشیدن ظاهر بصری به محتوای متنی استفاده می‌شوند.
• تگ‌های منطقی (Logical Tags): این تگ‌ها برای بخشیدن معنای منطقی و سمانتیک به محتوای متنی به کار می‌روند. برخی از تگ‌های منطقی برای صفحه‌خوان‌ها (Screen Readers) استفاده می‌شوند، اما تاثیر آن‌ها در مرورگرها نیز قابل مشاهده است.

کاربرد قالب‌بندی HTML

بدون قالب‌بندی، هیچ‌چیزی خوب یا خوشایند به نظر نمی‌رسد. اما قالب‌بندی HTML صرفاً برای دلنشین کردن ظاهر یا جذاب ساختن محتوای متنی نیست. چند دلیل دیگر نیز برای انجام قالب‌بندی HTML وجود دارد.

قالب‌بندی HTML از جنبه‌های مختلفی مفید است:

• ظاهر هر متن، دید واضحی از هدف محتوا ارائه می‌دهد؛ مانند برجسته کردن کلمات کلیدی، قرار دادن اطلاعات باارزش در نقل‌قول، کشیدن خط زیر جمله اصلی و غیره.
• قالب‌بندی به موتورهای جستجو کمک می‌کند تا ساختار محتوا را درک کنند و همچنین برای بهینه‌سازی موتورهای جستجو (SEO) مفید است.
• قالب‌بندی، چیدمان بصری را ارتقا داده و خوانایی محتوا را بهبود می‌بخشد.

تگ‌های قالب‌بندی HTML

جدول زیر شامل فهرستی از تگ‌های رایج قالب‌بندی HTML است که برای قالب‌بندی متن استفاده می‌شوند:

تگ‌های قالب‌بندی HTML همراه با مثال

توضیحات کامل هر تگ قالب‌بندی به همراه مثال‌های آن‌ها به شرح زیر است:

تگ <b> در HTML

تگ <b> در HTML برای ضخیم کردن متن استفاده می‌شود؛ این تگ هیچ جنبه منطقی ندارد و فقط برای تاثیر بصری به کار می‌رود.

مثال

این مثال استفاده از تگ <b> را برای ضخیم کردن قالب‌بندی متن نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

خروجی:

The following word uses a bold typeface.

تگ <strong> در HTML

تگ <strong> در HTML برای مهم‌تر نشان دادن متن استفاده می‌شود و متن داخل آن معمولاً به صورت ضخیم (bold) نمایش داده می‌شود.

نکته: تگ <b> متن را صرفاً برای اهداف ظاهری ضخیم می‌کند، در حالی که تگ <strong> متن را ضخیم کرده و همچنین به محتوای درون خود اهمیت معنایی می‌بخشد.

مثال

این مثال استفاده از تگ <strong> را برای نشان دادن متن مهم نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>

خروجی:

The following word uses a strong typeface.

تگ <i> در HTML

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

مثال

این مثال استفاده از تگ <i> را برای مورب کردن متن نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

خروجی:

The following word uses a italicized typeface.

تگ <em> در HTML

تگ <em> در HTML به متن داخل خود معنای سمانتیک (تاکید) می‌دهد و آن را در مرورگر به صورت مورب نمایش می‌دهد.

مثال

این مثال استفاده از تگ <em> را برای تاکید روی متن نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

خروجی:

The following word uses a emphasized typeface.

تگ <big> در HTML

هر محتوایی که درون عنصر <big>...</big> قرار گیرد، یک سایز فونت بزرگ‌تر از متن اطراف خود نمایش داده می‌شود.

مثال

این مثال استفاده از تگ <big> را برای بزرگ‌تر نشان دادن متن نسبت به متن اطراف آن نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Larger Text Example</title>
</head>
<body>
   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>
</body>
</html>

خروجی:

Hello Welcome to Tutorialspoint.

تگ <small> در HTML

محتوایی که درون عنصر <small>...</small> قرار می‌گیرد، یک سایز فونت کوچک‌تر از متن اطراف خود نمایش داده می‌شود.

مثال

این مثال استفاده از تگ <small> را برای کوچک‌تر نشان دادن متن نسبت به متن اطراف آن نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Smaller Text Example</title>
</head>
<body>
   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>
</body>
</html>

خروجی:

Hello Welcome to Tutorialspoint.

تگ <sup> در HTML

هر محتوایی که درون عنصر ^... قرار گیرد به صورت بالا‌نویس نوشته می‌شود؛ اندازه فونت استفاده شده هم‌اندازه کاراکترهای اطراف آن است اما در نصف ارتفاع کاراکترهای اطراف نمایش داده می‌شود و در مقایسه با باقی متن، ظاهری کوچک‌تر و کمی بالاتر دارد.

مثال

این مثال استفاده از تگ <sup> را برای نشان دادن متن کمی بالاتر از متن معمولی نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>

خروجی:

The following word uses a superscript typeface. 

تگ <sub> در HTML

هر محتوایی از عنصر _... به صورت زیر‌نویس نوشته می‌شود؛ اندازه فونت استفاده شده همانند کاراکترهای اطراف آن است و به اندازه نصف ارتفاع یک کاراکتر پایین‌تر از سایر کاراکترها قرار می‌گیرد. این تگ معمولاً برای نوشتن مواردی مانند فرمول‌های شیمیایی که در آن کاراکترهای خاصی باید پایین‌تر از خط متن معمولی قرار گیرند، استفاده می‌شود.

مثال

این مثال استفاده از تگ <sub> را برای نشان دادن متن کمی پایین‌تر از متن معمولی نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>

خروجی:

The following word uses a subscript typeface. 

تگ <ins> در HTML

هر محتوایی که درون عنصر <ins>...</ins> قرار گیرد به عنوان متن درج‌شده (اضافه‌شده) نمایش داده می‌شود.

مثال

این مثال استفاده از تگ <ins> را برای علامت‌گذاری متنی که اضافه شده است نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

خروجی:

I want to drink cola wine

تگ <del> در HTML

محتوایی که درون عنصر <del>...</del> قرار گیرد به عنوان متن حذف‌شده نمایش داده می‌شود.

مثال

این مثال استفاده از تگ <del> را برای علامت‌گذاری متنی که حذف شده است نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>

خروجی:

Hello welcome to Madras Chennai

تگ <u> در HTML

هر محتوایی که درون عنصر <u>...</u> قرار گیرد با یک خط زیرین نمایش داده می‌شود.

مثال

این مثال استفاده از تگ <u> را برای ایجاد متن با خط زیرین نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

خروجی:

The following word uses a underlined typeface.

تگ <strike> در HTML

محتوایی که درون عنصر <strike>...</strike> قرار گیرد با خط‌خوردگی نمایش داده می‌شود که یک خط باریک روی متن است.

مثال

این مثال استفاده از تگ <strike> را برای نمایش متن خط‌خورده نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

خروجی:

The following word uses a strikethrough typeface.

تگ <mark> در HTML

تگ <mark> در HTML برای علامت‌گذاری یا هایلایت کردن متنی استفاده می‌شود که برای اهداف یادداشت‌برداری اهمیت دارد.

مثال

این مثال استفاده از تگ <mark> را برای ایجاد متن هایلایت شده نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>

خروجی:

The following word uses a marked typeface.

تگ <tt> در HTML

هر محتوایی که درون عنصر <tt>...</tt> قرار گیرد با فونت عرض‌ثابت (Monospaced) نوشته می‌شود. بیشتر فونت‌ها به عنوان فونت‌های با عرض متغیر شناخته می‌شوند زیرا حروف مختلف عرض‌های متفاوتی دارند (برای مثال، حرف 'm' عریض‌تر از حرف 'i' است). اما در فونت‌های عرض‌ثابت، هر حرف دارای عرض یکسانی است.

مثال

این مثال استفاده از تگ <tt> را برای ایجاد متن تله‌تایپ نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Monospaced Font Example</title>
</head>
<body>
   <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

خروجی:

The following word uses a monospaced typeface.