HTML حرفه‌ای‌تر
این مقاله بخش سوم و آخر مجموعه‌ی HTMLه. تو بخش اول با ساختار سند و تو بخش دوم با عناصر پرکاربرد آشنا شدی. حالا چند تا مهارت که فرق یه صفحه‌ی معمولی رو با یه صفحه‌ی حرفه‌ای مشخص می‌کنه: دسترس‌پذیری، سئو، چندرسانه‌ای و دوری از اشتباهات رایج.
فهرست مطالب
تگ‌های سمانتیک بیشتر
تو بخش اول با header، nav، main، article و footer آشنا شدی. چند تای دیگه هم هست که کمتر معروفن ولی همون‌قدر مفیدن:
<section>: یه بخش مستقل از محتوا، معمولاً با یه تیتر خودش — مثلاً همین بخش‌های همین مقاله<aside>: محتوای جانبی، مرتبط ولی نه بخش اصلی — دقیقاً همین ستون «لینک‌های مفید» کنار همین مقاله<figure>و<figcaption>: تصویر یا نمودار همراه با توضیح، که تو بخش قبل باهاشون آشنا شدی<time>: برای نمایش تاریخ یا زمان به شکلی که هم انسان و هم ماشین بفهمن:
ویژگی<time datetime="2026-09-23">۱ مهر ۱۴۰۵</time>datetimeفرمت استاندارد تاریخه؛ متن داخل تگ می‌تونه هر چیزی باشه که برای خواننده خواناتره.
فرق section و div: اگه بخشی از محتوا معنای مستقلی داره و می‌تونه تیتر خودش رو داشته باشه، از section استفاده کن. اگه فقط برای گروه‌بندی یا استایل‌دهی بدون معنای خاص لازمه (مثلاً یه
wrapper برای CSS)، همون div کافیه.
دسترس‌پذیری (Accessibility)
دسترس‌پذیری یعنی صفحه‌ت برای همه قابل استفاده باشه، از جمله کسایی که از صفحه‌خوان (screen reader) استفاده می‌کنن، یا فقط با کیبورد (بدون ماوس) تو سایت حرکت می‌کنن. چند تا اصل ساده:
- alt معنادار: همون‌طور که تو بخش قبل گفتیم، هر
<img>باید یهaltتوصیفی داشته باشه، نه خالی یا چیزی مثل «عکس». - label برای هر فیلد فرم: هر
<input>باید یه<label>مرتبط داشته باشه (باforوidیکسان)، وگرنه صفحه‌خوان نمی‌فهمه این فیلد برای چیه. - ترتیب منطقی تیترها: از
h1مستقیم بهh3نپر؛ ترتیبh1→h2→h3به صفحه‌خوان کمک می‌کنه ساختار صفحه رو درست بفهمه. - aria-label: وقتی یه دکمه یا لینک فقط آیکون داره و متن قابل‌خوندن نداره، با
aria-labelتوضیحش می‌دی:<button aria-label="بستن پنجره">×</button> - دسترسی با کیبورد: عناصر تعاملی (لینک، دکمه، فیلد فرم) باید بدون ماوس هم با کلید Tab قابل دسترسی باشن. اگه از تگ‌های استاندارد HTML استفاده کنی (به‌جای ساختن دکمه با
div)، این ویژگی خودش رایگان به دستت می‌رسه.
کلاس visually-hidden که تو هدر همین سایت برای برچسب باکس جستجو استفاده شده، دقیقاً همین کار رو می‌کنه: یه متن رو از چشم کاربر عادی مخفی می‌کنه ولی صفحه‌خوان همچنان می‌خونتش.
سئوی پایه
سئو (SEO) یعنی کاری کنی موتورهای جستجو مثل گوگل بهتر بفهمن صفحه‌ت درباره‌ی چیه. چند تا تگ پایه‌ای تو <head> نقش مهمی دارن:
<title>HTML حرفه‌ای‌تر | Mozouni</title>
<meta name="description" content="توضیح کوتاه و دقیق درباره‌ی محتوای صفحه">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>: عنوانی که تو تب مرورگر و تو نتایج جستجو نشون داده می‌شه. برای هر صفحه باید یکتا و توصیفی باشه — دقیقاً کاری که تو هر صفحه‌ی همین سایت انجام دادیم.meta description: همون خلاصه‌ای که زیر لینک تو نتایج گوگل نشون داده می‌شه. حدود ۱۵۰ تا ۱۶۰ کاراکتر باشه و واقعاً محتوای صفحه رو توصیف کنه.meta viewport: به مرورگر موبایل می‌گه صفحه رو با عرض واقعی دستگاه نشون بده، نه یه نسخه‌ی کوچک‌شده از دسکتاپ. بدون این تگ، سایت تو موبایل درست نمایش داده نمی‌شه.
استفاده‌ی درست از تگ‌های سمانتیک (بخش قبل) و ترتیب منطقی تیترها (بخش دسترس‌پذیری) هم مستقیم به سئو کمک می‌کنه؛ چیزی که برای صفحه‌خوان خواناست، برای موتور جستجو هم قابل‌فهم‌تره.
چندرسانه‌ای
برای نمایش صدا و ویدیو، دیگه لازم نیست از افزونه‌های قدیمی استفاده کنی؛ HTML5 تگ‌های مخصوص خودش رو داره:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
</video><audio controls>
<source src="track.mp3" type="audio/mpeg">
مرورگر شما از تگ صوت پشتیبانی نمی‌کند.
</audio>ویژگی controls دکمه‌های پخش، توقف و صدا رو نشون می‌ده. متنی که داخل تگ می‌نویسی، فقط وقتی نشون داده می‌شه که مرورگر کاربر از این تگ پشتیبانی نکنه.
برای جاسازی محتوای یه سایت دیگه (مثلاً یه نقشه یا ویدیوی یوتیوب) از <iframe> استفاده می‌کنی:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="عنوان ویدیو"></iframe>ویژگی title رو فراموش نکن؛ دقیقاً مثل alt برای تصویر، به صفحه‌خوان می‌گه این iframe چیه.
اشتباهات رایج
چند تا اشتباه که خیلی از تازه‌کارها (و گاهی حرفه‌ای‌ها) باهاش دست‌وپنجه نرم می‌کنن:
- فراموش کردن بستن تگ: هر تگی که خودبسته نیست (مثل
<img>یا<br>) باید بسته بشه. یه<div>باز بدون</div>می‌تونه کل چیدمان بعدی صفحه رو به هم بریزه. - تودرتوی غلط: تگ‌ها باید به همون ترتیبی که باز شدن بسته بشن. این درسته:
این غلطه:<p><strong>متن</strong></p><p><strong>متن</p></strong> - استفاده از چند
<h1>بدون دلیل: معمولاً هر صفحه فقط یه<h1>اصلی داره (عنوان کلی صفحه)؛ بقیه‌ی تیترها ازh2به پایین. - گذاشتن ویژگی‌های نامعتبر یا نوشتن غلط اسم تگ: مرورگر معمولاً چیزی رو که نمی‌فهمه نادیده می‌گیره، بدون خطا نشون دادن — یعنی ممکنه یه اشتباه تایپی مدت‌ها بدون این‌که متوجه بشی رو صفحه بمونه.
- فراموش کردن
altیاlabel: همون‌طور که تو بخش دسترس‌پذیری گفتیم، این‌ها فقط «تمیزکاری» نیستن؛ بدونشون بخشی از کاربرها اصلاً نمی‌تونن از صفحه‌ت درست استفاده کنن.
اگه شک داری کد HTMLت درسته یا نه، می‌تونی از ابزار رایگان W3C Markup Validator استفاده کنی؛ آدرس یا فایل صفحه‌ت رو بهش می‌دی و خطاهای ساختاری رو نشونت می‌ده.
جمع‌بندی
با این سه مقاله، هم ساختار پایه‌ی HTML رو یاد گرفتی، هم عناصر پرکاربردش رو، و هم حالا می‌دونی چطور یه صفحه‌ی دسترس‌پذیر، سئوپسند و بدون اشتباه‌های رایج بسازی. قدم بعدی طبیعی، یادگیری CSSه تا همین ساختار رو ظاهر و چیدمان بدی.