Macam-Macam Kode Heading di HTML (Container & Empty Tags)

WritingSkills.my.id - Teks di dalam halaman-halaman web bisa diorganisir ke dalam beberapa bagian dengan Headings .  Headings juga bisa mem...

Macam-Macam Kode Heading di HTML (Container & Empty Tags)

WritingSkills.my.id - Teks di dalam halaman-halaman web bisa diorganisir ke dalam beberapa bagian dengan Headings

Headings juga bisa membantu mesin telusur (search engine) seperti Google atau Bing mengetahui apa yang akan ditampilkan oleh halaman web kita kepada orang-orang yang tepat. 

Kode Headings di HTML

Headings di dalam bahasa HTML terdiri dari tingkat-tingkat atau levels yang berbeda-beda. <h1> adalah heading yang paling penting. Sebagai contoh Heading 1 adalah kode berikut:
<h1>Heading 1</h1>

Kita bisa menggunakan sampai 6 tingkat Headings di HTML. Tags untuk keenam elemen heading ini adalah <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Heading level 2 adalah kode HTML berikut:
<h2>Postingan Baru Blog Saya</h2>

Heading adalah elemen lainnya di dalam HTML yang memerlukan opening container tags dan closing container tags Sebagai contoh:
<h1>Seantero Dunia Baru</h1>

Kita bisa menambahkan heading yang berbeda-beda ke dalam halaman web kita untuk mengatur kontennya. Sebagai contoh apa yang akan ditampilkan di browser dari kode-kode heading berikut?
<h1>Heading 1</h1>
<h2>Heading 2.1</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6.1</h6>
<h6>Heading 6.2</h6>
<h2>Heading 2.2</h2>

Output dari kode HTML di atas yang akan ditampilkan di browser adalah:
Contoh Kode Heading di HTML


Heading <h1> biasanya memiliki style huruf (font) paling besar, dan <h6> huruf paling kecil. 

Kita bisa mengkombinasikan headings dengan elemen-elemen lainnya. Sebagai contoh, cek kode HTML berikut:
<h1>Restoran Terbaik</h1>
<p>Makanan terbaik di kota</p>
<h2>Menu Makanan</h2>
<h3>Hidangan Pembuka</h3>
<p>Camilan</p>
<button>Pesan sekarang</button>

Output dari kode HTML di atas yang akan ditampilkan di browser adalah:
Contoh Kode Heading di HTML

h1 adalah heading paling penting. Kita hanya boleh memiliki heading level 1 per satu halaman web. 

Tingkatan-tingkatan heading harus digunakan dalam urutan yang benar (h1, h2, ...h6). Cek kode HTML berikut:
<h1>Produk Terbaik yang Pernah Ada</h1>
<h2>Fitur-Fitur Produk</h2>
<h3>Tentang Fitur #1</h3>

Setelah heading h1, kita bisa menggunakan h2 sebanyak yang kia inginkan. Dan setelah setiap h2 kita bisa memasukkan h3, dan seterusnya. 

Container Tags vs Empty Tags

Banyak elemen HTML memerlukan opening dan closing tag untuk memasukkan elemen-elemennya. Tags seperti ini disebut dengan Container tags

Beberapa elemen HTML bisa dibuat dengan hanya satu tag. Tags seperti ini disebut dengan empty tags

Tag gambar atau image <img> adalah salah satu contoh empty tag. Tag <img> tidak memerlukan closing tag atau tag penutup. 

Kesimpulan dari tutorial kita tentang Kode Heading di HTML ini adalah sebagai berikut:
  1. Banyak manfaat menggunakan headings di halaman-halaman web kita. 
  2. Kita bisa menggunakan semua level headings, dari h1 sampai h6. 
  3. Headings memerlukan Container tags
  4. Empty tags, seperti tag <img> tidak memerlukan closing tag.

COMMENTS

Nama

Accounting & Finance,1,Administrasi,1,American British English Differences,3,Belajar C#,6,Belajar Coding,31,Belajar HTML,9,Belajar PHP,1,Belajar Python,30,Business Letter,21,Business Letter Style,8,Business Letter Style Organization,3,Business Letter Style Outlook,2,Business Letter Style Tone,3,Business Memo,3,Chord Gitar,2,Dasar-Dasar C#,6,Dasar-Dasar HTML,9,Dasar-Dasar PHP,1,Download,7,English Grammar,13,French Tutorial,3,Job,2,Layout Formats,2,Letter Examples,6,List of Expressions,13,Main Gitar,9,Marketing Executive,1,Memo Examples,3,Motivasi,13,MS. Word Tutorial,5,Operator Perbandingan Python,4,Profile Form Examples,1,Proyek Python,9,Psikotes,1,Redundancy,2,Sample of Letters,1,Sekretaris,1,Serba-Serbi Informasi,5,Statement if Python,6,Surat Lamaran,4,While Loops Python,3,Writing Tutorial,27,Zodiak,1,
ltr
item
Writing Skills: Macam-Macam Kode Heading di HTML (Container & Empty Tags)
Macam-Macam Kode Heading di HTML (Container & Empty Tags)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Khg8ES6yXJmw1dd57dLMZ6Yx7bgOc2bEl71EgXSGqi_VmqnGXhXEpHZDPRIlUsF6PikEMBuayZi_8lYNeOjHIrOTYqHWeXgBDd1OlIcQWnLuU38qjfEsc6H1f9QYfQJ67PgYfw8CUZ0JGBLAwwRcn7U9uy5ZpJcE-xk8c9adZiStro3BKUBG8NMBBfVn/w640-h320/Macam-Macam-Kode-Heading-HTML.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Khg8ES6yXJmw1dd57dLMZ6Yx7bgOc2bEl71EgXSGqi_VmqnGXhXEpHZDPRIlUsF6PikEMBuayZi_8lYNeOjHIrOTYqHWeXgBDd1OlIcQWnLuU38qjfEsc6H1f9QYfQJ67PgYfw8CUZ0JGBLAwwRcn7U9uy5ZpJcE-xk8c9adZiStro3BKUBG8NMBBfVn/s72-w640-c-h320/Macam-Macam-Kode-Heading-HTML.jpg
Writing Skills
https://www.writingskills.my.id/2023/07/contoh-kode-heading-html-container-tags.html
https://www.writingskills.my.id/
https://www.writingskills.my.id/
https://www.writingskills.my.id/2023/07/contoh-kode-heading-html-container-tags.html
true
3599370990183318253
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content