Tag HTML <h1> sampai <h6>

Definisi dan penggunaan

<h1> sampai <h6> Tag digunakan untuk mendefinisikan judul HTML.

<h1> Definisi judul yang paling penting.<h6> Definisi judul yang paling kecil pentingnya.

Perhatian

Tiap halaman hanya menggunakan satu <h1> - Ini seharusnya mewakili judul utama/subyek utama seluruh halaman. Selain itu, jangan lewati tingkat judul - <h1> mulai, kemudian gunakan <h2>dan seterusnya.

Karena elemen h memiliki semantik yang pasti, harap pilih tingkat tag yang sesuai untuk struktur dokumen. Jadi, jangan gunakan tag judul untuk mengubah ukuran font di baris yang sama. Sebaliknya, kami harus menggunakan definisi gaya pengecatan untuk mencapai tampilan yang indah.

Jika Anda ingin mendapatkan informasi lebih lanjut tentang pemilihan dan penggunaan tag HTML, silakan baca bukuKualitas Web》。

Lihat pula:

Pelajaran HTML:Judul HTML

Panduan HTML DOM:Objek Heading

contoh

contoh 1

enam jenis judul HTML yang berbeda:

<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<h3>Ini judul 3</h3>
<h4>Ini judul 4</h4>
<h5>Ini judul 5</h5>
<h6>Ini judul 6</h6>

Coba Sendiri

contoh 2

Atur warna latar dan warna teks judul (dengan CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Coba Sendiri

contoh 3

Atur penyejajaran judul (dengan CSS):

<h1 style="text-align:center">Ini judul 1</h1>
<h2 style="text-align:left">Ini judul 2</h2>
<h3 style="text-align:right">Ini judul 3</h3>
<h4 style="text-align:justify">Ini judul 4</h4>

Coba Sendiri

Atribut global

<h1> - <h6> tanda ini mendukung Atribut global di HTML。

atribut acara

<h1> - <h6> tanda ini mendukung Atribut acara di HTML。

pengaturan CSS standar

Sebagian besar peramban akan menampilkan nilai default berikut ini <h1> Elemen:

contoh 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Sebagian besar peramban akan menampilkan nilai default berikut ini <h2> Elemen:

contoh 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Sebagian besar peramban akan menampilkan nilai default berikut ini <h3> Elemen:

contoh 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Sebagian besar peramban akan menampilkan nilai default berikut ini <h4> Elemen:

contoh 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Sebagian besar peramban akan menampilkan nilai default berikut ini <h5> Elemen:

Contoh 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Sebagian besar peramban akan menampilkan nilai default berikut ini <h6> Elemen:

Contoh 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Coba Sendiri

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan