Struktur halaman web; tag HTML · HTML dan CSS

Apa itu HTML, bagaimana tag dan elemen bersarang, dan kerangka yang menjadi titik awal setiap halaman web.

Idenya

Setiap halaman web yang pernah kamu buka, di baliknya, adalah file teks biasa yang ditulis dalam HTML (HyperText Markup Language). HTML tidak membuat sesuatu jadi cantik, dan tidak membuatnya bergerak. Satu-satunya tugasnya adalah mendeskripsikan apa setiap bagian konten itu: ini heading, ini paragraf, ini link, ini list.

Browser membaca deskripsi itu dan menggambar halamannya. Nanti kamu akan menambahkan CSS untuk mengatur tampilannya, dan JavaScript untuk membuatnya interaktif. Cara yang bagus untuk mengingat pembagiannya:

Analogi

HTML adalah kerangka halaman, CSS adalah kulit dan pakaiannya, dan JavaScript adalah ototnya. Kamu tidak bisa mendandani tubuh yang tidak punya kerangka, jadi kita mulai dari sini.

Tag dan elemen

HTML menandai konten dengan tag. Tag adalah sebuah kata yang dibungkus kurung sudut. Sebagian besar datang berpasangan: tag pembuka dan tag penutup, yang memakai garis miring.

<h1>Toko Kita</h1>
<p>Fresh coffee beans, delivered across Indonesia.</p>

<h1> membuka heading tingkat teratas dan </h1> menutupnya.
<p> membuka paragraf dan </p> menutupnya.
Tag pembuka, konten, dan tag penutup bersama-sama membentuk sebuah elemen. "Elemen h1" berarti keseluruhannya.

Tekan Try it untuk melihat bagaimana browser menampilkannya. Heading-nya besar dan tebal, paragrafnya teks biasa, dan tidak satu pun gaya itu berasal darimu. Browser punya gaya default bawaan untuk setiap elemen, itulah sebabnya HTML saja sudah terlihat seperti dokumen (polos).

Heading punya enam tingkat

Ada enam elemen heading, <h1> sampai <h6>, dari yang paling penting sampai yang paling tidak penting. Mereka mendeskripsikan kerangka isi halamanmu, seperti judul bab dan subbab di sebuah laporan:

<h1>Toko Kita</h1>
<h2>Coffee</h2>
<h3>Arabica Gayo</h3>
<h3>Toraja Kalosi</h3>
<h2>Kitchen</h2>
<h3>French Press</h3>

Gunakan satu <h1> per halaman untuk judul utama, dan jangan melompati tingkat hanya untuk membuat teks lebih kecil. Pilih heading berdasarkan maknanya, lalu ubah ukurannya dengan CSS nanti. Screen reader dan mesin pencari memakai heading-mu untuk memahami halaman, jadi kerangka isi yang rapi itu penting.

Elemen bersarang di dalam satu sama lain

Elemen bisa berisi elemen lain. Ini disebut nesting (bersarang), dan begitulah setiap halaman dibangun:

<p>Our <strong>best seller</strong> is the <em>French Press</em>.</p>

Elemen <strong> (teks penting, biasanya tebal) dan elemen <em> (penekanan, biasanya miring) berada di dalam paragraf. Aturannya sederhana: tutup elemen dengan urutan kebalikan dari saat kamu membukanya, seperti menumpuk kotak. Buka p, buka strong, tutup strong, tutup p.

<!-- Wrong: the tags overlap -->
<p>Our <strong>best seller</p></strong>

Browser mencoba menebak maksudmu saat tag saling tumpang tindih, tetapi tiap browser menebak dengan cara berbeda, jadi selalu tutup dengan urutan yang benar.

Teks di antara  adalah komentar HTML. Browser mengabaikannya, sama seperti komentar # di Python.

Atribut menambahkan informasi tambahan

Tag pembuka bisa membawa atribut: pengaturan tambahan yang ditulis sebagai name="value".

<a href="https://www.python.org">Visit Python's website</a>
<img src="mug.jpg" alt="A white ceramic mug">

Elemen <a> (anchor) membuat link. Atribut href-nya menyatakan ke mana link itu menuju.
Elemen <img> menampilkan gambar. src adalah file gambarnya dan alt mendeskripsikan gambar untuk orang yang tidak bisa melihatnya.
<img> tidak punya tag penutup. Elemen yang tidak bisa berisi apa pun disebut void element. Contoh lain yang akan kamu temui adalah <br> (pindah baris) dan <input>.

Dua atribut berlaku untuk setiap elemen dan akan terus kamu pakai: id memberi satu elemen nama yang unik, dan class memberi sekelompok elemen label bersama. CSS dan JavaScript sama-sama memakainya untuk menemukan elemen.

<p id="welcome" class="intro">Selamat datang!</p>

Kerangka halaman

Dokumen HTML yang lengkap selalu punya struktur luar yang sama:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Toko Kita</title>
  </head>
  <body>
    <h1>Toko Kita</h1>
    <p>Fresh coffee beans, delivered across Indonesia.</p>
  </body>
</html>

Inilah fungsi setiap bagiannya:

Bagian	Fungsinya
`<!DOCTYPE html>`	Memberi tahu browser "ini HTML modern". Selalu di baris pertama.
`<html lang="en">`	Elemen akar yang membungkus semuanya. `lang` menyatakan bahasa halaman.
`<head>`	Informasi tentang halaman yang tidak ditampilkan di dalamnya: judul, character set, link ke file CSS.
`<meta charset="UTF-8">`	Membuat halaman bisa menampilkan karakter apa pun, dari é sampai 日本 sampai ₹.
`<title>`	Teks di tab browser dan di hasil pencarian.
`<body>`	Semua yang terlihat di halaman.

Indentasinya tidak wajib, karena browser mengabaikan spasi dan pindah baris tambahan. Indentasi itu ada untuk kamu: sekilas menunjukkan elemen mana berada di dalam elemen mana.

Awas

Browser meringkas whitespace. Menekan Enter lima kali di antara dua kata di HTML-mu tetap hanya menampilkan satu spasi di halaman. Untuk memulai paragraf baru, gunakan elemen <p> yang baru.

Mengapa ini penting untuk kode yang bersih

HTML yang mendeskripsikan makna ("ini heading", "ini penting") alih-alih tampilan ("ini besar dan tebal") disebut semantic HTML. Lebih mudah diberi gaya, lebih mudah dirawat, bekerja lebih baik untuk screen reader, dan peringkatnya lebih baik di mesin pencari. Memilih elemen yang tepat adalah versi HTML dari memilih nama variabel yang baik.

Rangkuman

HTML mendeskripsikan apa kontennya. CSS mengurus tampilan, JavaScript mengurus perilaku.
Sebuah elemen adalah tag pembuka, konten, dan tag penutup: <p>Hello</p>.
Elemen bersarang. Tutup dengan urutan kebalikan dari saat membukanya.
Atribut menambahkan pengaturan: href untuk link, src dan alt untuk gambar, id dan class untuk penamaan.
Setiap halaman punya kerangka yang sama: <!DOCTYPE html>, <html>, <head> dan <body>.
Gunakan satu <h1>, dan pilih heading berdasarkan tingkat kepentingan, bukan ukuran.