مقدمه

اسناد HTML از مجموعه‌ای از عناصر (Elements) تشکیل شده‌اند. بیشتر عناصر HTML شامل محتوا (مانند متن یا تصویر) و تگ‌های HTML هستند که به مرورگر می‌گویند چگونه آن محتوا را نمایش دهد.

عناصر HTML برای ایجاد ساختار، معنا (Semantic) و قالب‌بندی صفحات وب استفاده می‌شوند.

یک عنصر HTML معمولاً (اما نه همیشه) از یک تگ باز و یک تگ بسته تشکیل شده است که محتوای موردنظر را در بر می‌گیرند.

ساختار یک عنصر HTML

ساختار کلی یک عنصر HTML به شکل زیر است:

<tagname>محتوا</tagname>

به عنوان مثال:

<strong>متن مهم</strong>

در این مثال:

• <strong> تگ باز است.
• متن مهم محتوای عنصر است.
• </strong> تگ بسته است.

نکته: تگ‌های بسته همیشه با علامت / مشخص می‌شوند.

استفاده از عنصر <strong>

برای امتحان کردن، کد زیر را در فایل index.html خود قرار دهید:

<strong>متن مهم من</strong>

پس از ذخیره فایل و باز کردن آن در مرورگر، متن به صورت پررنگ نمایش داده می‌شود.

خروجی:

متن مهم من

تفاوت <strong> و <b>

ممکن است تصور کنید تگ <strong> همانند <b> فقط متن را پررنگ می‌کند، اما تفاوت مهمی بین این دو وجود دارد.

تگ <strong>

• متن را پررنگ می‌کند.
• اهمیت معنایی (Semantic) متن را مشخص می‌کند.
• صفحه‌خوان‌ها (Screen Readers) متن را با تأکید بیشتری برای کاربران نابینا یا کم‌بینا می‌خوانند.

تگ <b>

• فقط ظاهر متن را پررنگ می‌کند.
• هیچ مفهوم یا اهمیت معنایی به متن اضافه نمی‌کند.

بنابراین، اگر هدف شما نشان دادن اهمیت متن است، بهتر است از <strong> استفاده کنید.

تفاوت <em> و <i>

همین موضوع درباره متن مورب نیز صدق می‌کند.

تگ <em>

• متن را مورب نمایش می‌دهد.
• مفهوم تأکید (Emphasis) را به متن اضافه می‌کند.
• صفحه‌خوان‌ها آن را با تأکید بیشتری می‌خوانند.

تگ <i>

• فقط ظاهر متن را مورب می‌کند.
• هیچ مفهوم معنایی ندارد.

اگر می‌خواهید روی بخشی از متن تأکید کنید، از <em> استفاده کنید.

مشاهده فایل HTML در مرورگر

برای مشاهده فایل HTML نیازی نیست سایت را روی اینترنت منتشر کنید.

می‌توانید فایل را به یکی از روش‌های زیر باز کنید:

• فایل را داخل مرورگر بکشید و رها کنید (Drag & Drop)
• روی فایل راست‌کلیک کرده و گزینه Open With Browser را انتخاب کنید.
• مسیر کامل فایل را در نوار آدرس مرورگر وارد کنید.

اگر از Visual Studio Code استفاده می‌کنید، می‌توانید روی فایل index.html راست‌کلیک کرده و گزینه Copy Path را انتخاب کنید، سپس مسیر را در مرورگر قرار دهید.

نکته: برای باز کردن فایل در مرورگر باید از مسیر کامل (Absolute Path) استفاده کنید. در ادامه آموزش‌های HTML برای لینک دادن فایل‌های پروژه معمولاً از مسیر نسبی (Relative Path) استفاده خواهد شد.

استفاده از عنصر <em>

اکنون کد زیر را به فایل خود اضافه کنید:

<strong>متن مهم من</strong>
<em>متن تأکیدی من</em>

خروجی:

متن مهم من متن تأکیدی من

چرا هر دو متن در یک خط نمایش داده می‌شوند؟

شاید انتظار داشته باشید چون هر کدام را در یک خط از ویرایشگر نوشته‌اید، در مرورگر نیز در خطوط جداگانه نمایش داده شوند.

اما این اتفاق نمی‌افتد، زیرا عناصر <strong> و <em> از نوع Inline هستند.

عناصر Inline:

• فقط به اندازه محتوای خود فضا اشغال می‌کنند.
• در کنار یکدیگر نمایش داده می‌شوند.
• برای رفتن به خط بعد باید از تگ‌هایی مانند <br> یا عناصر Block استفاده کنید.

در آموزش بعدی با تفاوت عناصر Inline و Block بیشتر آشنا خواهید شد.

جمع‌بندی

در این آموزش یاد گرفتید که:

• عنصر (Element) در HTML چیست.
• ساختار یک عنصر HTML چگونه است.
• تفاوت بین تگ‌های <strong> و <b> را شناختید.
• تفاوت بین <em> و <i> را یاد گرفتید.
• فایل HTML را بدون نیاز به اینترنت در مرورگر اجرا کردید.
• دلیل نمایش عناصر Inline در یک خط را متوجه شدید.

استفاده صحیح از عناصر معنایی (Semantic Elements) علاوه بر خوانایی بهتر کد، باعث بهبود سئو (SEO) و دسترس‌پذیری (Accessibility) صفحات وب نیز می‌شود.

از همراهی شما با پارمین کلود سپاسگزاریم.