Bagian terakhir mengisi dua blok penutup: section Kontak tempat pembaca menghubungi Dewi, dan footer pemilik halaman. Meski letaknya di ujung bawah, keduanya bukan pelengkap saja — section Kontak memperkenalkan elemen address yang berfungsi khusus, sementara tautan eksternal di dalamnya menghadirkan dua atribut keamanan yang wajib dibiasakan sejak proyek pertama.

Section Kontak dengan address #

Potongan berikut sama persis dengan baris 53–65 pada berkas index.html:

html 
    <!-- Bagian: kontak -->
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Undangan menulis, kerja sama editing, dan surat pembaca dapat dikirim melalui
      jalur berikut:</p>
      <address>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
        <ul>
          <li><a href="https://example.com/dewi" target="_blank" rel="noopener">Situs pribadi</a></li>
          <li><a href="https://example.org/dewilestari" target="_blank" rel="noopener">Profil media sosial</a></li>
        </ul>
      </address>
    </section>

Mari kita bedah fungsinya:

  1. <section id="kontak"> dan <h2>: blok tematik ketiga di dalam main — judulnya setingkat h2 seperti section lain, sehingga kerangka halaman tetap seimbang.
  2. <p> pengantar: kalimat pembuka yang menjelaskan maksud bagian. Teks pengantar tetap paragraf biasa, bukan bagian daftar.
  3. <address>: elemen khusus informasi kontak — di sini kontak untuk seluruh dokumen karena address ini berada di bawah body tanpa article pembatas. Browser dan mesin pencari mengenalinya sebagai alat menghubungi pemilik halaman, bukan sekadar blok teks.
  4. <a href="mailto:[email protected]">: tautan email. Nilai mailto: membuka aplikasi email pengunjung dengan alamat tujuan sudah terisi — bentuk paling sederhana dari tautan email yang kita bahas pada chapter Link Email dan Telepon.
  5. <ul> dua tautan: jalur kontak tambahan di luar email, ditulis sebagai daftar karena sederajat dan bebas urutan.

Tautan Eksternal yang Terbuka di Tab Baru #

Dua tautan pada daftar di atas sama persis dengan baris 61–62 pada berkas index.html:

html 
          <li><a href="https://example.com/dewi" target="_blank" rel="noopener">Situs pribadi</a></li>
          <li><a href="https://example.org/dewilestari" target="_blank" rel="noopener">Profil media sosial</a></li>

Perhatikan dua atribut pendampingnya:

  1. target="_blank": memerintahkan browser membuka tujuan di tab baru. Halaman profil tetap terbuka, sehingga pengunjung yang menelusuri situs pribadi Dewi tidak kehilangan halaman yang sedang dibaca.
  2. rel="noopener": memutus akses halaman baru ke halaman pembuka lewat objek window.opener. Browser modern sudah menyiratkan perlindungan ini untuk setiap target="_blank", tetapi menuliskannya eksplisit tetap dianjurkan — kode jelas maksudnya dan browser lama ikut terlindungi.

Alamat https://example.com/dewi dan https://example.org/dewilestari adalah alamat fiktif pengganti. Saat membangun profil kita sendiri, ganti keduanya dengan alamat sesungguhnya — atributnya tetap sama.

Penutup halaman menempatkan pemilik dan tahun. Potongan berikut sama persis dengan baris 69–72 pada berkas index.html:

html 
  <!-- Bagian: footer -->
  <footer>
    <p>&copy; <time datetime="2026">2026</time> Dewi Lestari. Seluruh hak cipta terpelihara.</p>
  </footer>
  1. <footer>: penutup dokumen — identitas pemilik, bukan konten utama. Berpasangan dengan header yang membuka halaman.
  2. &copy;: character entity untuk tanda hak cipta (©). Entity dipakai untuk karakter yang tidak ada di papan ketik atau rawan tertukar.
  3. <time datetime="2026">2026</time>: tahun halaman terakhir diperbarui, tetap terbungkus time agar terbaca sebagai data.

Hasil Akhir Proyek #

Muat ulang index.html. Halaman profil kini lengkap dari atas ke bawah: nama dan tagline, biografi dengan foto, dua daftar publikasi, kontak dengan email dan tautan, serta baris hak cipta. Klik alamat email — aplikasi email terbuka; klik salah satu tautan — tab baru terbuka sementara halaman profil tetap ada.

Inilah hasil akhir proyek — coba klik kedua tautan eksternal pada bagian Kontak, keduanya terbuka di tab baru:

Pada demo, berkas assets/foto.svg diganti placeholder SVG dan tautan mailto: biasanya ditahan browser di dalam iframe — unduh berkasnya untuk mencoba tautan email sungguhan.

Proyek selesai: satu berkas, tujuh puluh lima baris, tanpa satu pun elemen yang dipilih karena tampilannya. Langkah berikutnya terserah kebutuhan — mengganti seluruh data fiktif dengan data kita sendiri, menambah favicon, atau menyambungkan berkas CSS pertama.

Ringkasan Bagian 4 #

Section Kontak memakai address sebagai wadah informasi kontak dokumen berisi tautan mailto: dan daftar tautan eksternal, footer menutup halaman dengan hak cipta ber-time, dan setiap target="_blank" selalu ditemani rel="noopener". Halaman profil penulis kini utuh dan valid.