درس ۵: HTML معنایی - آموزش توسعه وب

HTML معنایی چیست؟

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

مزایای HTML معنایی:

SEO بهتر: موتورهای جستجو محتوا را بهتر درک می‌کنند
دسترسی‌پذیری: صفحه‌خوان‌ها بهتر کار می‌کنند
نگهداری آسان‌تر: کد قابل فهم‌تر و سازمان‌یافته‌تر
سازگاری بیشتر: با دستگاه‌ها و مرورگرهای مختلف
استایل‌دهی بهتر: CSS هدفمندتر

تگ‌های ساختاری HTML5

HTML5 تگ‌های جدیدی برای ساختاردهی بهتر به صفحات وب ارائه داده است:

تگ‌های اصلی:

<header> - سربرگ صفحه یا بخش
<nav> - منوی ناوبری
<main> - محتوای اصلی صفحه
<section> - بخش مستقل از محتوا
<article> - مقاله یا محتوای مستقل
<aside> - محتوای جانبی
<footer> - پاورقی صفحه یا بخش

ساختار نمونه:

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <header>سربرگ</header>
  <nav>منوی ناوبری</nav>
  <main>
    <article>مقاله اصلی</article>
    <aside>نوار کناری</aside>
  </main>
  <footer>پاورقی</footer>
</body>
</html>

تگ‌های محتوایی HTML5

HTML5 تگ‌های جدیدی برای انواع مختلف محتوا ارائه داده است:

تگ‌های مهم:

<figure> - تصویر، نمودار یا کد با توضیح
<figcaption> - توضیح figure
<details> - محتوای قابل باز/بسته شدن
<summary> - خلاصه details
<mark> - متن برجسته
<time> - تاریخ و زمان
<progress> - نوار پیشرفت
<meter> - اندازه‌گیری

تگ‌های چندرسانه‌ای HTML5

HTML5 پشتیبانی بومی از صوت و تصویر ارائه می‌دهد:

تگ‌های چندرسانه‌ای:

<video> - پخش ویدیو
<audio> - پخش صوت
<source> - منبع چندگانه برای ویدیو/صوت
<track> - زیرنویس برای ویدیو
<canvas> - نقاشی و گرافیک
<svg> - گرافیک برداری

مثال ویدیو:

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="fa" label="فارسی">
  مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>

تمرین عملی: HTML معنایی

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

میکرودیتا و Schema.org

میکرودیتا راهی برای اضافه کردن اطلاعات ساختاریافته به HTML است که به موتورهای جستجو کمک می‌کند:

ویژگی‌های میکرودیتا:

itemscope - تعریف محدوده آیتم
itemtype - نوع آیتم
itemprop - ویژگی آیتم

مثال شخص:

<div itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">علی احمدی</h1>
  <p itemprop="jobTitle">توسعه‌دهنده وب</p>
  <p itemprop="email">ali@example.com</p>
</div>

WAI-ARIA و دسترسی‌پذیری

WAI-ARIA مجموعه‌ای از ویژگی‌ها برای بهبود دسترسی‌پذیری وب است:

ویژگی‌های مهم ARIA:

role - نقش عنصر
aria-label - برچسب دسترسی
aria-labelledby - ارجاع به برچسب
aria-describedby - ارجاع به توضیح
aria-hidden - مخفی کردن از صفحه‌خوان
aria-expanded - وضعیت باز/بسته
aria-live - اعلام تغییرات

مثال دکمه:

<button aria-label="بستن پنجره" aria-expanded="false">
  ×
</button>

تمرین‌های عملی

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: ساختار وبلاگ

صفحه‌ای برای وبلاگ ایجاد کنید که شامل header، nav، main، article، aside و footer باشد.

تمرین ۲: صفحه محصول

صفحه محصولی با میکرودیتا Schema.org ایجاد کنید.

تمرین ۳: گالری تصاویر

گالری تصاویری با figure و figcaption ایجاد کنید.

تمرین ۴: صفحه دسترسی‌پذیر

صفحه‌ای با ویژگی‌های ARIA برای بهبود دسترسی‌پذیری ایجاد کنید.

نکات مهم و بهترین شیوه‌ها

برای HTML معنایی:

از تگ‌های معنایی به جای div استفاده کنید
ساختار منطقی و سلسله‌مراتبی ایجاد کنید
فقط یک main در هر صفحه استفاده کنید
از heading‌ها به ترتیب استفاده کنید
alt برای تصاویر تعریف کنید

برای دسترسی‌پذیری:

کنتراست رنگی مناسب استفاده کنید
سایز فونت قابل خواندن انتخاب کنید
کیبورد ناوبری را پشتیبانی کنید
از ARIA labels استفاده کنید
فرم‌ها را با label مرتبط کنید

اشتباهات رایج:

استفاده از div برای همه چیز
نادیده گرفتن ساختار سلسله‌مراتبی
استفاده نادرست از تگ‌های معنایی
فراموش کردن ویژگی‌های دسترسی‌پذیری
عدم تست با صفحه‌خوان

خلاصه دروس HTML

تبریک! شما تمام دروس HTML را به پایان رساندید. در این ۵ درس یاد گرفتید:

مطالب آموخته شده:

ساختار اساسی HTML و تگ‌های پایه
قالب‌بندی متن و لیست‌ها
لینک‌ها، تصاویر و عناصر چندرسانه‌ای
جداول و فرم‌های تعاملی
HTML معنایی و دسترسی‌پذیری

حالا آماده یادگیری CSS هستید تا صفحات زیبا و حرفه‌ای طراحی کنید!

ادامه یادگیری

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

درس قبلی: جداول و فرم‌ها درس بعدی: مقدمات CSS