در قسمت اول دوره ی متنی HTML به مقدمات و تگ های body، html و head پرداختیم. در ادامه دوره متنی HTML قسمت دوم تگ های متنی و آشنایی با تگ های p ، h ، b ، strong ، em ، i و span می پردازیم. المان‌های HTML، اجزای سازنده‌ی یک صفحه وب هستند که به مرورگر دستور می‌دهند چگونه اطلاعات را نمایش دهد. هر المان HTML از سه بخش تشکیل می‌شود:
✅تگ باز (Opening Tag): شروع المان، مانند <p>
✅محتوا (Content): اطلاعاتی که درون المان قرار دارد.
✅تگ بسته (Closing Tag): پایان المان، مانند </p>
مثال:
<p>این یک پاراگراف است.</p>برخی المان‌ها تگ بسته ندارند و به آن‌ها المان‌های خودبسته‌شونده (Self-Closing Elements) گفته می‌شود.
دوره متنی HTML قسمت دوم انواع المان‌های HTML
المان‌های بلوکی (Block Elements)
المان‌های بلوکی کل عرض صفحه را اشغال می‌کنند و همیشه در یک خط جدید نمایش داده می‌شوند.
مثال:
<div>
<h1>عنوان اصلی</h1>
<p>این یک متن در داخل یک div است.</p>
</div>
- <div> → یک بلوک عمومی برای گروه‌بندی محتوا
- <p> → نمایش پاراگراف
- <h1> تا <h6> → نمایش عناوین
- <ul> و <ol> → نمایش لیست‌ها
- <table> → نمایش جدو
المان‌های درون‌خطی (Inline Elements)
المان‌های درون‌خطی فقط به اندازه‌ی محتوای خود فضا اشغال می‌کنند و باعث ایجاد خط جدید نمی‌شوند.
مثال:
<p>این یک <span style="color: red;">متن قرمز</span> است.</p>
- <span> → برای استایل دادن به بخشی از متن.
- <a> → برای ایجاد لینک.
- <b> و <strong> → نمایش متن برجسته.
- <i> و <em> → نمایش متن مورب.
<img> → نمایش تصویر.
المان‌های خودبسته‌شونده (Self-Closing Elements)
المان‌های خودبسته‌شونده نیازی به تگ بسته ندارند.
مثال:
<img src="image.jpg"alt="تصویر نمونه">
<br>
<hr>
- <img> → نمایش تصویر
- <br> → ایجاد یک خط جدید
- <hr> → نمایش یک خط افقی
- <input> → ایجاد فیلدهای ورودی در فرم
تفاوت المان و تگ در HTML
گاهی تگ (Tag) و المان (Element) به اشتباه به جای یکدیگر استفاده می‌شوند.
|
تگ (Tag) |
المان (Element) |
|
یک دستور HTML که با < و > محصور شده است. |
یک مجموعه شامل تگ باز، محتوا و تگ بسته. |
|
مثال: p |
مثال: pاین یک پاراگراف استp |
تو در تو قرار دادن المان‌های HTML
المان‌های HTML می‌توانند داخل یکدیگر قرار بگیرند تا یک ساختار منطقی ایجاد کنند.
مثال :
<div>
<h2>عنوان مقاله</h2>
<p>این یک متن توضیحی است که شامل <a href="https://example.com">یک لینک</a> است.</p>
</div>
- <div> → کل بخش را احاطه کرده است.
- <h2> → عنوان مقاله.
- <p> → یک پاراگراف که شامل یک <a> است.
تگ‌ها در HTML چیست؟
تگ‌های HTML عناصر اصلی HTML هستند که برای ساختاردهی محتوا استفاده می‌شوند.
✅تفاوت تگ‌های باز و بسته
- تگ‌های باز شامل نام عنصر بین < و > هستند، مانند <p>.
- تگ‌های بسته همانند تگ‌های باز هستند اما با / شروع می‌شوند، مانند </p>.
- برخی تگ‌ها مانند <img> نیازی به بسته شدن ندارند و خودبسته‌شونده هستند
<p>این یک پاراگراف است.</p>
<img src="image.jpg" alt="یک تصویر">معرفی تگ‌های مهم HTML و آشنایی با تگ های p ، h ، b ، strong ، em ، i و span
تگ‌ها (Tags) در HTML بخش‌های اصلی یک صفحه وب را تشکیل می‌دهند و برای ساختاردهی، نمایش و تعامل با کاربران استفاده می‌شوند. در ادامه تگ‌های مهم HTML همراه با توضیحات کامل و مثال برای هرکدام ارائه شده است.
تگ‌های ساختاری اصلی
این تگ‌ها برای ایجاد ساختار کلی صفحات وب استفاده می‌شوند.
تگ <html>
تمام محتوای یک سند HTML باید در این تگ قرار گیرد.
مثال:
<!DOCTYPE html>
<html lang="fa">
<head>
<title>صفحه نمونه</title>
</head>
<body>
<h1>سلام دنیا</h1>
</body>
</html>
تگ <head>
این بخش شامل اطلاعات متا، لینک به فایل‌های CSS یا جاوااسکریپت و عنوان صفحه است.
مثال:
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>تگ <body>
تمام محتوای قابل مشاهده صفحه وب (متن، تصاویر، ویدئوها و غیره) در این تگ قرار می‌گیرد.
مثال:
<body>
<h1>این محتوا در صفحه نمایش داده می‌شود</h1>
</body>
تگ های متنی و تگ h در HTML
در HTML، تگ‌های متنی برای نمایش و ساختاربندی متن‌ها در صفحات وب استفاده می‌شوند. این تگ‌ها شامل عناوین (Heading)، پاراگراف‌ها، متن‌های برجسته و مورب، نقل‌قول‌ها و سایر موارد مربوط به نمایش متن هستند. استفاده‌ی صحیح از این تگ‌ها باعث بهبود خوانایی، سئو و دسترس‌پذیری در صفحات وب می‌شود.
ابتدا تگ‌های Heading را بررسی می‌کنیم و سپس به سایر تگ‌های متنی HTML می‌پردازیم.
تگ‌های Heading (عناوین) برای مشخص کردن سرفصل‌ها و عناوین مهم در یک صفحه وب استفاده می‌شوند. این تگ‌ها از <h1> تا <h6> دسته‌بندی شده‌اند و هرکدام اهمیت و اندازه‌ی خاصی دارند.
- ساختاردهی محتوا → عناوین به سازماندهی بهتر متن کمک می‌کنند
- SEO و موتورهای جستجو → موتورهای جستجو (مانند گوگل) از این تگ‌ها برای درک بهتر محتوای صفحه استفاده می‌کنند
- دسترسی‌پذیری → خوانندگان صفحه، مانند کاربران دارای مشکلات بینایی، از این تگ‌ها برای فهم سلسله‌مراتب محتوا استفاده می‌کنند
تگ Heading و سطوح آن‌ها
تگ‌های هدینگ از <h1> (بزرگ‌ترین و مهم‌ترین عنوان) تا <h6> (کوچک‌ترین و کم‌اهمیت‌ترین عنوان) مرتب شده‌اند.
<h1>عنوان اصلی صفحه</h1>
<h2>عنوان سطح دوم</h2>
<h3>عنوان سطح سوم</h3>
<h4>عنوان سطح چهارم</h4>
<h5>عنوان سطح پنجم</h5>
<h6>عنوان سطح ششم</h6>
اندازه‌ی پیش‌فرض هر یک از تگ‌های Heading در مرورگرها متفاوت است، اما به‌طور معمول به‌صورت زیر تعریف شده‌اند:
|
تگ |
اندازه پیش‌فرض (px) |
فونت بولد (Bold) |
|
<h1> |
32px |
بله |
|
<h2> |
24px |
بله |
|
<h3> |
18.72px |
بله |
|
<h4> |
16px |
بله |
|
<h5> |
13.28px |
بله |
|
<h6> |
10.72px |
بله |
📌نکته: این اندازه‌ها قابل تغییر هستند و می‌توان با استفاده از CSS آن‌ها را سفارشی‌سازی کرد.
علاوه بر تگ‌های Heading، HTML دارای تگ‌های متنی متعددی برای نمایش متن در اشکال مختلف است.
تگ p (پاراگراف‌ها)
تگ <p> برای نمایش پاراگراف‌های متنی استفاده می‌شود.
مثال:
<p>این یک پاراگراف ساده در HTML است. </p>
تگ های برجسته b و strong
- <b> → متن را برجسته می‌کند، اما اهمیت معنایی ندارد.
- <strong> → متن را برجسته می‌کند و نشان‌دهنده‌ی اهمیت معنایی بیشتر است.
مثال:
<p>این متن <b>برجسته</b> است.</p>
<p>این متن <strong>اهمیت بیشتری دارد</strong>.</p>
تگ های مورب i و em
- <i> → متن را مورب می‌کند، اما بدون تأکید معنایی.
- <em> → متن را مورب کرده و بر روی آن تأکید می‌گذارد.
<p>این متن <i>مورب</i> است.</p>
<p>این متن <em>تأکید شده</em> است.</p>
تگ span (استایل‌دهی به بخشی از متن)
تگ span یک المان درون‌خطی (Inline) است که معمولاً برای استایل‌دهی به بخشی از متن استفاده می‌شود.
<p>این متن <span style="color: red;">قرمز</span> است.</p>
تگ br (شکستن خط)
تگ br برای ایجاد یک خط جدید استفاده می‌شود.
مثال:
<p>این متن در یک خط است. <br>و این خط جدید است. </p>
تگ blockquote (نقل‌قول‌های طولانی)
تگ blockquote برای نمایش نقل‌قول‌های طولانی استفاده می‌شود.
مثال:
<blockquote>
این یک نقل‌قول طولانی است که معمولاً در متن‌های رسمی استفاده می‌شود.
</blockquote>
دوره متنی HTML قسمت دوم بهترین شیوه‌های استفاده از تگ‌های متنی
✅از Headingها برای سازماندهی محتوا و بهبود سئو استفاده کنید. ✅فقط یک <h1> در هر صفحه داشته باشید. ✅از <strong> و <em> به جای <b> و <i> استفاده کنید، چون معنا دارند. ✅برای استایل‌دهی از CSS و <span> استفاده کنید، نه از تگ‌های غیرضروری. ✅از <blockquote> برای نقل‌قول‌های طولانی و از <br> فقط برای شکستن خط استفاده کنید.
نمونه‌ی ساختار یک صفحه HTML با تگ‌های متنی
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>نمونه صفحه HTML</title>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>عنوان اصلی صفحه</h1>
<p>این یک پاراگراف معمولی است.</p>
<h2>استفاده از برجسته و مورب</h2>
<p>این متن <b>برجسته</b> است و این متن <i>مورب</i> است.</p>
<h3>نقل‌قول‌ها در HTML</h3>
<blockquote>
این یک متن نقل‌قول‌شده‌ی رسمی است که معمولاً در اسناد و مقالات استفاده می‌شود.
</blockquote>
</body>
</html>
حال که دوره متنی HTML قسمت دوم تگ های متنی و آشنایی با تگ های p ، h ، b ، strong ، em ، i و span را مطالعه کردید، می توانید از دیگر مقالات سایت ایوولرن دیدن کنید.