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 −

headings

<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 into 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 Break 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 −

break 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 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