Perkembangan teknologi informasi mendorong pemanfaatan website sebagai media penyampaian informasi, komunikasi, dan pengelolaan layanan digital. Website tidak lagi terbatas pada penyajian halaman statis, tetapi juga mendukung berbagai aktivitas yang melibatkan pengolahan data dan interaksi pengguna. Dalam pengembangannya, pemahaman terhadap teknologi dasar menjadi penting agar sistem yang dibangun memiliki struktur yang jelas, tampilan yang sesuai, serta fungsi yang dapat memenuhi kebutuhan pengguna.
Tiga teknologi yang sering digunakan dalam pengembangan website adalah HyperText Markup Language (HTML), Cascading Style Sheets (CSS), dan PHP. Ketiganya memiliki karakteristik dan tanggung jawab yang berbeda dalam arsitektur aplikasi web. HTML berperan dalam pembentukan struktur dokumen, CSS mengatur presentasi visual, sedangkan PHP mendukung pemrosesan aplikasi pada sisi server.
Menurut WHATWG (2026), HTML merupakan standar yang mengatur struktur dan semantik dokumen web. Sementara itu, W3C (2022) menjelaskan bahwa CSS menyediakan mekanisme untuk menentukan tampilan dokumen terstruktur melalui aturan gaya. Pada sisi server, PHP dapat digunakan untuk menjalankan logika aplikasi, memproses data, dan menghasilkan konten yang dikirimkan kepada pengguna (MDN, n.d.-c).
Pemahaman mengenai pengertian, fungsi, dan hubungan ketiga teknologi tersebut menjadi dasar penting bagi mahasiswa, pengembang pemula, dan praktisi teknologi informasi yang mempelajari pengembangan website.
HTML merupakan singkatan dari HyperText Markup Language, yaitu bahasa markah yang digunakan untuk menyusun struktur dan memberikan makna terhadap konten pada halaman web. HTML memungkinkan pengembang mengorganisasi berbagai elemen, seperti judul, paragraf, gambar, tabel, daftar, dan tautan, sehingga browser dapat mengenali struktur informasi yang ditampilkan.
Menurut WHATWG (2026), HTML menjadi bagian utama dari standar teknologi web yang mengatur struktur dokumen, elemen, serta berbagai mekanisme interaksi dengan browser. Definisi ini menunjukkan bahwa HTML tidak hanya berfungsi menampilkan teks, tetapi juga menyediakan struktur semantik yang membantu browser dan teknologi pendukung memahami hubungan antarkonten.
MDN (n.d.-a) menjelaskan bahwa HTML menggunakan elemen yang umumnya terdiri atas tag pembuka, konten, dan tag penutup. Elemen tersebut dapat memiliki atribut yang memberikan informasi tambahan mengenai karakteristik atau perilaku suatu komponen.
Secara konseptual, HTML bukan bahasa pemrograman karena tidak menyediakan mekanisme pemrograman umum seperti pengambilan keputusan dan perulangan. HTML termasuk bahasa markah yang berfungsi mendeskripsikan struktur dokumen.
1.1 Fungsi HTML dalam pengembangan website
HTML memiliki sejumlah fungsi utama dalam pembangunan halaman web, yaitu:
1. Membentuk struktur halaman. HTML mengorganisasi bagian dokumen, seperti header, navigasi, konten utama, dan footer.
2. Menyajikan konten informasi. HTML mendefinisikan teks, gambar, tabel, daftar, video, dan tautan.
3. Membangun formulir. HTML menyediakan elemen input untuk menerima data pengguna.
4. Mendukung aksesibilitas. Penggunaan elemen semantik membantu teknologi asistif memahami struktur dan fungsi konten.
5. Mendukung optimasi mesin pencari. Struktur heading, judul dokumen, dan elemen semantik membantu mesin pencari menginterpretasikan isi halaman.
Fungsi tersebut menunjukkan bahwa HTML menjadi fondasi penyusunan konten website, baik untuk halaman informasi sederhana maupun aplikasi web yang lebih kompleks.
1.2 Contoh penggunaan HTML
Berikut contoh struktur HTML sederhana.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Pengertian HTML</h1>
<p>HTML digunakan untuk menyusun
struktur halaman website.</p>
</body>
</html>
Kode tersebut menunjukkan penggunaan elemen dasar HTML. Deklarasi <!DOCTYPE html> mengidentifikasi dokumen sebagai HTML modern. Elemen <head> memuat metadata, sedangkan <body> memuat konten halaman. Tag <h1> digunakan sebagai judul utama dan <p> sebagai paragraf.
Dengan demikian, HTML dapat dipahami sebagai teknologi yang mengatur organisasi dan makna konten agar dapat ditampilkan secara sistematis melalui browser.
Pengertian CSS (Cascading Style Sheets)
CSS merupakan singkatan dari Cascading Style Sheets, yaitu bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak elemen pada halaman web. CSS memungkinkan pengembang menentukan warna, jenis huruf, ukuran teks, jarak antarunsur, latar belakang, posisi elemen, serta pengaturan layout yang menyesuaikan ukuran layar.
Menurut MDN (n.d.-b), CSS merupakan teknologi yang berfungsi mengatur penyajian visual elemen HTML melalui aturan yang terdiri atas selector, property, dan value. Dengan mekanisme tersebut, pengembang dapat memisahkan struktur konten dari pengaturan tampilannya.
W3C (2022) menjelaskan bahwa CSS menggunakan prinsip cascading dan inheritance untuk menentukan nilai properti yang diterapkan pada elemen dokumen. Cascading mengatur prioritas ketika beberapa deklarasi gaya berlaku pada elemen yang sama, sedangkan inheritance memungkinkan properti tertentu diwariskan dari elemen induk kepada elemen turunannya.
Pemisahan HTML dan CSS memberikan manfaat dalam pengelolaan kode karena perubahan desain dapat dilakukan tanpa harus mengubah struktur utama dokumen.
2.1 Fungsi CSS dalam pengembangan website
CSS memiliki beberapa fungsi utama, yaitu:
1. Mengatur tampilan visual. CSS menentukan warna, jenis huruf, ukuran teks, dan elemen dekoratif.
2. Mengelola tata letak. CSS mengatur posisi dan susunan komponen menggunakan teknik seperti Flexbox dan Grid.
3. Mendukung desain responsif. CSS memungkinkan penyesuaian tampilan terhadap berbagai ukuran layar melalui media queries dan teknik layout fleksibel.
4. Menjaga konsistensi desain. Satu stylesheet dapat digunakan oleh beberapa halaman untuk menghasilkan tampilan yang seragam.
5. Meningkatkan kemudahan pemeliharaan. Pemisahan aturan visual dari struktur HTML mempermudah pembaruan desain.
2.2 Contoh penggunaan CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
color: #222222;
}
h1 {
color: #1769aa;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
Pada contoh tersebut, CSS mengatur jenis huruf, warna latar belakang, warna teks, dan posisi judul. Aturan body berlaku pada elemen utama dokumen, sedangkan aturan h1 dan p menentukan tampilan masing-masing elemen.
CSS dapat ditempatkan secara inline, internal, atau eksternal. Penggunaan stylesheet eksternal umumnya lebih sesuai untuk website yang memiliki banyak halaman karena mendukung penggunaan ulang kode dan konsistensi desain (MDN, n.d.-b).
Dengan demikian, CSS berfungsi sebagai teknologi pengendali presentasi visual yang membantu pengembang membangun antarmuka website secara terstruktur dan mudah dipelihara.