author Ahmad Muhardian

15 Tag HTML yang tidak Memiliki Pasangan Penutup


Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup.

Kasihan juga ya, hehe 😄

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.

Apa saja tag-tag yang tidak memiliki penutup itu?

mari kita simak…

1. Tag <area>

Tag <area> fungsinya untuk mendefinisikan area pada image map. Image map merupakan sebuah gambar yang memiliki area yang bisa diklik. Tag <area> selalu berada di dalam tag <map>.

Contoh:

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Demo dapat dilihat di: w3schools.com

2. Tag <base>

Tag <base> fungsinya untuk membuat base URL dan target untuk sebuah link relatif. Contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3schools.com/img/" target="_blank">
</head>
<body>

<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/img/stickman.gif".</p>

<p><a href="https://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>
</html>

Perhatikanlah contoh di atas, gambar stickman.gif akan dicari pada alamat base URL yang diberikan pada tag <base>. Kemudian, link W3Schools akan dibuka pada jendela baru, karena pada tag <base> sudah ditentukan targetnya.

Demo: http://jsbin.com/muhawoqifi/edit?html,output

3. Tag <br>

Tag ini fungsinya untuk membuat baris baru. Contoh penggunaannya:

<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>

hasilnya:

Langit seolah-olah menangis.
Hujan waktu itu sangat berkesan.

4. Tag <col>

Tag <col> fungsinya untuk memberikan atribut untuk kolom pada tabel. Tag ini ditulis dalam tag <colgroup>. Dengan tag <col> ini, kita tidak harus membuat attribut untuk setiap sel tabel (<td>), karena sudah terwakili olehnya.

Contoh penggunaan:

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

Demo hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_test

5. Tag <embed>

Tag <embed> fungsinya untuk membuat container untuk aplikasi eksternal atau konten interaktif seperti animasi flash.

Contoh penggunaan:

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>

Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed

6. Tag <hr>

Tag <hr> fungsinya untuk membuat garis horizontal (horizontal row). Contoh penggunaannya:

<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>

Hasilnya:

Waktu itu...


Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu

7. Tag <img>

Tag yang satu ini pasti sudah banyak yang tahu fungsinya. Yap… benar sekali. fungsinya untuk menampilkan gambar.

Contoh penggunaan:

<img src="foto-si-doi.jpg">

8. Tag <input>

Tag <input> fungsinya untuk membuat elemen input pada form. Tag ini memiliki atribut type yang akan menentukan jenis inputannya.

Contoh:

<form action="proses.php" method="POST">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="Masuk">
</form>

9. Tag <keygen>

Tag <keygen> fungsinya untuk membuat kunci rahasia pada form. Tag ini digunakan untuk keamanan.

Contoh penggunaan:

<form action="/action_page.php" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Tag <link> digunakan untuk mendefinisikan hubungan antara dokumen HTML dengan resource eksternal seperti CSS. Tag ini juga bisa digunakan untuk membuat favicon.

Contoh penggunaan:

<head>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="icon" href="favicon.png">
</head>

11. Tag <meta>

Tag <meta> digunakan untuk mendefinisikan Metadata sebuah halaman web. Metadata tidak akan ditampilkan pada halaman web, melainkan akan dibaca oleh mesin atau Bot (robot). Contohnya, data yang akan tampil pada mesin pencari.

Tampilan tag meta di Google

Tag <meta> ini penting untuk SEO (search engine optimization). Jadi, kalau membuat web tanpa menggunakan tag <meta>, kemungkinan akan sulit terindeks oleh mesin pencari.

Contoh penggunaan tag <meta>:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web Programmer pengguna Linux">
  <meta name="keywords" content="Programmer,Linux,Petanikode,Petani Kode">
  <meta name="author" content="Petani Kode">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

12. Tag <param>

Tag <param> digunakan untuk memberikan parameter kepada plug-in yang di-embed menggunakan elemen <object>.

Contoh:

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>

Hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_param

13. Tag <source>

Tag <source> digunakan untuk mendefinisikan sumber file media untuk <audio> dan <video>.

Contoh:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Browser anda tidak mendukung elemen audio.
</audio>

Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_source_src

14. Tag <track>

Tag <track> digunakan untuk mendefinisikan taks untuk elemen media (<audio> dan <video>). Bisa dalam bentuk subtitle, caption, dan teks lainnya.

Contoh penggunaan:

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

15. Tag <wbr>

WBR merupakan singkatan dari Word Break Opportunity. Tag ini hampir mirip dengan tag <br>. Bedanya, tag ini tidak langsung membuat baris baru seperti <br>.

Tag ini akan membuat baris baru saat tidak ada lagi ruang di samping.

Contoh penggunaan:

<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>

Maka nanti, kalau ukuran layarnya dipersempit, teks akan ditampilkan sperti ini:

To learn AJAX, you must be familiar with the XML
Http
Request Object.

Itulah 15 tag HTML yang tidak memiliki pasangan penutup. Lalu bagaimana cara menutup tag-tag ini, sedangkan mereka tidak memiliki pasangan penutup?

Pada XHTML, semua elemen memang harus ditutup. Nah! untuk menutup tag-tag ini, kita bisa gunakan garis miring (/) di akhir.

Contohnya:

<br />
<hr />

Referensi:

Baca Juga ini

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

Tutorial HTML: Cara Membatasi Nilai Input Maksimum dan Minimum pada Form

Tutorial HTML: Cara Membatasi Nilai Input Maksimum dan Minimum pada Form

Atribut min dan max merupakan atribut untuk membatasi nilai maksimum dan minimum yang boleh diinputkan pada form. Atribut ini biasanya digunakan pada inputan yang berkaitan dengan angka. Misalnya tidak boleh menginput angka negatif, angka lebih dari 10, tanggal kurang dari tahun 2000, dsb. Sedangkan untuk inputan berupa teks, atribut ini tidak bisa bekerja. Mari kita coba langsung dengan contoh: Tidak Boleh input Angka Negatif pada FormAgar tidak bisa menginputkan anka negatfi, maka kita perlu batasi nilai minimanya menjadi nol (0).

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaanya.

Belajar HTML #11: Cara Membuat Form pada HTML

Belajar HTML #11: Cara Membuat Form pada HTML

Pada tutorial ini, kita akan belajar cara membuat form di HTML agar visitor website kita bisa menginputkan data.

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Panduan lengkap cara membuat link di HTML. Pada tutorial ini, kita akan belajar membuat link menggunakan tag a dan mengenal atribut-atribut yang biasanya digunakan untuk membuat link.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.