Bagian 2: Menambahkan Konten Profil

Bagian sebelumnya menyiapkan kerangka yang masih menyisakan main kosong. Kini kita mengisinya dengan konten profil sebenarnya: perkenalan diri, daftar keahlian, dan informasi kontak. Setiap kelompok konten dibungkus section ber-id, sehingga strukturnya mudah dibaca browser, mesin pencari, maupun pembaca layar.

Memilih Elemen untuk Setiap Konten #

Pemilihan elemen mengikuti makna kontennya, bukan tampilannya:

Nilai atribut id pada setiap section ditulis dengan gaya kebab-case, misalnya tentang-saya. Penamaan yang konsisten membuat id mudah dikenali dan siap dipakai sebagai target tautan bila diperlukan.

Satu section idealnya memiliki satu heading sebagai pelabelnya; kebiasaan ini menuntun pembaca layar menyusun peta halaman. Heading pada profil memakai h2 karena h1 telah dipakai nama pemilik halaman di header. Dengan pola itu, hierarki heading halaman tetap lurus dari atas ke bawah.

Mengisi Main dengan Konten #

File berikut melengkapi profil.html dari Bagian 1 dengan tiga section berisi konten:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <section id="tentang-saya">
      <h2>Tentang Saya</h2>
      <p>Saya Budi, pengembang web pemula yang menekuni HTML dan CSS selama satu tahun terakhir. Sehari-hari saya membantu pengelola komunitas belajar memelihara situs informasi yang dibangun dengan HTML murni. Tujuan saya menjadi pengembang front-end yang mengutamakan halaman ringan dan mudah diakses siapa pun.</p>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Menyusun dokumen HTML yang valid</li>
        <li>Menata tampilan dengan CSS dasar</li>
        <li>Menambahkan interaksi sederhana dengan JavaScript</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Saya terbuka untuk kolaborasi proyek kecil. Cara menghubungi saya:</p>
      <address>
        Surel: <a href="mailto:[email protected]">[email protected]</a><br>
        Alamat: Jl. Melati No. 10, Bandung
      </address>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Di bawah header kini tampil tiga blok berurutan:
  - "Tentang Saya" memuat satu paragraf perkenalan
  - "Keahlian" memuat tiga butir berpenanda bulat
  - "Kontak" memuat tautan surel dan alamat rumah

Mari kita bedah bagian yang baru, yaitu isi main pada baris 17-38:

1. Baris 18-21: section#tentang-saya memadukan judul h2 dan satu paragraf perkenalan.
2. Baris 22-29: section#keahlian menyusun tiga keahlian di dalam ul; setiap butir menempati satu li.
3. Baris 30-37: section#kontak membuka dengan paragraf pengantar, lalu address membungkus tautan surel dan alamat rumah.
4. Baris 34: tautan mailto:[email protected] meminta aplikasi surel pengunjung membuka jendela pesan baru dengan alamat tujuan yang terisi.

Pemeriksaan Hasil Tahap Ini #

1. Buka profil-konten.html di browser dan pastikan tiga section tampil berurutan di bawah header.
2. Klik tautan surel pada bagian kontak; aplikasi surel di perangkat terbuka dengan alamat [email protected] .
3. Jalankan tests/cek-struktur.html, lalu centang butir-butir konten yang telah dipenuhi.

Tampilan halaman masih mengikuti gaya bawaan browser: teks hitam di atas putih tanpa pembagian warna. Bagian berikutnya menatanya dengan stylesheet milik proyek.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Structuring documents
• MDN Web Docs — section
• MDN Web Docs — address

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <section id="tentang-saya">
      <h2>Tentang Saya</h2>
      <p>Saya Budi, pengembang web pemula yang menekuni HTML dan CSS selama satu tahun terakhir. Sehari-hari saya membantu pengelola komunitas belajar memelihara situs informasi yang dibangun dengan HTML murni. Tujuan saya menjadi pengembang front-end yang mengutamakan halaman ringan dan mudah diakses siapa pun.</p>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Menyusun dokumen HTML yang valid</li>
        <li>Menata tampilan dengan CSS dasar</li>
        <li>Menambahkan interaksi sederhana dengan JavaScript</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Saya terbuka untuk kolaborasi proyek kecil. Cara menghubungi saya:</p>
      <address>
        Surel: <a href="mailto:[email protected]">[email protected]</a><br>
        Alamat: Jl. Melati No. 10, Bandung
      </address>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>