Home / HTML / Tutorial HTML Bagian 2: Pengenalan Tag, Atribut dan Elemen HTML

Tutorial HTML Bagian 2: Pengenalan Tag, Atribut dan Elemen HTML

Toturial Pengenalan HTML yang sebelumnya, kita sudah mengetahui apa itu HTML, struktur dasar HTML, cara membuat file HTML, cara menyimpan dan juga cara menjalankan file HTML. Untuk mempelajari lebih lanjut tentang HTML ada baiknya kita mengetahui apa itu Tag, Atribut dan juga Elemen HTML.

TAG HTML

Tag dalam HTML bertujuan untuk memberitahu browser bagaimana objek/content yang berada di dalam tag tersebut ditampilkan. Content yang ditampilkan bisa terdiri dari text, gambar, audio maupun video. Susunan tag umumnya berpasang-pasangan, diawali dengan <tag_pembuka>, Content dan diakhiri dengan </tag penutup>, meskipun ada beberapa tag tidak berpasangan yang disebut dengan self close tag seperti <img/>, <hr/> dan <br/>.

Isi yang terdapat didalam tag atau yang berada diantara kurung siku <> merupakan elemen tag yang sudah didefenisikan untuk memformat content halaman website.

Sebagai contoh, <P>Selamat datang di ITGeek.id</P>. <P> adalah tag pembuka dan </P> sebagai tag penutup. Content yang terdapat didalam tag tersebut adalah Selamat datang di ITGeek.id. Kemudian, elemen dalam tag <P> adalah P yang merupakan elemen tag yang sudah didefenisikan untuk memberikan format paragraf.

Penulisan tag dalam HTML tidak case sensitif, jadi tag <P> (p huruf besar) dianggap sama dengan tag <p> (huruf kecil).

Atribut

Didalam sebuah tag dapat disertakan beberapa atribut. Atribut bertujuan untuk memberikan informasi tambahan kepada tag untuk memformat content yang ada di dalamnya. Atribut umumnya terletak setelah elemen tag. Sebagai contoh, <p class=”merah”>Selamat datang di ITGeek.id</p>.

Atribut yang di gunakan adalah class=”merah”. Jadi maksutnya paragraf tersebut di tambahi atribut class yang berisi class CSS dengan nama merah. Seperti yang sudah disampaikan sebelumnya, bahwa sebuah tag bisa terdapat beberapa atribut dan setiap atribut dalam tag memiliki fungsi yang berbeda-beda.

Elemen HTML

Elemen merupakan segala sesuatu yang dimulai dari tag pembuka hingga tag penutup. Untuk lebih mudah memahaminya, silakan lihat gambar dibawah:

Tag Atribut dan Elemen HTML

Seperti gambar, elemen tersebut terdiri dari tag pembuka beserta atribut yang didalamnya, content dan tag penutup. Jadi <p class=”merah”>Selamat datang di ITGeek.id </p> adalah contoh sebuah elemen, disebut elemen paragraf. Contoh lain <title>Hubungi Kami</title> adalah sebuah elemen, disebut elemen title/judul.

Dalam HTML, sebuah elemen dapat berisi elemen yang lain atau disebut dengan elemen bersarang. Sebagai contoh, elemen paragraf tersebut terdiri dari tag <P> yang didalamnya juga terdapat elemen P yang sudah didefenisikan untuk memformat paragraf.

Contoh lain mengenai elemen bersarang dalam HTML adalah sebagai berikut:

<!DOCTYPE html>
<html>
    <head><title>Pengenalan Tag, Atribut dan Elemen HTML</title></head>
    <body>
        <p>Selamat datang di ITGeek.id</p>
    </body>
</html>

Dapat dilihat pada baris 2 sampai 7, elemen Html terdiri dari elemen Head dan Body. Kemudian elemen Head memiliki elemen Title didalamnya. Begitu juga dengan elemen Body yang didalamnya memiliki elemen paragraf.

Demikian tutorial tentang pengenalan Pengenalan Tag, Atribut dan Elemen HTML

Tutorial selanjutnya adalah Membuat Heading di HTML (H1-H6). Penggunaan tag Heading tidak sekedar untuk memberikan perbedaan ukuran teks tetapi fungsi utamanya adalah mengoptimalkan halaman website agar mudah di index oleh mesin pencari(search engine).

Comments

comments

About admin

admin

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial HTML Bagian 1: Pengenalan HTML

Pengenalan HTML. Ketika membuka sebuah website menggunakan browser, maka umumnya kita akan disuguhi halaman yang …

Leave a Reply

Your email address will not be published. Required fields are marked *