Self-Closing Elements or Tags

Self-closing elements are HTML elements that do not need a closing tag. They are also known as void elements or empty elements. Self-closing elements can have attributes, but they cannot have any content or children. 

Self-Closing Tags Examples:

The following are the most commonly used self-closing elements or tags in HTML, which are useful for creating web pages with minimal syntax and code. :

<br> Element: 

This element inserts a line break in the text. For example, 

<p>Hello<br>World</p> 

This will display as two lines of text.

<hr> Element: 

This element creates a horizontal rule on the web page. For example, 

<h1>Hello World</h1> 
<hr>
<p>i am paragraph</p>  

This will create a line across the page.

<img> Element: 

This element displays an image on the web page. It has attributes such as src, alt, width, and height. For example, 

<img src="logo.png" alt="Logo" width="100" height="50"> 

This will display an image of 100 by 50 pixels.

<embed> Element: 

This element embeds external content in the document. It has attributes such as src, type, width, and height. For example, 

<embed src="video.mp4" type="video/mp4" width="300" height="200"> 

This will embed a video of 300 by 200 pixels in the document.

<source> Element: 

This element specifies a media source for an audio or video element. It has attributes such as src, type, and media. For example, 

<source src="audio.mp3" type="audio/mpeg"> 

This will specify an MP3 audio source for an audio element.

<track> Element: 

This element specifies a text track for an audio or video element. It has attributes such as src, kind, label, and srclang. For example,

<track src="subtitles.vtt" kind="subtitles" label="English" srclang="en"> 

This will specify an English subtitles track for a video element.

<input> Element: 

This element creates a form input field. It has attributes such as type, name, value, and placeholder. For example, 

<input type="text" name="username" placeholder="Enter your name"> 

This will create a text box for the user to enter their name.

<link> Element: 

This element links an external resource to the document. It has attributes such as rel, href, and type. For example, 

<link rel="stylesheet" href="style.css" type="text/css"> 

This will link a CSS file to the document.

<meta> Element: 

This element provides metadata about the document. It has attributes such as name, content, and charset. For example, 

<meta name="description" content="This is a web page about HTML"> 

This will provide a description of the web page for search engines.

<base> Element: 

This element specifies the base URL for all relative URLs in the document. It has attributes such as href and target. For example, 

<base href="https://example.com/" target="_blank"> 

This will make all relative URLs in the document point to example.com and open in a new tab.

<col> Element: 

This element specifies column properties for a table column or a group of columns. It has attributes such as span and width. For example, 

<col span="2" width="50%"> 

This will make the first two columns of a table take up 50% of the table width each.

<param> Element: 

This element specifies a parameter for an object element. It has attributes such as name and value. For example, 

<param name="autoplay" value="true"> 

This will set the autoplay parameter to true for an object element.

<area> Element: 

This element defines a clickable area on an image map. It has attributes such as shape, coords, href, and alt. For example, 

<area shape="rect" coords="0,0,50,50" href="index.html" alt="Home"> 

This will create a clickable area on the top left corner of an image that links to index.html.

These are some of the self-closing elements in HTML. Self-closing tags provide a more concise and cleaner way of writing HTML code. They make it easier to understand the structure of the document and can save you time when coding. They are useful for creating web pages with minimal syntax and code.

Watch this chapter video on YouTube: