HTML heading (judul) adalah elemen markup yang digunakan untuk menandai judul atau subjudul pada halaman web. HTML heading diawali dengan tag <h1> hingga <h6>, yang menandakan tingkat pentingnya, dengan <h1> memiliki tingkat kepentingan tertinggi dan <h6> memiliki tingkat kepentingan terendah.
Contoh penggunaan elemen heading HTML:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Contoh
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Catatan: Browser secara otomatis menambahkan beberapa spasi putih (margin) sebelum dan sesudah sebuah heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Catatan: Browser secara otomatis menambahkan beberapa spasi putih (margin) sebelum dan sesudah sebuah heading.
Pos Penting
Mesin pencari menggunakan judul untuk mengindeks struktur dan isi halaman web Anda.
Pengguna menelusuri halaman Anda dengan judulnya. Penting untuk menggunakan judul untuk menunjukkan struktur dokumen.
Judul <h1> harus digunakan untuk judul utama, diikuti judul <h2>, maka yang kurang penting <h3>, dan seterusnya.
Catatan: Gunakan judul HTML untuk judul saja. Jangan gunakan judul untuk membuat teks BESAR atau tebal .
Catatan: Gunakan judul HTML untuk judul saja. Jangan gunakan judul untuk membuat teks BESAR atau tebal .
Pos lebih besar
Setiap judul HTML memiliki ukuran default. Namun, Anda dapat menentukan ukuran untuk judul dengan atribut gaya:
Contoh
<h1 style="font-size:60px;">Heading 1</h1>
<h1 style="font-size:60px;">Heading 1</h1>
Aturan Horizontal HTML
Tag <hr> mendefinisikan tayangan tematik di halaman HTML, dan paling sering ditampilkan sebagai aturan horizontal.
Elemen <hr> digunakan untuk memisahkan konten (atau menentukan perubahan) pada halaman HTML:
Contoh
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Elemen <head> HTML
Elemen <head> HTML tidak ada hubungannya dengan judul HTML.
Elemen <head> adalah wadah untuk metadata. Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
Elemen <head> ditempatkan di antara tag <html> dan tag <body>:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Catatan: Metadata biasanya menentukan judul dokumen, kumpulan karakter, gaya, tautan, skrip, dan informasi meta lainnya.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Catatan: Metadata biasanya menentukan judul dokumen, kumpulan karakter, gaya, tautan, skrip, dan informasi meta lainnya.
Bagaimana melihat sumber HTML?
Pernahkah Anda melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan itu?"
Lihat Kode Sumber HTML:
Untuk mencari tahu, klik kanan di halaman dan pilih "View Page Source" (di Chrome) atau "View Source" (di IE), atau yang serupa di browser lain. Ini akan membuka jendela yang berisi kode sumber HTML halaman.
Periksa Elemen HTML:
Klik kanan pada elemen (atau area kosong), dan pilih "Inspect" atau "Check Elemen" untuk melihat elemen apa yang terbentuk (Anda akan melihat HTML dan CSS). Anda juga dapat mengedit HTML atau CSS on-the-fly di panel Elements or Styles yang terbuka.
Referensi Tag HTML
Referensi tag W3Schools berisi informasi tambahan tentang tag dan atributnya.
Anda akan belajar lebih banyak tentang tag dan atribut HTML di bab berikutnya dari tutorial ini.
| Tag | Description |
|---|---|
| <html> | Defines the root of an HTML document |
| <body> | Defines the document's body |
| <head> | A container for all the head elements (title, scripts, styles, meta information, and more) |
| <h1> to <h6> | Defines HTML headings |
| <hr> | Defines a thematic change in the content |