HTML Elements

 Let's learn about the following html Elements:

•       Headings 
•       Paragraph
•       Preformatted
•       Anchor/Hyperlink 
•       Image
•       Horizontal Line
•       Line Break
•       Button

1. Headings

        HTML provides 6 heading tags from bigger size to lower. These tags are used for headings and sub-headings to display on the page.

            <h1>Heading 1: Default Size-(32px/2em)</h1>

            <h2>Heading 2: Default Size-(24px/1.5em)</h2>

            <h3>Heading 3: Default Size-(20.8px/1.3em)</h3>

            <h4>Heading 4: Default Size-(16px/1em)</h4>

            <h5>Heading 5: Default Size-(12.8px/0.8em)</h5>

            <h6>Heading 6: Default Size-(11.2px/0.7em) </h6>

Output:

Heading 1: Default Size-(32px/2em)

Heading 2: Default Size-(24px/1.5em)

Heading 3: Default Size-(20.8px/1.3em)

Heading 4: Default Size-(16px/1em)

Heading 5: Default Size-(12.8px/0.8em)

Heading 6: Default Size-(11.2px/0.7em)

2. Paragraph 

       <p> tag in html defines a paragraph. 

Note: It always starts on a new line.

Example:

        <p>Hey There! What's up</p>

        <p>How are you doing?</p>

Note: Paragraph tag does not preserve spaces, if you provide any extra spaces in between the paragraph then browser will automatically remove the extra spaces.

For Example:

         <p>Hello

          World.      Here you

           can learn multiple programming 

           Language

           </p>

          Output: Hello World. Here you can learn multiple programming Language

     Hence to preserve spaces we can use <pre> tag.

3. Preformatted

        <pre> tag is used for preformatted text. It can preserve spaces as well as line breaks. 

          <pre>Hello

          World. Here you

           can learn multiple programming

           Language

           </pre>

            Output: 

                  Hello

          World.   Here you
           can learn multiple programming 
           Language

4. Anchor Tag:

         <a> tag is used to define hyperlink in HTML, which can be used to link from one page to another page.

     We use href attribute of html to provide the link of the destination.

         Example:

          <a href="https://www.wikipedia.org">Click Here</a>

        Here if you'll click on Click here text, it will take you to Wikipedia website.

    By default, anchor tag links appear on the browser as 

•        an unvisited link will be underlines and blue
•        a visited link will be underlined and purple
•        an active link will be underlined and red 

     Anchor tag also provides a target attribute which defines how the link should be opened on the browser. 

To know more about target attribute: click here 

5. Image:

        To display images on the web page, we use <img> tag. It is a self closing tag.

         <img> provides some required attributes which are:

             - src: specifies the path of the image

             - alt: specifies an alternative text for the image if the image is unavailable.

         Example:

               <img src="./src/image.png" alt="alternative text">

          By default, the image will be embedded on the web page with the same size as image. Hence to change the height and width of the image we can use height, width attribute as:

                <img src="./src/image.png" alt="alternative text" width="300" height="250">

6. Horizontal Line:

            We can use <hr> tag to display a horizontal line after a tag to separate the content of html page.

           <p>Section 1</p>

           <hr>

           <p>Section 2</p>

            Output:

Section 1

---

Section 2

                        

            You can specify the height of hr tag using style attribute as 

            <hr style="height: 25px">

7. Line Break:

              <br> tag is used to create a single line break inside html elements.

          For Example:

                <p>Hello: <br>Welcome to our blog<br>Hope you are learning and enjoying the content<p>

8. Button

            <button> tag defines a clickable button.

      Button tag contains a type attribute to specify the type of a button and the values of type attribute can be-

•        button
•        reset
•        submit

       For Example:

          <button type="submit">Log in</button>

      You can also specify the value and name of the button using value and name attribute as:

              <button type="submit" name="mybutton" value="text">Log in</button>

Continue Learning : Text Formatting tags in HTML