Document Structure and Links

Heading tags:

  • There are six different heading tags from <h1> to <h6>.
  • <h1> has the largest font size.
  • <h6> has the smallest font size.
Example:
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

This will produce the following result −

heading tag

<p>:

  • This tag is used to display some text content on the web page.
  • Plain text is placed inside this tag.
  • If there are any empty lines and extra space in the text then <p> tag neglects them.
Example:
<p>This element has some text content.</p>

This will produce the following result −

p tag

<div>:

  • This div tag is used to divide web page in to blocks.
Example:
<div>
  <h1>This is a heading in a div element</h1>
  <p>This is some text in a div element.</p>
</div>

This will produce the following result −

div tag

<span>:

  • This span tag is an inline element which will be very useful in styling some part of text or document with out ruining the format.
Example:
<p>This is a paragraph. <span>This has a part of paragraph</span>.</p>

This will produce the following result −

span tag

<br/>:

  • This is a self closing tag.
  • It is used for line brake which means it provides an empty line.
Example:
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br/> Sequi, ipsum.</p>

This will produce the following result −

br tag

<hr/>:

  • This is also a self closing tag.
  • This tag draws a horizontal bar.
Example:
    <div>
        <h1>This is heading one</h1>
        <hr />
        <p>This is a paragraph.</p>
    </div>

This will produce the following result −

hr tag

<a href=“”>:

  • The anchor tag is used to link one to another page. Primarily used for including hyperlinks.
  • It has one main attribute i.e. href attribute, which indicates the link’s destination.
  • And another attribute is target attribute, which specifies where to open the linked document.
Example:
<a href="https://www.google.com">Link</a>

To open a link in another tab:

<a href="https://www.google.com" target="_blank">Link</a>

This will produce the following result −

anchor tag

<img/>:

  • A <img/> tag to display images in the webpage.

  • It’s main and most commonly used attributes are

    1. src="url" It is used to specify the path of the image.

    2. alt="text" It is used to display alternate text for an image, if the image for some reason cannot be displayed.

    3. width and height in pixels.

Example:
<img src="./img.png" alt="book-img" width="400" height="200">

This will produce the following result −

img tag