Struktur Dasar HTML Wajib Ada

Struktur Dasar HTML Wajib Ada

Daftar Isi

Jika Anda baru memulai belajar HTML, memahami struktur dasar dokumen HTML sangat penting. HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Setiap halaman web yang Anda lihat di internet pada dasarnya dimulai dengan struktur HTML yang serupa.

Dalam artikel ini, saya akan membimbing Anda melalui stuktur dasar HTML yang bisa langsung digunakan. Kita akan mempelajari elemen-elemen utama yang diperlukan untuk membuat halaman web yang valid dan fungsional.

Apa Itu Struktur HTML?

Stuktur HTML adalah kerangka dasar yang berisi elemen-elemen penting untuk membuat halaman web. Dengan struktur ini, Anda bisa mulai membangun website sederhana atau menambahkan elemen lain seperti CSS untuk desain dan JavaScript untuk interaktivitas.

Berikut adalah struktur dasar dari dokumen HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Halaman Saya</h1>
    <p>Ini adalah paragraf pertama saya di halaman web.</p>
</body>
</html>

Penjelasan Struktur HTML

Mari kita bahas bagian-bagian dari struktur HTML di atas.

1. <!DOCTYPE html>

Deklarasi ini memberi tahu browser bahwa dokumen ini menggunakan versi HTML5, yang merupakan standar terbaru untuk HTML. Selalu letakkan ini di bagian paling atas dokumen.

2. <html lang="en">

Tag <html> adalah elemen pembungkus untuk semua konten di halaman Anda. Atribut lang=“en” menunjukkan bahwa bahasa halaman ini adalah bahasa Inggris. Anda bisa mengubahnya sesuai dengan bahasa yang digunakan, misalnya lang=“id” untuk Bahasa Indonesia.

3. <head>

Bagian ini berisi informasi metadata tentang halaman Anda. Metadata tidak terlihat di halaman web tetapi sangat penting bagi browser dan mesin pencari.

Elemen penting di dalam <head>:

  • <meta charset="UTF-8">: Menentukan karakter encoding untuk halaman, memastikan semua karakter ditampilkan dengan benar, termasuk simbol dan karakter khusus.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Membuat halaman responsif, sehingga bisa tampil dengan baik di berbagai perangkat, seperti komputer dan ponsel.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Memastikan halaman web menggunakan mode rendering terbaru di Internet Explorer.
  • <title>: Menentukan judul halaman web, yang akan muncul di tab browser. Misalnya, “Judul Halaman”.

3. <body>

Semua konten yang ingin Anda tampilkan di halaman web akan ditempatkan di dalam tag <body>. Misalnya, judul, paragraf, gambar, dan tautan.

Elemen dalam <body>: <h1>: Tag ini digunakan untuk menampilkan heading atau judul utama di halaman. Pada contoh ini, “Selamat Datang di Halaman Saya” adalah judul halaman. <p>: Tag ini digunakan untuk menampilkan paragraf teks. Pada contoh di atas, paragraf pertama Anda berbunyi “Ini adalah paragraf pertama saya di halaman web.”

Contoh Template yang Langsung Digunakan Anda bisa langsung menyalin kode di atas dan mencobanya di komputer Anda.

  1. Buka teks editor seperti Notepad (di Windows) atau TextEdit (di macOS).
  2. Salin kode di atas dan simpan dengan ekstensi .html, misalnya index.html.
  3. Buka file tersebut di browser Anda (cukup klik dua kali file .html tadi), dan Anda akan melihat halaman web sederhana dengan judul dan paragraf.

Kesimpulan

Struktur dasar HTML ini memberikan Anda kerangka awal untuk membuat halaman web. Anda bisa menambahkan elemen-elemen lain seperti gambar, tautan, dan tabel seiring kemajuan Anda dalam belajar HTML. Selalu ingat untuk memastikan struktur HTML Anda bersih dan valid.

Semoga panduan ini membantu Anda memulai perjalanan Anda dalam dunia pengembangan web!

Tag: