Di era digital yang terus berkembang, kemampuan membuat dan memahami website menjadi salah satu keterampilan penting, terutama bagi mahasiswa jurusan Teknologi Informasi, Rekayasa Perangkat Lunak, maupun Komunikasi Digital di Telkom University Jakarta. Salah satu fondasi utama dalam pembuatan website adalah HTML atau HyperText Markup Language. HTML digunakan untuk menyusun struktur dan konten dari halaman web sehingga bisa dibaca dan ditampilkan oleh browser seperti Chrome, Firefox, Safari, atau Edge.
Artikel ini akan membahas secara lengkap dan mudah dipahami mengenai konsep dasar HTML, tag-tag penting yang wajib dikuasai, serta tips praktis agar mahasiswa dapat mulai membuat halaman web statis sendiri.
Apa Itu HTML?
HTML adalah bahasa markup standar yang digunakan untuk membuat struktur halaman web. Kata “markup” merujuk pada proses “menandai” bagian-bagian tertentu dalam dokumen agar dapat dikenali fungsinya oleh browser. HTML bukanlah bahasa pemrograman (seperti Python atau JavaScript), melainkan bahasa deskriptif yang menyusun elemen-elemen seperti teks, gambar, video, tautan, dan lainnya.
Contoh sederhana:
Struktur Dasar Dokumen HTML
Setiap halaman HTML harus memiliki struktur dasar sebagai berikut:
Penjelasan struktur di atas:
-
<!DOCTYPE html>: Menyatakan bahwa dokumen ini menggunakan HTML versi 5. -
<html>: Elemen induk dari seluruh halaman HTML. -
<head>: Berisi informasi meta (tidak terlihat di layar), seperti judul dan encoding. -
<meta charset="UTF-8">: Memastikan karakter Unicode ditampilkan dengan benar. -
<title>: Judul halaman yang muncul di tab browser. -
<body>: Tempat menuliskan konten utama yang akan dilihat oleh pengguna.
Tag-Tag Dasar HTML yang Wajib Diketahui
Berikut ini adalah tag HTML dasar yang paling umum digunakan dan wajib dikuasai oleh pemula:
1. Heading (<h1> – <h6>)
Digunakan untuk membuat judul atau subjudul dengan hirarki dari yang paling penting (<h1>) ke paling tidak penting (<h6>).
2. Paragraf (<p>)
Digunakan untuk menampilkan teks dalam paragraf.
3. Gambar (<img>)
Menampilkan gambar pada halaman.
-
src: Sumber gambar (bisa lokal atau URL). -
alt: Teks alternatif yang muncul jika gambar gagal dimuat. -
widthdanheight: Mengatur ukuran gambar.
4. Tautan (<a>)
Membuat hyperlink ke halaman lain atau ke website eksternal.
5. Daftar (List)
-
Tak berurutan (
<ul>):
Berurutan (<ol>):
6. Garisan Horizontal (<hr>)
Digunakan untuk menyisipkan garis horizontal sebagai pemisah antar bagian konten.
7. Garis Baru (<br>)
Membuat baris baru di dalam paragraf tanpa memulai paragraf baru.
8. Pemformatan Teks
-
Tebal:
<strong>atau<b> -
Miring:
<em>atau<i> -
Garis bawah: menggunakan CSS (karena
<u>tidak disarankan dalam HTML5)
9. Divisi Konten (<div>)
Elemen pembungkus yang sering digunakan untuk mengelompokkan bagian halaman.
10. <span> untuk Inline Content
Berfungsi mirip seperti <div>, tapi digunakan untuk teks inline.
Perbedaan Elemen Block vs Inline
-
Block-level element: Mengisi seluruh lebar layar dan dimulai di baris baru (contoh:
<div>,<p>,<h1>). -
Inline element: Tidak membuat baris baru, hanya mengisi ruang yang dibutuhkan (contoh:
<a>,<span>,<strong>).
Tips Belajar HTML untuk Mahasiswa Telkom University Jakarta
-
Mulai dari proyek sederhana
Buat halaman profil pribadi, CV digital, atau katalog produk fiktif sebagai latihan. -
Gunakan editor kode yang nyaman
Visual Studio Code, Sublime Text, dan Notepad++ adalah pilihan populer. -
Latihan menggunakan playground online
Seperti JSFiddle, CodePen, dan W3Schools TryIt Editor. -
Pelajari standar W3C dan praktik terbaik
Selalu gunakan struktur HTML yang rapi dan valid untuk hasil optimal di semua browser. -
Jangan lupakan SEO dan aksesibilitas
Gunakan atributaltpada gambar dan struktur heading yang tepat agar halaman ramah mesin pencari dan pengguna difabel.
Memahami dan menguasai HTML adalah langkah awal yang sangat penting dalam dunia pengembangan web. Dengan menguasai tag-tag dasar seperti heading, paragraf, gambar, tautan, dan daftar, mahasiswa Telkom University Jakarta dapat mulai membangun website sendiri dari nol.
HTML memang tampak sederhana, namun menjadi fondasi dari semua website modern. Jika dikuasai dengan baik, HTML akan membuka jalan untuk memahami CSS, JavaScript, dan pengembangan web yang lebih kompleks seperti React, Vue, hingga pemrograman backend.