6 Tag HTML Wajib untuk Web Developer: dari Pemula Hingga Pro (+ Tips Rahasia!)

Halo, Kawan KodingKu!😉

Siap menjelajahi dunia pemrograman yang penuh tantangan dan kesenangan? 💻✨ Mari mulai petualangan dengan penuh semangat! 🎈 Dan jangan lupa membawa banyak energi dan kesenangan sebab Kawan-Kawan akan bermain dengan banyak hal keren. Kali ini, KodingKu akan membahas Trivia tag dasar HTML! 🚀

Tag dasar HTML memiliki fungsi yang sama seperti saat Kawan-Kawan KodingKu membuat dokumen di Microsoft Word. Ketika sudah paham cara penggunaan dan fungsinya di Word, menerapkannya di HTML tidak akan jauh berbeda!

1. Tag Heading

Tag heading adalah cara HTML untuk membuat judul atau subjudul di halaman web. Ada enam tingkatan heading, mulai dari <h1> yang terbesar hingga <h6> yang terkecil.

1.1  Fakta Menarik

Tahukah Kawan-Kawan? Tag heading seperti hirarki keluarga. <h1> adalah kepala keluarga yang besar dan berwibawa, sementara <h6> adalah anak bungsu yang imut dan kecil. Heading membantu Google memahami struktur konten di website Kawan-Kawan, jadi pastikan menggunakan heading dengan bijak! 

1.2  Tips Penggunaan

1. Gunakan <h1> untuk judul utama halaman.
2. Gunakan heading yang lebih kecil untuk subjudul.
3.  Jangan lompati level heading (misalnya dari <h1> langsung ke <h4>).

2. Tag Paragraf

Seperti namanya, tag paragraf <p> digunakan untuk membuat teks paragraf. Merupakan tag yang paling sering digunakan dalam HTML karena hampir semua teks berada dalam paragraf.

2.1  Fakta Menarik

Tag <p> seperti teman yang siap mendengarkan cerita Kawan-Kawan. Setiap kali ingin berbicara tentang topik baru, mulai dengan teman yang baru (paragraf baru).

2.2  Tips Penggunaan

1. Gunakan <p> untuk setiap blok teks yang berbeda. 
2. Pisahkan ide atau poin utama ke dalam paragraf yang berbeda untuk memudahkan pembaca.

3. Tag Line Break

Tag line break <br> digunakan untuk memaksa teks berpindah ke baris baru.

3.1  Fakta Menarik

Bayangkan tag <br> sebagai tombol "Enter" di keyboard. Setiap kali ingin membuat baris baru tanpa memulai paragraf baru, gunakan tag <br> untuk memudahkan pekerjaan.

3.2  Tips Penggunaan

1.       Gunakan <br> untuk alamat atau puisi di mana setiap baris harus dimulai di baris baru.
2.       Jangan gunakan terlalu banyak <br> dalam teks paragraf biasa.

4. Tag Center

Tag center <center> digunakan untuk menempatkan teks atau elemen lain di tengah halaman.

            4.1  Fakta Menarik

Tag <center> itu seperti magic marker yang bisa menempatkan apapun tepat di tengah-tengah layar. Meskipun sekarang sudah jarang digunakan dan digantikan oleh CSS, tetap menyenangkan untuk diketahui.

4.2  Tips Penggunaan

1.     Daripada menggunakan <center>, gunakan CSS dengan text-align: center; untuk teks atau margin: 0 auto; untuk elemen lain.
2.       Contoh: <p style="text-align: center;">Teks ini di tengah!</p>

5. Tag Horizontal Line

Tag horizontal line <hr> digunakan untuk membuat garis horizontal yang memisahkan konten.

5.1 Fakta Menarik

Tag <hr> seperti garis finish dalam lomba lari. Saat kamu melihatnya, kamu tahu ada sesuatu yang selesai dan yang baru akan dimulai.

5.2  Tips Penggunaan

1.      Gunakan <hr> untuk memisahkan bagian konten yang berbeda.
2.      Tambahkan styling dengan CSS untuk membuat garis lebih menarik, misalnya: <hr style="border: 1px solid #000;">

6. Tag Preformatted Text

Tag preformatted text <pre> digunakan untuk menampilkan teks dengan format yang persis seperti yang kamu ketikkan, termasuk spasi dan line break.

6.1  Fakta Menarik

Tag <pre> itu seperti mesin ketik digital. Apa yang kamu ketik adalah apa yang akan kamu dapatkan, sempurna untuk menampilkan kode atau puisi dengan format khusus.

6.2  Tips Penggunaan

1.      Gunakan <pre> untuk menampilkan kode atau teks dengan format yang tepat.
2.      Hindari menggunakan <pre> untuk teks biasa karena akan mempertahankan setiap spasi dan line break yang kamu masukkan.

    Dengan memahami dan memanfaatkan tag-tag dasar HTML secara benar, Kawan-Kawan bisa meningkatkan produktivitas dan kualitas kode HTML yang dibuat. Jangan ragu untuk eksplorasi dan mencoba banyak tag yang ada di HTML agar lebih mahir dalam mempelajari bahasa pemrograman. Nah, Kawan-Kawan KodingKu, dengan memahami tag dasar HTML, kita bisa membuat halaman web yang rapi dan mudah dibaca. Teruslah berlatih dan eksplorasi lebih banyak tag untuk meningkatkan kemampuan coding kalian!

     Sekarang Kawan-Kawan sudah berada di akhir sesi pembelajaran. Dari postingan ini, Kawan-Kawan bisa mempelajari beberapa tag dasar yang digunakan pada HTML beserta fungsi dan tujuannya masing-masing. Yuk, praktikkan cara kerja masing-masing tag di atas!

    Jangan lupa untuk follow semua akun sosial media KodingKu untuk mendapatkan update terbaru dan informasi menarik lainnya! 📱✨

Instagram

Twitter

Medium

Hashnode

 

 

     Terima kasih sudah membaca sampai akhir, sampai jumpa di postingan berikutnya!

 

     -KodingKu-