Tag HTML h1 s/d h6 - html h1 to h6 tags

Tag h1 s/d h6 adalah elemen yang berfungsi untuk membuat "judul" diberbagai bagian blog dan lebih dikenal sebagai "heading". Elemen h1 s/d h6 ditetapkan dalam 6 tingkatan "heading" dengan ukuran font berbeda. Tag h1 merupakan elemen dengan font berukuran terbesar, kemudian diikuti tag h2 hingga h6. Dalam desain web, tag h1 lebih banyak digunakan sebagai pembentuk "blog title" atau untuk membuat "nama blog". Tag ini selanjutnya dipadukan dengan tag "a" hingga membentuk sebuah "link".
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.
Contoh :
<h1>Blog Title</h1>
<h1>
<a href="URL">Blog Title</a>
</h1>
Dalam bentuk yang lebih detail sbb:
<h1>
<a href="http://gubhugreyot.blogspot.com">Tutorial Blogger - gubhugreyot</a>
</h1>
Kode html di atas (yang ke-2) akan menghasilkan bentuk sbb:

Tutorial Blogger - gubhugreyot

Jika tag h1 biasa digunakan sebagai "elemen pembentuk blog title", maka h2 banyak digunakan untuk "widget title" atau memberi "nama widget", sedang h3 untuk "posts title" atau untuk menuliskan "judul posting".
Contoh penggunaan tag h2:
<h2>widgets title</h2>
<h2>Popular Posts</h2>
Dari kode di atas akan menghasilkan bentuk sbb:

Popular Posts

Contoh penggunaan tag h3:
<h3>posts title</h3>
<h3><a href="URL">posts title</a></h3>
<h3><a href="http://gubhugreyot.blogspot.com/2012/04/create-404-error-page-in-blogger-with.html">Create 404 Error page with CSS3</a></h3>
Kode html di atas akan menghasilkan bentuk sbb:

Create 404 Error page with CSS3

Penggunaan tag h1 s/ h3 pada "blog title", "widget title" dan "post title" biasa menggunakan attribute class, seperti misalnya h1 class="title", h2 class="widget-title", h3 class="post-title", seperti misalnya:
<h3 class="post-title" ><a href="http://gubhugreyot.blogspot.com/2012/04/create-404-error-page-in-blogger-with.html">Create 404 Error page with CSS3</a></h3>

Contoh pengaturan ukuran font tag h1 s/d h6

h1{
      font-size:40px;
}
h2{
      font-size:27px;
}
h3{
      font-size:22px;
}
h4{  
      font-size:18px;
}
h5{
      font-size:16px;
}
h6{
      font-size:14px;
}

Contoh setting font-size tag h1 s/d h6 dalam % (persen)

h1{
      font-size:160%;
}
h2{
      font-size:150%;
}
h3{
      font-size:140%;
}
h4{  
      font-size:130%;
}
h5{
      font-size:120%;
}
h6{
      font-size:110%;
}
Dibawah telah disertakan demo elemen h1 s/d h6, baik ketika digunakan bersama tag "a" untuk membentuk link, ataupun terpisah. Disertakan juga penggunaan attribute "class" untuk membentuk fungsi secara khusus.

Please click the button to display. Continue with editing code and click to see the results!

5 komentar:

  1. Mantab mas bro...sangat bermanfaat. tambah terus postingannya. moga lancar jaya..

    BalasHapus
  2. trus kalo iFrame itu apa sih Mas?
    pas saya lihat tulisannya: "IFrames: Bad: IFrames are not indexed at all, and you have 1."

    BalasHapus
  3. untuk mengatur font deskripsi nya gimana ms

    BalasHapus

My ProfileC l o s e

FollowerC l o s e