تگ details در HTML جزئیات اضافی سند اچ تی ام ال

تگ details در HTML درج جزئیات اضافی سند اچ تی ام ال

در این مقاله از سایت آموزی برای شما کاربران گرامی به معرفی تگ <details> در HTML می پردازیم.

تگ <details> در اچ تی ام ال

مثال (تگ <details> در HTML) استفاده از تگ <details>

[html]<details><summary>*Copyright*</summary><p>this is a paragraph.</p><p>this is a paragraph.</p></details>[/html]

تعریف و کاربرد تگ <details> در اچ تی ام ال

تگ <details> جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.

تگ <details> مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ <details> قرار داد.

محتوای تگ <details> نباید قابل مشاهده باشد مگر این که ویژگی خصوصی open را در آن قرار داده باشیم.

تگ <details> مانند بسیاری از تگ های HTML دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

تفاوت بین HTML 4.01 و HTML5

تگ <details> یک تگ جدید در HTML5 است.

نکته ها و ترفندها

نکته: تگ <summary> برای تعیین یک عنوان قابل مشاهده درون تگ <details> مورد نظر استفاده می شود.

این عنوان قابل کلیک کردن می باشد تا در صورت نیاز جزئیات مخفی یا نمایان شوند.

پس دانستیم که تگ <summary> معمولا داخل تگ <details> می آید، و از جزئیات توضیح مختصری می دهد.

تگ details در HTML درج جزئیات اضافی سند اچ تی ام ال

ویژگی های خصوصی تگ <details> در اچ تی ام ال

تنها خصوصیت جدید تگ <details> در HTML5 ، ویژگی خصوصی open می باشد:


ویژگی خصوصی تگ details	مقدار	کاربرد در سند html
open	open	مشخص می کند که جزئیات برای کاربر نمایان (open) باشد.