Pertemuan 2: HTML Lanjut dan Struktur Semantik

20 Sep 2026kribbiadminWeb Programming

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu menggunakan tag HTML tingkat lanjut, menyusun teks, daftar, tabel, formulir, dan menerapkan struktur semantik pada halaman.

HTML Lanjut dan Struktur Semantik

HTML semantik adalah penggunaan tag yang menjelaskan makna isinya, bukan hanya tampilannya. Tag seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer> membantu mesin pencari dan pembaca layar memahami kerangka halaman. Struktur ini juga membuat kode lebih mudah dirawat.

Kerangka halaman semantik biasanya terdiri dari header di atas, navigasi di dalamnya, main untuk konten utama, section atau article untuk membagi isi, dan footer di bagian bawah. Layout ini menjadi fondasi untuk seluruh materi ke depan.

<code class="language-html"><header><h1>Blog Saya</h1></header>
<nav><a href="index.html">Beranda</a> | <a href="kontak.html">Kontak</a></nav>
<main>
  <article><h2>Judul Artikel</h2><p>Isi artikel.</p></article>
</main>
<footer><p>&copy; 2026 Blog Saya</p></footer></code>

Format Teks dan Daftar

Tag format teks digunakan untuk memberi penekanan, seperti <strong> untuk teks tebal penting dan <em> untuk miring. Ada juga tag khusus seperti <blockquote> untuk kutipan panjang dan <code> untuk menampilkan kode. Daftar terbagi menjadi daftar tak berurutan <ul> dengan <li>, daftar berurutan <ol>, dan daftar definisi <dl>.

<code class="language-html"><ul>
  <li>HTML</li>
  <li>CSS</li>
<li>Setelah mengikuti pertemuan ini, mahasiswa mampu menggunakan tag HTML tingkat lanjut, menyusun teks, daftar, tabel, formulir, dan menerapkan struktur semantik pada halaman.</li>
</ul>
<ol>
  <li>Buka editor</li>
  <li>Tulis kode</li>
  <li>Simpan file</li>
</ol></code>

Tabel

Tabel digunakan untuk menampilkan data dalam baris dan kolom. Strukturnya terdiri dari <table>, baris <tr>, sel data <td>, dan sel judul <th>. Atribut colspan menggabungkan kolom dan rowspan menggabungkan baris untuk membuat tabel yang lebih kompleks.

<code class="language-html"><table border="1">
  <tr><th>Nama</th><th>Nilai</th></tr>
  <tr><td>Budi</td><td>85</td></tr>
  <tr><td>Siti</td><td>92</td></tr>
</table></code>

Formulir

Formulir digunakan untuk mengumpulkan input dari pengguna. Elemen kuncinya adalah <form>, <input>, <label>, <select>, <textarea>, dan tombol submit. Atribut type pada input menentukan bentuk kontrol, misalnya text, email, dan password. Atribut name penting karena menjadi kunci data saat formulir diproses.

<code class="language-html"><form action="proses.html" method="post">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  <br>
  <label for="kota">Kota:</label>
  <select id="kota" name="kota">
    <option>Palembang</option>
    <option>Jakarta</option>
  </select>
  <br>
  <button type="submit">Kirim</button>
</form></code>

Langkah Praktik

Buat satu dokumen HTML baru dengan struktur semantik lengkap: header, nav, main dengan section dan article, serta footer. Di dalam article, tambahkan satu daftar dan satu tabel sederhana. Di bagian lain, tambahkan formulir dengan minimal tiga kontrol input.

Simpan file sebagai profil.html dan buka di browser untuk memastikan setiap elemen tampil dengan benar. Gunakan opsi View Source di browser untuk melihat bagaimana HTML diterjemahkan.

Konsep Kunci

HTML semantik adalah penggunaan tag yang menjelaskan makna isinya, bukan hanya tampilannya.
Tag seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer> membantu mesin pencari dan pembaca layar memahami kerangka halaman.
Struktur ini juga membuat kode lebih mudah dirawat.
Kerangka halaman semantik biasanya terdiri dari header di atas, navigasi di dalamnya, main untuk konten utama, section atau article untuk membagi isi, dan footer di bagian bawah.
Layout ini menjadi fondasi untuk seluruh materi ke depan.
Tag format teks digunakan untuk memberi penekanan, seperti <strong> untuk teks tebal penting dan <em> untuk miring.
Ada juga tag khusus seperti <blockquote> untuk kutipan panjang dan <code> untuk menampilkan kode.
Daftar terbagi menjadi daftar tak berurutan <ul> dengan <li>, daftar berurutan <ol>, dan daftar definisi <dl>.
Tabel digunakan untuk menampilkan data dalam baris dan kolom.
Strukturnya terdiri dari <table>, baris <tr>, sel data <td>, dan sel judul <th>.
Atribut colspan menggabungkan kolom dan rowspan menggabungkan baris untuk membuat tabel yang lebih kompleks.
Formulir digunakan untuk mengumpulkan input dari pengguna.
Elemen kuncinya adalah <form>, <input>, <label>, <select>, <textarea>, dan tombol submit.
Atribut type pada input menentukan bentuk kontrol, misalnya text, email, dan password.
Atribut name penting karena menjadi kunci data saat formulir diproses.
Buat satu dokumen HTML baru dengan struktur semantik lengkap: header, nav, main dengan section dan article, serta footer.
Di dalam article, tambahkan satu daftar dan satu tabel sederhana.
Di bagian lain, tambahkan formulir dengan minimal tiga kontrol input.
html dan buka di browser untuk memastikan setiap elemen tampil dengan benar.
Gunakan opsi View Source di browser untuk melihat bagaimana HTML diterjemahkan.
Bangun kerangka halaman utama sebuah sekolah sederhana yang memuat navigasi, artikel berita, tabel jadwal pelajaran, dan formulir kontak.

Contoh Kode

<code class="language-html"><header><h1>Site Name</h1></header>
<nav><a href="index.html">Home</a></nav>
<main><article><p>Article text.</p></article></main>
<footer><p>Copyright 2026</p></footer></code>

<code class="language-html"><table>
  <tr><th>Day</th><th>Course</th></tr>
  <tr><td>Monday</td><td>HTML</td></tr>
  <tr><td>Wednesday</td><td>CSS</td></tr>
</table></code>

Latihan

Bangun kerangka halaman utama sebuah sekolah sederhana yang memuat navigasi, artikel berita, tabel jadwal pelajaran, dan formulir kontak. Terapkan struktur semantik dan pastikan setiap formulir memiliki label yang jelas.