یک تعاونی زعفران در تربت‌حیدریه سفارش‌ها را با یک فرم کوچک می‌گیرد. پیش از هر عنصر دیگری، سه چیز بالای فایل تعیین می‌کند که این صفحه برای یک خواننده فارسی‌زبان اصلاً درست باز می‌شود یا نه:
<html lang="fa" dir="rtl"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
lang="fa" به مرورگر و به صفحه‌خوان می‌گوید این متن فارسی است، و صفحه‌خوان با همین یک صفت لهجه‌اش را عوض می‌کند. dir="rtl" جهت را روی کل سند می‌گذارد، پس ترتیب ستون‌ها و جای نوار پیمایش و حتی جای علامت نقطه در انتهای جمله درست می‌شود، بدون یک سطر CSS. و meta charset که اشتباه باشد، یک صفحه فارسی به‌شکل مربع می‌رسد؛ این تنها خرابی این فهرست است که همه یک بار دیده‌اندش و کمتر کسی می‌داند از کجاست.
حالا خود فرم. همان چهار عنصر، و چهار رفتاری که کسی ننوشته:
<label for="geram">گرم</label><input type="number" id="geram" name="geram" min="1" required><img src="zaferan.jpg" alt="سه گرم رشته زعفران روی ترازوی کاغذی"><button type="submit">ارسال</button>
label با for="geram" به input با id="geram" جفت می‌شود، و کلیک روی برچسب، فیلد را فوکوس می‌کند، که دلیل این است که یک برچسب از متنی که کنار جعبه نشسته بیشتر می‌ارزد. type="number" روی گوشی صفحه‌کلید عددی می‌آورد. required باعث می‌شود مرورگر بدون هیچ اسکریپتی ارسال را رد کند. و button type="submit" فوکوس‌پذیر است، با صفحه‌کلید کار می‌کند و به‌شکل دکمه اعلام می‌شود، در حالی که یک div با onclick در ترتیب تب نیست و به Enter جواب نمی‌دهد.
سند یک درخت است، و سرش بخشی از تصویر نیست
هر صفحه یک درخت است با یک ریشه، و اولین دوراهی همان است که آدم‌ها از رویش می‌پرند: head می‌گوید صفحه چیست و body می‌گوید صفحه چه نشان می‌دهد. عنوان، کدگذاری کاراکتر، آن سطر viewport که تعیین می‌کند گوشی صفحه را کوچک می‌کند یا نه، و توضیحی که نتیجه جست‌وجو چاپش می‌کند، همه در head زندگی می‌کنند و هیچ‌وقت رسم نمی‌شوند.
پایین‌تر، main و nav و header نشانه‌هایی هستند که صفحه‌خوان می‌تواند میانشان بپرد، یعنی یک منوی پیمایش که با درست بودن تگ‌ها مجانی به دست می‌آید. صفحه‌ای که کاملاً از div ساخته شده هیچ نشانه‌ای ندارد، پس تنها راه عبور از آن خواندن از بالاست. ترتیبی که درخت نوشته می‌شود همان ترتیبی است که خوانده می‌شود، هر بلایی که استایل بعداً سر چیدمان بیاورد، و این سر، بدنه، و ترتیبی که سند خوانده می‌شود است.
عنصرهایی که از قبل می‌گویند چه هستند
قاعده زیر همه این‌ها این است که مرورگر می‌داند دکمه و فهرست و سرتیتر و فیلد فرم چه هستند، و درباره یک div هیچ نمی‌داند. انتخاب عنصری که نام آن چیز است ادب نیست، راهی است که رفتار صفحه‌کلید و اعلام صفحه‌خوان و صفحه‌کلید گوشی از آن می‌رسند، و عنصرهایی که می‌گویند چه هستند، و این به درد چه کسی می‌خورد است.
فرم‌ها بیشتر از هر چیز دیگری روی صفحه از این رفتار مجانی حمل می‌کنند: اعتبارسنجی، ارسال با Enter، پیوند میان یک پرسش و جعبه‌اش، و گروه شدن مجموعه‌ای از دکمه‌های رادیویی. آن ورودی، برچسب، اعتبارسنجی و ارسال است. تصویرها نیمه دیگرش را دارند، جایی که صفت‌ها هم تعیین می‌کنند صفحه‌خوان چه می‌گوید و هم چقدر از حجم اینترنت کسی خرج می‌شود، در قالب، اندازه، و صفت‌هایی که مهم‌اند.
همان صفحه، از بیرون
صفحه‌خوان روی صفحه سفارش تعاونی به کجاها می‌تواند بپرد
شش بخش، و خواننده‌ای که صفحه را نمی‌بیند به‌جای خواندن از بالا مستقیم میانشان جابه‌جا می‌شود.
- ۰۱سفارش زعفران | تعاونی تربت
- ۰۳فرم سفارش تعاونی زعفران
- ۰۴گرم [ سه ]
- ۰۵سه گرم رشته زعفران روی ترازوی کاغذی
- ۰۶ارسال
- ۰۱title داخل headاول از همه خوانده می‌شود، و تنها چیزی است که در فهرست سی تب باز دیده می‌شود
- ۰۲header و navیک نشانه، پس می‌شود ردش کرد به‌جای شنیدنش در هر صفحه
- ۰۳h1یکی در هر صفحه، و جواب این پرسش که اصلاً به چه نگاه می‌کنم
- ۰۴label و input، جفت‌شدههمین جفت شدن است که فیلد را وادار می‌کند پرسشش را اعلام کند
- ۰۵img با altآن جمله، همان صفت alt است، خوانده‌شده جایی که تصویر هست
- ۰۶buttonبا Tab قابل رسیدن، با Enter فعال، و به‌شکل دکمه اعلام‌شده
قاب از روی مشخصات رسم شده نه از روی عکس صفحه، پس هیچ چیزی اینجا نمی‌تواند بی‌صدا از نشانه‌گذاری‌ای که توصیف می‌کند عقب بیفتد.
ابزار، و سالی که این حرف درست است
یک بازرس دسترس‌پذیری همان ابزاری است که این کار را عوض می‌کند. جای امیدوار بودن و خواندن یک چک‌لیست را گرفت، که هیچ‌کدام برچسب جاافتاده روی فیلد دوم یک فرم را که ساعت چهار بعدازظهر نوشته شده پیدا نمی‌کنند. نسخه‌های رایگانش هم داخل مرورگر اجرا می‌شوند و هم داخل ویرایشگر، و برای یک صفحه فارسی چیزی را هم می‌گیرند که در انگلیسی پیش نمی‌آید: عنصری که متنش فارسی است و lang ندارد.
اعتبارسنج HTML که نهاد استاندارد می‌گرداند رایگان است و هنوز سریع‌ترین راه پیدا کردن تگی است که با ترتیب غلط بسته شده. جای دورانی را گرفت که هر مرورگر برای نشانه‌گذاری خراب حدس دیگری می‌زد. مرجع عنصرهای MDN هم رایگان است و همانی است که باید باز نگه داشت؛ جای آموزش‌هایی را گرفت که یک مشت div و یک شیوه‌نامه یاد می‌دادند.
اشتباه: راست‌به‌چپ کردن صفحه با CSS به‌جای گفتنش به سند
این همان جایی است که کار فارسی می‌ایستد و در هیچ صفحه انگلیسی‌ای پیش نمی‌آید. کسی که dir را روی html نگذاشته باشد، صفحه را چپ‌به‌راست می‌بیند و شروع می‌کند به درست کردنش با استایل: text-align: right روی همه چیز، بعد floatهای برعکس، بعد حاشیه‌های دستی. صفحه در نگاه اول درست می‌شود و چهار چیز خراب می‌ماند که هیچ‌کدام دیده نمی‌شوند: جای علامت نگارشی سر جمله‌ای که با یک واژه لاتین تمام می‌شود، ترتیب خواندن برای صفحه‌خوان، جهت پیمایش با صفحه‌کلید، و رفتار فیلدی که هم فارسی و هم شماره می‌گیرد.
یک صفت روی یک تگ همه این‌ها را با هم درست می‌کند، و بعدش استایل فقط استایل است. قاعده‌ای که تمامش می‌کند: جهت و زبان صفت سند هستند نه شیوه‌نامه، و اگر مجبور شدید در CSS بنویسید right، احتمالاً دارید چیزی را جبران می‌کنید که یک سطر بالاتر گفته نشده.
پرسشی که این صفحه باز می‌گذارد این است که وقتی جهت و ساختار درست شد، چیدمان و ظاهر از کجا می‌آیند، که CSS است؛ و اینکه همین صفحه چطور از سرور به مرورگر می‌رسد بک‌اند. هر دو زیر وب نشسته‌اند.