Layout HTML

Zencliv
3 Apr, 2023
HTML Layout

Kita semua tahu HTML berfungsi sebagai pembentuk struktur dari halaman web. Namun perlu kita ketahui, dalam halaman web itu sendiri terdapat struktur dari konten webpage tersebut. Struktur konten suatu webpage biasanya terbentuk seperti berikut:

Webpage Content Layout
  • Header >> Kepala dari layout, biasanya berisi logo atau judul suatu webpage.
  • Navigation Bar >> Berisi link navigasi suatu webpage.
  • Main Content >> Konten utama suatu webpage.
  • Footer >> Bagian yang terletak di paling bawah layout, biasanya berisi copyright, kontak, logo, ataupun navigasi dalam suatu webpage.

Pembuatan layout dalam HTML sendiri mempunyai 2 pendekatan, dengan menggunakan generic element dan dengan menggunakan semantic element.

Layout Dengan Generic Element

Membuat layout dengan generic element biasanya dilakukan dengan menggunakan element <div> dan <span> yang diberikan penanda seperti id atau class. 

<!DOCTYPE html>

<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        #header {
            background-color: antiquewhite;
            text-align: center;
        }

        #navigation {
            background-color: beige;
            text-align: center;
        }

        #content {
            text-align: center;
        }

        #footer {
            background-color: antiquewhite;
            margin-top: auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>ZENCLIV</h1>
    </div>
    <div id="navigation">
        <a href="/">Home</a>
        <a href="/products">Products</a>
    </div>
    <div id="content">
        <h2>MAIN CONTENT</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas fugit harum saepe magnam libero earum
            asperiores nulla recusandae dolor temporibus aliquam minus unde, consequatur corporis dignissimos nam rerum
            tenetur culpa?</p>
    </div>
    <div id="footer">
        <p>&copy; 2022, Zencliv</p>
    </div>
</body>

</html>

Output:

Layout with generic elements

Layout Dengan Semantic Element

Kita juga dapat menggunakan semantic element untuk keperluan layout. Semantic element untuk keperluan layout ini diperkenalkan pada HTML5. Semantic element ini bertujuan untuk memberikan "arti" yang pada layout webpage, sehingga memudahkan para programmer untuk membaca struktur kode yang digunakan.

Berikut ini adalah penggunaan semantic element untuk layout: 

<!DOCTYPE html>

<head>
    <style>
        body {
            margin: 0;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #3A8891;
            text-align: center;
            color: white;
        }

        nav {
            margin-top: 90px;
            text-align: center;
        }

        aside {
            float: right;
            width: 30%;
            background-color: #FFEFD6;
        }

        main {
            float: left;
            background-color: #F2DEBA;
            width: 70%;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #3A8891;
            text-align: center;
            color: white;
        }
    </style>
</head>

<body>
    <header>
        <h1>ZENCLIV</h1>
    </header>

    <nav>
        <a href="/">Home</a>
        <a href="/products">Products</a>
    </nav>

    <aside>
        <h4>Contents:</h4>
        <ul>
            <li><a href="#chocolate">Chocolate</a></li>
            <li><a href="#ice-cream">Ice Cream</a></li>
        </ul>
    </aside>

    <main>
        <article id="chocolate">
            <h3>Chocolate</h3>
            <section>
                <h4>Flavor</h4>
                <p>The taste of chocolate...</p>
            </section>
            <section>
                <h4>Types</h4>
                <p>Types of chocolate...</p>
            </section>
        </article>
        <article id="ice-cream">
            <h3>Ice Cream</h3>
            <section>
                <h4>Flavor</h4>
                <p>The taste of ice cream...</p>
            </section>
            <section>
                <h4>Types</h4>
                <p>Types of ice cream...</p>
            </section>
        </article>
    </main>

    <footer>
        <p>&copy; 2022, Zencliv</p>
    </footer>
</body>

</html>

Output:

Layout with semantic elements

Dapat dilihat dari kode di atas, terdapat beberapa elemen semantik dari HTML5 untuk keperluan layout, diantaranya:

  • <header>  >> Kepala dari layout, biasanya berisi logo atau judul suatu webpage.
  • <nav>  >> Berisi link navigasi suatu webpage.
  • <aside>  >> Bagian samping suatu layout dalam webpage.
  • <main>  >> Konten utama suatu webpage.
  • <article>  >> Menandakan suatu kumpulan elemen dimana elemen di dalamnya terpisah antara satu elemen dengan yang lain.
  • <section>  >> Menandakan suatu bagian dalam webpage.
  • <footer>  >> Bagian yang terletak di paling bawah layout, biasanya berisi copyright, kontak, logo, ataupun navigasi dalam suatu webpage.

Generic VS Semantic?

Sebelum adanya semantic element untuk layout yang diperkenalkan pada HTML5, penentuan layout menggunakan generic element seperti <div> dan <span>. Penggunaan generic element seperti itu kurang efektif karena dapat membuat bingung programmer dalam membaca susunan layout webpage. Oleh karena itu, penggunaan semantic element dalam menentukan layout lebih diutamakan karena membuat susunan layout yang kita buat lebih "bermakna" sehingga tidak membuat kita kebingungan saat membaca ataupun membuat layout suatu webpage.

Next Post Previous Post
No Comment
Add Comment
comment url