HTML h1-h6 Tag Elemen, Tutorial Belajar kode editor

Juli 08, 2024 Posting Komentar

HTML h1-h6 tag

HTML Elemen <h1> - <h6> adalah tag yang digunakan untuk membuat judul dan subjudul dengan <h1> sebagai judul utama, sedangkan <h6> adalah sebagai judul terkecil.

1. html tag <h1> - <h6> default

Contoh di bawah ini adalah heading h1, h2, h3, h4, h5, h6 default tanpa style css. bisa langsung di gunakan pada web browser akan tampil nampak seperti berikut di bawah ini.

<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  .h {color:#454545;}
</style>
</head>
<body>
<h1 class="h">Contoh: HTML Elemen &lt;h1&gt; - &lt;h6&gt; </h> <hr>

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

<p><b>Tip:</b>Elemen h1 hingga h6 di gunakan hanya untuk judul. Jangan menggunakannya hanya untuk membuat teks menjadi tebal dan besar!</p>
</body>
</html>

Cicagak Berbagi

2. html tag <h1> - <h3> teks warna dengan css

Cukup mudah untuk mengganti warna pada teks heading h1,h2,h3 anda bisa mengaturnya, lihat tag style di dalam properti css di bagian color: tuliskan kode warna yang anda suka.

<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  h1 {color:coral;}
  h2 {color:#3090C7;}
  h3 {color:#822EFF;}
  .h {color:#454545;}
</style>
</head>
<body>
<h1 class="h">Contoh: HTML Elemen &lt;h1&gt; - &lt;h3&gt; Teks Warna Dengan CSS </h1> <hr>

<h1>Ini Adalah Judul 1</h1>
<h2>Ini Adalah Judul 2</h2>
<h3>Ini Adalah Judul 3</h3>

<br>
<p><b>Tip:</b>Elemen h1 hingga h3 di gunakan hanya untuk judul. Jangan menggunakannya hanya untuk membuat teks menjadi tebal dan besar!</p>
</body>
</html>

Cicagak Berbagi

3. html tag <h1> - <h3> perataan teks dengan css

Untuk mengatur perataan teks pada heading h1,h2,h3 anda bisa melihat dan mengedit serta mengaturnya di dalam bagian tag style ubah propertinya pada h1,h2,h3 text-align: left, center dan right pada kode editor html di bawah dan lihat hasilnya apa yang terjadi.

<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  h1 {color:coral; text-align:left;}
  h2 {color:#3090C7; text-align:center;}
  h3 {color:#822EFF; text-align:right;}
  .h {color:#454545;}
</style>
</head>
<body>
<h1 class="h">Contoh: HTML Elemen &lt;h1&gt; - &lt;h3&gt; Perataan Teks Dengan CSS </h1> <hr>

<h1>Ini Adalah Judul 1</h1>
<h2>Ini Adalah Judul 2</h2>
<h3>Ini Adalah Judul 3</h3>

<br>
<p><b>Tip:</b>Elemen h1 hingga h3 di gunakan hanya untuk judul. Jangan menggunakannya hanya untuk membuat teks menjadi tebal dan besar!</p>
</body>
</html>

Cicagak Berbagi

4. html tag <h1> - <h3> background warna dengan css

Heading h1,h2,h3 beragam background warna oren hijau dan merah, di atur sesuai dengan nilai propertinya masing-masing di dalam style css bisa langsung lihat dan mengedit cohtoh di bawah ini.

<!DOCTYPE html>
<html>
<head>
<style>
  .text {color:#fff; font-family:arial; padding:5px; text-align:center; border-radius:2px;}
  h1 { background:coral;}
  h2 { background:green;}
  h3 { background:red;}
</style>
</head>
<body>

<h1 class="text">Ini Adalah Judul 1</h1>
<h2 class="text">Ini Adalah Judul 2</h2>
<h3 class="text">Ini Adalah Judul 3</h3>

</body>
</html>

Cicagak Berbagi