درس ۳۰ از ۴۵ · صفحه‌های وب

سر صفحه، اسکریپت و ویژگی‌های همگانی

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

در این درس

تنظیم‌های خود صفحه
متا، پیوند و پایه نشانی
سبک، اسکریپت و بدون اسکریپت
قالب، جایگاه و درخت سایه
ویژگی‌هایی که هر عنصر دارد
واشو بدون اسکریپت
ARIA: وقتی عنصر کافی نیست
ویژگی‌های داده
تقسیم یک سایت به بخش‌ها
مرجع: عنصرهای سر صفحه و ویژگی‌های همگانی
خودتان امتحان کنید

تنظیم‌های خود صفحه

نخستین سطرهای درون صفحه:، پیش از هر عنصر، درباره‌ی خود صفحه‌اند و نه چیزی روی آن. عنوان متن زبانه‌ی مرورگر است، در نشانک‌ها و در نتیجه‌ی جستجو هم دیده می‌شود. زبان می‌گوید متن به چه زبانی است و مقدارهایش en، fa و ar (انگلیسی، فارسی و عربی) هستند. صفحه‌خوان‌ها از آن صدایشان را برمی‌گزینند و مرورگرها گیومه و شکستن واژه‌ی درست را. جهت جهت متن را تعیین می‌کند: ltr یا rtl، یا همان چپ به راست و راست به چپ. نماد نشانی نماد کوچک روی زبانه است.

پرونده‌ی فارسی خودش با fa و rtl شروع می‌شود و پرونده‌ی انگلیسی با en و ltr، پس این دو را فقط وقتی می‌نویسید که صفحه با پرونده‌اش فرق دارد. هر ویژگی سبکی که در همین سطح بنویسید، مثل پس زمینه، رنگ یا خانواده قلم، کل بدنه‌ی صفحه را سبک می‌دهد.

web-head-settings.salam

صفحه:
    عنوان = "نانوایی سر نبش"
    زبان = "فارسی"
    جهت = "راست به چپ"
    نماد = "/favicon.svg"
    پس زمینه = "#fdf6ec"
    رنگ = "#3b2a1a"
    خانواده قلم = "Tahoma, system-ui, sans-serif"
    فاصله = 28
    متا: نام = "description" محتوا = "هر صبح نان تازه" پایان
    سرتیتر: اندازه = 1 محتوا = "نانوایی سر نبش" پایان
    پاراگراف: محتوا = "هر صبح نان تازه." پایان
    پاراگراف: محتوا = "زبانه‌ی مرورگر «نانوایی سر نبش» را نشان می‌دهد، زبان صفحه فارسی است و متن از راست به چپ می‌رود." پایان
پایان

صفحه بیشتر چیزهایی را که اینجا تنظیم می‌کنید نشان نمی‌دهد، پس خوب است بدانید مترجم خودش چه می‌سازد. هر صفحه با <!doctype html> شروع می‌شود و بعد سر صفحه‌ای که <meta charset="utf-8"> در آن است، تا هر نویسه‌ی هر زبانی درست دیده شود، و <meta name="viewport" content="width=device-width, initial-scale=1">، که به گوشی می‌گوید پهنای واقعی صفحه را به کار ببرد و وانمود نکند یک رایانه‌ی رومیزی پهن است. هیچ‌کدام را لازم نیست بنویسید. اگر عنوان ندهید زبانه «Salam Page» را نشان می‌دهد.

متا، پیوند و پایه نشانی

بعضی عنصرها صفحه را توصیف می‌کنند و هرگز کشیده نمی‌شوند. می‌توانید هرجای صفحه: بنویسیدشان و مترجم به سر صفحه می‌برد: متا، پیوند سر، پایه نشانی و ظاهر سفارشی.

متا یک واقعیت را به شکل جفت نام و محتوا می‌برد. description خلاصه‌ی زیر نتیجه‌ی جستجوست. robots با noindex از موتورهای جستجو می‌خواهد صفحه را رد کنند. theme-color نوار مرورگر را در گوشی رنگ می‌کند. برای پیش‌نمایش پیوند در برنامه‌های پیام‌رسان، پروتکل Open Graph به جای نام از خاصیت استفاده می‌کند: og:title، og:description و og:image. و معادل اچ‌تی‌تی‌پی اجازه می‌دهد برچسب مثل یک سرایند HTTP رفتار کند.

پیوند سر صفحه را به نشانی دیگری وصل می‌کند و رابطه را در رابطه نام می‌برد. stylesheet یک CSS بارگذاری می‌کند، icon نماد می‌گذارد، canonical می‌گوید وقتی یک صفحه از چند راه در دسترس است نشانی اصلی کدام است، preload از مرورگر می‌خواهد بارگیری یک قلم یا تصویر را زودتر شروع کند، و alternate همراه زبان مقصد به ترجمه اشاره می‌کند. نشانی‌اش نشانی است. نامش دو واژه است تا با پیوند، همان پیوند قابل کلیک در بدنه، اشتباه نشود.

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

نمونه‌ی زیر در سر صفحه‌اش یک description و یک پیوند canonical دارد و دکمه‌ای آن‌ها را با دام.پرسمان (dom.Query)، که عنصری را با گزینشگر CSS پیدا می‌کند، و دام.دریافت ویژگی (dom.GetAttr)، که یکی از ویژگی‌هایش را می‌خواند، دوباره نشان می‌دهد.

web-head-inspect.salam

واردسازی دام

تابع بازخوانی:
    دام.تنظیم متن(دام.با شناسه("out-title")، "عنوان: " + دام.دریافت متن(دام.پرسمان("title")))
    دام.تنظیم متن(دام.با شناسه("out-lang")، "زبان: " + دام.دریافت ویژگی(دام.پرسمان("html")، "lang"))
    دام.تنظیم متن(دام.با شناسه("out-desc")، "شرح: " + دام.دریافت ویژگی(دام.پرسمان("meta[name=description]")، "content"))
    دام.تنظیم متن(دام.با شناسه("out-canon")، "نشانی اصلی: " + دام.دریافت ویژگی(دام.پرسمان("link[rel=canonical]")، "href"))
پایان

صفحه:
    عنوان = "خواندن سر صفحه"
    متا: نام = "description" محتوا = "صفحه‌ای که سر خودش را می‌خواند." پایان
    پیوند سر: رابطه = "canonical" نشانی = "https://example.com/head" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه: کلیک = بازخوانی محتوا = "سر صفحه را بخوان" پایان
    پاراگراف: شناسه = "out-title" محتوا = "عنوان: ؟" پایان
    پاراگراف: شناسه = "out-lang" محتوا = "زبان: ؟" پایان
    پاراگراف: شناسه = "out-desc" محتوا = "شرح: ؟" پایان
    پاراگراف: شناسه = "out-canon" محتوا = "نشانی اصلی: ؟" پایان
پایان

مترجم از پیش برچسب‌های charset و viewport را می‌نویسد. نوشتن charset دوم فقط دو تا از آن به صفحه می‌دهد. متا را برای گفتن چیزی بنویسید که مترجم نمی‌تواند بداند: شرح، نویسنده و پیش‌نمایش صفحه.

سبک، اسکریپت و بدون اسکریپت

سلام برای بیشتر کارها ویژگی سبک و ویژگی رویداد دارد، ولی دو عنصر برای متن خام نگه داشته شده‌اند. ظاهر سفارشی (style) CSS ساده را در محتوا می‌برد، برای چیزهایی که ویژگی‌ها نمی‌پوشانند: @keyframes، ویژگی‌های سفارشی و قاعده‌های چاپ یا حالت تیره. با رسانه قاعده‌ها فقط وقتی اعمال می‌شوند که پرس‌وجو بخواند. مثل متا به سر صفحه می‌رود.

اسکریپت سفارشی (script) جاوااسکریپت را در محتوا یا در پرونده‌ای که با نشانی می‌دهید می‌برد. برخلاف عنصرهای بالا، اسکریپت همان‌جا که نوشته‌اید می‌ماند، پس آن را بعد از عنصرهایی بگذارید که تغییر می‌دهد. اگر کد گیومه‌ی دوتایی دارد، رشته را میان بک‌تیک بنویسید. چهار ویژگی تعیین می‌کنند اسکریپتِ یک پرونده کی اجرا شود. اسکریپت کلاسیک به محض رسیدن مرورگر اجرا می‌شود و تا تمام شدنش صفحه را نگه می‌دارد. با تاخیر اجرا (defer) پرونده را هم‌زمان با خواندن صفحه می‌گیرد و پس از خواندن کل صفحه، به ترتیب، اجرا می‌کند. ناهمگام (async) به محض رسیدن و با هر ترتیبی اجرا می‌کند، که به درد اسکریپت مستقلی مثل آمار می‌خورد. نوع = "module" آن را ماژول ES می‌کند و مثل با تاخیر اجرا منتظر صفحه می‌ماند. بدون ماژول کلید برعکس است: مرورگرهایی که ماژول را می‌شناسند آن را رد می‌کنند، پس جایگزینی برای مرورگرهای خیلی قدیمی است. برای اسکریپتی از سایت دیگر یکپارچگی (چکیده‌ی پرونده‌ای که انتظار دارید) و میان‌مبدا را هم بنویسید تا پرونده‌ی عوض‌شده در صفحه‌ی شما اجرا نشود.

در این نمونه دو اسکریپت در یک پاراگراف می‌نویسند. اسکریپت ماژول اول نوشته شده ولی اسکریپت کلاسیک اول در می‌آید، چون ماژول منتظر صفحه می‌ماند.

web-head-script.salam

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    اسکریپت سفارشی: نوع = "module" محتوا = "document.getElementById('log').textContent += ' ماژول (منتظر پایان صفحه)'" پایان
    پاراگراف: محتوا = "ترتیب اجرا:" پایان
    پاراگراف: شناسه = "log" محتوا = "" پایان
    اسکریپت سفارشی: محتوا = "document.getElementById('log').textContent += ' معمولی (همان لحظه)'" پایان
    بدون اسکریپت: محتوا = "برای دیدن ترتیب اجرا به جاوااسکریپت نیاز است." پایان
پایان

بدون اسکریپت (noscript) فقط وقتی دیده می‌شود که اسکریپت‌ها خاموش یا مسدود باشند. یک پیام کوتاه یا جایگزینی ساده در آن بگذارید تا بازدیدکننده‌ای که جاوااسکریپت ندارد به جای جای خالی چیز مفیدی ببیند. در پیش‌نمایش بالا اسکریپت اجرا شد، پس آن را نمی‌بینید.

قالب، جایگاه و درخت سایه

قالب (template) بلوکی از عنصرهاست که مرورگر می‌خواندش ولی نمی‌کشدش. اسکریپت‌ها از آن نسخه می‌گیرند تا تکه‌های تازه‌ای برای صفحه بسازند. اگر حالت ریشه سایه (shadowrootmode) بدهید کار مفیدتری می‌کند: درون خصوصی عنصر والدش می‌شود، که درخت سایه نام دارد. سبک‌های بقیه‌ی صفحه به درخت سایه راه نمی‌یابند و سبک‌های آن بیرون نمی‌ریزند، پس جای خوبی برای یک ابزار مستقل است.

عنصر والد میزبان است. فرزندهای خودش مستقیم کشیده نمی‌شوند و در عنصرهای جایگاه (slot) درخت سایه نشان داده می‌شوند: جایگاهی که نام دارد فرزندهایی را می‌گیرد که ویژگی جایگاهشان همان نام است، و جایگاه بی‌نام بقیه را. آنچه درون جایگاه بنویسید فقط وقتی دیده می‌شود که چیزی برایش داده نشده باشد.

web-head-shadow.salam

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        شناسه = "card"
        قالب:
            حالت ریشه سایه = "باز"
            جعبه:
                بخش سایه = "frame"
                استایل = "border: 2px solid crimson; padding: 8px; border-radius: 8px"
                پاراگراف: استایل = "margin: 0 0 6px; color: crimson" محتوا = "درون سایه" پایان
                جایگاه: پایان
                جایگاه: نام = "note" محتوا = "یادداشتی نیست" پایان
            پایان
        پایان
        تکه: محتوا = "فرزند معمولی. " پایان
        تکه: جایگاه = "note" محتوا = "یک یادداشت نام‌دار" پایان
    پایان
    پاراگراف: محتوا = "بیرون از کارت." پایان
پایان

اینجا حالت ریشه سایه = "باز" (open) اجازه می‌دهد اسکریپت‌ها از element.shadowRoot به درخت برسند و بسته (closed) پنهانش می‌کند. سه ویژگی دیگر، واگذاری تمرکز ریشه سایه، ریشه سایه کپی‌پذیر و ریشه سایه سریال‌پذیر، کلیدهای تمرکز، کپی و ذخیره‌اند و در مرجع آمده‌اند. درخت سایه می‌تواند دری برای سبک‌های بیرونی باز کند: به یک عنصر درون آن بخش سایه (part) بدهید تا صفحه با ::part(name) سبکش دهد، و صادرات بخش بخش‌ها را یک سطح بیشتر عبور می‌دهد.

عنصر ظاهر سفارشی: حتی اگر درون یک قالب بنویسیدش به سر صفحه می‌رود، پس صفحه‌ی بیرونی را سبک می‌دهد و نه درخت سایه را. درون درخت سایه عنصر را با استایل (inline style) سبک بدهید، همان‌طور که نمونه می‌کند.

ویژگی‌هایی که هر عنصر دارد

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

شناسه یک عنصر را نام می‌دهد، یکتا در صفحه. پیوندها، برچسب‌ها و اسکریپت‌ها عنصر را با آن پیدا می‌کنند و مترجم شناسه‌هایی را که در همان صفحه می‌نویسید وارسی می‌کند، پس نام غلط در دام.با شناسه هنگام ساخت خطاست و نه یک اشکال بی‌صدا. کلاس نام یک گروه است. سلام برای ویژگی‌های سبک شما خودش کلاس می‌سازد و برای عنصرهای هم‌سبک یک کلاس می‌دهد، پس به‌ندرت خودتان آن را می‌نویسید. وقتی می‌نویسید قاعده را به یاد داشته باشید: دو عنصر با یک کلاس و ویژگی‌های سبک متفاوت خطاست (E136)، چون بر سر کلاس دعوا می‌کنند. عنوان یک راهنمای شناور است و روی صفحه‌ی لمسی دیده نمی‌شود، پس فقط یک اشاره است. استایل رشته‌ای از CSS می‌گیرد و بر همه‌ی چیزهای دیگر غلبه می‌کند، پس آخرین انتخاب است. پنهان عنصر را پنهان می‌کند. با قابل جستجو (until-found) عنصر پنهان است ولی مرورگر می‌تواند متنش را در جستجو پیدا کند و بازش کند.

گروه بعدی درباره‌ی کار بازدیدکننده با عنصر است. ترتیب جهش = 0 عنصر را در ترتیب Tab می‌گذارد و -1 فقط به اسکریپت اجازه‌ی فوکوس می‌دهد. کلید دسترسی یک کلید میان‌بر می‌دهد. ویرایش‌پذیر اجازه می‌دهد بازدیدکننده محتوا را ویرایش کند. کشیدنی اجازه‌ی کشیدن می‌دهد. بی‌اثر عنصر و هرچه درونش است را خاموش می‌کند. تمرکز خودکار هنگام باز شدن صفحه مکان‌نما را درون عنصر می‌برد. نمونه‌ی زیر یادداشتی را ویرایش‌پذیر می‌کند، با کنترل‌گر ورودی در هر ضربه‌ی کلید آن را می‌خواند و در پاراگراف دومی نشان می‌دهد.

web-head-editable.salam

واردسازی دام

تابع بازتاب:
    دام.تنظیم متن(دام.با شناسه("status")، "یادداشت می‌گوید: " + دام.دریافت متن(دام.با شناسه("note")))
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: محتوا = "روی جعبه کلیک کنید و بنویسید. یک عنصر معمولی است که می‌شود ویرایشش کرد." پایان
    جعبه:
        شناسه = "note"
        ویرایش‌پذیر = درست
        غلط‌یاب = بله
        ترتیب جهش = ۰
        فاصله = 12
        کادر = "2px dashed #64748b"
        گردی کادر = 8
        محتوا = "یک یادداشت کوتاه"
        ورودی = بازتاب
    پایان
    پاراگراف: شناسه = "status" محتوا = "یادداشت می‌گوید: یک یادداشت کوتاه" پایان
پایان

برای نوشتن متن اشاره‌هایی برای صفحه‌کلید گوشی هست: حالت ورود صفحه‌کلید را برمی‌گزیند، راهنمای کلید ورود برچسب کلید Enter را می‌گذارد، و حروف بزرگ خودکار، تصحیح خودکار، غلط‌یاب و پیشنهاد نوشتن کار صفحه‌کلید و مرورگر را با متن مشخص می‌کنند. زبان و جهت روی یک عنصر هم کار می‌کنند، پس نام انگلیسی میان یک پاراگراف فارسی می‌تواند جهت خودش را داشته باشد. ترجمه‌پذیر = "خیر" از ابزارهای ترجمه می‌خواهد واژه‌ای مثل نام برند را دست نزنند.

متن مهم را فقط در عنوان یا کلید دسترسی پنهان نکنید. به بعضی بازدیدکننده‌ها کمک می‌کنند و برای بعضی دیگر دیده نمی‌شوند. آنچه مهم است را متن عادیِ دیدنی بنویسید.

واشو (popover) جعبه‌ای است که تا وقتی چیزی بازش نکند پنهان می‌ماند و بعد روی صفحه شناور می‌شود. مرورگر همه‌ی کار را می‌کند: بی کنترل‌گر، بی عوض کردن پنهان، بی z-index. به جعبه واشو و یک شناسه بدهید. به یک دکمه هدف واشو با همان شناسه بدهید. با واشو = "خودکار" جعبه وقتی بازدیدکننده بیرون از آن کلیک کند یا Escape بزند بسته می‌شود، و واشوهای خودکار دیگر را هم پیش از خود می‌بندد. با دستی تا وقتی چیزی نبندد می‌ماند. ویژگی دوم، کنش واشو، می‌گوید دکمه چه می‌کند: جابه‌جا (toggle، پیش‌فرض)، نمایش (show) یا پنهان (hide).

web-head-popover.salam

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه: هدف واشو = "tip" محتوا = "واشو چیست؟" پایان
    جعبه:
        شناسه = "tip"
        واشو = "خودکار"
        فاصله = 14
        کادر = "1px solid #94a3b8"
        گردی کادر = 8
        محتوا = "جعبه‌ای که روی صفحه باز می‌شود. بیرون از آن کلیک کنید یا Escape را بزنید تا بسته شود."
    پایان
پایان

ARIA: وقتی عنصر کافی نیست

صفحه‌خوان‌ها و دیگر ابزارهای کمکی صفحه‌ی شما را نمی‌بینند. آنچه مرورگر درباره‌ی هر عنصر می‌داند را می‌خوانند: نقش، نام و حالتش. دکمه به عنوان دکمه شناخته می‌شود و فهرست به عنوان فهرست، و چیز دیگری لازم نیست. قاعده‌ی اول ARIA این است که اگر عنصر بومی هست آن را به کار ببرید. ویژگی‌های ARIA برای جاهایی هستند که چیزی را با دست می‌سازید یا حالت عوض می‌شود: نقش می‌گوید یک جعبه‌ی ساده چیست (progressbar، status، tablist) و ویژگی‌هایی که با aria و یک نام نوشته می‌شوند برچسب، حالت یا پیوندی میان عنصرها می‌افزایند.

سه تا همیشه به کار می‌روند. برچسب دسترسی‌پذیری (aria label) به عنصری که متن دیدنی ندارد نام می‌دهد، مثل دکمه‌ای که فقط نماد دارد. پنهان از دسترسی‌پذیری (aria hidden) تزئین را از صفحه‌خوان‌ها پنهان می‌کند. باز شده دسترسی‌پذیری (aria expanded) و کنترل‌کننده دسترسی‌پذیری (aria controls) می‌گویند یک دکمه چیزی را باز یا بسته می‌کند و آن چیز کدام عنصر است. مرورگر aria expanded را به‌روز نگه نمی‌دارد. کد شما باید با هر تغییر حالت آن را عوض کند، همان‌طور که نمونه می‌کند.

web-head-aria.salam

واردسازی دام

ناپایا بازاست := نادرست

تابع بازوبسته:
    بازاست = وارونه بازاست
    سوییچ := دام.با شناسه("menu-button")
    اگر بازاست:
        دام.تنظیم ویژگی(سوییچ، "aria-expanded"، "true")
        دام.تنظیم متن(سوییچ، "پنهان کردن منو")
    وگرنه:
        دام.تنظیم ویژگی(سوییچ، "aria-expanded"، "false")
        دام.تنظیم متن(سوییچ، "نمایش منو")
    پایان
    دام.تنظیم خاصیت منطقی(دام.با شناسه("menu")، "hidden"، وارونه بازاست)
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه:
        شناسه = "menu-button"
        باز شده دسترسی‌پذیری = "false"
        کنترل‌کننده دسترسی‌پذیری = "menu"
        کلیک = بازوبسته
        محتوا = "نمایش منو"
    پایان
    فهرست:
        شناسه = "menu"
        پنهان = درست
        مورد: محتوا = "خانه" پایان
        مورد: محتوا = "فروشگاه" پایان
        مورد: محتوا = "تماس" پایان
    پایان
پایان

کنترل‌گر یک متغیر را برعکس می‌کند، aria-expanded را با دام.تنظیم ویژگی روی مقدار تازه می‌گذارد، متن دکمه را عوض می‌کند و فهرست را با دام.تنظیم خاصیت منطقی روی خاصیت hidden نشان می‌دهد یا پنهان می‌کند. هر ویژگی ARIA دیگر هم همین‌طور نوشته می‌شود: aria، یک فاصله و نام، مثل aria live یا aria describedby.

ویژگی ARIA غلط از نبودنش بدتر است: نقش = "button" روی یک جعبه به خواننده می‌گوید دکمه است، ولی آن را فوکوس‌پذیر نمی‌کند و به کلید Enter هم جواب نمی‌دهد. وقتی یک دکمه‌ی بومی کار را می‌کند آن را به کار ببرید.

ویژگی‌های داده

گاهی عنصر باید واقعیت کوچکی را برای کد خودتان با خود ببرد: شناسه‌ی یک رکورد، یک قیمت، یک حالت. برای این کار داده، یک فاصله و یک نام بنویسید. داده price = "12" در HTML به data-price تبدیل می‌شود و چند واژه با خط تیره به هم وصل می‌شوند. مقدارها همیشه رشته‌اند. ویژگی دیده نمی‌شود، CSS با گزینشگری مثل [data-mode='dark'] می‌تواند پیدایش کند و کنترل‌گر با دام.دریافت ویژگی می‌خواندش.

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

web-head-data.salam

واردسازی دام

تابع انتخاب(رویداد: صحیح۶۴):
    طرح := دام.هدف رویداد(رویداد)
    دام.تنظیم متن(دام.با شناسه("chosen")، دام.دریافت ویژگی(طرح، "data-plan") + "، ماهی " + دام.دریافت ویژگی(طرح، "data-price") + " هزار تومان")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = flex
        شکاف = 8
        فضا = "0 0 12px"
        دکمه: داده plan = "پایه" داده price = "۵۰" کلیک = انتخاب محتوا = "پایه" پایان
        دکمه: داده plan = "تیمی" داده price = "۱۲۰" کلیک = انتخاب محتوا = "تیمی" پایان
        دکمه: داده plan = "شرکتی" داده price = "۴۰۰" کلیک = انتخاب محتوا = "شرکتی" پایان
    پایان
    پاراگراف: شناسه = "chosen" محتوا = "یک طرح انتخاب کنید." پایان
پایان

نام‌هایی مثل mode، lang، view، only و id در مرجع آمده‌اند، ولی فقط به عنوان نمونه‌ی الگو. هر نامی کار می‌کند. اگر اسکریپتی باید ویژگی را بخواند نام را با حرف‌های انگلیسی بنویسید.

تقسیم یک سایت به بخش‌ها

صفحه‌ای که یک جعبه را ده بار تکرار می‌کند، یا ده صفحه که یک پاورقی را تکرار می‌کنند، نشانه‌ی آن‌اند که به بخش نیاز دارید. سلام سه ابزار دارد. بخش (component) عنصری نام‌دار و قابل استفاده‌ی دوباره با پارامترهاست. درونش محتوا: پایان جایی را نشان می‌دهد که فرزندهای نوشته‌شده در فراخوانی در آن می‌نشینند. پایا (const) بالای صفحه مقداری را نگه می‌دارد که در چند جا به کار می‌رود. تکرار روی یک عنصر آن را به همان تعداد می‌نویسد. نمونه‌ی زیر هر سه را به کار می‌برد.

web-head-component.salam

پایا فروشگاه := "نانوایی سر نبش"

بخش تابلو(عنوان):
    بخش:
        فاصله = 14
        فضا = "0 0 12px"
        کادر = "1px solid #cbd5e1"
        گردی کادر = 8
        سرتیتر: اندازه = 3 فضا = "0 0 6px" محتوا = عنوان پایان
        محتوا: پایان
    پایان
پایان

صفحه:
    عنوان = فروشگاه
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    تابلو: عنوان = "ساعت کار"
        پاراگراف: محتوا = "هر روز از ۷ تا ۱۹." پایان
    پایان
    تابلو: عنوان = "نان امروز"
        فهرست:
            مورد: تکرار = 3 محتوا = "یک نان تازه" پایان
        پایان
    پایان
    پاورقی: محتوا = فروشگاه + "، هر روز باز است" پایان
پایان

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

بخش تابلو(عنوان):
    بخش:
        سرتیتر: اندازه = 3 محتوا = عنوان پایان
        محتوا: پایان
    پایان
پایان

این پرونده‌ی parts.salam است و فقط بخش را دارد. بعد هر صفحه‌ای که لازمش دارد می‌گوید:

صفحه:
    بگنجان = "parts.salam"
    تابلو: عنوان = "ساعت کار"
        پاراگراف: محتوا = "هر روز از ۷ تا ۱۹." پایان
    پایان
پایان

`بگنجان`

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

مرجع: عنصرهای سر صفحه و ویژگی‌های همگانی

در ادامه عنصرهایی می‌آیند که در سر صفحه یا کنار آن هستند، بعد ویژگی‌های همگانی، ARIA و ویژگی‌های داده. همه‌ی نمونه‌ها را مترجم وارسی کرده است. نام‌های فارسی در هر پرونده کار می‌کنند و درس‌های فارسی از آن‌ها استفاده می‌کنند.

`صفحه` (English: `page`)

خود بلوک صفحه. این یک برچسب HTML نیست و کل سند را نشان می‌دهد. درست درون آن می‌توانید عنوان، زبان، جهت و نماد و هر ویژگی سبک (که بدنه‌ی صفحه را سبک می‌دهد) را بنویسید و بعد عنصرهای صفحه را. مترجم <head> را خودش می‌نویسد و charset و viewport از پیش در آن هستند.

صفحه:
    عنوان = "نانوایی سر نبش"
    زبان = "فارسی"
    پس زمینه = "#fdf6ec"
    پاراگراف: محتوا = "هر صبح نان تازه." پایان
پایان

ویژگی	کار آن	نمونه
`نماد` favicon	نماد کوچکی که مرورگر روی زبانه نشان می‌دهد. نشانی یک تصویر را می‌گیرد، مثل پرونده‌ی `.svg`، `.png` یا `.ico`، و در سر صفحه به `<link rel="icon">` تبدیل می‌شود. نشانی‌هایی که می‌توانند کد اجرا کنند، مثل `javascript:`، رد می‌شوند. [url]	`صفحه: نماد = "/favicon.svg" پاراگراف: محتوا = "زبانه یک نماد دارد." پایان پایان`

`متا` (English: `meta`; HTML: `<meta>`)

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

متا: نام = "description" محتوا = "هر صبح نان تازه." پایان

فقط درون: page · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`نام` name	نوع اطلاعاتی که این برچسب می‌دهد. نام‌های رایج `description` (خلاصه‌ی زیر نتیجه‌ی جستجو)، `viewport`، `theme-color`، `robots` (با `noindex` به موتور جستجو می‌گویید فهرستش نکند) و `author` هستند. همیشه همراه `محتوا` می‌آید. [string]	`متا: نام = "robots" محتوا = "noindex" پایان`
`محتوا` content	مقدار اطلاعاتی که با `نام`، `خاصیت` یا `معادل اچ‌تی‌تی‌پی` نام برده شده است. متنی ساده است. برای `description` یک یا دو جمله‌ی حدود ۱۵۰ نویسه بنویسید. [string]	`متا: نام = "author" محتوا = "علی رضایی" پایان`
`خاصیت` property	پروتکل Open Graph از آن استفاده می‌کند، و برنامه‌های پیام‌رسان و شبکه‌های اجتماعی از روی آن برای پیوند شما کارت پیش‌نمایش می‌سازند. نام‌ها با `og:` شروع می‌شوند، مثل `og:title`، `og:description` و `og:image`. برای آن‌ها به جای `نام` از `خاصیت` استفاده کنید. [string]	`متا: خاصیت = "og:title" محتوا = "نانوایی سر نبش" پایان`
`نویسه‌گان` charset	رمزگذاری متن پرونده را اعلام می‌کند. مترجم از پیش `<meta charset="utf-8">` را اولِ هر سر صفحه می‌گذارد و `utf-8` تنها مقداری است که می‌خواهید، پس تقریباً هرگز خودتان آن را نمی‌نویسید. [charset]	`متا: نویسه‌گان = "utf-8" پایان`
`معادل اچ‌تی‌تی‌پی` http_equiv	باعث می‌شود برچسب مثل یک سرایند HTTP رفتار کند. `refresh` پس از چند ثانیه صفحه را دوباره بارگذاری یا هدایت می‌کند، `content-security-policy` چیزهایی را که صفحه می‌تواند بارگذاری کند محدود می‌کند و `x-ua-compatible` تنظیمی قدیمی است. تا می‌توانید سرایندهای واقعی کارگزار را ترجیح دهید. [string]	`متا: معادل اچ‌تی‌تی‌پی = "content-security-policy" محتوا = "default-src 'self'" پایان`
`رسانه` media	یک پرس‌وجوی رسانه که می‌گوید برچسب چه وقت به کار می‌آید. بیشتر با `theme-color` استفاده می‌شود تا نوار مرورگر در حالت روشن یک رنگ و در حالت تیره رنگ دیگری داشته باشد. [media_query]	`متا: نام = "theme-color" محتوا = "#0f766e" رسانه = "(prefers-color-scheme: light)" پایان`

`پیوند سر` (English: `head link`; HTML: `<link>`)

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

پیوند سر: رابطه = "stylesheet" نشانی = "/site.css" پایان

الزامی: rel, url · فقط درون: page · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`رابطه` rel	نوع رابطه، به صورت یک واژه یا چند واژه با فاصله. موردهای پرکاربرد `stylesheet`، `icon`، `canonical` (نشانی اصلی و یکتای این صفحه)، `preload` و `preconnect` (کار را زودتر شروع می‌کنند)، `alternate`، `manifest` و `mask-icon` هستند. [token (list)]	`پیوند سر: رابطه = "canonical" نشانی = "https://example.com/bakery" پایان`
`نوع` type	نوع MIME پرونده‌ی پیوندشده، تا مرورگر آنچه را نمی‌تواند به کار ببرد رد کند. مثال‌ها: `text/css`، `image/svg+xml`، `font/woff2`. [mime]	`پیوند سر: رابطه = "icon" نوع = "image/svg+xml" نشانی = "/icon.svg" پایان`
`میان‌مبدا` crossorigin	روش درخواست پرونده‌ای از سایت دیگر. `ناشناس` (anonymous) کوکی نمی‌فرستد و `با اعتبارنامه` (use-credentials) می‌فرستد. قلم‌ها را همیشه، حتی از سایت خودتان، با `ناشناس` بارگذاری کنید وگرنه پیش‌بارگذاری هدر می‌رود. [enum: crossorigin]	`پیوند سر: رابطه = "preload" به عنوان = "font" نوع = "font/woff2" نشانی = "/fonts/a.woff2" میان‌مبدا = "ناشناس" پایان`
`اندازه‌ها` sizes	برای `rel = "icon"`: اندازه‌ی نماد به پیکسل، مثل `32x32` یا `180x180`، یا `any` برای SVG مقیاس‌پذیر. چند اندازه را با فاصله جدا کنید. [string]	`پیوند سر: رابطه = "icon" اندازه‌ها = "32x32" نشانی = "/icon-32.png" پایان`
`به عنوان` as	برای `rel = "preload"`: پرونده‌ای که بارگذاری می‌شود از چه نوعی است، تا مرورگر اولویت درست را بدهد. مقدارها: `style`، `script`، `font`، `image`، `fetch`. [token]	`پیوند سر: رابطه = "preload" به عنوان = "style" نشانی = "/site.css" پایان`
`رسانه` media	یک پرس‌وجوی رسانه. پرونده‌ی پیوندشده فقط وقتی به کار می‌رود که با آن بخواند؛ برگه‌ی سبک چاپ یا برگه‌ی سبک صفحه‌ی بزرگ را این‌طور پیوند می‌دهند. [media_query]	`پیوند سر: رابطه = "stylesheet" نشانی = "/print.css" رسانه = "print" پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی فعلی هنگام درخواست پرونده همراه فرستاده شود. مقدارها: `no-referrer`، `origin`، `same-origin`، `strict-origin-when-cross-origin` (پیش‌فرض معمول) و `unsafe-url`. [enum: referrer_policy]	`پیوند سر: رابطه = "stylesheet" نشانی = "https://cdn.example.com/a.css" سیاست ارجاع = "no-referrer" پایان`
`غیرفعال` disabled	`درست` برگه‌ی سبک را پیوند می‌دهد ولی خاموش نگه می‌دارد. یک اسکریپت بعداً می‌تواند روشنش کند. فقط برگه‌های سبک به آن توجه می‌کنند. [bool]	`پیوند سر: رابطه = "stylesheet" نشانی = "/dark.css" غیرفعال = درست پایان`
`زبان مقصد` hreflang	زبان صفحه‌ی پیوندشده. با `rel = "alternate"` موتورهای جستجو را به نسخه‌ی ترجمه‌شده‌ی این صفحه می‌برد. [lang]	`پیوند سر: رابطه = "alternate" زبان مقصد = "en" نشانی = "/en/" پایان`
`اولویت دریافت` fetch priority	اشاره‌ای به اهمیت این بارگیری: `زیاد` (high)، `کم` (low) یا `خودکار` (auto). `زیاد` را کم به کار ببرید، برای تنها چیزی که صفحه‌ی اول بدونش نمی‌شود. [enum: fetch_priority]	`پیوند سر: رابطه = "preload" به عنوان = "image" نشانی = "/hero.jpg" اولویت دریافت = "زیاد" پایان`
`یکپارچگی` integrity	چکیده‌ی پرونده‌ی مورد انتظار، به شکل `sha384-` و رمز base64. اگر پرونده نخواند مرورگر آن را نمی‌پذیرد، پس پرونده‌ای که روی کارگزار دیگران عوض شده باشد در صفحه‌ی شما اجرا نمی‌شود. برای پرونده‌های سایت دیگر `میان‌مبدا` را هم بنویسید. [string]	`پیوند سر: رابطه = "stylesheet" نشانی = "https://cdn.example.com/a.css" یکپارچگی = "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" میان‌مبدا = "ناشناس" پایان`
`مجموعه منبع تصویر` imagesrcset	برای پیش‌بارگذاری یک تصویر واکنش‌گرا: همان فهرست پرونده‌ها و پهنایی که خود تصویر دارد، مثل `a-480.jpg 480w, a-960.jpg 960w`. با `به عنوان = "image"` و `اندازه‌های تصویر` به کار می‌رود. [srcset]	`پیوند سر: رابطه = "preload" به عنوان = "image" نشانی = "/a-480.jpg" مجموعه منبع تصویر = "/a-480.jpg 480w, /a-960.jpg 960w" اندازه‌های تصویر = "100vw" پایان`
`اندازه‌های تصویر` imagesizes	تصویر پیش‌بارگذاری‌شده در صفحه چقدر پهن خواهد بود، به شکل مقدار `sizes` مثل `100vw` یا `(max-width: 600px) 100vw, 600px`. با آن مرورگر پرونده‌ی درست را از `مجموعه منبع تصویر` برمی‌دارد. [string]	`پیوند سر: رابطه = "preload" به عنوان = "image" نشانی = "/a-480.jpg" مجموعه منبع تصویر = "/a-480.jpg 480w, /a-960.jpg 960w" اندازه‌های تصویر = "(max-width: 600px) 100vw, 600px" پایان`
`مسدودکننده` blocking	`render` به مرورگر می‌گوید تا این پرونده بارگذاری نشده صفحه را نکشد. فقط برای برگه‌ی سبکی به کار ببرید که نباید چشمک بزند. [enum: blocking (list)]	`پیوند سر: رابطه = "stylesheet" نشانی = "/theme.css" مسدودکننده = "render" پایان`
`رنگ` color	رنگی برای `rel = "mask-icon"`، نماد تک‌رنگ زبانه‌ی سنجاق‌شده در سافاری. [color]	`پیوند سر: رابطه = "mask-icon" نشانی = "/mask.svg" رنگ = "#0f766e" پایان`
`نشانی` url	نشانی پرونده‌ی پیوندشده. در HTML به صورت `href` نوشته می‌شود. هم نشانی نسبی (`/site.css`، `css/site.css`) درست است و هم نشانی کامل. [url]	`پیوند سر: رابطه = "stylesheet" نشانی = "css/site.css" پایان`

`پایه نشانی` (English: `base`; HTML: `<base>`)

نشانی‌ای را تعیین می‌کند که همه‌ی پیوندها و پرونده‌های نسبی صفحه از آن سنجیده می‌شوند، و هدف پیش‌فرض پیوندها را. فقط یکی می‌تواند باشد و همه‌ی نشانی‌های نسبی را عوض می‌کند، پس با احتیاط به کار ببریدش.

پایه نشانی: نشانی = "https://example.com/docs/" پایان

فقط درون: page · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`نشانی` url	نشانی پایه، که در HTML به صورت `href` نوشته می‌شود. آن‌گاه پیوند به `intro.html` به `https://example.com/docs/intro.html` می‌رود. [url]	`پایه نشانی: نشانی = "/docs/" پایان`
`هدف` target	پیوندهایی که خودشان چیزی نگفته‌اند کجا باز شوند: `همین پنجره` (_self، پیش‌فرض)، `پنجره جدید` (_blank)، `پنجره والد` (_parent) یا `پنجره اصلی` (_top). [enum: target]	`پایه نشانی: هدف = "پنجره جدید" پایان`

`ظاهر سفارشی` (English: `style`; HTML: `<style>`)

یک بلوک CSS خام، برای قاعده‌هایی که ویژگی‌های سبک نمی‌توانند بیان کنند: @keyframes، ویژگی‌های سفارشی (--brand)، @media print و prefers-color-scheme. متنش همان‌طور که هست نوشته می‌شود، پس از ویژگی محتوا استفاده کنید. مثل متا خودش به سر صفحه می‌رود.

ظاهر سفارشی: محتوا = "@keyframes pulse { to { opacity: 0.4 } }" پایان

ویژگی	کار آن	نمونه
`رسانه` media	یک پرس‌وجوی رسانه برای کل بلوک. قاعده‌ها فقط وقتی اعمال می‌شوند که با آن بخواند، مثلاً `print` یا `(prefers-color-scheme: dark)`. [media_query]	`ظاهر سفارشی: رسانه = "(prefers-color-scheme: dark)" محتوا = "body { background: #111; color: #eee }" پایان`
`مسدودکننده` blocking	`render` نخستین کشیدن صفحه را تا تحلیل قاعده‌های سبک نگه می‌دارد. برای CSS درون‌صفحه‌ای به‌ندرت اهمیت دارد. [enum: blocking (list)]	`ظاهر سفارشی: مسدودکننده = "render" محتوا = "body { margin: 0 }" پایان`

`اسکریپت سفارشی` (English: `script`; HTML: `<script>`)

قطعه‌ای جاوااسکریپت، که یا در محتوا نوشته می‌شود یا با نشانی از یک پرونده بارگذاری می‌شود. همان‌جا که نوشته‌اید می‌ماند، پس آن را بعد از عنصرهایی بگذارید که تغییر می‌دهد. بیشتر صفحه‌های سلام به آن نیاز ندارند، چون ویژگی‌های رویداد و بسته‌ی dom کارهای معمول را انجام می‌دهند، ولی راه استفاده از یک کتابخانه‌ی جاوااسکریپت است.

اسکریپت سفارشی: محتوا = "document.title = 'سلام'" پایان

ویژگی	کار آن	نمونه
`میان‌مبدا` crossorigin	روش درخواست پرونده وقتی از مبدا دیگری می‌آید: `ناشناس` یا `با اعتبارنامه`. با `یکپارچگی` لازم است، و برای پیام‌های خطای خوانا از مبداهای دیگر. [enum: crossorigin]	`اسکریپت سفارشی: نشانی = "https://cdn.example.com/lib.js" میان‌مبدا = "ناشناس" پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی شما هنگام دریافت اسکریپت فرستاده شود. مقدارها مثل `پیوند سر` است، مثلاً `no-referrer` یا `origin`. [enum: referrer_policy]	`اسکریپت سفارشی: نشانی = "https://cdn.example.com/lib.js" سیاست ارجاع = "origin" پایان`
`اولویت دریافت` fetch priority	اشاره‌ای به اهمیت این اسکریپت: `زیاد`، `کم` یا `خودکار`. [enum: fetch_priority]	`اسکریپت سفارشی: نشانی = "/analytics.js" اولویت دریافت = "کم" ناهمگام = درست پایان`
`یکپارچگی` integrity	چکیده‌ی مورد انتظار پرونده‌ی اسکریپت، به شکل `sha384-` و رمز base64. اگر کسی پرونده را عوض کند مرورگر اجرایش نمی‌کند. برای اسکریپت‌هایی که از CDN می‌آیند همیشه بنویسیدش. [string]	`اسکریپت سفارشی: نشانی = "https://cdn.example.com/lib.js" یکپارچگی = "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" میان‌مبدا = "ناشناس" پایان`
`مسدودکننده` blocking	`render` تا اجرای این اسکریپت از کشیدن صفحه جلوگیری می‌کند. فقط برای اسکریپتی که باید پیش از نخستین کشیدن اجرا شود. [enum: blocking (list)]	`اسکریپت سفارشی: مسدودکننده = "render" محتوا = "document.documentElement.dataset.theme = 'dark'" پایان`
`نوع` type	`module` اسکریپت را به یک ماژول ES تبدیل می‌کند: می‌تواند `import` داشته باشد، در حالت سخت‌گیر است و مثل `defer` منتظر می‌ماند صفحه خوانده شود. بدون آن اسکریپت کلاسیک است و به محض دیدنش اجرا می‌شود. مقدارهای دیگر، مثل `application/json`، باعث می‌شوند مرورگر متن را بدون اجرا فقط به عنوان داده نگه دارد. [string]	`اسکریپت سفارشی: نوع = "module" محتوا = "console.log('module')" پایان`
`بدون ماژول` nomodule	`درست` باعث می‌شود مرورگرهایی که ماژول را می‌فهمند این اسکریپت را رد کنند. آن را با یک نسخه‌ی ماژولی جفت کنید تا مرورگرهای قدیمی نسخه‌ی جایگزین بگیرند. [bool]	`اسکریپت سفارشی: بدون ماژول = درست نشانی = "/legacy.js" پایان`
`ناهمگام` async	`درست` پرونده را هم‌زمان با خواندن صفحه می‌گیرد و به محض رسیدن، با هر ترتیبی، اجرا می‌کند. برای اسکریپت‌های مستقل مثل آمار خوب است. فقط روی اسکریپت‌هایی اثر دارد که `نشانی` دارند. [bool]	`اسکریپت سفارشی: نشانی = "/stats.js" ناهمگام = درست پایان`
`با تاخیر اجرا` defer	`درست` پرونده را هم‌زمان با خواندن صفحه می‌گیرد و پس از خواندن کل صفحه، به ترتیبی که نوشته‌اید، اجرا می‌کند. برای اسکریپت‌هایی که وجود عنصرها را لازم دارند خوب است. فقط روی اسکریپت‌هایی اثر دارد که `نشانی` دارند. [bool]	`اسکریپت سفارشی: نشانی = "/app.js" با تاخیر اجرا = درست پایان`
`نشانی` url	نشانی پرونده‌ی اسکریپت، که در HTML به صورت `src` نوشته می‌شود. اسکریپت یا `نشانی` دارد یا `محتوای` خودش را، نه هر دو. [url]	`اسکریپت سفارشی: نشانی = "/js/app.js" با تاخیر اجرا = درست پایان`

`بدون اسکریپت` (English: `noscript`; HTML: `<noscript>`)

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

بدون اسکریپت: محتوا = "برای استفاده از ماشین‌حساب جاوااسکریپت را روشن کنید." پایان

`قالب` (English: `template`; HTML: `<template>`)

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

جعبه:
    قالب:
        حالت ریشه سایه = "باز"
        پاراگراف: استایل = "color: teal" محتوا = "من در ریشه‌ی سایه هستم" پایان
    پایان
پایان

ویژگی	کار آن	نمونه
`حالت ریشه سایه` shadowrootmode	قالب را به ریشه‌ی سایه‌ی عنصر والدش تبدیل می‌کند. `باز` (open) اجازه می‌دهد اسکریپت‌ها از `element.shadowRoot` به آن برسند و `بسته` (closed) پنهانش می‌کند. بدون این ویژگی قالب فقط یک انبار بی‌اثر است. [enum: shadow_root_mode]	`جعبه: قالب: حالت ریشه سایه = "باز" پاراگراف: محتوا = "درون" پایان پایان پایان`
`واگذاری تمرکز ریشه سایه` shadowrootdelegatesfocus	`درست` باعث می‌شود کلیک روی بخش‌های غیرفوکوس‌پذیر درخت سایه، و فراخوانی `focus()` روی میزبان، تمرکز را به نخستین عنصر فوکوس‌پذیر درون ببرد. [bool]	`جعبه: قالب: حالت ریشه سایه = "باز" واگذاری تمرکز ریشه سایه = درست دکمه: محتوا = "درون" پایان پایان پایان`
`ریشه سایه کپی‌پذیر` shadowrootclonable	`درست` اجازه می‌دهد وقتی میزبان با `cloneNode` کپی می‌شود ریشه‌ی سایه هم کپی شود. بدون آن نسخه‌ی کپی درخت سایه ندارد. [bool]	`جعبه: قالب: حالت ریشه سایه = "باز" ریشه سایه کپی‌پذیر = درست پاراگراف: محتوا = "این هم کپی می‌شود" پایان پایان پایان`
`ریشه سایه سریال‌پذیر` shadowrootserializable	`درست` اجازه می‌دهد وقتی میزبان با `getHTML()` دوباره به HTML تبدیل می‌شود ریشه‌ی سایه هم در آن بیاید. [bool]	`جعبه: قالب: حالت ریشه سایه = "باز" ریشه سایه سریال‌پذیر = درست پاراگراف: محتوا = "همراه میزبان ذخیره می‌شود" پایان پایان پایان`

`جایگاه` (English: `slot`; HTML: `<slot>`)

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

جعبه:
    قالب:
        حالت ریشه سایه = "باز"
        جایگاه: محتوا = "چیزی برای نمایش نیست" پایان
    پایان
پایان

ویژگی	کار آن	نمونه
`نام` name	به جایگاه نام می‌دهد. فرزندی از میزبان که در ویژگی `جایگاه` خودش همین نام را دارد در این جایگاه می‌نشیند. جایگاه بی‌نام فرزندهایی را می‌گیرد که `جایگاه` ندارند. [string]	`جعبه: قالب: حالت ریشه سایه = "باز" جایگاه: نام = "title" پایان پایان سرتیتر: اندازه = 2 جایگاه = "title" محتوا = "سلام" پایان پایان`

ویژگی‌های همگانی: شناسه، متن و سبک

این‌ها روی هر عنصری کار می‌کنند. ویژگی بگنجان در بخش تقسیم یک سایت توضیح داده شد.

ویژگی	کار آن	نمونه
`شناسه` id	نام یک عنصر، یکتا در صفحه. پیوندها، برچسب‌ها، `کنترل‌کننده دسترسی‌پذیری`، اسکریپت‌ها (`dom.ById`) و بخش انتهای نشانی (`page.html#intro`) به آن اشاره می‌کنند. مترجم شناسه‌های همان صفحه را وارسی می‌کند، پس غلط املایی در `دام.با شناسه` خطای ساخت است. [token]	`پاراگراف: شناسه = "intro" محتوا = "نخستین پاراگراف." پایان`
`کلاس` class	نام گروهی که عنصرها می‌توانند با هم داشته باشند. در سلام به‌ندرت لازمش دارید، چون مترجم خودش برای ویژگی‌های سبک شما کلاس می‌سازد و به عنصرهای هم‌سبک یک کلاس می‌دهد. وقتی اسکریپت یا برگه‌ی سبک بیرونی به یک نقطه‌ی اتصال نیاز دارد بنویسیدش. دو عنصر با یک کلاس باید ویژگی‌های سبک یکسان داشته باشند، وگرنه ساخت با خطای E136 متوقف می‌شود. [string]	`پاراگراف: کلاس = "lead" رنگ = "teal" محتوا = "یک کلاس می‌تواند مشترک باشد." پایان`
`عنوان` title	اطلاعات اضافی درباره‌ی عنصر که بیشتر مرورگرها وقتی موشواره روی آن می‌ایستد در یک راهنمای شناور نشان می‌دهند. روی صفحه‌ی لمسی دیده نمی‌شود، پس هرگز متن ضروری را در آن نگذارید. روی خود صفحه، `عنوان` متن زبانه‌ی مرورگر است. [string]	`پاراگراف: عنوان = "ساعت ۷ باز می‌شود و ۱۹ بسته" محتوا = "برای دیدن ساعت کار، موشواره را نگه دارید." پایان`
`استایل` inline_style	رشته‌ای از CSS که مستقیم درون عنصر نوشته می‌شود، مثل `color: crimson; font-weight: bold`. بر کلاس‌هایی که مترجم می‌سازد پیشی می‌گیرد. ویژگی‌های سبک سلام را ترجیح دهید. این یکی را درون درخت سایه به کار ببرید، جایی که قاعده‌های بیرونی نمی‌رسند، یا وقتی متن CSS از جای دیگری می‌آید. [string]	`پاراگراف: استایل = "color: crimson; font-weight: bold" محتوا = "همان‌جا سبک داده شد." پایان`
`پنهان` hidden	`درست` عنصر را پنهان می‌کند: جایی نمی‌گیرد و صفحه‌خوان‌ها از آن می‌گذرند. `قابل جستجو` (until-found) پنهانش می‌کند ولی اجازه می‌دهد جستجوی درون صفحه‌ی مرورگر و پیوند به شناسه‌اش بازش کنند. `نادرست` ویژگی را حذف می‌کند. اگر خودتان سبک `display` بدهید می‌تواند بر `hidden` غلبه کند. [bool_enum: hidden_state]	`پاراگراف: پنهان = "قابل جستجو" محتوا = "تا وقتی جستجو پیدایم کند پنهانم." پایان`
`محتوا` content	متن درون عنصر. همیشه متن ساده است، پس `<` و `&` همان‌طور که هستند دیده می‌شوند و هرگز به نشانه‌گذاری تبدیل نمی‌شوند. باید پیش از عنصرهای فرزند بیاید. می‌توانید آن را با `+` از ثابت‌ها و عددها بسازید. [string]	`پاراگراف: محتوا = "تام و جری، ۲ < ۳ &" پایان`
`تکرار` repeat	عنصر را چند بار پشت سر هم از یک سطر می‌نویسد. شماره باید هنگام ساخت صفحه معلوم باشد (یک عدد یا یک ثابت). برای طرح‌های اولیه و فهرست‌هایی که همه‌ی موردهایشان یکی است به کار می‌آید. [uint]	`فهرست: مورد: تکرار = 3 محتوا = "یک سطر" پایان پایان`

ویژگی‌های همگانی: تمرکز، ویرایش و کشیدن

ویژگی	کار آن	نمونه
`ترتیب جهش` tabindex	جای عنصر در ترتیب کلید Tab. `0` عنصری را که معمولاً فوکوس‌پذیر نیست به ترتیب طبیعی می‌افزاید، `-1` اجازه می‌دهد اسکریپت آن را فوکوس کند ولی از ترتیب Tab بیرونش نگه می‌دارد، و عدد مثبت از صف می‌پرد که باید از آن پرهیز کنید. دکمه‌ها، پیوندها و ورودی‌ها از قبل فوکوس‌پذیرند. [int]	`جعبه: ترتیب جهش = 0 محتوا = "Tab را بزنید تا به من برسید." پایان`
`کلید دسترسی` accesskey	کلیدی که به عنصر می‌پرد یا آن را فشار می‌دهد و با یک کلید کمکی به کار می‌رود که به مرورگر و سامانه بستگی دارد (اغلب `Alt` یا `Alt+Shift`). یک نویسه، یا چند نویسه که به ترتیب امتحان می‌شوند. کم استفاده‌اش کنید، چون می‌تواند با کلیدهای مرورگر و صفحه‌خوان‌ها تداخل کند. [token (list)]	`دکمه: کلید دسترسی = "s" محتوا = "ذخیره (Alt+S)" پایان`
`تمرکز خودکار` autofocus	`درست` هنگام باز شدن صفحه مکان‌نما را در این عنصر می‌گذارد. در هر صفحه یکی. آن را روی فیلدی بگذارید که بازدیدکننده تقریباً حتماً اول سراغش می‌رود، مثل کادر جستجو، و نه در صفحه‌ی بلندی که صفحه را از بالا دور می‌کند. [bool]	`ورودی: نوع = "search" تمرکز خودکار = درست پایان`
`ویرایش‌پذیر` contenteditable	به بازدیدکننده اجازه می‌دهد محتوای عنصر را مستقیم ویرایش کند، مثل یک ویرایشگر کوچک. مقدارها: `بله` (true)، `خیر` (false) و `فقط متن` (plaintext-only، بدون پررنگ و قالب‌بندی چسبانده‌شده). چیزی را که نوشته‌اند با `دام.دریافت متن` از یک کنترل‌گر `ورودی` بخوانید. [enum: content_editable]	`جعبه: ویرایش‌پذیر = "فقط متن" محتوا = "این متن را ویرایش کنید" پایان`
`کشیدنی` draggable	`بله` به بازدیدکننده اجازه می‌دهد عنصر را با موشواره بردارد و بکشد؛ `خیر` جلوی کشیده شدن تصویرها و پیوندها را می‌گیرد که به‌طور پیش‌فرض کشیدنی‌اند. رویدادهای کشیدن می‌گویند بعد چه می‌شود (درس رویدادهای کشیدن را ببینید). [enum: true_false]	`جعبه: کشیدنی = بله محتوا = "مرا بکش" پایان`
`بی‌اثر` inert	`درست` عنصر و هرچه درون آن است را بی‌جان می‌کند: نمی‌شود کلیکش کرد، فوکوسش داد یا پیدایش کرد، و صفحه‌خوان‌ها از آن می‌گذرند. برای بخشی از صفحه که پشت یک پنجره‌ی گفتگوی باز است به کار می‌رود. [bool]	`جعبه: بی‌اثر = درست محتوا = "هیچ‌کس نمی‌تواند اینجا کلیک یا فوکوس کند" دکمه: محتوا = "دکمه‌ی مرده" پایان پایان`
`واشو` popover	عنصر را به واشو تبدیل می‌کند: تا وقتی چیزی بازش نکند پنهان است و بعد روی همه‌چیز کشیده می‌شود. `خودکار` (auto) وقتی بازدیدکننده بیرون کلیک کند یا Escape بزند آن را می‌بندد و واشوهای خودکار دیگر را هم می‌بندد. `دستی` (manual) تا وقتی خودتان نبندید می‌ماند. دکمه‌ای با `هدف واشو` آن را بدون اسکریپت باز می‌کند. [enum: popover]	`دکمه: هدف واشو = "tip" محتوا = "باز کردن نکته" پایان جعبه: شناسه = "tip" واشو = "خودکار" محتوا = "یک نکته روی صفحه." پایان`

ویژگی‌های همگانی: زبان و نوشتن متن

ویژگی	کار آن	نمونه
`جهت` dir	جهت متن درون عنصر: `چپ به راست` (ltr) یا `راست به چپ` (rtl). آن را روی تکه‌ای از متن بگذارید که جهتش با صفحه فرق دارد، مثل نقل‌قولی انگلیسی در صفحه‌ی فارسی. روی خود صفحه همین ویژگی جهت همه چیز را تعیین می‌کند. [dir]	`پاراگراف: جهت = "چپ به راست" محتوا = "Text that runs from the left." پایان`
`زبان` lang	زبان متن درون عنصر، با همان مقدارهای خود صفحه: `انگلیسی` (en)، `فارسی` (fa) یا `عربی` (ar). صفحه‌خوان‌ها از آن صدای درست را برمی‌گزینند، مرورگرها شکستن واژه و گیومه‌ی درست را، و ابزار ترجمه می‌داند چه چیزی را ترجمه کند. [lang]	`پاراگراف: زبان = "انگلیسی" جهت = "چپ به راست" محتوا = "Hello, world" پایان`
`ترجمه‌پذیر` translatable	`خیر` (no) از مترجم‌های خودکار، مثل آنکه در مرورگر هست، می‌خواهد متن را دست نزنند. برای نام برند، کد و هر چیزی که باید همان‌طور که نوشته شده بماند. پیش‌فرض `بله` (yes) است. [enum: yes_no]	`تکه: ترجمه‌پذیر = "خیر" محتوا = "Salam" پایان`
`غلط‌یاب` spellcheck	`بله` از مرورگر می‌خواهد هنگام نوشتن در عنصر زیر واژه‌های غلط خط بکشد. `خیر` خاموشش می‌کند، برای کدها، نام‌ها و گذرواژه‌ها. فقط برای عنصرهای ویرایش‌پذیر اهمیت دارد. [enum: true_false]	`متن بلند: غلط‌یاب = بله محتوا = "Teh quick brown fox" پایان`
`حالت ورود` inputmode	تعیین می‌کند هنگام نوشتن در یک عنصر ویرایش‌پذیر گوشی کدام صفحه‌کلید را نشان دهد: `عددی` (numeric)، `اعشاری` (decimal)، `تلفن` (tel)، `ایمیل` (email)، `نشانی` (url)، `جستجو` (search)، `متن` (text) یا `هیچ` (none، بدون صفحه‌کلید). فقط صفحه‌کلید را عوض می‌کند، نه آنچه پذیرفته می‌شود. [enum: input_mode]	`ورودی: نوع = "text" حالت ورود = "عددی" پایان`
`راهنمای کلید ورود` enterkeyhint	برچسب یا نماد کلید Enter را در صفحه‌کلید روی صفحه‌ی گوشی تغییر می‌دهد: `ورود` (enter)، `انجام` (done)، `برو` (go)، `بعدی` (next)، `قبلی` (previous)، `جستجو` (search) یا `فرستادن` (send). کاری را که کلید می‌کند عوض نمی‌کند. [enum: enter_key_hint]	`ورودی: نوع = "text" راهنمای کلید ورود = "جستجو" پایان`
`حروف بزرگ خودکار` autocapitalize	کدام حرف‌ها را صفحه‌کلید گوشی هنگام نوشتن خودش بزرگ می‌کند: `هیچ` یا `خاموش`، `جمله‌ها` (sentences)، `واژه‌ها` (words) یا `نویسه‌ها` (characters). برای نام‌ها `واژه‌ها` و برای نشانی ایمیل و کدها `هیچ` را بگذارید. [enum: autocapitalize]	`متن بلند: حروف بزرگ خودکار = "واژه‌ها" محتوا = "ali rezaei" پایان`
`تصحیح خودکار` autocorrect	`روشن` یا `خاموش`: به صفحه‌کلید گوشی اجازه می‌دهد آنچه را بازدیدکننده می‌نویسد اصلاح کند (بیشتر در سافاری). برای کدها، نام کاربری و هر چیزی که واژه‌ی معمولی نیست خاموشش کنید. [enum: on_off]	`متن بلند: تصحیح خودکار = "خاموش" محتوا = "x_user_42" پایان`
`پیشنهاد نوشتن` writingsuggestions	`خیر` از مرورگر می‌خواهد در این عنصر ویرایش‌پذیر کمک نوشتاری خودش را، مثل پیشنهاد متن پیش‌بینی‌شده، پیشنهاد ندهد. `بله` اجازه می‌دهد. [enum: true_false]	`متن بلند: پیشنهاد نوشتن = "خیر" محتوا = "یک یادداشت خصوصی" پایان`

ویژگی‌های همگانی: ریزداده

ریزداده واقعیت‌هایی درباره‌ی یک چیز را نشانه‌گذاری می‌کند تا موتورهای جستجو بتوانند در نتیجه‌های غنی نشانشان دهند.

ویژگی	کار آن	نمونه
`دامنه مورد` itemscope	یک مورد ریزداده را آغاز می‌کند: گروهی از واقعیت‌ها درباره‌ی یک چیز، مثل یک آدم، یک دستور غذا یا یک کالا. ویژگی‌های درون آن با `ویژگی مورد` نشانه‌گذاری می‌شوند. موتورهای جستجو آن‌ها را برای ساختن نتیجه‌های غنی می‌خوانند. [bool]	`جعبه: دامنه مورد = درست نوع مورد = "https://schema.org/Person" تکه: ویژگی مورد = "name" محتوا = "علی رضایی" پایان پایان`
`نوع مورد` itemtype	نوع چیزی که مورد ریزداده توصیف می‌کند، به شکل نشانی کامل یک نوع واژگان، تقریباً همیشه از `https://schema.org/`، مثل `https://schema.org/Recipe`. روی همان عنصری می‌آید که `دامنه مورد` دارد. [absolute_url (list)]	`جعبه: دامنه مورد = درست نوع مورد = "https://schema.org/Recipe" تکه: ویژگی مورد = "name" محتوا = "نان بربری" پایان پایان`
`ویژگی مورد` itemprop	یکی از واقعیت‌های مورد ریزداده را نام می‌برد، مثل `name`، `telephone` یا `image`. متن عنصر مقدار است، و برای پیوند، تصویر یا `زمان` ویژگی متناسب به کار می‌رود. [token (list)]	`جعبه: دامنه مورد = درست نوع مورد = "https://schema.org/Person" تکه: ویژگی مورد = "telephone" محتوا = "۰۲۱-۵۵۵۰۱۲۳" پایان پایان`
`شناسه مورد` itemid	نام سراسری مورد، نشانی‌ای که دقیقاً همین چیز را نشان می‌دهد، تا داده‌های دیگر بتوانند به آن اشاره کنند. [url]	`جعبه: دامنه مورد = درست نوع مورد = "https://schema.org/Person" شناسه مورد = "https://example.com/people/ali" تکه: ویژگی مورد = "name" محتوا = "علی رضایی" پایان پایان`
`ارجاع مورد` itemref	به مورد اجازه می‌دهد از ویژگی‌هایی استفاده کند که جای دیگری در صفحه، بیرون از عنصرش، هستند. شناسه‌ی آن عنصرها را نگه می‌دارد. مترجم وارسی می‌کند که هر شناسه وجود داشته باشد. [idref (list)]	`جعبه: دامنه مورد = درست نوع مورد = "https://schema.org/Person" ارجاع مورد = "phone" پایان تکه: شناسه = "phone" ویژگی مورد = "telephone" محتوا = "۰۲۱-۵۵۵۰۱۲۳" پایان`

ویژگی‌های همگانی: درخت سایه و اسکریپت

ویژگی	کار آن	نمونه
`جایگاه` slot	این عنصر را در جایگاه نام‌دار درخت سایه‌ی والدش می‌گذارد. بدون آن عنصر به جایگاه بی‌نام می‌رود. با عنصر `جایگاه` که سوراخ را می‌سازد اشتباه نشود. [token]	`جعبه: قالب: حالت ریشه سایه = "باز" جایگاه: نام = "note" پایان پایان تکه: جایگاه = "note" محتوا = "در جایگاه یادداشت نشان داده می‌شود" پایان پایان`
`بخش سایه` part	تکه‌ای درون درخت سایه را نام می‌دهد تا قاعده‌های سبک صفحه‌ی بیرون بتوانند با `::part(name)` به آن برسند. دری کنترل‌شده در مرز سایه است. [token (list)]	`جعبه: قالب: حالت ریشه سایه = "باز" دکمه: بخش سایه = "action" محتوا = "خرید" پایان پایان پایان ظاهر سفارشی: محتوا = "::part(action) { color: crimson }" پایان`
`صادرات بخش` exportparts	روی میزبانی که خودش درون درخت سایه‌ی دیگری است: نام‌های `بخش سایه` درخت سایه‌ی خودش را بیرون می‌فرستد تا بیرونی‌ترین صفحه هم بتواند آن‌ها را سبک بدهد. چند نام را با ویرگول جدا کنید. [string]	`جعبه: صادرات بخش = "action, label" محتوا = "میزبانی که بخش‌هایش را می‌فرستد" پایان`
`عنصر سفارشی` is	نام یک عنصر درونی سفارشی‌شده که از جاوااسکریپت با `customElements.define("fancy-note", ..., {extends: "p"})` تعریف می‌شود. عنصر همان `p` معمولی می‌ماند و رفتار تازه می‌گیرد. تا وقتی چنین تعریفی بارگذاری نشده کاری نمی‌کند. [token]	`پاراگراف: عنصر سفارشی = "fancy-note" محتوا = "یک پاراگراف سفارشی‌شده" پایان`
`نانس` nonce	رمز یک‌بارمصرفی که کارگزار هم در سیاست امنیت محتوای صفحه می‌گذارد و هم در هر `اسکریپت سفارشی` یا `ظاهر سفارشی` درون‌صفحه‌ای مجاز. با آن این‌ها رد می‌شوند و کد درون‌صفحه‌ای دیگر مسدود می‌ماند. باید در هر پاسخ تازه باشد، پس مقدار ثابتی که در متن برنامه نوشته شود از چیزی محافظت نمی‌کند. [token]	`اسکریپت سفارشی: نانس = "r4nd0m" محتوا = "console.log('allowed')" پایان`

ویژگی‌های ARIA

اول ویژگی نقش می‌آید و بعد ویژگی‌های ARIA که سلام با نام می‌شناسد. بقیه از الگوی کلی سطر آخر پیروی می‌کنند.

ویژگی	کار آن	نمونه
`نقش` role	به فناوری‌های کمکی می‌گوید عنصر چیست، وقتی هیچ عنصر بومی آن را نمی‌گوید. مثال‌ها: `alert`، `status`، `dialog`، `tablist`، `progressbar`. قاعده‌ی اول ARIA این است که اگر عنصر بومی هست از آن استفاده کنید: `دکمه` نیازی به `نقش` ندارد. [token]	`جعبه: نقش = "status" محتوا = "ذخیره شد." پایان`

ویژگی	کار آن	نمونه
`برچسب دسترسی‌پذیری` aria label	نامی برای عنصری که متن دیدنی ندارد و صفحه‌خوان‌ها آن را بلند می‌خوانند. معمولاً برای دکمه‌ای که فقط یک نماد دارد. اگر عنصر از قبل متن دیدنی دارد نیازی به آن نیست. [string]	`دکمه: برچسب دسترسی‌پذیری = "بستن پنجره" محتوا = "X" پایان`
`پنهان از دسترسی‌پذیری` aria hidden	`true` عنصر را از صفحه‌خوان‌ها پنهان می‌کند، در حالی که دیدنی می‌ماند. برای تزئین، مثل نمادی کنار واژه‌ای که همان را می‌گوید. هرگز روی چیزی که می‌تواند فوکوس بگیرد نگذاریدش. [string]	`تکه: پنهان از دسترسی‌پذیری = "true" محتوا = "(تزئین)" پایان`
`باز شده دسترسی‌پذیری` aria expanded	`true` یا `false`: می‌گوید چیزی که این دکمه کنترل می‌کند باز است یا بسته. اسکریپت باید با هر تغییر حالت آن را عوض کند. مرورگرها این کار را برای شما نمی‌کنند. [string]	`دکمه: باز شده دسترسی‌پذیری = "false" کنترل‌کننده دسترسی‌پذیری = "menu" محتوا = "منو" پایان فهرست: شناسه = "menu" پنهان = درست مورد: محتوا = "خانه" پایان پایان`
`کنترل‌کننده دسترسی‌پذیری` aria controls	شناسه‌ی عنصری که این عنصر کنترل می‌کند، مثل تابلویی که یک دکمه‌ی زبانه باز می‌کند. به فناوری‌های کمکی کمک می‌کند میان آن‌ها بپرند. باید شناسه‌ی عنصری در همین صفحه باشد. [idref (list)]	`دکمه: کنترل‌کننده دسترسی‌پذیری = "panel" باز شده دسترسی‌پذیری = "true" محتوا = "جزئیات" پایان جعبه: شناسه = "panel" محتوا = "جزئیات." پایان`
`فشرده‌شده دسترسی‌پذیری` aria pressed	برای دکمه‌ای که چیزی را روشن و خاموش می‌کند، مثل دکمه‌ی پررنگ در یک ویرایشگر: `true` وقتی روشن است، `false` وقتی خاموش، `mixed` وقتی تا حدی روشن است. برچسب همان می‌ماند و صفحه‌خوان می‌گوید «پررنگ، دکمه‌ی دوحالته، فشرده». [string]	`دکمه: فشرده‌شده دسترسی‌پذیری = "true" محتوا = "پررنگ" پایان`
`مقدار کنونی دسترسی‌پذیری` aria valuenow	مقدار کنونی یک ابزار بازه‌ای که از عنصرهای ساده ساخته شده، مثل لغزنده یا نوار پیشرفت، به صورت عدد. با `کمینه مقدار دسترسی‌پذیری`، `بیشینه مقدار دسترسی‌پذیری` و یک `نقش` به کار می‌رود. `progress`، `meter` و `input` بازه‌ای بومی از قبل آن را دارند. [number]	`جعبه: نقش = "progressbar" مقدار کنونی دسترسی‌پذیری = ۴۰ کمینه مقدار دسترسی‌پذیری = 0 بیشینه مقدار دسترسی‌پذیری = ۱۰۰ محتوا = "۴۰٪" پایان`
`کمینه مقدار دسترسی‌پذیری` aria valuemin	کمترین مقدار بازه، به صورت عدد. [number]	`جعبه: نقش = "slider" ترتیب جهش = 0 کمینه مقدار دسترسی‌پذیری = 0 بیشینه مقدار دسترسی‌پذیری = ۱۰ مقدار کنونی دسترسی‌پذیری = ۳ محتوا = "۳ از ۱۰" پایان`
`بیشینه مقدار دسترسی‌پذیری` aria valuemax	بیشترین مقدار بازه، به صورت عدد. [number]	`جعبه: نقش = "progressbar" کمینه مقدار دسترسی‌پذیری = 0 بیشینه مقدار دسترسی‌پذیری = ۲۰۰ مقدار کنونی دسترسی‌پذیری = ۵۰ محتوا = "۵۰ از ۲۰۰" پایان`
`دارای واشو دسترسی‌پذیری` aria haspopup	هشدار می‌دهد که فعال کردن عنصر یک بازشو را باز می‌کند، و نوعش را می‌گوید: `menu`، `listbox`، `tree`، `grid`، `dialog` یا `true` (یک منو). [string]	`دکمه: دارای واشو دسترسی‌پذیری = "menu" محتوا = "کارها" پایان`
`جهت دسترسی‌پذیری` aria orientation	می‌گوید ابزاری مثل نوار ابزار، لغزنده یا فهرست زبانه `horizontal` (افقی) است یا `vertical` (عمودی)، تا صفحه‌خوان‌ها بدانند کدام کلیدهای جهت‌دار انتظار می‌رود. [string]	`جعبه: نقش = "toolbar" جهت دسترسی‌پذیری = "vertical" دکمه: محتوا = "برش" پایان دکمه: محتوا = "رونوشت" پایان پایان`
`دسترسی‌پذیری` aria	الگوی کلی. هر ویژگی ARIA دیگر هم به همین شکل نوشته می‌شود: واژه‌ی `aria`، یک فاصله، و بعد نام، مثل `aria live`، `aria describedby`، `aria current`، `aria disabled`، `aria required` یا `aria labelledby`. مترجم `aria-live` و مانند آن را می‌نویسد. مقدارها رشته‌اند. [string]	`جعبه: aria live = "polite" محتوا = "۳ پیام تازه" پایان`

ویژگی‌های داده

ویژگی	کار آن	نمونه
`داده حالت` data mode	ویژگی داده‌ای به نام `mode` که به صورت `data-mode` نوشته می‌شود. صفحه‌ها اغلب برای نگه داشتن حالت کنونی، مثل `light` یا `dark`، از آن استفاده می‌کنند، جایی که هم CSS و هم اسکریپت می‌توانند آن را بخوانند. [string]	`جعبه: داده حالت = "dark" محتوا = "حالت تیره روشن است" پایان`
`داده زبان` data lang	ویژگی داده‌ای به نام `lang` که به صورت `data-lang` نوشته می‌شود. با ویژگی واقعی `زبان` یکی نیست: فقط مقداری برای اسکریپت‌ها و سبک‌های خودتان می‌برد. [string]	`جعبه: داده زبان = "fa" محتوا = "نسخه: فارسی" پایان`
`داده نما` data view	ویژگی داده‌ای به نام `view` که به صورت `data-view` نوشته می‌شود، مثلاً شکل نمایش یک فهرست، `grid` یا `list`. [string]	`جعبه: داده نما = "grid" محتوا = "به صورت شبکه نشان داده می‌شود" پایان`
`داده فقط` data only	ویژگی داده‌ای به نام `only` که به صورت `data-only` نوشته می‌شود، اغلب به عنوان نشانه‌ی پالایه، مثل `data-only` with the value `free` روی دکمه‌ای که فقط موردهای رایگان را نشان می‌دهد. [string]	`دکمه: داده فقط = "free" محتوا = "فقط رایگان" پایان`
`داده شناسه` data id	ویژگی داده‌ای به نام `id` که به صورت `data-id` نوشته می‌شود. روش معمول وصل کردن یک سطر صفحه به یک رکورد است، مثل شماره‌ی کالا. برخلاف `شناسه` ی واقعی لازم نیست یکتا باشد. [string]	`فهرست: مورد: داده شناسه = "1042" محتوا = "نان بربری" پایان پایان`
`داده` data	الگوی کلی: واژه‌ی `داده`، یک فاصله و هر نام دلخواه. چند واژه با خط تیره یک نام می‌شوند، پس `داده user id` به صورت `data-user-id` نوشته می‌شود. در کنترل‌گر آن را با `دام.دریافت ویژگی(el، "data-user-id")` بخوانید. در CSS با `[data-user-id='7']` می‌شود پیدایش کرد. اگر قرار است اسکریپتی آن را بخواند نام را با حرف‌های انگلیسی بنویسید. [string]	`جعبه: داده user id = "7" داده role = "admin" محتوا = "علی" پایان`

خودتان امتحان کنید

به یکی از صفحه‌هایتان یک description و یک og:title از Open Graph اضافه کنید و مثل نمونه‌ی سر صفحه با دام.پرسمان و دام.دریافت ویژگی دوباره بخوانیدشان.
نمونه‌ی ARIA را طوری عوض کنید که دکمه aria pressed را هم عوض کند. صفحه‌خوان چه می‌گوید و کدام یک از این دو ویژگی برای دکمه‌ی منو مناسب‌تر است؟
بخشی به نام کارت با عنوان و جایگاه محتوا: پایان بسازید، سه بار با تکرار به کار ببریدش و بعد با بگنجان به پرونده‌ی خودش ببریدش.
عنصر دومی با کلاس card و رنگی دیگر در صفحه بگذارید و خطا را بخوانید. بعد آن را به دو راه درست کنید.

سر صفحه، اسکریپت و ویژگی‌های همگانی

تنظیم‌های خود صفحه

متا، پیوند و پایه نشانی

سبک، اسکریپت و بدون اسکریپت

قالب، جایگاه و درخت سایه

ویژگی‌هایی که هر عنصر دارد

واشو بدون اسکریپت

ARIA: وقتی عنصر کافی نیست

ویژگی‌های داده

تقسیم یک سایت به بخش‌ها

بگنجان

مرجع: عنصرهای سر صفحه و ویژگی‌های همگانی

صفحه (English: page)

متا (English: meta; HTML: <meta>)

پیوند سر (English: head link; HTML: <link>)

پایه نشانی (English: base; HTML: <base>)

ظاهر سفارشی (English: style; HTML: <style>)

اسکریپت سفارشی (English: script; HTML: <script>)

بدون اسکریپت (English: noscript; HTML: <noscript>)

قالب (English: template; HTML: <template>)

جایگاه (English: slot; HTML: <slot>)

ویژگی‌های همگانی: شناسه، متن و سبک

ویژگی‌های همگانی: تمرکز، ویرایش و کشیدن

ویژگی‌های همگانی: زبان و نوشتن متن

ویژگی‌های همگانی: ریزداده

ویژگی‌های همگانی: درخت سایه و اسکریپت

ویژگی‌های ARIA

ویژگی‌های داده

خودتان امتحان کنید

`بگنجان`

`صفحه` (English: `page`)

`متا` (English: `meta`; HTML: `<meta>`)

`پیوند سر` (English: `head link`; HTML: `<link>`)

`پایه نشانی` (English: `base`; HTML: `<base>`)

`ظاهر سفارشی` (English: `style`; HTML: `<style>`)

`اسکریپت سفارشی` (English: `script`; HTML: `<script>`)

`بدون اسکریپت` (English: `noscript`; HTML: `<noscript>`)

`قالب` (English: `template`; HTML: `<template>`)

`جایگاه` (English: `slot`; HTML: `<slot>`)