Anchors Tags in HTML

It is very easy to navigate from one page to another page using Anchors(Hyperlinks) in HTML. 

Anchor is represented using <a>.........</a>

Anchors are span level elements.

• General meaning of span is SHORT .
• Now HTML span meaning is it takes the width of browser upto the end of content.

If we give anchor tag like this <a>google</a>. It looks like a simple context. When we give href  attribute now it act as a Link. <a href="somelinks">somename</a>.

Example:

Case-1:

 

<a>sukki</a>

 It shows like a normal text.

Case-2:

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

After introducing href now it behave as a link with blue color text ,underline .After visited the link it changes it colour to violet [because it indicates that you are visited already].

Case-3:

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

  <a href="https://www.youtube.com/">Youtube</a>

  <a href="https://www.blogger.com/">Blogger</a>

  <a href="https://www.podcasts.com/">Podcasts</a>

  <a href="https://www.googlemaps.com/">Maps</a>

  <a href="https://www.googleforms.com/">Forms</a>

 Following output:

Links

• Above figure shows the links .Violet colour links are I already visited and blue is not yet visited.
• It is a span element so it places one another one.

Behind the scenes:

Anchor span 

Case-4:

 Now combinations of block level vs span .

<div>

    <a href="https://www.googlemeet.com">Gmeet</a>

    <p>I am Iron man</p>

    <a href="www.htmlgalaxy.blogger.com/">HTML Galaxy</a>

    <a href="https://www.googlemaps.com/">Maps</a>

</div>

• Here div containing <a> and <p>. <a> doesn't takes the full width of div but it takes width only for his content. Browser now moving to next line , now here it is a <p> tag so it takes full width of div and starts in next line.
• Next line its a anchor span takes width only for his content.
• Next line also anchor span so it continues one another one.

combination of block and span level elements

Behind the scenes:

Behind the scene