Dalam menulis dokumen HTML kita harus mengikuti standar yang sudah ditetapkan oleh W3C (World Wide Web Consortium) agar halaman web yang kita buat dapat ditampilkan di aplikasi web browser sesuai dengan harapan kita. Untuk itulah kita harus mengetahui bagaimana struktur dasar HTML yang sesuai standar.
Dokumen HTML (Hypertext Markup Language) memiliki struktur dasar yang terdiri dari beberapa elemen penting. Berikut adalah struktur dasar dokumen HTML:
HTML5
<!DOCTYPE html>
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
<!-- Konten dokumen -->
<h1>Hello World!</h1>
</body>
</html>
Berikut adalah penjelasan untuk setiap bagian dari struktur dasar dokumen HTML:
- <!DOCTYPE html>: Ini adalah deklarasi tipe dokumen (document type declaration) yang mengindikasikan bahwa dokumen ini adalah dokumen HTML versi terbaru.
- <html>: Ini adalah elemen utama yang melingkupi seluruh konten dokumen HTML. Semua elemen lainnya harus berada di dalam elemen ini.
- <head>: Ini adalah elemen yang berisi informasi meta tentang dokumen, seperti judul halaman, tautan ke stylesheet eksternal, dan metadata lainnya. Biasanya, elemen ini tidak ditampilkan pada halaman web secara langsung.
- <title>: Ini adalah elemen yang digunakan untuk menentukan judul dokumen yang akan ditampilkan di bilah judul (title bar) atau tab browser.
- <body>: Ini adalah elemen yang berisi seluruh konten yang akan ditampilkan pada halaman web. Semua teks, gambar, tautan, dan elemen visual lainnya harus ditempatkan di dalam elemen ini.
Anda dapat menambahkan elemen-elemen lainnya di dalam elemen <body> untuk membangun struktur dan konten halaman web Anda, seperti paragraf <p>, judul <h1> sampai <h6>, tautan <a>, gambar <img>, dan lain-lain.
Penting untuk memperhatikan bahwa struktur dasar dokumen HTML di atas hanya memberikan kerangka kerja awal. Anda dapat menambahkan elemen-elemen tambahan dan mengatur tata letak sesuai kebutuhan proyek Anda.
Cara Membuat file HTML
Untuk membuat file HTML kita bisa menggunakan HTML aplikasi teks editor yang telah kita pilih. Disini kita akan menggunakan Notepad++. Caranya adalah:
- Buka aplikasi HTML teks editor Notepad++.
- Buat file baru dengan cara klik File > new file.
- Tulis atau copy/paste kode HTML contoh di atas ke dalam teks editor.
- Simpan kode HTML dengan cara klik file > save as.
- Pilih lokasi tempat menyimpan file tersebut, misalkan folder documents.
- Isikan filename sesuai keinginan Anda dengan ekstensi atau akhiran .html misalkan index.html lalu klik save.
- Selanjutnya buka file dengan nama index.html menggunakan web browser Google Chrome atau Firefox dan lihat hasilnya
- Selamat Anda berhasil membuat dokumen HTML