Beranda / HTML

Belajar Tag Dasar HTML

Posting Komentar

Kalau Anda baru mulai belajar tag dasar HTML, ada satu hal yang mungkin sedang dirasakan saat ini.

Bingung.

Saya tidak bercanda.

Saat pertama kali membuka tutorial HTML dulu, yang saya lihat hanyalah simbol aneh dengan tanda kurung siku di mana-mana.

Ada <html>, <head>, <body>, <p>, <h1>, dan masih banyak lagi.

Rasanya seperti masuk ke rumah orang lalu semua penghuni memperkenalkan diri dalam waktu bersamaan.

Belum sempat hafal nama satu orang, sudah muncul lima orang berikutnya.

Kalau Anda sedang mengalami hal yang sama, santai saja.

Saya juga pernah berada di posisi itu.

Dan kabar baiknya, untuk mulai membuat halaman web sederhana, Anda sebenarnya hanya perlu memahami beberapa tag HTML dasar terlebih dahulu.

Tidak perlu menghafal puluhan tag sekaligus sampai kepala terasa seperti browser yang kebanyakan tab terbuka.

Belajar Tag Dasar HTML

Apa Itu Tag HTML?

Sebelum masuk ke daftar tag, kita kenalan dulu dengan istilahnya.

Tag HTML adalah perintah yang digunakan untuk memberi tahu browser tentang isi sebuah halaman.

Sederhananya, browser tidak bisa menebak apakah sebuah tulisan adalah judul, paragraf, gambar, atau tabel.

Karena itu kita perlu memberi petunjuk menggunakan tag.

Contoh sederhana:

<p>Halo Dunia</p>

Tag <p> memberi tahu browser bahwa teks tersebut adalah sebuah paragraf.

Tanpa tag, browser hanya melihat kumpulan teks biasa.

Mirip seperti nasi goreng tanpa bumbu.

Masih bisa dimakan, tetapi ada sesuatu yang terasa kurang.

Struktur Dasar HTML yang Wajib Diketahui

Saat membuat halaman HTML pertama, biasanya struktur yang muncul seperti ini:

<!DOCTYPE html>

<html>

<head>
<title>Belajar HTML</title>
</head>

<body>

<h1>Halo Dunia</h1>

</body>

</html>

Sekilas memang terlihat banyak.

Tapi kalau dipecah satu per satu, ternyata tidak seseram kelihatannya.

Tag <html>

Tag ini adalah pembungkus utama seluruh halaman.

Semua elemen HTML biasanya berada di dalam tag ini.

<html>
...
</html>

Kalau rumah punya pagar yang mengelilingi seluruh area, maka <html> bisa dianggap sebagai pagarnya.

Semua isi website berada di dalamnya.

Tag <head>

Bagian ini menyimpan informasi tentang halaman.

Biasanya berisi:

  • Judul halaman
  • Meta tag
  • CSS
  • Script tertentu

Contohnya:

<head>
<title>Belajar HTML</title>
</head>

Menariknya, isi head biasanya tidak terlihat langsung oleh pengunjung.

Jadi bisa dibilang seperti dapur restoran.

Penting, tetapi tidak selalu terlihat.

Tag <title>

Tag ini digunakan untuk menentukan judul halaman yang muncul di tab browser.

Contoh:

<title>Belajar HTML Dasar</title>

Coba buka beberapa tab browser sekaligus.

Tulisan kecil yang muncul di atas itulah hasil dari tag title.

Kalau tidak diberi title, halaman web terasa seperti orang yang lupa memperkenalkan namanya.

Tag <body>

Nah, kalau tadi head adalah dapur, maka body adalah ruang tamunya.

Semua yang dilihat pengunjung biasanya berada di sini.

Contoh:

<body>

Isi website ada di sini

</body>

Mulai dari teks, gambar, video, tabel, sampai tombol, semuanya biasanya berada di dalam body.

Tag Judul: <h1> Sampai <h6>

Tag heading digunakan untuk membuat judul dan subjudul.

Contoh:

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Bagian</h3>

Urutannya dari yang paling besar sampai yang paling kecil.

Kalau diibaratkan buku:

  • H1 = Judul buku
  • H2 = Bab
  • H3 = Sub bab

Dan seterusnya.

Saya sering melihat pemula menggunakan banyak H1 dalam satu halaman.

Tidak salah sepenuhnya, tetapi untuk SEO biasanya cukup satu H1 utama saja.

Tag Paragraf <p>

Tag ini mungkin menjadi salah satu yang paling sering digunakan.

Karena hampir semua artikel menggunakan paragraf.

Contoh:

<p>Ini adalah sebuah paragraf.</p>

Tanpa tag ini, tulisan panjang bisa terlihat berantakan.

Dan pembaca biasanya tidak suka membaca tembok teks yang panjangnya seperti antrean liburan.

Tag Link <a>

Kalau ingin menghubungkan satu halaman ke halaman lain, gunakan tag ini.

Contoh:

<a href="https://contoh.com">
Kunjungi Website
</a>

Tag inilah yang membuat internet terasa seperti jaring laba-laba raksasa.

Satu klik bisa membawa kita ke halaman lain.

Kadang juga membawa kita ke artikel yang niatnya dibaca lima menit tetapi berakhir dua jam.

Tag Gambar <img>

Untuk menampilkan gambar, gunakan tag img.

Contoh:

<img src="gambar.jpg" alt="Contoh Gambar">

Berbeda dengan sebagian tag lainnya, img tidak memiliki tag penutup.

Jadi cukup satu tag saja.

Praktis.

Seperti teman yang datang tanpa perlu dijemput.

Tag Daftar <ul> dan <ol>

Saat ingin membuat daftar, gunakan:

Daftar Tidak Berurutan

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Daftar Berurutan

<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ol>

Saya pribadi sering memakai daftar seperti ini karena pembaca lebih mudah menangkap informasi.

Dan jujur saja, daftar juga membuat artikel terlihat lebih enak dipandang.

Tag yang Sebaiknya Dipelajari Setelah Ini

Kalau sudah memahami tag dasar HTML, langkah berikutnya biasanya mempelajari:

  • <div>
  • <span>
  • <table>
  • <form>
  • <input>
  • <button>
  • <header>
  • <footer>
  • <section>

Tenang.

Tidak perlu mempelajari semuanya dalam satu malam.

Kecuali Anda memang punya kemampuan menghafal seperti tokoh utama film genius.

Kesalahan yang Sering Dilakukan Saat Belajar HTML

Dulu saya sering melakukan beberapa hal berikut.

Mungkin Anda juga pernah.

Menghafal Tanpa Praktik

Membaca puluhan tag memang terlihat produktif.

Tetapi kalau tidak dicoba langsung, biasanya cepat lupa.

Ingin Belajar Semua Sekaligus

HTML punya banyak tag.

Kalau semuanya dipelajari bersamaan, otak bisa protes.

Belajar sedikit demi sedikit justru lebih efektif.

Takut Salah

Padahal kesalahan adalah bagian dari proses belajar.

Percayalah.

Sebagian besar programmer belajar karena sering salah.

Bukan karena selalu benar.

Penutup

Kalau Anda sedang belajar tag dasar HTML, fokuslah terlebih dahulu pada tag yang paling sering digunakan.

Tidak perlu terburu-buru mengejar materi yang lebih rumit.

Beberapa tag penting yang wajib dipahami:

  • <html>
  • <head>
  • <title>
  • <body>
  • <h1> sampai <h6>
  • <p>
  • <a>
  • <img>
  • <ul>
  • <ol>

Saya sendiri dulu sempat merasa HTML terlihat rumit karena banyaknya tag yang harus dikenali. Setelah memahami fungsi dasarnya satu per satu, semuanya mulai terasa masuk akal. Bahkan beberapa tag akhirnya menjadi sangat familiar karena hampir selalu digunakan di setiap halaman web.

Terima kasih sudah berkunjung ke Blog Adi Prayitno dan membaca artikel Belajar Tag Dasar HTML: Pondasi yang Wajib Dipahami Sebelum Belajar Coding Lebih Jauh. Semoga artikel ini bisa membantu Anda memahami dasar-dasar HTML tanpa harus merasa kewalahan di awal perjalanan belajar coding.

Topik yang dibahas dalam artikel ini:

Belajar tag dasar HTML, tag HTML dasar, tutorial HTML pemula, belajar HTML dari nol, struktur dasar HTML, mengenal tag HTML, elemen HTML dasar, dasar-dasar HTML.

Posting Komentar untuk "Belajar Tag Dasar HTML"

Silahkan berkomentar dengan bijak untuk kritik dan saran.
Spam link aktif akan segera saya hapus , Terimakasih.