close

Pengantar Struktur HTML: Elemen Dasar dan Sintaks

Struktur HTML memainkan peran penting dalam membangun halaman web. Ini menentukan bagaimana konten diatur dan ditampilkan di halaman web. Berikut adalah pengenalan struktur HTML dasar:

1. Doctype

Doctype(Deklarasi Jenis Dokumen) menentukan versi HTML yang digunakan halaman web. Itu harus ditempatkan di awal file HTML.

2. tag html

Tag html adalah elemen root dari setiap file HTML. Ini merangkum seluruh konten halaman web.

3. head tag

Tag head berisi informasi tentang halaman web yang tidak langsung ditampilkan di browser. Di sinilah judul halaman, tag meta, tautan ke file CSS dan JavaScript, dan berbagai elemen lainnya ditentukan.

4. body menandai

Tag body berisi semua konten yang ditampilkan di halaman web. Di sinilah elemen seperti teks, gambar, video, tautan, dan komponen antarmuka pengguna lainnya ditentukan.

5. Tag bersarang

HTML menggunakan struktur hierarkis dengan tag pembuka dan penutup. Tag anak ditempatkan di dalam tag induk. Misalnya, tag p(paragraf) dapat berisi tag rentang(teks sebaris), tag kuat(teks tebal), dan banyak tag lainnya.

6. Tag umum

HTML menyediakan serangkaian tag untuk memformat dan menampilkan konten. Misalnya tag h1-h6(heading), tag p(paragraf), tag img(gambar), tag(link), dan masih banyak lagi lainnya.

 

Berikut adalah contoh struktur halaman HTML lengkap:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Pada contoh di atas, kita memiliki halaman HTML lengkap dengan elemen utama seperti doctype, html tag, head tag dan body tag. Di bagian kepala, kami menentukan judul halaman, file CSS dan JavaScript yang akan digunakan. Bagian tubuh berisi elemen seperti header, main, dan footer untuk menampilkan konten halaman web.

 

Dengan menggunakan struktur HTML yang benar, Anda dapat membangun halaman web yang terorganisir dengan baik, mudah dibaca, dan interaktif.