Cara menggunakan css empty

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

Show

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…

Tag

<!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>
7 fungsinya untuk mendefinisikan area pada image map. Image map merupakan sebuah gambar yang memiliki area yang bisa diklik. Tag
<!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>
7 selalu berada di dalam tag
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
0.

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 <p> Langit seolah-olah menangis.<br> Hujan waktu itu sangat berkesan. </p>1

Tag

<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
1 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

<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
3 akan dicari pada alamat base URL yang diberikan pada tag
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
1. Kemudian, link W3Schools akan dibuka pada jendela baru, karena pada tag
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
1 sudah ditentukan targetnya.

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

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

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 <p> Langit seolah-olah menangis.<br> Hujan waktu itu sangat berkesan. </p>7

Tag

<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
7 fungsinya untuk memberikan atribut untuk kolom pada tabel. Tag ini ditulis dalam tag
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
9. Dengan tag
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
7 ini, kita tidak harus membuat attribut untuk setiap sel tabel (
<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>
1), 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 <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>2

Tag

<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>
2 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 <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>4

Tag

<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>
4 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 <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>6

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 <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>7

Tag

<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>
7 fungsinya untuk membuat elemen input pada form. Tag ini memiliki atribut
<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>
9 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 <!DOCTYPE html> <html> <body> <embed src="helloworld.swf"> </body> </html>0

Tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
0 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>

10. Tag <!DOCTYPE html> <html> <body> <embed src="helloworld.swf"> </body> </html>2

Tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
2 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 <!DOCTYPE html> <html> <body> <embed src="helloworld.swf"> </body> </html>4

Tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
4 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.

Cara menggunakan css empty

Tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
4 ini penting untuk SEO (search engine optimization). Jadi, kalau membuat web tanpa menggunakan tag
<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
4, kemungkinan akan sulit terindeks oleh mesin pencari.

Contoh penggunaan tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
4:

<!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>
0

12. Tag <!DOCTYPE html> <html> <body> <embed src="helloworld.swf"> </body> </html>9

Tag

<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>
9 digunakan untuk memberikan parameter kepada plug-in yang di-embed menggunakan elemen
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
1.

Contoh:

<!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>
1

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

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

Tag

<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
2 digunakan untuk mendefinisikan sumber file media untuk
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
4 dan
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
5.

Contoh:

<!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>
2

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

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

Tag

<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
6 digunakan untuk mendefinisikan taks untuk elemen media (
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
4 dan
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
5). Bisa dalam bentuk subtitle, caption, dan teks lainnya.

Contoh penggunaan:

<!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>
3

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

WBR merupakan singkatan dari Word Break Opportunity. Tag ini hampir mirip dengan tag

<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
6. Bedanya, tag ini tidak langsung membuat baris baru seperti
<p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
</p>
6.

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

Contoh penggunaan:

<!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>
4

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

<!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>
5

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 (

<img src="foto-si-doi.jpg">
3) di akhir.