bellshade · mergify · Oct 16, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
@@ -0,0 +1,49 @@
+# HTML Figure
+
+## Apa itu HTML Figure?
+
+HTML Figure merupakan semantic HTML5 yang digunakan untuk menandai atau menjelaskan sebuah konten. Element `<figure>` juga dapat memberitahukan kepada browser bahwa dia adalah sebuah wadah yang menampung beberapa element yang memiliki hubungan satu sama lain.
+
+Konten yang ada di dalam `<figure>` biasanya terdiri dari gambar dan `<figcaption>` sebagai keterangan.
+
+```html
+<figure>
+  <img src="kucing-oren.jpg" alt="kucing oren" />
+  <figcaption>Kucing oren</figcaption>
+</figure>
+```
+
+Maka hasilnya seperti ini:
+
+![HTML Figure](contoh-gambar.png)
+
+## Contoh kode
+
+Selain gambar, element `<figure>` juga dapat menyimpan video, barisan kode, kutipan dan lain-lain.
+
+Contoh barisan kode:
+
+```html
+<figure>
+  <pre>
+     <code>
+        p {
+        color: green;
+        }
+      </code>
+  </pre>
+  <figcaption>contoh memberikan warna teks dengan CSS</figcaption>
+</figure>
+```
+
+Contoh kutipan:
+
+```html
+<figure>
+  <figcaption><b>Ali bin Abi Thalib berkata:</b></figcaption>
+  <blockquote>
+    Janganlah engkau mengucapkan perkataan yang engkau sendiri tak suka
+    mendengarnya jika orang lain mengucapkannya kepadamu.
+  </blockquote>
+</figure>
+```
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      figure {
+        width: 400px;
+        border: 2px solid burlywood;
+        border-radius: 4px;
+      }
+      figure img {
+        width: 100%;
+      }
+
+      figcaption {
+        padding-left: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- contoh figure yang berisi gambar -->
+    <figure>
+      <img src="kucing-oren.jpg" alt="kucing oren" />
+      <figcaption>Kucing oren</figcaption>
+    </figure>
+  </body>
+</html>