close

Pambuka Struktur HTML: Elemen Dasar lan Sintaks

Struktur HTML nduweni peran penting kanggo mbangun kaca web. Iki nemtokake cara isi diatur lan ditampilake ing kaca web. Punika introduksi kanggo struktur HTML dhasar:

1. Doctype

Doctype(Deklarasi Tipe Dokumen) nemtokake versi HTML sing digunakake kaca web. Sampeyan kudu diselehake ing wiwitan file HTML.

2. tag html

Tag html minangka unsur root saben file HTML. Iku encapsulates kabeh isi kaca web.

3. head tag

Tag sirah ngemot informasi babagan kaca web sing ora langsung ditampilake ing browser. Iki ngendi judhul kaca, tag meta, pranala menyang file CSS lan JavaScript, lan macem-macem unsur liyane ditetepake.

4. body tag

Tag awak ngemot kabeh konten sing ditampilake ing kaca web. Iki ngendi unsur kayata teks, gambar, video, pranala, lan komponen antarmuka panganggo liyane ditetepake.

5. Nested tags

HTML nggunakake struktur hirarki kanthi tag pambuka lan tutup. Tag anak diselehake ing tag wong tuwa. Contone, tag p(paragraf) bisa ngemot tag span(teks inline), tag kuwat(teks kandel), lan akeh tag liyane.

6. Tag umum

HTML nyedhiyakake sawetara tag kanggo format lan nampilake isi. Contone, tag h1-h6(judul), tag p(paragraf), tag img(gambar), tag(link), lan liya-liyane.

 

Punika conto struktur kaca 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>

Ing conto ing ndhuwur, kita duwe kaca HTML lengkap kanthi unsur utama kayata doctype, html tag, head tag lan body tag. Ing bagean sirah, kita nemtokake judhul kaca, file CSS lan JavaScript sing bakal digunakake. Bagean awak ngemot unsur kaya header, utama, lan sikil kanggo nampilake isi kaca web.

 

Kanthi nggunakake struktur HTML sing bener, sampeyan bisa mbangun kaca web sing teratur, bisa diwaca, lan interaktif.