Belajar HTML - Cara Membuat Heading
Kresna Galuh 13 Januari 2016
Setelah di dua tutorial sebelumnya tentang HTML kita telah belajar bagaimana konsep dasar HTML dan memahami konsep elemen pada HTML, pada kesempatan kali ini kita akan coba belajar bagaimana cara membuat heading atau judul pada HTML.
Mengenal Heading HTML
Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO).
TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan ukurannya. TAG Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. TAG H1 memiliki ukuran paling besar, sedangkan TAG h6 memiliki ukuran paling kecil.
Perlu diperhatikan bahwa walaupun TAG Heading ini memiliki ukuran yang bervariasi dan lebih tebal serta besar dari tag biasa, namun jangan gunakan TAG Heading ini hanya untuk membuat tulisan yang lebih besar. Gunakanlah TAG Heading hanya untuk membuat judul dan subjudul, bukan untuk membuat tulisan berukuran besar. Karena pada dasarnya untuk membuat tulisan besar kita bisa menggunakan CSS.
Biasanya H1 hanya digunakan satu kali dalam sebuah halaman web, yaitu sebagai judul utama (judul besar). H2, H3 dan seterusnya bisa kita gunakan beberapa kali sebagai sub judul.
Contoh Penggunaan TAG Heading
Berikut contoh penggunaan Heading dalam kode HTML:
<!DOCTYPE HTML> <html> <head> <title>TAG Heading HTML</title> </head> <body> <h1>Heading H1</h1> <h2>Heading H2</h2> <h3>Heading H3</h3> <h4>Heading H4</h4> <h5>Heading H5</h5> <h6>Heading H6</h6> </body> </html>
Berikut penampakannya jika dijalankan melalui browser:
Berikut contoh penggunaan HTML untuk membuat tulisan dan sub judul:
<!DOCTYPE HTML> <html> <head> <title>Penggunaan TAG Heading HTML</title> </head> <body> <h1>Judul Utama</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Sub Judul</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Sub Judul</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h3>Sub dari Sub Judul</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Penutup
Pastikan gunakanlah TAG Heading dalam membuat halaman web, karena TAG Heading sangat berperan penting dalam meningkatkan nilai web kita di mata search engine. Demikianlah cara menggunakan TAG Heading dalam HTML. Pada seri tutorial belajar html selanjutnya kita akan mencoba untuk belajar cara membuat paragraf di HTML. Semoga bermanfaat.
Enjoy coding!