Tutorial Belajar HTML Part 2 - Memahami Element dalam HTML: Struktur Dasar Halaman Web

Memahami Element dalam HTML: Struktur Dasar Halaman Web

Pada dasarnya, sebuah halaman web dibangun dengan menggunakan berbagai elemen atau "tags" dalam HTML (Hypertext Markup Language). Elemen-elemen ini memberikan struktur dasar yang mendefinisikan bagaimana konten akan ditampilkan di browser. Memahami struktur dasar halaman web merupakan langkah awal yang penting dalam belajar pengembangan web.

Elemen-Elemen Kunci HTML

1. <!DOCTYPE html>Elemen ini menandakan versi HTML yang digunakan. Dalam contoh di bawah, ini menunjukkan bahwa kita menggunakan HTML5.

2. <html>

Ini adalah elemen induk yang menyatakan bahwa dokumen yang ditulis adalah dokumen HTML.

3. <head>

Bagian ini berisi informasi tentang dokumen seperti judul halaman (dapat dilihat di tab browser), tautan ke file CSS, meta informasi, dan lainnya.

4. <title>

Elemen ini menentukan judul halaman yang akan ditampilkan di tab browser.

5. <body>

Bagian ini berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, tautan, dan elemen-elemen lainnya.

Contoh Struktur Dasar Halaman Web

 

<!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman Web Anda</title>
        <!-- Tambahkan tautan ke file CSS, meta informasi, dan elemen lainnya di sini -->
    </head>
    <body>
        <header>
            <h1>Selamat Datang!</h1>
            <nav>
                <ul>
                    <li><a href="#home">Beranda</a></li>
                    <li><a href="#about">Tentang Kami</a></li>
                    <li><a href="#services">Layanan</a></li>
                    <li><a href="#contact">Kontak</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <section id="home">
                <h2>Beranda</h2>
                <p>Selamat datang di halaman web kami!</p>
            </section>

            <section id="about">
                <h2>Tentang Kami</h2>
                <p>Kami adalah perusahaan yang bergerak di bidang...</p>
            </section>

            <section id="services">
                <h2>Layanan</h2>
                <ul>
                    <li>Desain Web</li>
                    <li>Pengembangan Aplikasi</li>
                    <li>Pemasaran Digital</li>
                </ul>
            </section>

            <section id="contact">
                <h2>Kontak</h2>
                <p>Jika Anda memiliki pertanyaan, hubungi kami di...</p>
            </section>
        </main>

        <footer>
            <p>Hak Cipta &copy; 2023 | Nama Perusahaan</p>
        </footer>
    </body>
</html>

Penjelasan Struktur

  • <header>: Berisi elemen-elemen terkait kepala halaman seperti judul besar, navigasi, atau logo.
  • <nav>: Bagian navigasi yang biasanya berisi tautan menu.
  • <main>: Berisi konten utama dari halaman web.
  • <section>: Bagian-bagian yang memiliki konten terpisah, masing-masing dengan id yang memungkinkan tautan langsung ke bagian tersebut.
  • <footer>: Bagian penutup halaman yang berisi informasi hak cipta atau tautan-tautan penting lainnya.

Dengan memahami elemen-elemen dasar ini, Anda dapat membuat struktur dasar yang kokoh untuk halaman web Anda. Kemudian, Anda dapat melanjutkan dengan menambahkan gaya dan desain menggunakan CSS serta fungsionalitas dinamis dengan JavaScript untuk membuat halaman web menjadi lebih dinamis dan menarik. Semoga artikel ini membantu Anda memahami struktur dasar dari sebuah halaman web dalam HTML.


Dimas Ahmad Rizal

Hi! I'm Dimas Ahmad, a Software Engineer with more than 7+ years of experience. I have successfully completed more than 200+ projects using the latest technologies such as Laravel, ExpressJs, NextJs, and NuxtJs, I am ready to collaborate with you!