Alfareza.
Back to Blog

HTML

HTMLWeb DevelopmentRPL

HTML5: Lebih dari Sekadar Bahasa Markup

Banyak orang menganggap HTML adalah hal yang sepele. Namun, bagi seorang siswa Rekayasa Perangkat Lunak (RPL), HTML adalah fondasi tempat semua teknologi web modern berpijak. Tanpa pemahaman HTML yang kuat, CSS dan JavaScript yang kita tulis tidak akan memiliki struktur yang efisien.

1. Semantik HTML5: Mengapa Ini Penting?

Dulu, kita sering menggunakan <div> untuk semua bagian web. Sekarang, HTML5 memperkenalkan elemen semantik yang membantu Search Engine (SEO) dan Screen Readers memahami isi konten kita.

Struktur Semantik Standar:

  • <header>: Area navigasi dan logo.
  • <main>: Konten utama yang unik di setiap halaman.
  • <section>: Bagian konten yang memiliki tema tertentu.
  • <article>: Konten mandiri (seperti postingan blog ini).
  • <aside>: Konten pendukung atau sidebar.
  • <footer>: Informasi hak cipta dan link tambahan.

2. Tabel Perbandingan: Elemen Block vs Inline

Sebagai developer, kamu harus tahu perbedaan bagaimana elemen ditampilkan di layar.

| Elemen | Tipe | Perilaku (Behavior) | Contoh Tag | | :

| :

| :

| :

| | Block | Full Width | Selalu mulai di baris baru | <div>, <h1>, <p>, <ul> | | Inline | Content Width | Mengikuti aliran teks | <span>, <a>, <strong>, <img> |

3. Best Practices: Clean Code & SEO

Berikut adalah beberapa tips untuk memastikan kode HTML kamu berstandar industri:

  1. Gunakan Atribut Alt pada Gambar: Membantu aksesibilitas dan SEO. 
    <img src="/img/proyek-pdam.jpg" alt="Dashboard Aplikasi PDAM Telkom">
  2. Struktur Heading yang Logis: Jangan gunakan <h3> hanya karena ingin ukuran teks kecil; gunakan CSS untuk itu. Gunakan <h1> hanya satu kali per halaman.
  3. Meta Tags: Jangan lupa menambahkan meta description agar tampilan di Google terlihat profesional.

4. Integrasi dengan Next.js & Tailwind CSS

Dalam project portofolio saya ini, saya menggunakan Next.js. Menariknya, Next.js memiliki komponen khusus seperti <Image /> dan <Link /> yang sebenarnya adalah "pembungkus" dari tag HTML standar (<img> dan <a>) namun dengan optimasi otomatis.

// Contoh penggunaan Link di Next.js
import Link from 'next/link';

export default function Nav() {
  return (
    <Link href="/portfolio" className="text-purple-500 hover:underline">
      Lihat Karya Saya
    </Link>
  );
}

5. Kesimpulan: Langkah Awal Menuju Profesionalisme

Memahami HTML5 bukan hanya tentang menghafal ratusan tag yang tersedia. Sebagai siswa RPL, tantangan sebenarnya adalah bagaimana kita menggunakan fondasi ini untuk membangun produk yang inklusif, cepat, dan mudah ditemukan oleh mesin pencari.

HTML adalah titik nol. Dari sini, kita belajar tentang disiplin struktur, yang nantinya akan sangat membantu saat kita mulai bermain dengan logika di JavaScript atau manajemen database di Supabase.

"Coding bukan hanya soal membuat mesin mengerti, tapi soal membuat manusia lain (dan bot) memahami struktur pemikiran kita melalui kode."

Apa Rencana Kamu Selanjutnya?

Setelah menguasai struktur dasar ini, saya pribadi sedang berfokus untuk mengintegrasikan elemen-elemen HTML ini ke dalam komponen yang lebih reaktif menggunakan Next.js dan mempercantik visualnya dengan Tailwind CSS.

Jika kamu tertarik melihat bagaimana struktur HTML ini diimplementasikan dalam proyek nyata, jangan ragu untuk menjelajahi halaman Portofolio saya atau hubungi saya langsung melalui halaman Contact.

Teruslah belajar, teruslah membangun!

HTML | Alfareza