تگ 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) باشد. |
ویژگی های عمومی تگ <details> در اچ تی ام ال
تگ <details> از کلیه ویژگی های عمومی در HTML پشتیبانی می کند.
پشتیبانی مرورگرها از تگ <details> در اچ تی ام ال
تگ <details> در همه مرورگر های معتبر نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
