HTML چیست و چطور کار می‌کند؟ (جلسه ۱)

HTML زبان نشانه‌گذاری استاندارد وب است که با کمک تگ‌ها به هر تکه از محتوای یک صفحه یک نقش می‌دهد: این یکی عنوان است، آن یکی پاراگراف، آن یکی پیوند. تیم برنرز-لی آن را در سال ۱۹۹۱ در CERN معرفی کرد و امروز هر صفحه‌ای که در مرورگرت باز می‌شود، در پایه‌ترین لایه‌اش HTML است.

این جلسه به تو نمی‌گوید چطور کد بنویسی. آن کار از جلسهٔ سوم شروع می‌شود. اینجا می‌فهمی HTML چیست، چه کاری می‌کند و چرا شکل امروزی‌اش این‌طور شده.

HTML چیست و دقیقاً چه کاری می‌کند؟

HTML به مرورگر می‌گوید هر بخش از محتوا چه نقشی دارد. وقتی می‌نویسی یک تکه متن «عنوان» است، مرورگر می‌داند باید آن را برجسته نشان بدهد، گوگل می‌داند موضوع صفحه چیست و صفحه‌خوان می‌داند باید آن را به‌عنوان سرفصل اعلام کند. یک ورودی، سه مصرف‌کنندهٔ کاملاً متفاوت.

HTML مخفف چه عبارتی است؟

مخفف HyperText Markup Language است. هر سه بخشش معنا دارد و اگر معنایشان را بفهمی، خیلی از سؤال‌های بعدی خودبه‌خود جواب می‌گیرند.

نشانه‌گذاری یعنی چه؟

یعنی محتوا را داخل تگ می‌گذاری تا نقشش معلوم شود. تگ یک برچسب است که با < باز و با > بسته می‌شود. بیشتر تگ‌ها جفتی‌اند: یکی برای شروع و یکی برای پایان، که با اسلش مشخص می‌شود.

این سه خط را نگاه کن:

<h1>چای بهارهٔ لاهیجان</h1>
<p>برداشت اردیبهشت، بدون اسانس افزوده.</p>
<a href="/products/lahijan/">مشاهدهٔ محصول</a>

بدون تگ‌ها، هر سه خط فقط متن خام بودند و مرورگر پشت سر هم و یکسان نشانشان می‌داد. با تگ‌ها، خط اول عنوان اصلی شد، خط دوم پاراگراف، و خط سوم لینکی که کلیک می‌شود. محتوا عوض نشد؛ فقط نقشش اعلام شد.

آن href داخل تگ سوم یک «ویژگی» است. تگ می‌گوید این یک پیوند است و ویژگی می‌گوید به کجا. جزئیاتش را در جلسهٔ تگ a می‌بینی.

HTML زبان برنامه‌نویسی است؟

نه. HTML شرط، حلقه، تابع و متغیر ندارد، پس چیزی را محاسبه یا تصمیم‌گیری نمی‌کند. زبان نشانه‌گذاری است، نه برنامه‌نویسی. ولی این را با «ساده بودن» یکی نگیر: مشخصات رسمی HTML هزاران صفحه است و انتخاب درست تگ‌ها یکی از مهارت‌های سخت این حوزه است.

HTML را چه کسی و کِی ساخت؟

تیم برنرز-لی، فیزیک‌دان بریتانیایی، در CERN. او دنبال راهی بود که پژوهشگرها اسنادشان را به هم پیوند بدهند و مجبور نباشند فایل دست‌به‌دست کنند. نتیجه‌اش سه چیز بود که با هم وب را ساختند: HTML برای ساختار، HTTP برای انتقال و URL برای آدرس‌دهی.

اولین سند رسمی HTML در پایان سال ۱۹۹۱ منتشر شد و فقط ۱۸ عنصر داشت. اولین وب‌سایت دنیا هنوز آنلاین است و می‌توانی ببینی با همان ابزار محدود چه شکلی بوده. یازده تا از آن ۱۸ عنصر امروز هم دقیقاً کار می‌کنند.

نسخه‌های HTML به چه ترتیبی آمدند؟

HTML سه دهه تغییر کرده، ولی نه به شکلی که هر نسخه قبلی را دور بریزد. تقریباً همه‌چیز روی هم انباشته شده و کدی که در سال ۱۹۹۹ نوشته شده، امروز هم در مرورگر باز می‌شود.

آیا HTML6 وجود دارد؟

نه، و قرار هم نیست بیاید. در سال ۲۰۱۹ توافقی بین W3C و WHATWG امضا شد که بر اساس آن، تنها نسخهٔ معتبر HTML همان استاندارد زندهٔ WHATWG است. استاندارد زنده شماره ندارد؛ هر تغییر مستقیم به خودش اضافه می‌شود.

خیلی جاها می‌بینی که از «HTML6 و تگ‌های هوش مصنوعی» حرف می‌زنند. این دقیق نیست. هر ویژگی جدیدی که در سال‌های اخیر آمده، مثل تگ dialog یا تگ details، بدون هیچ شمارهٔ نسخه‌ای وارد همان استاندارد زنده شده.

پس اگر منبعی دیدی که «آموزش HTML6» می‌فروشد یا HTML و HTML5 را دو دورهٔ جدا معرفی می‌کند، بدان محتوایش به‌روز نیست.

HTML، CSS و جاوااسکریپت چه فرقی دارند؟

هر کدام یک لایه‌اند و روی هم سوار می‌شوند. HTML ساختار و معنا را می‌سازد، CSS ظاهر و چیدمان را، و جاوااسکریپت رفتار و تعامل را. اگر CSS و جاوااسکریپت را برداری، صفحه هنوز باز می‌شود و خوانده می‌شود. اگر HTML را برداری، چیزی برای نمایش نمانده.

به همین دلیل HTML همیشه اول یاد گرفته می‌شود. سراغ آموزش CSS برو، ولی نه قبل از اینکه دست‌کم تا جلسهٔ چهاردهم این دوره پیش رفته باشی.

اشتباه‌های رایج تازه‌کارها دربارهٔ HTML

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

من شخصاً روی مورد چهارم بیشتر از بقیه حساسم. کسی که h1 را انتخاب می‌کند چون «بزرگ‌تر است»، همان کسی است که شش ماه بعد نمی‌فهمد چرا ساختار سایتش برای گوگل قابل فهم نیست.

HTML و دسترس‌پذیری از همین جلسهٔ اول

دسترس‌پذیری یک لایهٔ اضافه نیست که بعداً روی سایت بگذاری. خود HTML همان لایه است. وقتی می‌نویسی <button>، صفحه‌خوان می‌گوید «دکمه»، کاربر با Tab به آن می‌رسد و با Enter فعالش می‌کند. همهٔ این‌ها رایگان و بدون یک خط کد اضافه.

حالا اگر همان دکمه را با <div> بسازی، ظاهرش با CSS دقیقاً همان می‌شود، ولی کاربر نابینا اصلاً نمی‌فهمد آنجا دکمه‌ای هست. این تفاوت، در تمامی جلسات این دوره تکرار می‌شود.

در ایران تقریباً هیچ منبع فارسی این موضوع را از جلسهٔ اول مطرح نمی‌کند. ما دو جلسهٔ اختصاصی برای ویژگی‌های ARIA و نقش‌های ARIA داریم، ولی قانون اصلی همین است: تگ درست را انتخاب کن تا مجبور نشوی بعداً با ARIA وصله‌پینه کنی.

مرورگرها چقدر HTML را پشتیبانی می‌کنند؟

سؤال «آیا مرورگر من HTML5 را پشتیبانی می‌کند» دیگر معنا ندارد. همهٔ مرورگرهای امروزی، از کروم و فایرفاکس تا سافاری و اج، ساختار پایهٔ HTML را کامل پشتیبانی می‌کنند. چیزی که ممکن است متفاوت باشد، تگ‌ها و ویژگی‌های تازه‌واردند، نه خود زبان.

در جلسه‌هایی که سراغ تگ‌های جدیدتر می‌رویم، وضعیت پشتیبانی هرکدام را جداگانه می‌گویم. برای بررسی خودت هم مرجع عناصر HTML در MDN جدول پشتیبانی هر تگ را دارد.

سؤالات متداول

جمع‌بندی و قدم بعدی

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

حالا که فهمیدی HTML چیست، وقتش است ببینی یک سند HTML از چه بخش‌هایی ساخته می‌شود.

• جلسهٔ بعد: ساختار سند HTML و بخش‌های html، head و body
• فهرست کامل جلسات دورهٔ HTML
• مرجع تگ‌های HTML برای مراجعهٔ سریع

سؤالی برایت باقی مانده؟

اگر جایی از این جلسه گنگ بود، همین پایین بنویس. جواب می‌دهم و اگر سؤالت تکرار شود، متن جلسه را اصلاح می‌کنم.

یک سؤال هم از تو دارم: قبل از خواندن این صفحه فکر می‌کردی HTML زبان برنامه‌نویسی است یا نه؟ جواب‌ها برایم مهم است، چون بر اساسش تصمیم می‌گیرم این موضوع را در جلسه‌های بعدی چقدر بشکافم.

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.