Bagaimana cara penulisan tag penutup di html?

Question

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser bagaimana suatu text ditampilkan. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Table of Contents Show

Pengertian Elemen dalam HTML
Pengertian Atribut dalam HTML
Bagaimana Menulis Tag HTML dengan Benar?
Gunakan huruf kecil
Tutup Tag Dengan Benar
Tag yang Wajib Ditulis
Apa itu Elemen di HTML?
Nested Elemen
Empty Elemen HTML
Bagaimana cara penulisan tag html yang benar?
Ditandai dengan apa tag penutup dalam tag di HTML?
Apa itu tag penutup?
Apakah Setiap tag html memiliki tag pembuka dan penutup?

Hampir semua tag dalam HTML ditulis secara berpasangan, tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku.

Format penulisan tag:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Contohnya jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring, dalam HTML dapat ditulis sebagai berikut:

Ini adalah sebuah paragraf. Hanya kumpulan beberapa kalimat.

tag_pembuka0tag_pembuka1tag_pembuka2tag_pembuka1>.

Hasil dari sebagian kode HTML diatas, diterjemahkan oleh browser menjadi:

Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.

Tag pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag untuk menebalkan tulisan (b, singkatan dari bold).

Contoh tag:

<tag_pembuka6tag_pembuka7tag_pembuka6>

adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf
adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda backslash(/)

Jika kita lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal ini memudahkan kita, namun tidak disarankan.

*pengecualian beberapa tag tidak berpasangan, seperti untuk break (pindah baris) atau <hr> untuk horizontal line (garis horizontal) ditulis dengan , dan <hr />. Tag ini dikenal juga dengan sebutan self closing tag.

HTML tidak case-sensitif, dalam artian sama dengan . Pada awal kemunculan HTML, programmer menggunakan huruf besar untuk seluruh tag, agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag. Oleh karena itu disarankan menggunakan huruf kecil dalam penulisan tag.

Pengertian Elemen dalam HTML

Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

Seperti contoh diatas, “Ini adalah sebuah paragraf” adalah element dari tag .

Elemen tidak hanya berisi text, namun juga bisa tag lain.

Contoh elemen:

<tag_pembuka6>objek yang dikenai perintah tag</2>objek yang dikenai perintah tag</3>objek yang dikenai perintah tag</4>objek yang dikenai perintah tag</3>objek yang dikenai perintah tag</6tag_pembuka6>

Dari contoh diatas, Ini adalah sebuah paragraf merupakan elemen dari tag .

Pengertian Atribut dalam HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll.

Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“)

Contoh attribut :

<tag_penutup0 tag_penutup1tag_penutup2tag_penutup3tag_penutup4tag_penutup0>

href adalah nama dari atribut, dan http://www.duniailkom.com adalah value atau nilai dari atribut tersebut. Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag memiliki atribut, terutama atribut id dan class yang terutama dibutuhkan dalam manipulasi halaman web menggunakan CSS maupun JavaScript.

Dalam artikel sebelumnya saya hanya memberi definisi bahwa tag merupakan kombinasi atau gabungan dari simbol dan huruf. Namun untuk lebih detailnya, tag merupakan penanda awal dan akhir dari suatu elemen HTML. Tag dibuat dengan tanda (<…..>) kemudian di dalam tanda tersebut terdapat huruf atau kata yang mewakili nama dari tag tersebut. Contoh tag <html>, <head>, <h1>, , dan lain-lain.

Dalam setiap elemen HTML terdiri dari sepasang tag, tag pembuka dan tag penutup. Perbedaan antara tag pembuka dan tag penutup terdapat pada tanda slash yang dimiliki tag penutup. Contoh </html>, </head>, </h1>, , dan lain-lain.


<h>....</h>
<p>....</p>

Namun tidak semua tag terdiri atas tag pembuka dan tag penutup (sepasang), ada juga beberapa yang berdiri sendiri seperti , <hr>, <img>, dan lain-lain.

Jenis tag yang tidak memiliki pasangan ini dipanggil tag yang berdiri sendiri atau dapat juga disebut self-closing tag. Sedangkan dalam konteks elemen bisa disebut empty elemen atau void elemen.

Fungsi tag bermacam tergantung masing-masing tag, ada yang digunakan untuk,

membuat judul
membuat paragraf
membuat daftar
membuat tabel
dan lain-lain.

Pada awalnya tag di HTML hanya berjumlah 18 buah namun seiring berjalannya waktu kini html memiliki tag sebanyak 250 buah.

Apakah semua tag tersebut harus dihafal?

Tidak perlu, kita cukup menghafal tag dasarnya saja, tag yang sering kita temui saat membuat website besok. Beberapa tag dasar ini dapat dilihat pada tabel di bawah ini:

TagKegunaan<html>Memulai dokumen HTML<head>Membuat bagian kepala halaman<body>Membuat bagian tubuh halaman<title>Membuat judul halaman<h1> sampai <h6>Membuat judul pada konten halamanMembuat paragraf<a>Membuat link<img>Memasukkan gambar<!– –>Membuat komentar

Untuk tag dasar lainnya akan kita pelajari secara perlahan di materi berikutnya

Bagaimana Menulis Tag HTML dengan Benar?

Menulis tag html tidak bisa sembarangan, ada beberapa aturan yang seharusnya perlu diperhatikan, walaupun beberapa aturan memang tidak mutlak, namun dengan memperhatikan hal-hal di bawah ini diharapkan kode yang ditulis nantinya akan terlihat rapi dan dipastikan valid oleh validator W3C.

Gunakan huruf kecil

Tag dalam HTML tidak case sensitif. Meskipun begitu, jangan sekali-sekali gunakan huruf besar untuk menulis tag karena akan terlihat buruk. W3C juga menyarankan untuk selalu menulis tag dalam lower case atau huruf kecil.

Contoh yang salah


<BODY>
   <H1>....</H1>
   <P>....</P>
</BODY>

Contoh yang benar


<body>
   <h1>....</h1>
   <p>....</p>
</body>

Selain itu dengan menggunakan huruf kecil akan memudahkan kita untuk mengetiknya dan kode terlihat lebih rapi. Kecuali untuk DOCTYPE yang lebih disarankan menggunakan huruf besar (upper case) walaupun menggunakan huruf kecil juga valid menurut W3C.

Namun tidak dengan dokumen XHTML yang akan berakibat error bila doctype ditulis dengan huruf kecil.

Tutup Tag Dengan Benar

Jangan lupa untuk menutup tag karena jika lupa akan menimbulkan kerancuan pada hasil yang dikeluarkan.

Contoh salah


<h1>Judul Satu	
<p>Ini paragraf

Seharusnya


<h1>Judul Satu</h1>
<p>Ini paragraf</p>

Selain itu pada saat membangun website nantinya kita akan menemukan tag yang bertumpuk, artinya dalam tag akan ada tag lagi. Pastikan urutan untuk menutup tag yang bertumpuk itu tepat. Karena jika tidak tepat akan mengakibatkan kode HTML yang ditulis tidak valid. Contoh salah dan benar untuk menutup tag bertumpuk ini bisa dilihat pada contoh di bawah.

Contoh salah


<p><b><i><u>Selamat Datang</p></b></i></u>

Seharusnya


<p><b><i><u>Selamat Datang</u></i></b></p>

Walaupun dalam beberapa tag bertumpuk hasilnya bisa dibilang masih sesuai dengan yang diinginkan, namun penulisan tag yang keliru tempat tersebut sangat salah.

Tag yang Wajib Ditulis

Ada banyak tag di HTML, beberapa diantaranya bersifat wajib untuk ditulis, karena bila tidak ditulis maka akan menyebabkan error validasi menurut W3C. Tag-tag yang wajib ditulis di dokumen HTML adalah sebagai berikut:

<!DOCTYPE html> – deklarasi tipe dokumen
<html> – tag pembuka
<head> – kepala halaman
<title> – judul halaman
<body> – tubuh halaman

Namun tenang saja, karena masalah ini sudah diatasi oleh beberapa teks editor, contohnya sublime, dengan hanya mengetikkan html maka template untuk membuat dokumen html langsung terbentuk dalam sekejap.

Apa itu Elemen di HTML?

Elemen HTML merupakan semua hal yang didefinisikan mulai dari tag pembuka, konten tag, dan tag penutup.

Lebih jelasnya dapat dilihat pada gambar di bawah ini

Nested Elemen

Isi dari elemen tidak selalu berupa teks, sering dijumpai juga suatu elemen memiliki isi berupa elemen lain, yang mana hal ini disebut dengan nested elemen atau elemen bersarang.

Untuk lebih jelasnya perhatikan gambar berikut:

Empty Elemen HTML

Pembahasan empty elemen atau void elemen sempat disinggung di awal artikel. Empty elemen atau void elemen adalah elemen yang tidak memiliki tag penutup. Ia hanya terdiri dari satu tag pembuka dengan terkadang diakhiri tanda slash sebelum tanda >.

Salah satu tag yang masuk ke dalam kategori ini adalah tag
yang mewakili line break atau garis baru.

Bagaimana cara penulisan tag html yang benar?

Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Contoh: , <a> , <body> , <head> , dan sebagainya. Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya.

Ditandai dengan apa tag penutup dalam tag di HTML?

adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Apa itu tag penutup?

Tag penutup = tag yang digunakan sebagai penutup dari deklarasi terhadap suatu hal yang dibuat. Tag berdiri sendiri = tag yang berdiri sendiri, biasanya tidak memiliki pasangan dalam mendeklarasikannya.

Apakah Setiap tag html memiliki tag pembuka dan penutup?

Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup. Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi.

kode html