Id & Class HTML

Zencliv
3 Apr, 2023
HTML Id & Class

Id dan class merupakan atribut dalam elemen HTML yang berfungsi sebagai penanda suatu elemen. Untuk apa suatu elemen diberikan penanda? Hal tersebut biasanya digunakan untuk keperluan styling dengan CSS ataupun memberikan interaktifitas halaman web dengan JavaScript.

Id

Id / Identifier adalah atribut dalam elemen HTML yang berfungsi untuk memberikan penanda yang bersifat unik (harus digunakan oleh satu elemen). Id ditandai dengan simbol hash (#).

Penerapan Id

Penerapan untuk styling

Id dapat digunakan untuk styling elemen dalam HTML: 

<!DOCTYPE html>

<head>
    <style>
        #title {
            text-transform: uppercase;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 id="title">Ini adalah header halaman</h1>
</body>

</html>

Output:

Styling using Id

Penerapan untuk anchor link

Contoh di bawah ini jika link Section 2 di klik maka akan menuju ke bagian dengan Id Section 2: 

<a href="#Section2">Section 2</a>
<h1 id="Section2">This Is Section 2</h1>

Penerapan dengan JavaScript 

<!DOCTYPE html>

<body>
    <h1 id="title">Ini adalah header halaman</h1>
    <script>
        var title = document.getElementById("title");
        title.style.textAlign = "center";
    </script>
</body>

</html>

Output:

Using JavaScript in Id

Class

Class adalah atribut dalam elemen HTML yang berfungsi untuk memberikan penanda yang dapat digunakan oleh beberapa elemen HTML sekaligus. Class ditandai dengan simbol point (.).

Penerapan Class

Penerapan untuk styling

Class dapat digunakan untuk styling beberapa elemen dalam HTML: 

<!DOCTYPE html>

<head>
    <style>
        .sec1 {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="sec1">Section 1</h1>
    <p class="sec1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae aspernatur omnis iste
        reiciendis,
        magni est obcaecati tenetur nam nobis accusamus? In animi ipsum autem sint sunt aut placeat ea!</p>
</body>

</html>

Output:

Styling using class

Penerapan dengan JavaScript 

<!DOCTYPE html>

<body>
    <h1 class="sec1">Section 1</h1>
    <p class="sec1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae aspernatur omnis iste
        reiciendis,
        magni est obcaecati tenetur nam nobis accusamus? In animi ipsum autem sint sunt aut placeat ea!</p>
    <script>
        var section1 = document.getElementsByClassName("sec1")
        for (let i = 0; i < section1.length; i++) {
            section1[i].style.textAlign = "center";
        }
    </script>
</body>

</html>

Output:

Using JavaScript in Class
Next Post Previous Post
No Comment
Add Comment
comment url