آموزش HTML از صفر تا سطح مرجع در ۶۵ جلسه

HTML زبان نشانه‌گذاری استانداردی است که ساختار و معنای محتوای یک صفحهٔ وب را برای مرورگر، صفحه‌خوان و موتور جست‌وجو مشخص می‌کند. این دسته، دورهٔ کامل HTML است: ۶۵ جلسهٔ مرتب‌شده از اولین سند خالی تا ARIA و تگ‌های <head>.

هر جلسه یک صفحهٔ مستقل است و می‌توانی مستقیم سراغ همان تگی بروی که الان لازم داری. ولی اگر تازه شروع کرده‌ای، ترتیب پیشنهادی همان ترتیب فهرست است. جلسهٔ ۳ اولین جایی است که یک صفحهٔ واقعی می‌سازی.

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

HTML مخفف HyperText Markup Language است و کارش این است که به هر تکه از محتوا یک نقش بدهد: این یکی عنوان است، آن یکی پاراگراف، این یکی دکمه. مرورگر از روی همین نقش‌ها ساختار صفحه را می‌سازد و صفحه‌خوان از روی همان‌ها برای کاربر نابینا صفحه را روایت می‌کند.

پس HTML ظاهر را نمی‌سازد، معنا را می‌سازد. ظاهر کار CSS است.

۶۵ جلسه به چه ترتیبی چیده شده؟

جلسه‌ها در ده بخش دسته‌بندی شده‌اند و از ساده به سخت پیش می‌روند. سه بخش اول پایه است و بدون آن بقیه معنا ندارد. از بخش ششم به بعد وارد تگ‌های معنایی می‌شوی، یعنی همان چیزی که سئوی سایتت را از یک قالب معمولی جدا می‌کند.

هر تگی که جلسهٔ جدا ندارد، داخل جلسهٔ تگ والدش توضیح داده شده. مثلاً label و select در جلسهٔ فرم‌ها هستند و thead و caption در جلسهٔ جدول‌ها.

بخش ۱: شروع کار (جلسهٔ ۱ تا ۳)

بخش ۲: متن، لینک و لیست (جلسهٔ ۴ تا ۸)

<!– در دست تهیه: بعد از انتشار، متن li را با جایگزین کن –>

تگ menu و فهرست دستورها (در دست تهیه)

بخش ۳: تصویر، صدا و ویدیو (جلسهٔ ۹ تا ۱۲)

بخش ۴: فرم و جدول (جلسهٔ ۱۳ تا ۱۴)

بخش ۵: قالب‌بندی و معنای متن (جلسهٔ ۱۵ تا ۲۹)

بخش ۶: ساختار و تگ‌های معنایی (جلسهٔ ۳۰ تا ۴۰)

تگ search و علامت‌گذاری ناحیهٔ جست‌وجوی سایت (در دست تهیه)

بخش ۷: تگ‌های تعاملی (جلسهٔ ۴۱ تا ۴۴)

بخش ۸: گرافیک و محتوای جاسازی‌شده (جلسهٔ ۴۵ تا ۵۳)

تگ math و نوشتن فرمول ریاضی با MathML (در دست تهیه)

بخش ۹: ویژگی‌ها و دسترس‌پذیری (جلسهٔ ۵۴ تا ۵۹)

تگ slot و جای‌گذاری محتوا در وب‌کامپوننت (در دست تهیه)

بخش ۱۰: تگ‌های بخش head (جلسهٔ ۶۰ تا ۶۵)

جدا از این ۶۵ جلسه، یک صفحهٔ مرجع هم داریم که می‌توانی موقع کدنویسی بازش بگذاری: مرجع کامل تگ‌های HTML به همراه کاربرد هر کدام.

از کجا شروع کنم و مسیر یادگیری چیست؟

از جلسهٔ ۱ شروع کن و تا جلسهٔ ۱۴ را به ترتیب برو. این چهارده جلسه ستون فقرات کار است. از آنجا به بعد می‌توانی بر اساس نیاز جلو بروی، چون بیشتر جلسه‌ها مستقل نوشته شده‌اند. جدول زیر نشان می‌دهد بعد از هر مرحله چه چیزی واقعاً می‌توانی بسازی.

مسیر یادگیری HTML در چهار مرحله
مرحله	جلسه‌ها	بعدش چه کاری از دستت برمی‌آید
پایه	۱ تا ۸	یک صفحهٔ متنی درست با عنوان، پاراگراف، لینک و لیست می‌سازی که Validator رویش خطا نگیرد.
محتوای غنی	۹ تا ۱۴	تصویر واکنش‌گرا، ویدیو، فرم تماس و جدول قیمت را بدون افزونه پیاده می‌کنی.
ساختار معنایی	۱۵ تا ۴۴	قالب یک سایت کامل را با تگ‌های معنایی می‌چینی؛ همان چیزی که گوگل و صفحه‌خوان می‌فهمند.
حرفه‌ای	۴۵ تا ۶۵	SVG، iframe امن، ARIA و تنظیمات `<head>` برای سئو و سرعت را کنترل می‌کنی.

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

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

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

یادگیری HTML چقدر طول می‌کشد؟

مبانی را در چند روز می‌گیری. تسلط چیز دیگری است. خیلی جاها می‌گویند HTML را در یک روز یاد می‌گیری، ولی این دقیق نیست: چیزی که در یک روز یاد می‌گیری نوشتن چند تگ است، نه انتخاب درست بین <section> و <article>. با روزی یک جلسه، این ۶۵ جلسه حدود دو ماه طول می‌کشد.

تفاوت HTML و HTML5 چیست؟

HTML5 نسخهٔ پنجم و آخرین شمارهٔ رسمی HTML بود، ولی امروز استاندارد به شکل «Living Standard» توسط WHATWG نگه‌داری می‌شود و شماره‌گذاری عملاً کنار رفته است. یعنی وقتی می‌گویی HTML، منظورت همان چیزی است که قبلاً HTML5 صدایش می‌کردند.

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

پرتکرارترین اشتباه‌های تازه‌کارها

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

هفت اشتباه رایج و کار درست به‌جای هرکدام
اشتباه	چرا دردسر می‌شود	کار درست
گذاشتن چند `<h1>` یا پریدن از h1 به h4	ساختار سرفصل‌ها برای صفحه‌خوان و گوگل به‌هم می‌ریزد و کاربر نابینا نقشهٔ صفحه را گم می‌کند.	یک h1، بعد h2 و h3 به ترتیب، بدون پرش.
`<div onclick>` به‌جای `<button>`	با کلید Tab انتخاب نمی‌شود، با Enter کار نمی‌کند و صفحه‌خوان آن را دکمه نمی‌شناسد.	هر چیزی که کلیک می‌شود، button یا a باشد.
`alt="تصویر"` یا حذف کامل alt	هم برای کاربر صفحه‌خوان بی‌فایده است، هم فرصت سئوی تصویر را می‌سوزاند.	alt همان چیزی را بگوید که در تصویر دیده می‌شود، نه عنوان مقاله را.
نگذاشتن `lang="fa"` و `dir="rtl"`	صفحه‌خوان متن فارسی را با لهجهٔ انگلیسی می‌خواند و علائم نگارشی جابه‌جا می‌شوند.	هر دو را روی تگ `<html>` بگذار.
` ` پشت سر هم برای فاصله‌دادن	فاصله‌گذاری کار CSS است؛ این روش در موبایل و در چاپ می‌شکند.	از margin و padding استفاده کن.
`<input>` بدون `<label>`	کاربر نمی‌فهمد فیلد برای چیست و کلیک روی برچسب فوکوس را نمی‌برد داخل فیلد.	هر input یک label با `for` متصل داشته باشد.
`target="_blank"` بدون `rel="noopener"`	صفحهٔ مقصد می‌تواند به پنجرهٔ شما دسترسی پیدا کند و یک ریسک امنیتی قدیمی است.	در لینک خارجی همیشه `rel="noopener"` اضافه کن.

دسترس‌پذیری در این دوره کجاست؟

دسترس‌پذیری در این دوره یک فصل جداگانه در انتها نیست که کسی نخواند. دو جلسهٔ اختصاصی برای ARIA داریم (ویژگی‌های ARIA و نقش‌های ARIA)، ولی مهم‌تر از آن، در جلسه‌های تگ‌های معنایی هم مرتب به آن برمی‌گردیم.

قانون اولی که در جلسهٔ ARIA می‌بینی این است: بهترین ARIA، ARIA ننوشتن است. اگر تگ استانداردی وجود دارد که همان کار را می‌کند، از آن استفاده کن. <nav> بهتر از <div role="navigation"> است، چون خودش نقش را دارد و هیچ‌وقت با HTML ناهماهنگ نمی‌شود.

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

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

اکثر قریب به‌ اتفاق تگ‌هایی که در این ۶۵ جلسه می‌بینی سال‌هاست در همهٔ مرورگرها کار می‌کنند و نیازی به احتیاط ندارند. فقط چند مورد نسبتاً جدیدترند و بهتر است وضعیتشان را بدانی.

وضعیت پشتیبانی چند تگ نسبتاً جدید
ویژگی	وضعیت امروز	نکته
`<dialog>`	در همهٔ مرورگرهای اصلی	سافاری از نسخهٔ ۱۵٫۴ و فایرفاکس از ۹۸ اضافه شد، یعنی حدود سال ۱۴۰۱.
`<details>`	پشتیبانی کامل	ویژگی `name` برای آکاردئون تک‌بازشو تازه‌تر است؛ قبل از استفاده چک کن.
`<picture>`	پشتیبانی کامل	مرورگر قدیمی به‌صورت خودکار به `<img>` داخلش برمی‌گردد.
`<bdi>`	پشتیبانی کامل	برای سایت فارسی که اسم یا عدد لاتین نشان می‌دهد واقعاً به‌درد می‌خورد.
`<ruby>`	پشتیبانی پایه در همه	بعضی زیرتگ‌های کم‌کاربردش در همهٔ موتورها یکسان رفتار نمی‌کنند.

برای هر تگی که مطمئن نیستی، دو منبع دست‌اول را باز کن: مرجع عناصر HTML در MDN و استاندارد زندهٔ WHATWG.

بعد از HTML سراغ چه بروم؟

CSS. بلافاصله. HTML بدون CSS مثل خانه‌ای است که فقط دیوارهایش بالا رفته. توصیه‌ام این است که حتی صبر نکنی تا هر ۶۵ جلسه تمام شود؛ بعد از جلسهٔ ۱۴ می‌توانی موازی شروع کنی و همان چیزی را که در HTML یاد گرفته‌ای استایل بدهی.

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

برای شروع HTML به چه چیزی نیاز دارم؟

یک ویرایشگر متن و یک مرورگر. همین. حتی Notepad هم کار می‌کند، هرچند VS Code با تکمیل خودکار و رنگ‌بندی کد کارت را خیلی راحت‌تر می‌کند. نیازی به خرید هاست یا نصب سرور محلی نداری؛ فایل را مستقیم در مرورگر باز می‌کنی.

باید همهٔ ۶۵ جلسه را به ترتیب بخوانم؟

جلسهٔ ۱ تا ۱۴ را بله. بعد از آن هر جلسه مستقل نوشته شده و می‌توانی بر اساس نیازت جلو بروی. مثلاً اگر همین امروز باید یک فرم تماس بسازی، مستقیم برو سراغ جلسهٔ فرم‌ها.

HTML بدون CSS به چه دردی می‌خورد؟

به درد ساختار و معنا. صفحهٔ بدون CSS باز می‌شود، خوانده می‌شود و ایندکس می‌شود، فقط زشت است. برعکسش صادق نیست: CSS بدون HTML هیچ چیزی برای استایل‌دادن ندارد.

آیا HTML برای سئو مهم است؟

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

تفاوت تگ و ویژگی چیست؟

تگ نوع عنصر را مشخص می‌کند و ویژگی جزئیات آن را. در <a href="/contact/"> بخش a تگ است و href ویژگی. یک تگ می‌تواند چند ویژگی داشته باشد و بعضی ویژگی‌ها هم روی همهٔ تگ‌ها کار می‌کنند که در جلسهٔ ویژگی‌های سراسری بررسی می‌شوند.

چطور بفهمم کدی که نوشته‌ام درست است؟

با اعتبارسنج رسمی W3C. کد را می‌چسبانی و فهرست خطاها را می‌بینی. روش کارش را در جلسهٔ سوم قدم‌به‌قدم توضیح داده‌ایم. عادت کن قبل از انتشار هر صفحه یک بار این کار را انجام بدهی.

HTML5 نیاز به یادگیری جداگانه دارد؟

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

بعد از این دوره می‌توانم سایت کامل بسازم؟

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

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

HTML اسکلت هر چیزی است که در وب می‌بینی. این ۶۵ جلسه طوری چیده شده که از یک فایل خالی شروع کنی و به جایی برسی که ساختار یک سایت کامل، به‌همراه دسترس‌پذیری و تنظیمات سئوی <head>، را خودت کنترل کنی.

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