An element in HTML consists of opening tags and closing tags. However, there are also those who don't have closing tags.
Poor too, huh ![😄](https://www.petanikode.com/img/icon/twemoji/1f604.svg)
However, this element remains valid and can be read by the browser. Elements that do not have a closing tag are also called void elements , because they do not have contents.
What are the tags that don't have that cover?
let's see ...
1. Tag <area>
The
<area>
function tag is to define the area in the image map .Image map is an image that has a clickable area. Tags are <area>
always inside tags <map>
.
Example:
<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>
The demo can be seen at: w3schools.com
2. Tag <base>
The
<base>
function tag is to create the base URL and target for a relative link. Example of its use:<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/images/" 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/images/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>
Note the example above, the image
stickman.gif
will be searched at the base URL address given in the tag <base>
. Then, the W3Schools link will open in a new window, because the <base>
target tag is already set.
3. Tag <br>
This tag functions to create a new line. Example of its use:
<p>
Langit seolah-olah menangis.<br>
Hujan waktu itu sangat berkesan.
</p>
the result:
The sky as if crying.
The rain was very memorable at that time.
The rain was very memorable at that time.
4. Tag <col>
The
<col>
function tag is to give attributes to columns in the table. This tag is written in the tag <colgroup>
. With <col>
this tag , we do not have to create attributes for each table cell ( <td>
), because it is already represented by it.
Example of use:
<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 the result: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_test
5. Tag <embed>
The
<embed>
function tag is to create containers for external applications or interactive content such as flash animation.
Example of use:
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
6. Tag <hr>
Tag
<hr>
function to create a horizontal line (horizontal row) . Example of its use:<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
The result:
That time…
I never thought, that day would be my last day to meet you
7. Tag <img>
This one tag must have known many functions. Yep ... really right. its function to display images.
Example of use:
<img src="foto-si-doi.jpg">
8. Tag <input>
The
<input>
function tag is to make input elements on the form. This tag has an attribute type
that will determine the type of input.
Example:
<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>
The
<keygen>
function tag is to create a secret key on the form. This tag is used for security.
Example of use:
<form action="/action_page.php" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
10. Tags <link>
Tags are
<link>
used to define the relationship between HTML documents and external resources such as CSS. This tag can also be used to create a favicon .
Example of use:
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="favicon.png">
</head>
11. Tag <meta>
Tags are
<meta>
used to define the metadata of a web page.Metadata will not be displayed on a web page, but will be read by a machine or a bot (robot). For example, data will appear on search engines.![Display of meta tags on Google](https://3.bp.blogspot.com/-UvYa05VI5o0/WMQwKa4j6CI/AAAAAAAAETo/ProWcFFbDwAt8TNETsYjcVR5FcalpBxiACK4B/s1600/Tampilan%2Btag%2Bmeta%2Bdi%2BGoogle.png)
<meta>
This tag is important for SEO (search engine optimization) . So, if you create a web without using tags <meta>
, it's likely to be difficult to be indexed by search engines.
Examples of tag usage
<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>
Tags are
<param>
used to give parameters to embeded plug-insusing elements <object>
.
Example:
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
13. Tag <source>
Tags are
<source>
used to define media file sources for <audio>
and <video>
.
Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen audio.
</audio>
14. Tag <track>
Tags are
<track>
used to define taks for media elements ( <audio>
and <video>
). Can be in the form of subtitles , captions, and other texts.
Example of use:
<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 stands for Word Break Opportunity . This tag is almost similar to the tag
<br>
. The difference, this tag does not directly create a new line like <br>
.
This tag will create a new line when there is no space on the side.
Example of use:
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>
Then later, if the screen size is narrowed, text will be displayed like this:
To learn AJAX, you must be familiar with the XML
Http
Request Object.
That's 15 HTML tags that don't have a closing pair. Then how do you close these tags, while they don't have a closing partner?
In XHTML, all elements must be closed. Well! to close these tags, we can use slashes (
/
) at the end.
Example:
<br />
<hr />
Reference:
- w3.org
- w3schools.com
- https://www.petanikode.com/html-tag-tanpa-penutup/
0 Komentar untuk "15 HTML tags that do not have a closing pair"
Silahkan berkomentar sesuai artikel