Pengelompokkan tag HTML ~ Pemrograman dan Teknologi

Kali ini kita akan mempelajari beberapa tag HTML yang tidak memiliki efek khusus terhadap tampilan tulisan. Tapi tag-tag tersebut akan berguna dengan adanya CSS. Beberapa tag tersebut, yaitu :

<SPAN>
<DIV>
<Section>
<Colgrup>

Semua tag di atas digunakan bersama dengan tag penutupnya untuk mengelompokkan bagian dari kode HTML yang akan diberi style CSS. Tag <colgrup> digunakan pada tabel untuk mengelompokkan beberapa kolom. Tag lainnya bisa kalian gunakan di luar tabel. Saat satu elemendigunakan untuk mengapit elemen-elemen HTML lainnya, suatu elemen disebut dengan parent / container.

1.SPAN

Tag <span> bisa digunakan untuk menandai bagian teks yang akan diubah dengan style atau script. Tag <span> tanpa atribut tidak berpengaruh pada tampilan dan letak teks kecuali jika kalian menggunakan style CSS. Perhatikan contoh di bawah ini :

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku{
            color : magenta;
            text-decoration : underline;
        }
        #styleku{
            color : blue;
            font-weight : underline;
        }
    </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <p>ini paragraf 1</p>
    <p>ini paragraf 2</p>
    <p>ini paragraf 3</p>
    <p>ini <span>paragraf</span> 4</p>
    <p>ini paragraf 5</p>
    <p>ini paragraf 6</p>
    <p>ini paragraf 7</p>
    <p>ini paragraf 8</p>
</BODY>
</HTML>

Tag <span> pada kode HTML di atas tidak memberi pengaruh apapun pada teks yang diapit tag tersebut. Coba, bandingkan dengan hasil dari kode HTML di bawah ini!

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        #styleku{
            color : blue;
        }
    </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <p>ini paragraf 1</p>
    <p>ini paragraf 2</p>
    <p>ini paragraf 3</p>
    <p>ini <span id ="styleku">paragraf</span> 4</p>
    <p>ini paragraf 5</p>
</BODY>
</HTML>

Contoh di atas menggunakan atribut id. Selain menggunakan tag <style>, kalian bisa juga menggunakan inline css atau class pada tag span.

Tag <div>

Tag <span umumnya digunakan untuk menandai teks, tapi kalian bisa menggunakan ya untuk lingkup yang lebih luas. Walaupun kalian bisa menggunakan tag <span> untuk mengapit beberapa tag lain, ada baiknya kalian menggunakan tag lain yang lebih tepat untuk itu. Tag tersebut adalah tag <div>.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku{
             color : magenta;
             text-decoration : underline;
        }
     </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <Div class= "styleku">
        <p>ini paragraf 1</p>
        <p>ini paragraf 2</p>
        <p>ini paragraf 3</p>
        <p>ini paragraf 4</p>
        <p>ini paragraf 5</p>
    </div>
</BODY>
</HTML>

Pada contoh di atas semua tag yang diapit tag <div class="styleku"> dan penutupnya (yaitu </div>) dipengaruhi style yang sama sesuai style dari class "styleku". Untuk melihat hasilnya simpan kode HTML tersebut pada file HTML dan jalankan.

Tag <div> bisa diletakkan di dalam tag <div> lainnya sehingga menjadi pengelompokkan bertingkat, atau bisa disebut dengan "nested div". Tapi, untuk saat ini, fokus saja ke contoh yang sudah saya berikan.

Section

Selain menggunakan tag <div>, tag lain yang punya kegunaan sejenis adalah tag <section>. Tag tersebut lebih sering digunakan untuk mengelompokkan kelompok terluar atau outline dari suatu halaman. Jika kalian ingin menggunakan pengelompokkan bertingkat, ada baiknya kalian menggunakan tag <div>. Tag section sebaiknya cukup digunakan untuk tepat di dalam antara tag <body> dan </body>.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .isi{
             color : magenta;
             text-decoration : underline;
         }
     </style>
</HEAD>
<BODY>
    <Section class= "header">
        <h2>Judul</h2>
    </Section>
    <Section class= "isi">
        <p>ini paragraf 1</p>
        <p>ini paragraf 2</p>
        <p>ini paragraf 3</p>
        <p>ini paragraf 4</p>
        <p>ini paragraf 5</p>
    </Section>
</BODY>
</HTML>

Colgrup

Jika kalian menggunakan tag <table>, untuk mengelompokkan isi tabel, sebaiknya kalian menggunakan tag <colgrup> untuk mengelompokkan sejumlah kolom. Kolom yang termasuk bagian dari colgroup didefinisikan dengan menggunakan tag <col>.

<html>
<head>
    <title>tabel</title>
    <style>
        .kelompok1{
             color : magenta;
             text-decoration : underline;
        }
     </style>
</head>
<body>
    <table border="1" cellpadding="4" cellspacing="0">
        <colgrup class="kelompok1";colgrup>
            <col>Isi</col>
            <col>Isi</col>
            <col>Isi</col>
        </colgrup>
        <colgrup class="kelompok2";colgrup>
            <col>Isi</col>
            <col>Isi</col>
            <col>Isi</col>
        </colgrup>
        </tr> 
        <tr>
            <td>Isi</td>
            <td>Isi</td>
            <td>Isi</td>
        </tr> 
    </table> 
</body>
</html>