details و summary در HTML؛ بخش های باز و بسته شونده | درس 19

درس 19 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

پیش نیاز این درس درس 16 درباره دسترس پذیری و صفحه کلید است. در درس 18 درباره iframe هم یک عنصر بومی با رفتار مستقل شناختیم. فهرست جلسات را در دسته آموزش HTML و CSS دنبال کنید.

details و summary چه کاری انجام می دهند؟

details ظرف اطلاعاتی است که کاربر می تواند آن را باز کند یا ببندد. summary برچسب قابل انتخاب آن است و باید اولین فرزند عنصری details باشد. در حالت بسته، برچسب دیده می شود؛ در حالت باز، محتوای بعد از آن نیز نمایش پیدا می کند. رفتار پایه را مرورگر فراهم می کند و برای این مثال به اسکریپت نیاز نداریم.

<details>
  <summary>برای شروع آموزش چه چیزی لازم است؟</summary>
  <p>یک ویرایشگر کد، مرورگر و پوشه ای برای فایل های تمرین آماده کنید.</p>
</details>

این کد را در body یک سند ذخیره کنید و در مرورگر باز کنید. روی پرسش بزنید؛ پاسخ ظاهر می شود. دوباره بزنید؛ پاسخ جمع می شود. summary را بیرون details قرار ندهید و پاسخ را داخل summary ننویسید. عنوان و پاراگراف هر کدام جای خودشان را دارند؛ برای مرور متن ها، درس 6 درباره عنوان و پاراگراف را ببینید.

عنوان بخش را روشن و کوتاه بنویسید

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

خود summary یک کنترل بومی است. برای نمونه معمولی به نقش button یا tabindex اضافی نیاز ندارد. استفاده از عنوان های تو در تو در summary می تواند در ترکیب مرورگر و فناوری کمکی تفاوت رفتاری داشته باشد؛ متن ساده و آزمایش عملی انتخاب مناسبی برای شروع است. ظاهر حرفه ای و فاصله گذاری را بعدا با CSS اضافه می کنیم.

open؛ پاسخ را از ابتدا نشان دهید

اگر پاسخ باید در بارگذاری اولیه باز باشد، ویژگی open را روی details بنویسید. این ویژگی بولی است: حضور آن حالت باز را مشخص می کند. مقدار open=”false” بخش را نمی بندد؛ برای حالت بسته باید خود ویژگی را حذف کنید. این همان الگوی ویژگی های بولی در درس 5 درباره تگ ها و ویژگی ها است.

<!-- پاسخ از ابتدا باز است -->
<details open>
  <summary>آیا می توانم بدون نصب افزونه تمرین کنم؟</summary>
  <p>بله؛ برای این تمرین یک فایل HTML و مرورگر کافی است.</p>
</details>

<!-- پاسخ از ابتدا بسته است -->
<details>
  <summary>آیا ظاهر بخش را می توان تغییر داد؟</summary>
  <p>بله؛ ظاهر آن را در بخش CSS دوره تنظیم خواهیم کرد.</p>
</details>

چند پرسش مستقل یا یک گروه آکاردئونی؟

اگر چند details معمولی کنار هم بگذارید، کاربر می تواند چند پاسخ را همزمان باز نگه دارد. این رفتار برای مقایسه جواب ها مفید است. برای گروهی که فقط یک پاسخ در آن باز باشد، به detailsهای گروه یک name یکسان بدهید. در مرورگر پشتیبان، باز کردن یک مورد، مورد باز دیگر همان گروه را می بندد.

<details name="course-faq">
  <summary>تمرین ها را کجا انجام دهم؟</summary>
  <p>کدها را در یک پوشه محلی با نام مشخص ذخیره کنید.</p>
</details>
<details name="course-faq">
  <summary>چگونه نتیجه را ببینم؟</summary>
  <p>فایل HTML را در مرورگر باز کنید و پس از تغییر، صفحه را تازه کنید.</p>
</details>

name اینجا نام گروه است، نه نام داده ارسالی فرم. برای گروه دیگری در همان صفحه نام متفاوتی مانند project-faq بگذارید تا دو مجموعه ناخواسته به هم وصل نشوند. اگر می خواهید چند پاسخ باز بمانند، name مشترک را حذف کنید. در گروه انحصاری، فقط یک مورد را از ابتدا open قرار دهید و رفتار را روی مرورگرهای مخاطبان آزمایش کنید.

اطلاعات مهم را بی دلیل پنهان نکنید

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

details صرفا یک ظرف عمومی برای هر نوع کنترل نیست؛ آن را جای منوی تب دار، پنجره محاوره ای یا انتخابگر فرم به کار نبرید. همچنین جمع شدن پاسخ به معنای حذف آن از منبع HTML نیست. رمز عبور یا اطلاعات خصوصی را داخل یک details بسته نگذارید؛ باز و بسته شدن ابزار حفاظت از اطلاعات نیست.

پروژه عملی؛ صفحه پرسش های رایج دوره

در پوشه تمرین، فایل index.html بسازید و کد کامل زیر را قرار دهید. ساختار سند را از درس 4 درباره head و body و بخش بندی را از درس 15 درباره ساختار معنایی می شناسید. این پروژه سه پرسش مستقل دارد؛ برای شروع name مشترک به آنها نمی دهیم.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>پرسش های رایج آموزش HTML | ارومیا دیزاین</title>
</head>
<body>
  <header><p>آموزش طراحی وب؛ ارومیا دیزاین</p></header>
  <main>
    <h1>پرسش های رایج شروع آموزش HTML</h1>
    <p>برای یادگیری، مثال ها را در فایل شخصی خود بنویسید و نتیجه را بررسی کنید.</p>
    <section aria-labelledby="faq-title">
      <h2 id="faq-title">راهنمای انجام تمرین</h2>
      <details open>
        <summary>فایل تمرین را چگونه بسازم؟</summary>
        <p>در پوشه پروژه یک فایل با نام index.html ایجاد کنید.</p>
      </details>
      <details>
        <summary>برای اجرای این مثال به جاوااسکریپت نیاز دارم؟</summary>
        <p>خیر؛ باز و بسته شدن این بخش ها را مرورگر انجام می دهد.</p>
      </details>
      <details>
        <summary>بعد از تغییر کد چه کنم؟</summary>
        <ol>
          <li>فایل را ذخیره کنید.</li>
          <li>به مرورگر برگردید.</li>
          <li>صفحه را تازه کنید و نتیجه را ببینید.</li>
        </ol>
      </details>
    </section>
  </main>
  <footer><p>یادگیری با تمرین مداوم کامل می شود.</p></footer>
</body>
</html>

در اولین نمایش، پاسخ اول باز است. پرسش دوم را باز کنید؛ اولی هم باید باز بماند. حالا name=”practice-faq” را به هر سه details اضافه کنید و دوباره آزمایش کنید. تفاوت رفتار را یادداشت کنید. فهرست مراحل در پاسخ سوم، نمونه کاربرد درس 10 درباره لیست های مرتب در یک محتوای بازشونده است.

آزمایش با صفحه کلید و گوشی

1. فایل را در مرورگر باز کنید و با Tab روی پرسش اول بروید.
2. با Space یا Enter باز و بسته شدن آن را بررسی کنید.
3. با Tab به پرسش بعدی بروید و با Shift + Tab برگردید.
4. بررسی کنید محل تمرکز دیده می شود و پرسش قابل خواندن است.
5. همان صفحه را روی گوشی باز کنید؛ ضربه روی پرسش باید پاسخ را نمایش دهد.
6. با صفحه خوان، نام کنترل و اعلام حالت باز یا بسته را بررسی کنید.

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

خطاهای رایج در details و summary

• summary بعد از پاسخ آمده است: آن را اولین فرزند عنصری details قرار دهید.
• پاسخ داخل summary است: پاسخ را بعد از تگ پایانی summary بنویسید.
• همه بخش ها ناخواسته باز هستند: ویژگی های open و مقدارهای اشتباه مثل false را بررسی کنید.
• باز شدن یک گروه، گروه دیگر را می بندد: name مشترک دو مجموعه را جدا کنید.
• عنوان ها مبهم هستند: پرسش واقعی و موضوع مشخص بنویسید.
• انتظار انیمیشن آماده دارید: این درس رفتار پایه HTML را می سازد؛ طراحی حرکت موضوع جداگانه ای است.

تمرین درس 19؛ افزودن راهنمای منابع

یک پرسش چهارم با عنوان «منابع دوره را از کجا پیدا کنم؟» اضافه کنید. پاسخ باید شامل لینک دسته آموزش HTML و CSS باشد. آن را از ابتدا بسته نگه دارید. سپس همه پرسش ها را عضو یک گروه به نام learning-faq کنید و فقط پرسش اول را با open باز بگذارید.

<details name="learning-faq">
  <summary>منابع دوره را از کجا پیدا کنم؟</summary>
  <p>
    برای مرور درس ها به
    <a href="https://urmiadesign.ir/category/html-css/">
      فهرست آموزش HTML و CSS ارومیا دیزاین
    </a>
    مراجعه کنید.
  </p>
</details>

کاربرد دیگر این الگو، نمایش متن کامل رسانه است؛ در درس 17 درباره صوت و ویدیو همین روش را دیدیم. حالا می توانید آن مثال را با درک نقش summary و open دوباره بنویسید.

منابع مطالعه

مرجع details در MDN، مرجع summary در MDN و استاندارد HTML درباره details.

درس قبلی: iframe در HTML | درس 18