Memahami Struktur HTML: Fondasi Pembangunan Halaman Web

ViaByte.Net

Struktur HTML

Contoh Struktur HTML

Berikut adalah contoh struktur HTML sederhana untuk sebuah halaman web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman Web</title>
</head>
<body>
    <header>
        <h1>Selamat Datang di Halaman Web Kami</h1>
        <nav>
            <ul>
                <li><a href="#home">Beranda</a></li>
                <li><a href="#about">Tentang Kami</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Halaman Beranda</h2>
            <p>Selamat datang di halaman beranda kami.</p>
        </section>
        <section id="about">
            <h2>Tentang Kami</h2>
            <p>Kami adalah perusahaan yang bergerak di bidang teknologi informasi.</p>
        </section>
        <section id="contact">
            <h2>Hubungi Kami</h2>
            <p>Silakan hubungi kami melalui formulir kontak di bawah ini.</p>
            <form action="/submit_form" method="post">
                <label for="nama">Nama:</label>
                <input type="text" id="nama" name="nama"><br><br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email"><br><br>
                <label for="pesan">Pesan:</label><br>
                <textarea id="pesan" name="pesan" rows="4" cols="50"></textarea><br><br>
                <input type="submit" value="Kirim">
            </form>
        </section>
    </main>
    <footer>
        <p>Hak Cipta &copy; 2024 Contoh</p>
    </footer>
</body>
</html>

Dalam contoh di atas, kita memiliki struktur dasar sebuah halaman web dengan <header>, <nav>, <main>, <section>, <form>, dan <footer>, yang memberikan organisasi dan hierarki yang jelas untuk konten halaman web.

Kesimpulan

Struktur HTML adalah fondasi dari setiap halaman web. Dengan memahami struktur HTML dan bagaimana cara kerjanya, Anda dapat membuat halaman web yang terstruktur, terorganisir, dan mudah dimengerti oleh pengguna dan mesin pencari. Jangan ragu untuk bereksperimen dengan kode HTML dan menyesuaikannya dengan kebutuhan proyek Anda.

Bagikan:

Tinggalkan komentar