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

ساختار صفحه و فهرست‌ها

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

در این درس

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

جعبه‌ها و نشانه‌های صفحه

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

وقتی بخشی از صفحه کاری دارد، عنصری هست که نامش را بگوید. سرصفحه مقدمه را نگه می‌دارد، ناوبری گروهی از پیوندهای گشت‌وگذار را، اصلی محتوایی را که صفحه برای آن ساخته شده، کناری چیزی را که مرتبط است ولی جداست، و پاورقی بخش پایانی را. بخش گروهی موضوعی از محتواست که معمولاً با یک سرتیتر شروع می‌شود، مقاله نوشته‌ای است که به‌تنهایی معنا دارد، مثل یک مطلب یا یک نظر، و جستجو کنترل‌های جستجو را در بر می‌گیرد. مرورگرها همه‌ی این‌ها را مثل یک جعبه ساده می‌کشند. تفاوت برای کسانی است که صفحه را نمی‌بینند: صفحه‌خوان این بخش‌ها را به‌عنوان نشانه (landmark) فهرست می‌کند و کاربرش با یک کلید به محتوای اصلی یا به ناوبری می‌پرد. موتورهای جستجو هم طرح صفحه را همین‌طور می‌خوانند.

web-structure-landmarks.salam

صفحه:
    عنوان = "نشانه‌های صفحه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = ۰ ارتفاع خط = 1.9 پایان
    سرصفحه: پس زمینه = "#0f766e" رنگ = "white" فاصله = "10px 20px"
        h1: محتوا = "یادداشت‌های باغ" فضا = ۰ اندازه قلم = "1.3rem" پایان
    پایان
    ناوبری: پس زمینه = "#ccfbf1" فاصله = "8px 20px" نمایش = فلکس شکاف = ۱۶
        پیوند: نشانی = "#soil" محتوا = "خاک" پایان
        پیوند: نشانی = "#water" محتوا = "آب" پایان
    پایان
    جعبه: نمایش = فلکس شکاف = ۲۰ فاصله = ۲۰
        اصلی: فلکس = ۱
            بخش: شناسه = "soil"
                سرتیتر: اندازه = ۲ محتوا = "خاک" پایان
                پاراگراف: محتوا = "پیش از کاشتن، کمپوست را در خاک بریزید." پایان
            پایان
            بخش: شناسه = "water"
                سرتیتر: اندازه = ۲ محتوا = "آب" پایان
                پاراگراف: محتوا = "صبح زود آب بدهید، وقتی هوا خنک است." پایان
            پایان
        پایان
        کناری: عرض = ۱۶۰ پس زمینه = "#f1f5f9" فاصله = ۱۲ گردی کادر = ۸
            قوی: محتوا = "نکته" پایان
            پاراگراف: محتوا = "لایه‌ی ضخیمی از کاه خاک را مرطوب نگه می‌دارد." پایان
        پایان
    پایان
    پاورقی: فاصله = "10px 20px" کادر بالا = "1px solid #cbd5e1" رنگ = "#475569"
        ریز: محتوا = "یادداشت‌های باغ، دست‌نویس." پایان
    پایان
پایان

در نمونه، بالا یک سرصفحه و یک ناوبری هست، بعد یک اصلی با دو بخش و کنارش یک کناری، و در پایان یک پاورقی. شناسه روی هر بخش همان چیزی است که پیوندهای #soil و #water به آن اشاره می‌کنند: پیوندی که با # شروع شود به عنصری می‌رود که شناسه‌اش همان است. خط‌های نمایش = فلکس و شکاف مربوط به CSS هستند و در درس‌های CSS توضیح داده می‌شوند.

هر صفحه فقط یک اصلی می‌تواند داشته باشد و این عنصر درون مقاله هم جا نمی‌گیرد. مترجم برای دومی خطا می‌دهد (E120). همچنین سرصفحه یا پاورقی را درون سرصفحه یا پاورقی دیگر و آدرس را درون آدرس نمی‌پذیرد. اما سرصفحه یا پاورقی درون یک مقاله یا بخش درست است: آن‌وقت مال همان قسمت است، نه کل صفحه. وقتی صفحه دو ناوبری دارد، با برچسب دسترسی‌پذیری آن‌ها را از هم جدا کنید، مثلاً برچسب دسترسی‌پذیری = "اصلی"، تا صفحه‌خوان بتواند بگوید روی کدام است.

فهرست‌ها

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

web-structure-lists.salam

صفحه:
    عنوان = "فهرست‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    سرتیتر: اندازه = ۲ محتوا = "خرید" پایان
    فهرست:
        مورد: محتوا = "نان" پایان
        مورد:
            محتوا = "زیتون"
            فهرست:
                مورد: محتوا = "سبز" پایان
                مورد: محتوا = "سیاه" پایان
            پایان
        پایان
        مورد: محتوا = "چای" پایان
    پایان
    سرتیتر: اندازه = ۲ محتوا = "شمارش معکوس" پایان
    فهرست شماره‌دار: معکوس = درست نوع نشانه فهرست = persian
        مورد: محتوا = "خمیر را مخلوط کنید" پایان
        مورد: محتوا = "بگذارید ور بیاید" پایان
        مورد: محتوا = "بپزید" پایان
    پایان
    سرتیتر: اندازه = ۲ محتوا = "فصل‌ها" پایان
    فهرست شماره‌دار: شروع = ۴ نوع = "I"
        مورد: محتوا = "جاده" پایان
        مورد: محتوا = "مهمانسرا" پایان
        مورد: مقدار = ۹ محتوا = "بازگشت" پایان
    پایان
پایان

فهرست شماره‌دار سه ویژگی دارد. معکوس شمارش را برعکس می‌کند، پس سه مورد ۳، ۲، ۱ شماره می‌خورند. شروع شماره‌ی اولین مورد است و می‌تواند صفر یا منفی باشد. نوع شکل نشانه را تعیین می‌کند: 1، a، A، i یا I. روی یک مورد تنها، مقدار شماره‌ی همان مورد را می‌گذارد و موردهای بعدی از آن‌جا ادامه می‌دهند، برای همین فصل آخر بالا IX است. فهرست نقطه‌ای این‌ها را نادیده می‌گیرد. نشانه را با ویژگی CSS به نام نوع نشانه فهرست هم می‌شود عوض کرد، مثلاً persian برای رقم‌های فارسی، که نمونه‌ی فارسی بالا همین کار را کرده است.

منو فهرستی از فرمان‌هاست، مثلاً دکمه‌های یک نوار ابزار. مثل فهرست عنصر مورد دارد. آن را برای پیوندهای سایت به کار نبرید: برای آن‌ها یک ناوبری با فهرست درونش لازم است.

فهرست تعریف

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

web-structure-definitions.salam

صفحه:
    عنوان = "تعریف‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    فهرست تعریف:
        واژه: محتوا = "سرصفحه" وزن قلم = "bold" پایان
        شرح: محتوا = "بالای صفحه یا بالای یک بخش." پایان
        واژه: محتوا = "پاورقی" وزن قلم = "bold" پایان
        شرح: محتوا = "یادداشت پایانی، پیوندها و نویسنده." پایان
        شرح: محتوا = "می‌تواند پایان یک بخش هم باشد." پایان
    پایان
    فهرست تعریف:
        جعبه: فضا بالا = ۱۶
            واژه: محتوا = "نام" وزن قلم = "bold" پایان
            شرح: محتوا = "سلام" پایان
        پایان
        جعبه: فضا بالا = ۱۶
            واژه: محتوا = "نوع" وزن قلم = "bold" پایان
            شرح: محتوا = "زبان برنامه‌نویسی" پایان
        پایان
    پایان
پایان

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

جزئیات و خلاصه

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

web-structure-details.salam

صفحه:
    عنوان = "پرسش‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "30rem" پایان
    سراسری: گزینشگر = "details" کادر = "1px solid #cbd5e1" گردی کادر = ۸ فاصله = "8px 12px" فضا پایین = ۸ پایان
    سراسری: گزینشگر = "summary" نشانگر = اشاره‌گر وزن قلم = "bold" پایان
    جزئیات: نام = "faq" باز = درست
        خلاصه: محتوا = "بلوک صفحه چیست؟" پایان
        پاراگراف: محتوا = "همه‌ی چیزهایی را که در صفحه هست نگه می‌دارد." پایان
    پایان
    جزئیات: نام = "faq"
        خلاصه: محتوا = "دو تا با هم باز می‌مانند؟" پایان
        پاراگراف: محتوا = "اینجا نه. هر دو نام faq دارند، پس با باز شدن یکی، دیگری بسته می‌شود." پایان
    پایان
    جزئیات:
        خلاصه: محتوا = "این یکی چطور؟" پایان
        پاراگراف: محتوا = "نام ندارد، پس مستقل از بقیه باز و بسته می‌شود." پایان
    پایان
پایان

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

پنجره گفتگو

پنجره گفتگو جعبه‌ای است که بالای صفحه شناور می‌شود، برای یک پیام یا پرسش. دو راه برای نمایش دارد. با باز = درست همان‌جا نشان داده می‌شود، بی‌آن‌که صفحه‌ی پشتش تیره شود. برای نمایش مودال، یعنی پنجره‌ای که صفحه را تیره می‌کند، فوکوس صفحه‌کلید را در خودش نگه می‌دارد و با کلید Esc بسته می‌شود، باید از طریق اسکریپت از مرورگر بخواهید. در سلام این یک فراخوانی از درون رویداد کلیک است: دام.فراخوان(دام.با شناسه("saved")، "showModal")، و برای بستن همان‌طور "close". ویژگی بستن با می‌گوید چه چیز دیگری می‌تواند آن را ببندد: درخواست بستن (کلید Esc و حرکت بستن دستگاه)، هرچیز (Esc یا کلیک بیرون از پنجره) یا هیچ (فقط کد خودتان).

web-structure-dialog.salam

واردسازی دام

صفحه:
    عنوان = "پنجره گفتگو"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه: محتوا = "ذخیره‌ی پیش‌نویس" کلیک = (): دام.فراخوان(دام.با شناسه("saved")، "showModal") پایان پایان
    پاراگراف: شناسه = "state" محتوا = "هنوز چیزی ذخیره نشده است." پایان
    پنجره گفتگو: شناسه = "saved" بستن با = هرچیز فاصله = ۲۰ گردی کادر = ۱۰
        سرتیتر: اندازه = ۲ محتوا = "ذخیره شد" فضا بالا = ۰ پایان
        پاراگراف: محتوا = "پیش‌نویس شما نگه داشته شد. Esc بزنید، بیرون پنجره کلیک کنید یا از دکمه استفاده کنید." پایان
        دکمه:
            محتوا = "بستن"
            کلیک = (): دام.تنظیم متن(دام.با شناسه("state")، "پیش‌نویس ذخیره شد.") دام.فراخوان(دام.با شناسه("saved")، "close") پایان
        پایان
    پایان
پایان

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

شکل و آدرس

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

web-structure-figure.salam

صفحه:
    عنوان = "شکل"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "30rem" پایان
    شکل: فضا = ۰
        تصویر: نشانی = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20260%20120%27%3E%3Crect%20width=%27260%27%20height=%27120%27%20fill=%27%23bae6fd%27/%3E%3Ccircle%20cx=%27200%27%20cy=%2740%27%20r=%2724%27%20fill=%27%23facc15%27/%3E%3Crect%20y=%2790%27%20width=%27260%27%20height=%2730%27%20fill=%27%2316a34a%27/%3E%3C/svg%3E" جایگزین = "خورشید زرد بالای یک مزرعه‌ی سبز" عرض = ۲۶۰ ارتفاع = ۱۲۰ پایان
        زیرنویس شکل: محتوا = "شکل ۱. مزرعه در ظهر." رنگ = "#475569" اندازه قلم = "0.9rem" پایان
    پایان
    آدرس: فضا بالا = ۲۰ سبک قلم = عادی
        محتوا = "یادداشت‌های باغ"
        شکست: پایان
        پیوند: نشانی = "mailto:[email protected]" محتوا = "[email protected]" پایان
    پایان
پایان

یک صفحه‌ی کامل

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

web-structure-blog.salam

صفحه:
    عنوان = "یک نوشته‌ی وبلاگ"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = ۰ ارتفاع خط = 1.9 رنگ = "#1e293b" پایان
    سرصفحه: نمایش = فلکس چینش = "space-between" ترازعمودی = وسط فاصله = "10px 20px" پس زمینه = "#0f766e" رنگ = "white"
        قوی: محتوا = "یادداشت‌های باغ" پایان
        جستجو:
            فرم: ورودی: نوع = جستجو جانگهدار = "جستجو" برچسب دسترسی‌پذیری = "جستجو در وبلاگ" پایان پایان
        پایان
    پایان
    ناوبری: نمایش = فلکس شکاف = ۱۶ فاصله = "8px 20px" پس زمینه = "#ccfbf1" برچسب دسترسی‌پذیری = "اصلی"
        پیوند: نشانی = "#" محتوا = "خانه" پایان
        پیوند: نشانی = "#" محتوا = "بایگانی" پایان
    پایان
    جعبه: نمایش = فلکس شکاف = ۲۴ فاصله = ۲۰
        اصلی: فلکس = ۱
            مقاله:
                سرصفحه:
                    سرتیتر: اندازه = ۱ محتوا = "چرا کاه‌ریزی مهم است" فضا پایین = ۴ پایان
                    پاراگراف: فضا بالا = ۰ رنگ = "#64748b"
                        محتوا = "نوشته‌ی سارا، "
                        زمان: زمان دقیق = "2026-10-26" محتوا = "۴ آبان ۱۴۰۵" پایان
                    پایان
                پایان
                بخش:
                    سرتیتر: اندازه = ۲ محتوا = "آبیاری کمتر" پایان
                    پاراگراف: محتوا = "لایه‌ای از کاه، آفتاب را از خاک دور نگه می‌دارد." پایان
                پایان
                بخش:
                    سرتیتر: اندازه = ۲ محتوا = "علف هرز کمتر" پایان
                    پاراگراف: محتوا = "دانه‌ای که در تاریکی است جوانه نمی‌زند." پایان
                پایان
            پایان
        پایان
        کناری: عرض = ۱۷۰ برچسب دسترسی‌پذیری = "مطالب مرتبط"
            سرتیتر: اندازه = ۲ محتوا = "مطالب مرتبط" اندازه قلم = "1.1rem" پایان
            فهرست: فاصله ابتدا = ۲۰
                مورد: پیوند: نشانی = "#" محتوا = "کمپوست از صفر" پایان پایان
                مورد: پیوند: نشانی = "#" محتوا = "مخزن آب باران" پایان پایان
            پایان
        پایان
    پایان
    پاورقی: فاصله = "10px 20px" کادر بالا = "1px solid #cbd5e1"
        آدرس: سبک قلم = عادی محتوا = "یادداشت‌های باغ، خیابان باغ‌ها ۱۲" پایان
    پایان
پایان

مرجع: عنصرهای ساختار و فهرست

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

ظرف‌ها و نشانه‌های صفحه

`جعبه` (English: `box`; HTML: `<div>`)

ظرفی همه‌کاره و بلوکی (div در HTML). سر سطر تازه شروع می‌شود و تمام پهنا را می‌گیرد. خودش معنایی ندارد، پس فقط وقتی برای گروه کردن به خاطر چیدمان یا سبک به کار ببریدش که عنصر مناسب‌تری نیست.

جعبه: فاصله = ۱۲ پس زمینه = "#f1f5f9" گردی کادر = ۸
    پاراگراف: محتوا = "دو پاراگراف در یک جعبه‌اند." پایان
    پاراگراف: محتوا = "جعبه به آن‌ها پس‌زمینه می‌دهد." پایان
پایان

`بخش` (English: `section`; HTML: `<section>`)

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

بخش:
    سرتیتر: اندازه = ۲ محتوا = "آبیاری" پایان
    پاراگراف: محتوا = "صبح زود آب بدهید." پایان
پایان

`مقاله` (English: `article`; HTML: `<article>`)

نوشته‌ای مستقل که اگر جای دیگری هم کپی شود معنایش را از دست نمی‌دهد: یک مطلب وبلاگ، یک خبر، کارت یک کالا، یک نظر. مقاله‌ها می‌توانند تودرتو باشند، مثلاً نظرها درون یک مطلب.

مقاله:
    سرتیتر: اندازه = ۲ محتوا = "کاه‌ریزی مهم است" پایان
    پاراگراف: محتوا = "لایه‌ای از کاه خاک را مرطوب نگه می‌دارد." پایان
پایان

`کناری` (English: `aside`; HTML: `<aside>`)

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

کناری: فاصله = ۱۲ پس زمینه = "#fef9c3" گردی کادر = ۸
    قوی: محتوا = "نکته" پایان
    پاراگراف: محتوا = "به ریشه آب بدهید، نه به برگ." پایان
پایان

`سرصفحه` (English: `header`; HTML: `<header>`)

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

سرصفحه: پس زمینه = "#0f766e" رنگ = "white" فاصله = ۱۲
    h1: محتوا = "یادداشت‌های باغ" فضا = ۰ پایان
پایان

`پاورقی` (English: `footer`; HTML: `<footer>`)

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

پاورقی: فاصله = ۱۲ کادر بالا = "1px solid #cbd5e1" رنگ = "#475569"
    ریز: محتوا = "دست‌نویس با سلام." پایان
پایان

`ناوبری` (English: `nav`; HTML: `<nav>`)

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

ناوبری: برچسب دسترسی‌پذیری = "اصلی" نمایش = فلکس شکاف = ۱۶
    پیوند: نشانی = "#" محتوا = "خانه" پایان
    پیوند: نشانی = "#" محتوا = "بایگانی" پایان
پایان

`اصلی` (English: `main`; HTML: `<main>`)

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

اصلی: بیشینه عرض = ۶۰۰
    سرتیتر: اندازه = ۱ محتوا = "چرا کاه‌ریزی مهم است" پایان
    پاراگراف: محتوا = "محتوای صفحه اینجا می‌آید." پایان
پایان

`جستجو` (English: `search`; HTML: `<search>`)

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

جستجو:
    فرم: ورودی: نوع = جستجو جانگهدار = "جستجو" برچسب دسترسی‌پذیری = "جستجو در وبلاگ" پایان پایان
پایان

`آدرس` (English: `address`; HTML: `<address>`)

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

آدرس: سبک قلم = عادی
    محتوا = "یادداشت‌های باغ"
    شکست: پایان
    پیوند: نشانی = "mailto:[email protected]" محتوا = "[email protected]" پایان
پایان

فهرست‌ها

`فهرست` (English: `list`; HTML: `<ul>`)

فهرستی نقطه‌ای (ul در HTML). وقتی ترتیب ردیف‌ها مهم نیست به کار می‌رود. فقط عنصر مورد می‌تواند فرزند مستقیمش باشد.

فهرست:
    مورد: محتوا = "نان" پایان
    مورد: محتوا = "زیتون" پایان
    مورد: محتوا = "چای" پایان
پایان

`فهرست شماره‌دار` (English: `ordered list`; HTML: `<ol>`)

فهرستی شماره‌دار (ol در HTML) برای مرحله‌ها و رتبه‌ها که ترتیب مهم است. ویژگی‌هایش شمارش و شکل عددها را عوض می‌کنند.

فهرست شماره‌دار:
    مورد: محتوا = "خمیر را مخلوط کنید" پایان
    مورد: محتوا = "بگذارید ور بیاید" پایان
    مورد: محتوا = "بپزید" پایان
پایان

ویژگی	کار آن	نمونه
`معکوس` reversed	یک مقدار درست یا نادرست. با `درست` فهرست پایین‌شمار می‌شود و سه مورد ۳، ۲، ۱ می‌گیرند. ترتیب نوشتن موردها همان می‌ماند. [bool]	`فهرست شماره‌دار: معکوس = درست مورد: محتوا = "سوم" پایان مورد: محتوا = "دوم" پایان مورد: محتوا = "اول" پایان پایان`
`شروع` start	یک عدد صحیح، شماره‌ی اولین مورد. می‌تواند صفر یا منفی باشد. پیش‌فرض ۱ است (یا آخرین شماره، اگر فهرست معکوس باشد). [int]	`فهرست شماره‌دار: شروع = ۵ مورد: محتوا = "پنجم" پایان مورد: محتوا = "ششم" پایان پایان`
`نوع` type	شکل نشانه: `1` برای عدد (پیش‌فرض)، `a` یا `A` برای حرف، و `i` یا `I` برای عددهای رومی کوچک یا بزرگ. [enum: ol_type]	`فهرست شماره‌دار: نوع = "A" مورد: محتوا = "سیب" پایان مورد: محتوا = "گلابی" پایان پایان`

`مورد` (English: `item`; HTML: `<li>`)

یک ردیف از فهرست، فهرست شماره‌دار یا منو (li در HTML). متنش در محتوا می‌رود و فهرست تودرتو بعد از آن می‌آید.

فهرست:
    مورد:
        محتوا = "زیتون"
        فهرست:
            مورد: محتوا = "سبز" پایان
            مورد: محتوا = "سیاه" پایان
        پایان
    پایان
پایان

فقط درون: list, ordered list, menu

ویژگی	کار آن	نمونه
`مقدار` value	یک عدد صحیح. در فهرست شماره‌دار شماره‌ی همین مورد را تعیین می‌کند و موردهای بعدی از آن ادامه می‌دهند. در فهرست نقطه‌ای اثری ندارد. [int]	`فهرست شماره‌دار: مورد: محتوا = "یک" پایان مورد: مقدار = ۱۰ محتوا = "ده" پایان مورد: محتوا = "یازده" پایان پایان`

`منو` (English: `menu`; HTML: `<menu>`)

فهرستی از فرمان‌ها، مثل دکمه‌های یک نوار ابزار (menu در HTML). مثل فهرست عنصر مورد دارد. ناوبری سایت یک ناوبری با فهرست است، نه منو.

منو:
    مورد: دکمه: محتوا = "برش" پایان پایان
    مورد: دکمه: محتوا = "رونوشت" پایان پایان
    مورد: دکمه: محتوا = "چسباندن" پایان پایان
پایان

فهرست تعریف

`فهرست تعریف` (English: `description list`; HTML: `<dl>`)

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

فهرست تعریف:
    واژه: محتوا = "سلام" پایان
    شرح: محتوا = "یک زبان برنامه‌نویسی." پایان
    واژه: محتوا = "صفحه" پایان
    شرح: محتوا = "آنچه مرورگر نشان می‌دهد." پایان
پایان

`واژه` (English: `term`; HTML: `<dt>`)

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

فهرست تعریف:
    واژه: محتوا = "رنگ" پایان
    شرح: محتوا = "سبزآبی" پایان
پایان

فقط درون: description list

`شرح` (English: `description`; HTML: `<dd>`)

بخش مقدار در یک گروه (dd در HTML). یک واژه می‌تواند چند شرح داشته باشد. مستقیم درون فهرست تعریف مجاز است، و درون یک جعبه در آن.

فهرست تعریف:
    واژه: محتوا = "اندازه‌ها" پایان
    شرح: محتوا = "کوچک" پایان
    شرح: محتوا = "بزرگ" پایان
پایان

فقط درون: description list

`واژه` (English: `term in box`; HTML: `<dt>`)

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

فهرست تعریف:
    جعبه:
        واژه: محتوا = "نوع" پایان
        شرح: محتوا = "زبان" پایان
    پایان
پایان

`شرح` (English: `description in box`; HTML: `<dd>`)

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

فهرست تعریف:
    جعبه:
        واژه: محتوا = "تولد" پایان
        شرح: محتوا = "۱۳۹۷" پایان
        شرح: محتوا = "تهران" پایان
    پایان
پایان

جزئیات، پنجره گفتگو و شکل

`جزئیات` (English: `details`; HTML: `<details>`)

بلوکی که خواننده بدون هیچ اسکریپتی باز و بسته‌اش می‌کند. نخستین فرزندش باید یک خلاصه باشد و بقیه تا باز شدن بلوک پنهان‌اند.

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

ویژگی	کار آن	نمونه
`نام` name	یک رشته که `جزئیات`های هم‌نام را گروهی انحصاری می‌کند: باز کردن یکی بقیه را می‌بندد. بلوک‌های بی‌نام روی هم اثر ندارند. [string]	`جزئیات: نام = "tips" خلاصه: محتوا = "بهار" پایان پاراگراف: محتوا = "بذر بکارید." پایان پایان جزئیات: نام = "tips" خلاصه: محتوا = "پاییز" پایان پاراگراف: محتوا = "پیاز گل بکارید." پایان پایان`
`باز` open	یک مقدار درست یا نادرست. با `درست` بلوک هنگام بارگذاری صفحه باز است. خواننده باز هم می‌تواند آن را ببندد. [bool]	`جزئیات: باز = درست خلاصه: محتوا = "اول این را بخوانید" پایان پاراگراف: محتوا = "باز شروع می‌شود." پایان پایان`

`خلاصه` (English: `summary`; HTML: `<summary>`)

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

جزئیات:
    خلاصه: محتوا = "ارسال" وزن قلم = "bold" پایان
    پاراگراف: محتوا = "سفارش‌ها دوشنبه می‌روند." پایان
پایان

فقط درون: details

`پنجره گفتگو` (English: `dialog`; HTML: `<dialog>`)

جعبه‌ای که بالای صفحه شناور می‌شود، برای پیام یا پرسش. با باز = درست همان لحظه نشان داده می‌شود. برای نمایش مودال از درون رویداد کلیک showModal را روی آن فراخوانی کنید و برای پنهان کردن close را.

پنجره گفتگو: باز = درست فاصله = ۱۶ گردی کادر = ۸
    پاراگراف: محتوا = "بدون اسکریپت نشان داده شد." پایان
پایان

ویژگی	کار آن	نمونه
`باز` open	یک مقدار درست یا نادرست. با `درست` پنجره هنگام بارگذاری صفحه دیده می‌شود، به‌صورت یک جعبه‌ی عادی و غیرمودال، بدون پس‌زمینه‌ی تیره. [bool]	`پنجره گفتگو: باز = درست پاراگراف: محتوا = "من بازم." پایان پایان`
`بستن با` closedby	چه چیزی جز کد خودتان می‌تواند یک پنجره‌ی مودال را ببندد: `درخواست بستن` (کلید Esc و حرکت بستن دستگاه)، `هرچیز` (درخواست بستن یا کلیک بیرون از پنجره) یا `هیچ` (فقط کد). [enum: closed_by]	`پنجره گفتگو: بستن با = هرچیز پاراگراف: محتوا = "برای بستن بیرون کلیک کنید." پایان پایان`

`شکل` (English: `figure`; HTML: `<figure>`)

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

شکل:
    پیش‌قالب: محتوا = "1 + 1 = 2" پایان
    زیرنویس شکل: محتوا = "فهرست ۱. یک جمع." پایان
پایان

`زیرنویس شکل` (English: `figure caption`; HTML: `<figcaption>`)

زیرنویس یک شکل (figcaption در HTML). هر شکل فقط یکی می‌تواند داشته باشد.

شکل:
    پاراگراف: محتوا = "اینجا یک نمودار می‌آمد." پایان
    زیرنویس شکل: محتوا = "شکل ۲. باران در هر ماه." اندازه قلم = "0.9rem" پایان
پایان

فقط درون: figure

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

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

ساختار صفحه و فهرست‌ها

جعبه‌ها و نشانه‌های صفحه

فهرست‌ها

فهرست تعریف

جزئیات و خلاصه

پنجره گفتگو

شکل و آدرس

یک صفحه‌ی کامل

مرجع: عنصرهای ساختار و فهرست

ظرف‌ها و نشانه‌های صفحه

جعبه (English: box; HTML: <div>)

بخش (English: section; HTML: <section>)

مقاله (English: article; HTML: <article>)

کناری (English: aside; HTML: <aside>)

سرصفحه (English: header; HTML: <header>)

پاورقی (English: footer; HTML: <footer>)

ناوبری (English: nav; HTML: <nav>)

اصلی (English: main; HTML: <main>)

جستجو (English: search; HTML: <search>)

آدرس (English: address; HTML: <address>)

فهرست‌ها

فهرست (English: list; HTML: <ul>)

فهرست شماره‌دار (English: ordered list; HTML: <ol>)

مورد (English: item; HTML: <li>)

منو (English: menu; HTML: <menu>)

فهرست تعریف

فهرست تعریف (English: description list; HTML: <dl>)

واژه (English: term; HTML: <dt>)

شرح (English: description; HTML: <dd>)

واژه (English: term in box; HTML: <dt>)

شرح (English: description in box; HTML: <dd>)

جزئیات، پنجره گفتگو و شکل

جزئیات (English: details; HTML: <details>)

خلاصه (English: summary; HTML: <summary>)

پنجره گفتگو (English: dialog; HTML: <dialog>)

شکل (English: figure; HTML: <figure>)

زیرنویس شکل (English: figure caption; HTML: <figcaption>)

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

`جعبه` (English: `box`; HTML: `<div>`)

`بخش` (English: `section`; HTML: `<section>`)

`مقاله` (English: `article`; HTML: `<article>`)

`کناری` (English: `aside`; HTML: `<aside>`)

`سرصفحه` (English: `header`; HTML: `<header>`)

`پاورقی` (English: `footer`; HTML: `<footer>`)

`ناوبری` (English: `nav`; HTML: `<nav>`)

`اصلی` (English: `main`; HTML: `<main>`)

`جستجو` (English: `search`; HTML: `<search>`)

`آدرس` (English: `address`; HTML: `<address>`)

`فهرست` (English: `list`; HTML: `<ul>`)

`فهرست شماره‌دار` (English: `ordered list`; HTML: `<ol>`)

`مورد` (English: `item`; HTML: `<li>`)

`منو` (English: `menu`; HTML: `<menu>`)

`فهرست تعریف` (English: `description list`; HTML: `<dl>`)

`واژه` (English: `term`; HTML: `<dt>`)

`شرح` (English: `description`; HTML: `<dd>`)

`واژه` (English: `term in box`; HTML: `<dt>`)

`شرح` (English: `description in box`; HTML: `<dd>`)

`جزئیات` (English: `details`; HTML: `<details>`)

`خلاصه` (English: `summary`; HTML: `<summary>`)

`پنجره گفتگو` (English: `dialog`; HTML: `<dialog>`)

`شکل` (English: `figure`; HTML: `<figure>`)

`زیرنویس شکل` (English: `figure caption`; HTML: `<figcaption>`)