Gaya Penulisan dan Formatting HTML

Header H1 tag pada sebuah blog digunakan untuk judul blog atau judul postingan blog (tidak keduanya). Contohnya digunakan untuk judul postingan di atas. Setelah itu, baru tag h2, h3, sampai h6.

Header H2 Tag

Header H3 Tag

Header H4 Tag

Header H5 Tag

Header H6 Tag

---

Paragraf

Ini adalah contoh paragraf biasa yang dibuat menggunakan tag p.

Paragraf

<p>Ini adalah contoh paragraf biasa yang dibuat menggunakan tag p.</p>

---

Paragraf dengan Baris Baru

Ini adalah contoh kalimat pertama.
Ini adalah contoh kalimat kedua.
Baris baru menggunakan tag <br/>

Paragraf dengan Baris Baru

<p>Ini adalah contoh kalimat pertama.<br/> 
Ini adalah contoh kalimat kedua.</p>

---

Kutipan

Ini adalah contoh kutipan panjang yang menggunakan tag <blockquote>. Kutipan ini biasanya akan diindentasi atau memiliki gaya visual yang berbeda dari teks utama.

Blockquote

<blockquote>Ini adalah contoh kutipan panjang yang menggunakan tag blockquote. ... </blockquote>

---

Kutipan dengan Penulis

Anda bisa menggunakan tag <blockquote> bersama <cite> untuk memberikan kutipan dari sumber lain.

Nama Penulis

Blockquote dengan Penulis

<blockquote>
  <p>Anda bisa menggunakan tag blockquote bersama cite untuk memberikan kutipan dari sumber lain.</p>
  <cite>Nama Penulis</cite>
</blockquote>

---

Teks Tebal

Ini adalah teks tebal menggunakan tag <strong> dan teks tebal menggunakan tag <b>.

Teks Tebal

<p>Ini adalah <strong>teks tebal</strong> ... <b>teks tebal</b></p>

---

Teks Miring

Ini adalah teks miring menggunakan tag <em> dan teks miring menggunakan tag <i>.

Teks Miring

<p>Ini adalah <em>teks miring</em> ... <i>teks miring</i></p>

---

Teks yang Disorot

Ini adalah teks yang disorot menggunakan tag <mark>.

Teks yang Disorot

<p>Ini adalah <mark>teks yang disorot</mark></p>

---

Teks Kutipan Biasa

Ini adalah teks kutipan biasa menggunakan tag <q>.

Teks Kutipan Biasa

<q>Ini adalah <q>teks kutipan biasa...</q> 

---

Subscript dan Superscript

Contoh subscript: H₂O dan superscript: x² menggunakan tag <sub> dan <sup>.

Subscript dan Superscript

<p>Contoh subscript: H<sub>2</sub>O dan superscript: x<sup>2</sup> ... </p>

---

Teks Kecil

Ini adalah teks kecil menggunakan tag <small>.

Teks Kecil

<p>Ini adalah <small>teks kecil</small></p>

---

Teks yang Dihapus dan Ditambahkan

Teks ini dihapus dan teks ini ditambahkan menggunakan tag <del> dan <ins>.

Teks yang Dihapus dan Ditambahkan

<p><del>Teks ini dihapus</del> dan <ins>teks ini ditambahkan</ins></p>

---

Kode dalam Baris

Anda bisa menggunakan tag <code> untuk menampilkan potongan kode singkat di dalam paragraf.

Kode dalam Baris

<p>Anda bisa menggunakan tag <code>potongan kode singkat</code> di dalam paragraf.</p>

---

Blok Kode

Label Kode

function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();

Baca penulisan Code Block

---

List Tidak Berurutan

• Item pertama
• Item kedua
• Item ketiga

List Tidak Berurutan

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

---

List Berurutan

1. Langkah 1
2. Langkah 2
3. Langkah 3

List Berurutan

<ol>
  <li>Langkah 1</li>
  <li>Langkah 2</li>
  <li>Langkah 3</li>
</ol>

---

List Tidak Berurutan Beranak

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

---

List Berurutan Beranak

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

---

Garis Horizontal

---

Garis Horizontal

<hr/>

---

Variabel

Dalam matematika, variabel biasanya ditulis seperti ini: x menggunakan tag <var>.

Variabel Matematika

<p>Dalam matematika, variabel biasanya ditulis seperti ini: <var>x</var> ... </p>

---

Input Pengguna

Tekan Ctrl + S untuk menyimpan menggunakan tag <kbd>.

Input Pengguna

<p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd> ... </p>

---

Contoh Output

Output dari program adalah: Hello, World! menggunakan tag <samp>.

Contoh Output

<p>Output dari program adalah: <samp>Hello, World!</samp> ... </p>

---

Gambar dengan Keterangan

Ini adalah contoh gambar dengan keterangan menggunakan tag <figure> dan <figcaption>.

Gambar dengan Keterangan

<figure>
  <img src="URL_GAMBAR" alt="DESKRIPSI_GAMBAR">
  <figcaption>Keterangan gambar di sini</figcaption>
</figure>

---

Tabel Data

Ini adalah contoh tabel untuk menampilkan data terstruktur. Kode ini sudah dilengkapi dengan atribut data-label untuk tampilan responsif di layar kecil.

Header 1	Header 2	Header 3
Baris 1, Kolom 1	Baris 1, Kolom 2	Baris 1, Kolom 3
Baris 2, Kolom 1	Baris 2, Kolom 2	Baris 2, Kolom 3

Tabel Data

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Header 1">Baris 1, Kolom 1</td>
      <td data-label="Header 2">Baris 1, Kolom 2</td>
      <td data-label="Header 3">Baris 1, Kolom 3</td>
    </tr>
    <tr>
      <td data-label="Header 1">Baris 2, Kolom 1</td>
      <td data-label="Header 2">Baris 2, Kolom 2</td>
      <td data-label="Header 3">Baris 2, Kolom 3</td>
    </tr>
  </tbody>
</table>

---

Konten yang Dapat Dikembang-ciutkan

Klik di sini untuk melihat konten tersembunyi.

Ini adalah konten yang akan muncul atau disembunyikan. Ini sangat berguna untuk FAQ atau informasi tambahan.

Konten yang Dapat Dikembang-Ciutkan

<details>
  <summary>Klik di sini untuk melihat konten tersembunyi.</summary>
  <p>Ini adalah konten yang akan muncul atau disembunyikan. Ini sangat berguna untuk FAQ atau informasi tambahan.</p>
</details>

---

Singkatan dan Definisi

Kita akan membahas HyperText Markup Language, atau sering disingkat HTML, untuk membuat struktur konten.

Singkatan dan Definisi

<p>
  Kita akan membahas <dfn>HyperText Markup Language</dfn>, atau sering disingkat <abbr title="HyperText Markup Language">HTML</abbr>, untuk membuat struktur konten.
</p>