سال‌ها پیش در پروژه‌ای که ساختار صفحه باید در کمترین زمان بازنویسی می‌شد به یک تگ سمنتیک نیاز داشتم که یادم نمی‌آمد کدام یک برای ناحیه‌ی ناوبری اصلی درست است. بین nav و aside و section شک کردم. یک Cheat Sheet کوچک از HTML که سال‌ها کنار دستم بود در چند ثانیه جواب داد. از آن روز فهمیدم Cheat Sheet های HTML ابزار کار روزمره‌ی طراحان و توسعه‌دهندگان وب هستند. در این متن تجربه‌ی خودم از انتخاب و استفاده‌ی مؤثر از این Cheat Sheet ها را با شما در میان می‌گذارم.

چرا HTML به Cheat Sheet نیاز دارد؟

HTML ساده‌ترین زبان نشانه‌گذاری وب است اما بیش از صد تگ دارد که بخش بزرگی از آن‌ها روزمره هستند. تفاوت دقیق بین article و section یا بین strong و b حتی برای توسعه‌دهنده‌های باتجربه همیشه روشن نیست. Cheat Sheet این بار را از حافظه برمی‌دارد و انتخاب درست را ساده می‌کند.

دلیل دوم سرعت کار است. طراح و توسعه‌دهنده‌ی وب روزانه ده‌ها بار با تگ‌های مختلف سروکار دارد و هر بار مراجعه به مستندات رسمی چند دقیقه تمرکز را از بین می‌برد. Cheat Sheet در همان پنجره‌ی کاری است و جریان کار را قطع نمی‌کند. اگر تازه با HTML آشنا می‌شوید راهنمای آموزش HTML از صفر نقطه‌ی شروع خوبی برای یادگیری اولیه است.

دلیل سوم اهمیت HTML در سئو است. ساختار سمنتیک HTML روی درک موتورهای جستجو و موتورهای هوش مصنوعی از محتوای شما اثر مستقیم دارد. انتخاب درست تگ‌ها می‌تواند تفاوت بین سایتی که برای گوگل قابل‌فهم است و سایتی که نیست باشد. اگر تازه با وردپرس آشنا می‌شوید وردپرس چیست و چگونه شروع به کار با آن کنیم نقطه‌ی شروع خوبی است.

HTML فقط تگ‌نویسی نیست؛ ساختار معنایی صفحه است که هم برای گوگل و هم برای screen reader تعیین‌کننده است.

دسته‌بندی Cheat Sheet های HTML

در تجربه‌ی خودم Cheat Sheet های HTML را می‌توان به هفت دسته‌ی کاربردی تقسیم کرد. هر دسته برای نیاز خاصی طراحی شده و انتخاب درست بین آن‌ها بازدهی را چند برابر می‌کند.

  1. ساختار پایه: doctype و html و head و body.
  2. تگ‌های سمنتیک: header و nav و main و article و section.
  3. تگ‌های متنی: heading و paragraph و strong و em.
  4. لینک و تصویر: a و img و picture و figure.
  5. لیست و جدول: ul و ol و dl و table.
  6. فرم: form و input و select و textarea.
  7. متا و سئو: meta و link و title و ساختار head.

در نگاه اول ممکن است فکر کنید یک Cheat Sheet جامع کافی است اما در عمل هرکدام از این دسته‌ها کاربرد روزمره‌ی خودش را دارد. برای پروژه‌ای که روی فرم‌های پیچیده کار می‌کند Cheat Sheet فرم مهم‌ترین است. برای پروژه‌ای که روی سئو تمرکز دارد Cheat Sheet سمنتیک و متا. مسیر کامل تگ‌های عمومی در تگ های پرکاربرد HTML آمده است.

Cheat Sheet ساختار پایه صفحه

ساختار پایه‌ی هر صفحه‌ی HTML چهار بخش اصلی دارد: doctype برای تعیین نسخه‌ی HTML تگ html به‌عنوان ریشه تگ head برای متادیتا و تگ body برای محتوای نمایشی. Cheat Sheet خوب باید این چهار بخش را با مثال نشان دهد.

در تجربه‌ی خودم تفاوت doctypeهای قدیمی XHTML و HTML5 یکی از مواردی است که مبتدی‌ها فراموش می‌کنند. Cheat Sheet ای که doctype صحیح HTML5 را در ابتدای همه‌ی مثال‌ها نشان دهد از بروز اشتباه جلوگیری می‌کند. مسیر کامل این حوزه در HTML5 چیست آمده است.

Cheat Sheet تگ‌های سمنتیک

تگ‌های سمنتیک مهم‌ترین بخش HTML مدرن هستند. Cheat Sheet این حوزه باید پوشش دهد: header برای ناحیه‌ی سربرگ nav برای ناوبری اصلی main برای محتوای اصلی article برای محتوای مستقل section برای بخش‌بندی منطقی و aside برای محتوای جانبی.

در تجربه‌ی خودم بزرگ‌ترین فراموش‌شدگی در این حوزه تفاوت section و article است. article زمانی استفاده می‌شود که محتوا مستقل و قابل بازنشر باشد اما section فقط برای دسته‌بندی منطقی محتوا. Cheat Sheet ای که این تفاوت را روشن کند از یک فهرست ساده مفیدتر است. مسیر کامل این حوزه در سمنتیک HTML آمده است.

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

Cheat Sheet تگ‌های متنی

تگ‌های متنی هسته‌ی محتوای هر صفحه هستند. Cheat Sheet این حوزه باید پوشش دهد: شش سطح heading از h1 تا h6 پاراگراف با p تاکید معنایی با strong و em تفکیک معنایی با b و i نقل‌قول با blockquote و code و pre برای کد.

در تجربه‌ی خودم بزرگ‌ترین فراموش‌شدگی تگ‌های متنی مربوط به تفاوت strong و b است. strong تاکید معنایی را نشان می‌دهد و b فقط ظاهری است. Cheat Sheet ای که این تفاوت را روشن کند به نوشتن HTML سمنتیک کمک می‌کند. مسیر کامل این حوزه در تگ های پرکاربرد HTML آمده است.

لینک و تصویر بخش بزرگی از هر صفحه‌ی وب را می‌سازند. Cheat Sheet این حوزه باید پوشش دهد: ساخت لینک با a و صفت‌های href و target و rel ساخت تصویر با img و صفت‌های src و alt و width و height استفاده از picture برای تصاویر ریسپانسیو و figure و figcaption برای تصاویر با توضیح.

در تجربه‌ی خودم بزرگ‌ترین فراموش‌شدگی در این حوزه صفت alt برای تصاویر است که هم برای سئو و هم برای دسترس‌پذیری اهمیت دارد. Cheat Sheet ای که اهمیت alt را در مثال‌ها نشان دهد از غفلت جلوگیری می‌کند. مسیر کامل این حوزه در تگ alt تصاویر چگونه سئو را بهبود می‌دهد آمده است.

Cheat Sheet لیست و جدول

لیست و جدول دو ساختار مهم HTML هستند که هرکدام کاربرد خاص خودشان را دارند. Cheat Sheet این حوزه باید پوشش دهد: لیست نامرتب با ul لیست مرتب با ol لیست تعریف با dl و dt و dd جدول با table و thead و tbody و tr و th و td.

در تجربه‌ی خودم بزرگ‌ترین اشتباه در این حوزه استفاده از جدول برای چیدمان است که از نظر سئو و دسترس‌پذیری اشتباه است. Cheat Sheet ای که جدول را فقط برای داده‌های جدولی معرفی کند از این اشتباه جلوگیری می‌کند. مسیر کامل این حوزه در جدول در HTML و لیست ها در HTML آمده است.

جدول در HTML فقط برای داده‌های جدولی است؛ استفاده از آن برای چیدمان یکی از قدیمی‌ترین اشتباهات طراحی وب است.

Cheat Sheet فرم‌ها

فرم‌ها بخش پرکاربرد هر سایت هستند و Cheat Sheet این حوزه باید پوشش دهد: تگ form با صفت‌های action و method انواع input شامل text و email و password و number و checkbox و radio تگ select برای لیست کشویی تگ textarea برای متن‌های طولانی و صفت‌های مهم مثل required و placeholder و autocomplete.

در تجربه‌ی خودم بزرگ‌ترین فراموش‌شدگی فرم مربوط به type صحیح input برای هر فیلد است که روی تجربه‌ی کاربری موبایل اثر مستقیم دارد. مثلاً type=email کیبورد مناسب را باز می‌کند. Cheat Sheet ای که این نکته را نشان دهد از خطاهای تجربه‌ی کاربری جلوگیری می‌کند. مسیر کامل این حوزه در فرم در HTML آمده است.

اهمیت فرم‌ها در سئو و AEO امروز بیشتر شده چون موتورهای هوش مصنوعی از ساختار فرم برای پاسخ‌دهی استفاده می‌کنند. اگر روی سایت‌های آموزشی کار می‌کنید نگاهی به آموزش استفاده از REST API در وردپرس برای ارتباط فرم‌ها با سیستم‌های خارجی بیندازید.

Cheat Sheet متا و سئو

متا تگ‌ها بخش فنی head هستند که روی سئو و نمایش در نتایج جستجو اثر مستقیم دارند. Cheat Sheet این حوزه باید پوشش دهد: meta charset برای تعیین انکدینگ meta viewport برای طراحی ریسپانسیو meta description برای توضیحات صفحه و تگ title و link canonical.

در تجربه‌ی خودم بزرگ‌ترین فراموش‌شدگی در این حوزه meta viewport است که بدون آن سایت روی موبایل به‌درستی نمایش داده نمی‌شود. Cheat Sheet ای که همه‌ی متاتگ‌های ضروری را در ابتدای نمونه‌ها نشان دهد از این اشتباه جلوگیری می‌کند. مسیر کامل این حوزه در متا تگ ها در HTML آمده است.

Cheat Sheet دسترس‌پذیری

دسترس‌پذیری در HTML از طریق صفت‌های ARIA و ساختار سمنتیک انجام می‌شود. Cheat Sheet این حوزه باید پوشش دهد: صفت‌های ARIA مثل aria-label و aria-hidden صفت alt برای تصاویر صفت lang برای تعیین زبان و ساختار heading به‌درست.

در تجربه‌ی خودم دسترس‌پذیری بخشی از HTML است که کمتر جدی گرفته می‌شود اما در پروژه‌های بین‌المللی معیار انتخاب است. Cheat Sheet ای که این اصول را در مثال‌ها نشان دهد از این غفلت جلوگیری می‌کند. مسیر کامل این حوزه در استانداردهای دسترس‌پذیری وب آمده است.

معیارهای انتخاب Cheat Sheet معتبر

Cheat Sheet های HTML در اینترنت بسیارند اما کیفیتشان متفاوت است. پنج معیار در تجربه‌ی خودم Cheat Sheet معتبر را از نامعتبر جدا می‌کند.

  1. پوشش HTML5 و تگ‌های سمنتیک: Cheat Sheet ای که فقط تگ‌های HTML4 را پوشش دهد امروز ناقص است.
  2. هشدار درباره تگ‌های منسوخ: Cheat Sheet معتبر تگ‌های deprecated مثل center و font را به‌عنوان منسوخ مشخص می‌کند.
  3. ساختار جدول و فهرست: Cheat Sheet باید فشرده و قابل اسکن باشد نه پاراگراف‌های بلند.
  4. مثال عملی برای هر تگ: Cheat Sheet ای که فقط اسم تگ را فهرست کند کم‌ارزش است.
  5. پوشش دسترس‌پذیری: Cheat Sheet مدرن HTML باید صفت‌های ARIA و اهمیت alt را پوشش دهد.

این معیارها را می‌توانید روی هر Cheat Sheet ای اعمال کنید. اگر بیش از دو معیار را پاس نکرد انتخاب بعدی را جدی بگیرید. مسیر مقایسه با Cheat Sheet های دیگر زبان‌ها را در Cheat Sheet های CSS و Cheat Sheet های JavaScript نوشته‌ام.

ساخت Cheat Sheet شخصی HTML

Cheat Sheet شخصی HTML مفیدتر از Cheat Sheet عمومی است چون دقیقاً نیازهای شما را پوشش می‌دهد. در تجربه‌ی خودم ساخت آن چهار مرحله دارد.

  1. شروع با ساختار عمومی: یک Cheat Sheet عمومی معتبر را به‌عنوان ساختار شروع انتخاب کنید.
  2. حذف تگ‌های بلد: تگ‌هایی که از حفظ هستید حذف کنید. Cheat Sheet شخصی باید فقط تگ‌های فراموش‌شدنی باشد.
  3. افزودن snippet شخصی: ساختارهای تکراری پروژه‌های خودتان را اضافه کنید. مثلاً یک قالب فرم تماس یا یک ساختار تیپیک صفحه‌ی محصول.
  4. به‌روزرسانی ماهانه: هر ماه فایل را باز کنید و تگ‌های جدیدی که یاد گرفتید اضافه کنید.

در تجربه‌ی خودم Cheat Sheet شخصی HTML در سه فرمت مفید است: یک فایل Markdown در پوشه‌ی پروژه یک مجموعه snippet در محیط کد ادیتور و یک فایل در اپ یادداشت گوشی برای مرور سریع. تفاوت این سه در دسترسی است نه در محتوا. برای توسعه‌دهنده‌ای که با وردپرس کار می‌کند Cheat Sheet شخصی HTML اغلب با ساختارهای تکراری قالب پر می‌شود. مسیر ساخت این ساختارها را در ساخت قالب اختصاصی وردپرس چه مراحلی دارد نوشته‌ام.

اشتباهات رایج در استفاده از Cheat Sheet HTML

  • استفاده از Cheat Sheet مربوط به HTML4: بخش بزرگی از Cheat Sheet های قدیمی تگ‌های منسوخ را معرفی می‌کنند که امروز معتبر نیستند.
  • نادیده گرفتن تگ‌های سمنتیک: Cheat Sheet ای که فقط div و span را پوشش دهد ناقص است.
  • نداشتن Cheat Sheet شخصی: اتکا فقط به Cheat Sheet عمومی بازدهی کمتری دارد چون ساختارهای تکراری پروژه‌های شما در آن نیست.
  • استفاده به‌عنوان جایگزین یادگیری: Cheat Sheet ابزار یادآوری است نه یادگیری اولیه. برای یادگیری پایه نیاز به منبع جامع دارید.
  • نادیده گرفتن دسترس‌پذیری: Cheat Sheet مدرن HTML باید صفت‌های ARIA و alt را پوشش دهد نه فقط تگ‌های ظاهری.

اشتباهات مشابه در استفاده از Cheat Sheet های دیگر زبان‌ها را در Cheat Sheet های Python و Cheat Sheet های Git نوشته‌ام. برای مقایسه با Cheat Sheet های دیتابیس هم نگاهی به Cheat Sheet های MySQL بیندازید.

پرسش‌های پرتکرار درباره Cheat Sheet های HTML

آیا Cheat Sheet HTML برای مبتدی‌ها هم مفید است؟

برای مبتدی‌ها به‌عنوان مرجع بعد از یادگیری اولیه بله اما نه به‌عنوان جایگزین یادگیری. برای شروع آموزش HTML از صفر را بخوانید و Cheat Sheet را کنار آن استفاده کنید.

کدام Cheat Sheet HTML بهترین است؟

بهترین Cheat Sheet آن است که هم HTML5 و تگ‌های سمنتیک را پوشش دهد هم صفت‌های دسترس‌پذیری و متاتگ‌های ضروری. برای طراحی وب Cheat Sheet ساختار صفحه و فرم مهم‌ترین است. برای سئو Cheat Sheet متا و تگ‌های سمنتیک.

آیا Cheat Sheet جایگزین مستندات رسمی MDN است؟

خیر. مستندات رسمی MDN جامع و دقیق است. Cheat Sheet فقط یادآوری سریع است. برای پروژه‌های پیچیده باید به مستندات رسمی مراجعه کنید اما برای کار روزمره Cheat Sheet کافی است.

چطور Cheat Sheet شخصی HTML بسازم؟

با یک Cheat Sheet عمومی معتبر شروع کنید و ساختارهای تکراری پروژه‌های خودتان اضافه کنید. یک فایل Markdown در پوشه‌ی پروژه بهترین شروع است. ساختارهای فرم و صفحه‌ی محصول که مکرراً استفاده می‌کنید را در آن برجسته کنید.

آیا برای پروژه‌های وردپرسی Cheat Sheet HTML اختصاصی لازم است؟

بله. وردپرس ساختارهای خاص خودش مثل تگ‌های قالب و ساختار حلقه‌ها دارد که در Cheat Sheet های عمومی HTML پوشش کافی نمی‌گیرند. مسیر این حوزه را در ساختار فایل‌های یک قالب استاندارد وردپرس نوشته‌ام.

آیا Cheat Sheet HTML را باید چاپ کرد؟

Cheat Sheet HTML معمولاً کوتاه‌تر از Cheat Sheet های دیگر زبان‌هاست و یک نسخه‌ی چاپی کنار میز می‌تواند مفید باشد. برای توسعه‌دهنده‌ای که در IDE کار می‌کند نسخه‌ی دیجیتال کافی است اما برای مطالعه و مرور، چاپ مفیدتر است.

چطور Cheat Sheet را به‌روز نگه دارم؟

یک عادت ماهانه بگذارید: هر ماه فایل را باز کنید و تگ یا صفت جدیدی که یاد گرفتید اضافه کنید. HTML هم هر چند سال با ویژگی‌های جدید مثل dialog و template به‌روز می‌شود و Cheat Sheet باید هم‌راستا به‌روز شود. برای مطلع شدن از تغییرات، وبلاگ MDN یا WHATWG را دنبال کنید.

Cheat Sheet و کیفیت کد HTML

Cheat Sheet های HTML یک ابزار کوچک اما پرارزش در کار طراحان و توسعه‌دهندگان وب هستند. تفاوت یک توسعه‌دهنده‌ی حرفه‌ای با یک مبتدی اغلب در کیفیت ساختار HTML است: انتخاب درست تگ‌های سمنتیک صفت‌های دسترس‌پذیری و متاتگ‌های ضروری. Cheat Sheet دقیقاً همین شکاف را پر می‌کند. یک فایل که با هر جست‌وجوی فراموش‌شده پر می‌شود بعد از یک سال به یک مرجع اختصاصی تبدیل می‌شود که در هیچ سایت یا کتاب دیگری پیدا نمی‌شود.

پیشنهاد عملی من: با یک Cheat Sheet عمومی معتبر از تگ‌های سمنتیک و ساختار پایه شروع کنید و بعد آن را با ساختارهای تکرارشونده‌ی پروژه‌های خودتان غنی کنید. یک ماه بعد با بخش متا و دسترس‌پذیری ترکیبش کنید. این فایل کوچک در طول سال اول به یکی از پرارزش‌ترین ابزارهای کار شما تبدیل می‌شود. اگر تجربه‌ی جالبی از Cheat Sheet شخصی HTML دارید در دیدگاه‌ها به اشتراک بگذارید تا فهرست نکات کاربردی کامل‌تر شود. 📄