Tanda HTML <h1> hingga <h6>

Definisi dan penggunaan

<h1> ke <h6> Label digunakan untuk menentukan tajuk HTML.

<h1> Tentukan tajuk yang paling penting.<h6> Tentukan tajuk yang paling kurang penting.

Perhatian

Setiap halaman hanya menggunakan satu <h1> - Ini mesti mewakili tajuk utama/tema halaman keseluruhan. Selain itu, jangan lepas tingkatan tajuk - dari <h1> mulai, kemudian gunakan <h2>dan seterusnya.

Karena elemen h memiliki semantik pasti, harap pilih tingkat tanda yang sesuai untuk membangun struktur dokumen. Oleh itu, jangan gunakan tajuk untuk mengubah ukuran font di baris yang sama. Sebaliknya, kami harus menggunakan definisi gaya penimban untuk mencapai tampilan yang indah.

Jika anda ingin mendapatkan informasi lebih lanjut tentang pemilihan dan penggunaan tanda HTML, silakan baca buku 'Kualitas Web》。

Lihat juga:

Panduan HTML:Judul HTML

Panduan Referensi DOM HTML:Objek Heading

Contoh

contoh 1

Enam tajuk HTML berbeza:

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

Cuba Sendiri

contoh 2

Tetapkan warna latar belakang dan warna teks tajuk (menggunakan CSS):

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

Cuba Sendiri

contoh 3

Tetapkan penempatan tajuk (menggunakan CSS):

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

Cuba Sendiri

Properti Global

<h1> - <h6> Tanda ini mendukung Properti Global HTML。

Properti Acara

<h1> - <h6> Tanda ini mendukung Properti Acara HTML。

Pengaturan CSS lalai

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Banyak pelayar akan menunjukkan nilai lalai berikut: <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;
}

Cuba Sendiri

Dukungan Perpustakaan

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