tRikSonic
Tema

HTML details Tag

Terakhir diperbarui : 24 Mei 2018 - 21.31
HTML detail Tag - belajar html details, element details mempunyai definisi sebagai rincian tambahan yang bersifat pengguna dapat melihat atau menyembunyikan element atau kontent yang ada didalamnya.
background html
Dalam penggunaan element details harus diikut sertakan element <summary> yang berfungsi sebagai title atau judul dari element details.
Element <details> didalam pembacaan browser, dengan setting default element ini akan tidak terlihat, terkecuali attribute open ditulis pada element <details>

Contoh 1 html element <details> :

<details>
 <summary>Judul Infomasi</summary>
 isi Konten
</details>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<details>
 <summary>Judul Infomasi</summary>
 isi Konten
</details>

</body>
</html>

Contoh 2 html element <details> :

<details>
 <summary>Iklan Baris</summary>
 <ul>
  <li>Mobile Rental</li>
  <li>Handphone Murah</li>
  <li>Grosir Baju Murah</li>
 </ul>
</details>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<details>
 <summary>Iklan Baris</summary>
 <ul>
  <li>Mobile Rental</li>
  <li>Handphone Murah</li>
  <li>Grosir Baju Murah</li>
 </ul>
</details>

</body>
</html>

Contoh 3 html element <details> :

<details>
 <summary>Agen Kami</summary>
  <p>Anita : <i>hp</i> <u>+620000000000</u></p>
  <p>merrie : <i>hp</i> <u>+620000000000</u></p>
  <p>Nanda : <i>hp</i> <u>+620000000000</u></p>
</details>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<details>
 <summary>Agen Kami</summary>
  <p>Anita : <i>hp</i> <u>+620000000000</u></p>
  <p>merrie : <i>hp</i> <u>+620000000000</u></p>
  <p>Nanda : <i>hp</i> <u>+620000000000</u></p>
</details>

</body>
</html>

Atribut :

Attribute Value head
open open Menentukan apakah konten atau element html yang ada didalam tag <details> secara default akan terlihat.

Attribute ini bersifat boolean, artinya nilai dari attribute ini bisa ditulis maupun tidak

Misal :
  1. <details open>...</details>
  2. <details open="open">...</details>
Contoh nomor 1 dan nomor 2 bersifat sama.

Contoh :

<details open="open">
<summary>Iklan Baris</summary>
<ul>
 <li>Mobile Rental</li>
 <li>Handphone Murah</li>
 <li>Grosir Baju Murah</li>
</ul>
</details>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<details open="open">
<summary>Iklan Baris</summary>
<ul>
 <li>Mobile Rental</li>
 <li>Handphone Murah</li>
 <li>Grosir Baju Murah</li>
</ul>
</details>

</body>
</html>

Global Attributes:

Element <details> mencakup Global Attributes HTML.

Event Attributes:

Element <details> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome12
Safari6
Firefox49
Opera15
IE-
Edge-

Mobile

Android WebviewYa
Chrome AndroidYa
Edge Mobile-
Firefox Android49
Opera Android14
iOs Safari6.1
Samsung InternetYa

Default CSS :

Browser yang support dengan element <details>, biasanya mempunyai nilai default :
details {
  display: block;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.