HTML - Element Layout: Membina Struktur Halaman Web Anda

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menarik dari elemen layout HTML. Pada akhir tutorial ini, Anda akan dapat menyusun halaman web seperti seorang ahli, menciptakan layout yang indah dan terorganisir yang akan membuat konten Anda bersinar. Jadi, mari kita lipat lengan dan mulai!

HTML - Layout Elements

Representasi Visual dari Struktur Layout

Sebelum kita masuk ke dalam kode, mari kitaambil sedikit waktu untuk mengimaginasikan apa yang kita inginkan. Bayangkan halaman web Anda seperti surat kabar. Seperti surat kabar yang memiliki berbagai bagian - judul utama, artikel, sidebar, dan footer - halaman web Anda juga dapat dibagi menjadi bagian yang mirip. Bagian-bagian ini membantu mengatur konten Anda dan membuat pengunjung mudah untuk menavigasi situs Anda.

Ini adalah representasi visual sederhana dari layout halaman web umum:

+------------------+
|      Header      |
+------------------+
|       Nav        |
+------------------+
|  |              |
|  |   Section    |
|A |              |
|s +-------------+|
|i |   Article   ||
|d |             ||
|e +-------------+|
|  |              |
+------------------+
|      Footer      |
+------------------+

Sekarang kita memiliki gambaran visual, mari kita jelajahi setiap elemen ini secara detil.

Elemen Header dalam Layout HTML

Elemen <header> mirip dengan tajuk utama surat kabar. Biasanya itu mengandung konten pengantar untuk halaman, seperti logo, judul situs, atau menu navigasi.

Ini adalah contoh:

<header>
<h1>Selamat Datang di Situs Web Saya yang Menakjubkan</h1>
<img src="logo.png" alt="Logo Saya">
</header>

Dalam contoh ini, kita telah menambahkan judul utama dan gambar logo di header. Ini akan muncul di bagian atas halaman web kita, memberikan pengunjung kesan awal tentang apa yang tentang situs ini.

Elemen Nav dalam Layout HTML

Elemen <nav> adalah peta panduan situs web Anda. Itu mengandung tautan navigasi utama untuk situs Anda.

mari kita tambahkan menu navigasi ke halaman kita:

<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>

Kode ini menciptakan daftar sederhana dari tautan yang pengunjung dapat gunakan untuk menavigasi situs Anda. Itu seperti daftar isi di dalam buku, membantu pengguna menemukan tepat apa yang mereka cari.

Elemen Section dalam Layout HTML

Elemen <section> adalah wadah multifungsi untuk konten tematik. Pensejukkan halaman dalam buku, mengelompokkan konten yang berkaitan bersama-sama.

Ini adalah contoh:

<section id="about">
<h2>Tentang Kami</h2>
<p>Kami adalah tim pengembang web yang bersemangat, berkomitmen untuk menciptakan situs web yang menakjubkan.</p>
</section>

Bagian ini menyediakan informasi tentang perusahaan atau individu di belakang situs web. Anda dapat memiliki beberapa bagian di halaman, masing-masing fokus pada topik atau tema yang berbeda.

Elemen Article dalam Layout HTML

Elemen <article> cocok untuk konten self-contained yang dapat berdiri sendiri, seperti artikel berita atau postingan blog.

mari kita tambahkan artikel ke halaman kita:

<article>
<h2>Peran Penting dari HTML Semantik</h2>
<p> Menggunakan elemen HTML semantik seperti article, section, dan nav membantu mesin pencari mengerti konten Anda lebih baik, meningkatkan SEO situs Anda.</p>
<p>Itu juga membuat kode Anda lebih mudah dibaca dan maintainable.</p>
</article>

Artikel ini bisa menjadi bagian dari bagian blog atau berita di situs Anda. Itu memiliki judulnya sendiri dan paragraf, membentuk piece konten independen.

Elemen Aside dalam Layout HTML

Elemen <aside> untuk konten yang berkaitan secara silang dengan konten utama. Itu seperti sidebar di majalah, menyediakan informasi tambahan atau tautan.

Ini adalah contoh:

<aside>
<h3>Fakta cepat</h3>
<ul>
<li>HTML adalah singkatan dari HyperText Markup Language</li>
<li>HTML5 adalah versi terbaru</li>
<li>Ini bekerja bersama CSS untuk pemformatan</li>
</ul>
</aside>

Aside ini menyediakan beberapa fakta cepat tentang HTML, menambahkan informasi tambahan terkait konten utama halaman tanpa menjadi bagian inti dari itu.

Elemen Footer dalam Layout HTML

Elemen <footer> biasanya mengandung informasi tentang penulis, pernyataan hak cipta, atau tautan ke dokumen terkait. Itu seperti catatan kecil di bagian bawah dokumen.

mari kita tambahkan footer ke halaman kita:

<footer>
<p>&copy; 2023 Situs Web Saya yang Menakjubkan. Hak cipta dilindungi.</p>
<nav>
<a href="#privacy">Kebijakan Privasi</a> |
<a href="#terms">Syarat Layanan</a>
</nav>
</footer>

Footer ini mencakup pernyataan hak cipta dan beberapa tautan navigasi tambahan. Itu adalah tempat yang bagus untuk menempatkan informasi yang Anda ingin dapat diakses dari setiap halaman di situs Anda.

Membuat Layout HTML - Menggunakan Elemen Layout

Sekarang kita telah mengexploreasi setiap elemen secara individual, mari kita gabungkan semuanya untuk menciptakan layout HTML lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Situs Web Saya yang Menakjubkan</title>
</head>
<body>
<header>
<h1>Selamat Datang di Situs Web Saya yang Menakjubkan</h1>
<img src="logo.png" alt="Logo Saya">
</header>

<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>

<main>
<section id="about">
<h2>Tentang Kami</h2>
<p>Kami adalah tim pengembang web yang bersemangat, berkomitmen untuk menciptakan situs web yang menakjubkan.</p>
</section>

<article>
<h2>Peran Penting dari HTML Semantik</h2>
<p> Menggunakan elemen HTML semantik seperti article, section, dan nav membantu mesin pencari mengerti konten Anda lebih baik, meningkatkan SEO situs Anda.</p>
<p>Itu juga membuat kode Anda lebih mudah dibaca dan maintainable.</p>
</article>

<aside>
<h3>Fakta cepat</h3>
<ul>
<li>HTML adalah singkatan dari HyperText Markup Language</li>
<li>HTML5 adalah versi terbaru</li>
<li>Ini bekerja bersama CSS untuk pemformatan</li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2023 Situs Web Saya yang Menakjubkan. Hak cipta dilindungi.</p>
<nav>
<a href="#privacy">Kebijakan Privasi</a> |
<a href="#terms">Syarat Layanan</a>
</nav>
</footer>
</body>
</html>

Dan itu adalah! Layout HTML lengkap menggunakan elemen semantik. Struktur ini menyediakan dasar yang kuat untuk halaman web Anda, membuatnya mudah untuk diformat dengan CSS dan dinavigasi baik bagi pengguna maupun mesin pencari.

Ingat, latihan membuat sempurna. Cobalah menciptakan layout yang berbeda, eksperimen dengan penempatan elemen, dan segera Anda akan dapat menciptakan halaman web yang indah dan terstruktur dengan mudah.

Selamat coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Susun Atur

Tutorial Seterusnya:

HTML - Susun atur menggunakan CSS