چرا عنوانها در HTML مهم هستند: ساختار، دسترسیپذیری و سئو
وقتی مردم در مورد تیترهای وبسایتها فکر میکنند، اغلب به نحوهی نمایش آنها فکر میکنند: متن بزرگ و پررنگی که چشم را به خود جلب میکند.
در HTML، عنوانها کاری بسیار فراتر از افزودن سبک بصری به صفحه انجام میدهند. استفاده نادرست یا عدم استفاده از عنوانها در HTML به قابلیت استفاده، دسترسیپذیری و عملکرد جستجو آسیب میرساند.
عنوانها معنایی هستند، نه فقط بصری
عنوانها معنایی هستند، به این معنی که عنوانهای HTML (<h1> تا <h6>) سلسله مراتب محتوای صفحه را نشان میدهند.
6 سطح عنوان HTML وجود دارد.
<h1> موضوع سطح بالای صفحه است. در عمل، شما فقط باید از یک H1 در یک صفحه استفاده کنید. از نظر فنی HTML5 اجازه چندین H1 را میدهد، اما میتواند برای تکنسینهای کمکی گیجکننده باشد (زیرا تشخیص عنوان واقعی صفحه را دشوارتر میکند).
استثنائاتی برای این قانون کلی وجود دارد: برای مثال، اگر از عناصر بخشبندی استفاده میکنید، هر بخش میتواند با <h1> مخصوص به خود شروع شود.
از عنوانهای <h2> برای مشخص کردن بخشهای اصلی زیر عنوان اصلی H1 استفاده میشود.
سرتیترهای <h3> زیربخشهای درون بخش <h2> را نشان میدهند.
و همینطور در ادامه.
عنوانها یک طرح کلی منطقی از صفحه شما ایجاد میکنند. یک صفحه با ساختار خوب مانند یک کتاب با ساختار خوب است. برای مثال، فرض کنید کتابی با عنوان «دسترسیپذیری وب چیست» داریم که شامل دو فصل است: «چرا دسترسیپذیری اهمیت دارد» و «چگونه رابطهای کاربری قابل دسترس طراحی کنیم».
همچنین فرض کنید فصل اول، «چرا دسترسیپذیری اهمیت دارد»، زیربخشهایی با عنوان «تأثیر بر کاربران» و «الزامات قانونی» دارد. فصل دوم، «چگونه رابطهای کاربری دسترسیپذیر طراحی کنیم» زیربخشی با عنوان «تضاد رنگ» دارد.
میتوانیم فهرست مطالب کتاب «دسترسیپذیری وب چیست» را به صورت نقطهای (بولت پوینت) به صورت زیر مرتب کنیم:
دسترسیپذیری وب چیست؟
چرا دسترسیپذیری اهمیت دارد؟
تأثیر بر کاربران
الزامات قانونی
چگونه رابطهای کاربری قابل دسترس طراحی کنیم
کنتراست رنگ
با همان ایدهای که برای مرتب کردن مطالب از نقاط بولت استفاده کردیم، میتوانیم از سرتیترها در HTML برای مرتب کردن کتاب استفاده کنیم.
<h1>What is Web Accessibility?</h1> <h2>Why Accessibility Matters</h2> <h3>Impact on Users</h3> <h3>Legal Requirements</h3> <h2>How to Design Accessible Interfaces</h2> <h3>Color Contrast</h3>در مثال کتاب ما، فقط یک H1 وجود دارد که عنوان کتاب است. ما نمیتوانیم یک کتاب با دو عنوان داشته باشیم، درست است؟
سپس، هر فصل با یک برچسب H2 برچسبگذاری میشود که نشان میدهد یک سطح «پایینتر» از عنوان/عنوان اصلی است. پس از آن، برچسبهای H3 را به عنوان سطح بعدی داریم که نشاندهنده زیربخشهای هر فصل هستند.
توجه داشته باشید که نباید فقط از H1 به H3 بپرید (مگر اینکه دلیل ساختاری عمدی داشته باشید). این کار مانند باز کردن یک کتاب و پریدن مستقیم به یک زیربخش و دور زدن ابتدای فصل است. احتمالاً خیلی منطقی نخواهد بود.
طرح کلی عنوان، مرور سریع محتوا و درک منطقی سلسله مراتب صفحه را برای افرادی که از فناوریهای کمکی استفاده میکنند (و هر کس دیگری) آسان میکند.
استایلها از CSS میآیند، نه از سطح عنوان
یک اشتباه رایج که توسعهدهندگان اغلب مرتکب میشوند، استفاده از تگ عنوان فقط به این دلیل است که بزرگ به نظر میرسد، تا با انتظارات طراحی مطابقت داشته باشد. استفاده نادرست از سطوح عنوان میتواند مشکلات دسترسی ایجاد کند زیرا صفحه ساختار اشتباهی خواهد داشت.
مهم است که به یاد داشته باشید سطح عنوان را بر اساس سبک انتخاب نکنید. سطح عنوان را بر اساس ساختار انتخاب کنید. سپس از CSS برای کنترل سبک بصری استفاده کنید.
سرتیترها ناوبری را برای فناوری کمکی فعال میکنند
استفاده از ساختار صحیح عنوان در صفحات وب برای دسترسیپذیری بسیار مهم است. کاربران صفحهخوان میانبرهایی دارند که میتوانند برای رفتن از یک عنوان به عنوان بعدی از آنها استفاده کنند. با یک صفحهخوان، آنها میتوانند به یک بخش خاص بروند و از آنجا به محتوا گوش دهند.
همانطور که استفاده از تگهای عنوان برای استایلدهی ایده بدی است، عدم استفاده از تگهای عنوان نیز ایده بدی است. اگر فقط متن را با CSS ضخیم یا بزرگتر کنید، اما هرگز آن را به عنوان یک عنوان مناسب علامتگذاری نکنید، یک صفحهخوان متوجه وجود شکست یا تغییر در محتوا نخواهد شد. این امر مانع از آن میشود که کاربر در صورت نیاز، صفحه را به طور سطحی مرور کند یا به بخشهای مختلف صفحه بپرد.
برای مثال، فرض کنید یک صفحه محصول داریم:
<p style={{ fontWeight: 'bold' }}>Product Page</p> <p>Price</p> <p>Features</p>نبود عنوان در صفحه محصول ما به این معنی است که محتوا به دیوار عظیمی از متن تبدیل میشود که خواننده صفحه باید به ترتیب به آن گوش دهد و این باعث افزایش زمان خواندن محتوا توسط کاربر میشود.
در این مثال ساده، ما عنوان صفحه را با کلاسهای CSS استایلبندی کردیم اما از عنوان استفاده نکردیم. کاربران صفحهخوان با اطمینان نمیدانند که «صفحه محصول» عنوان صفحه است. آنها از استایلهای CSS سرنخی در مورد محتوا دریافت نمیکنند.
یک راه بهتر برای ایجاد صفحه محصول، استفاده از عناوینی مانند این است:
<h1>Product Page</h1> <h2>Price</h2> <h2>Features</h2>استفاده از تگهای عنوان مناسب به کاربران صفحهخوان اجازه میدهد تا با استفاده از عنوانها پیمایش کنند و اطلاعات موجود در صفحه را سریعتر دریافت کنند.
عنوانها به سئو و موتورهای جستجو کمک میکنند
گوگل و سایر موتورهای جستجو، عناوین شما را میخوانند تا بینشهای مهمی در مورد محتوا به دست آورند. آنها میتوانند با استفاده از تگ H1 تشخیص دهند که موضوع اصلی چیست (صفحه در مورد چیست)، زیرموضوعات کلیدی کدامند (با H2 نشان داده میشوند) و جزئیات پشتیبانی زیر هر زیرموضوع چیست (H3ها و غیره).
عنوانهای خوشساختار، فهرستبندی محتوای شما را آسانتر میکنند و اغلب احتمال عملکرد بهتر آن در جستجو را افزایش میدهند. برای مثال، گوگل از عنوانها برای ایجاد یک طرح کلی از صفحه، درست مانند فهرست مطالب، استفاده میکند. سپس میتواند آن طرح کلی/موضوعات اصلی را با عبارات جستجوی مناسب مطابقت دهد.
و در حالی که موتورهای جستجوی مدرن میتوانند صفحهای با چندین عنوان H1 را به خوبی مدیریت کنند - بدون اینکه به سئو آسیب جدی وارد شود - استفاده از یک <h1> اصلی واضح، یک قرارداد خوب برای وضوح است.
نتیجهگیری
عنوانها ابزاری برای استایلدهی در HTML نیستند - آنها ابزاری معنایی هستند. شما باید از عنوانها برای تعریف سلسله مراتب محتوای صفحه، کمک به پیمایش کاربران، دسترسی به محتوا و بهبود سئو استفاده کنید. عنوانهای مناسب، HTML شما را هم برای انسان و هم برای ماشین معنادار میکنند.
برچسبها
|
ارسال نظر