آنچه در ویدیو می‌بینید:

در این ویدیو به یکی از مهم‌ترین نکات ساختاری در HTML یعنی هدینگ‌استراکچر (heading structure) می‌پردازیم. منظور از هدینگ‌استراکچر، نحوه استفاده درست از تگ‌های h1 تا h6 در صفحه و رعایت سلسله‌مراتب بین اون‌هاست.

 

اگر هم شرایط دیدن ویدیو رو ندارید، می‌تونید از محتوای متنی اون استفاده کنید 

در ابتدا با توضیحاتی درباره ترتیب منطقی تگ‌های هدینگ (مثل h1 → h2 → h3) شروع می‌کنیم و نشون می‌دیم که استفاده نادرست از این ترتیب، مثل پرش از h1 به h4 یا شروع صفحه با h3، می‌تونه منجر به ساختار ناهماهنگ در صفحه بشه.

سپس با بررسی چند وب‌سایت شناخته‌شده مثل دیجی‌کالا، نوبیتکس و علی‌بابا، به‌کمک افزونه HeadingsMap ساختار هدینگ اون‌ها رو آنالیز می‌کنیم و درباره ارورها و هشدارهایی مثل Missing heading یا Wrong level hierarchy صحبت می‌کنیم.

در ادامه از ابزار W3C Validator استفاده می‌کنیم و به‌صورت عملی بررسی می‌کنیم:

  • آیا استفاده از چند h1 در یک صفحه مجازه؟
  • تفاوت ارور و وارنینگ در اعتبارسنجی چیه؟
  • چطور می‌تونیم ساختار هدینگ رو بدون تغییر ظاهری در صفحه بهینه‌تر کنیم؟

در پایان هم به ابزارهای تکمیلی مثل DevTools Extension یا API آنلاین W3C اشاره می‌کنیم که با کمک اون‌ها می‌تونین کد HTML رو اعتبارسنجی کنین و مشکلات احتمالی مربوط به هدینگ‌ها رو راحت‌تر پیدا کنین.

در آخر اگر سلسله ویدیو های دنیای HTML را در بلاگ آنالیتیپس ندیدید می توانید از لینک های زیر به آنها دسترسی داشته باشید:

  1. راهنمای عملی بهینه‌ سازی HTML برای بهبود سئو سایت
  2. معرفی کامل تگ‌های معنایی “HTML5”
  3. راهنمای قدم‌به‌قدم ساخت یک صفحه HTML