Read!!! Learn!!! Practice!!! HTML!!!

Day -3 Self-Closing Elements and few basic formatting tags

Garima sharma's photo
Garima sharma
·

3 min read

Table of contents

  • some elements do not compulsorily have closing tag ,such tags are called self-closing tags

  • ex-

  • Line Breaks (<br>)- The <br> tag is used to insert line breaks within text.

    It is an inline element and does not require a closing tag.

  • **Horizontal Rule (<hr>)**The <hr> tag is used to insert a horizontal line (horizontal rule) to separate content. It is a self-closing tag and is typically used to divide sections of content.

  • <img >tag It is used to insert image

  • <input> tag It is uused to input some value from the user

  • About <img> tag:

  • <img> tag in HTML is one of the self-closing tag ,present with attributes like src, alt which is used to insert an image in a web page and it does not have a closing tag.

  • src attribute : The src attribute in <img> tag specifies the path to image.

  • alt attribute: the alt attribute in <img> tag specifies an alternate text for image , in case the image cannot be displayed.

    How to insert image in html :

    We can insert images in different ways:

    1. Select which image you want to insert and right click on that image and select image address and past (ctrl+v) it in html.

    2. Download the image which you like to insert and copy the image in vscode current folder and use by giving ./ it shows what are inside the folder and select that image path and paste it.

       DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <h1>My Introduction</h1>
     <h2>Garima sharma</h2>
     <hr>
     <!-- !st way <img src="https://t3.ftcdn.net/jpg/03/27/57/44/240_F_327574409_AnPcIroe6i44uKpnvvJykEnTPRPbkn7k.jpg"
           alt="image" height="100" width="200"/> -->
       <!--2nd way get absolute path by r.c the image copy path-->
       <img src="C:\Users\ansharma\Desktop\htmlCode\htmlProjects\HTML\classes\GS-Image.jpg" alt="image" height="100" width="200"/>
       <!--3rd way-->
       <img src="./Images/GS-Image.jpg" alt="image" height="100" width="200"/>
     <h4>Description:</h4>
     <p>With 5 years of experience under my belt, I'm a <b>full-stack developer</b> with a strong understanding of 
         front-end technologies like HTML, CSS, and JavaScript frameworks,<br/> as well as <u>back-end languages and 
     databases</u>. I'm a team player with a keen eye for detail and a drive to deliver <i>high-quality applications</i>.</p>
 </body>
 </html>

      Few Basic formatting tags <br>,<u>,<i> ,<b> :

      • <br> : This <br> tag is used in HTML to give a line break , where it is required .

ex: some text <br/>

  • <u> : This <u> tag is used to give a underline which need to be highlight the text.

ex: <u> underlined text</u>

  • <i> : This <i> tag is used to give italic style to the necessary text.

ex: <i> italic text</i>

  • <b>: This <b> tag is used to BOLD the text.

ex: <b> the text is bold by giving this tag</b>

self closing tags