Post
Ask Question

Inline tags for content grouping and linking in HTML 5

Inline Tags For Content Grouping in HTML 5

 
 <blockquote>,<div>,<hr> and <p> tags are the block tags used for content grouping in HTML 5 
 
1. <br>:- This tag is used for providing a line break in HTML document. This tag doesn't contain any close tag.
 
 Syntax:
 
 <br>
 
 Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <p> I m   
  5.             <br/> br tag   
  6.         </p>  
  7.     </body>  
  8. </html>  
 Output:
 
     br.gif
 
2. <span>:- This tag is used basically for inline elements. It groups and apply styles to them.
 
  Syntax:
 
 <span>
 
 Code:
  1. <!DOCTYPE HTML>< html>  
  2. <body>  
  3.     <p>I m inline tag   
  4.         <span style="color: green"> used for block </span> tags  
  5.     </p>  
  6. </body>undefined</html>  
 Output:
 
 
   span.gif
 
3. <wbr>:- It is used to give line break-in words that are too long and have no spaces. It is an option to give spaces and it does not force to give breaks. It has no closing tag.
 
 Syntax:
 
 <wbr>
 
 Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <p>  
  5.  I m br tag. I have no   
  6.             <wbr>closing  
  7.                 <wbr>tag  
  8.                 </p>  
  9.             </body>  
  10.         </html>  
 Output:
 
     wbr.gif 
 

Inline Tags for Linking in HTML 5

 
1) <a> :- <a> tag is used to specify a hyperlink.
 
Attributes:
  • href:- href specify destination of the link.
  • target:- target attribute can only be used with a href attribute. This attribute indicates whether we want to load the page in a blank document, on the same page, in the parent page, at the top. It can only be used when we have included href attribute.
Values:- Its values can be _blank, _ self, _ parent, _top.
  • hreflang:-b
  • media:- It indicates what will be the optimized media for the destination link. It can only be used when we have included href attribute.
  • rel:- It indicates the relation between HTML document and destination link. Its values can be bookmark, section, stylesheet etc.
  • type:- It indicates content type at the target link. It can only be used when we have included a href attribute.
Syntax:
 
<a href="http://www.google.com" target=_blank> I m search engine </a>
 
Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <a href="http://www.google.com" target=_blank> I m search engine </a>  
  5.     </body>  
  6. </html>  
Output: 
 
     a.gif
 
2) <area>:- In an image map, this tag is used to indicate an area. Image map are areas in images where we can click. It can be used with <map> and <img> tags. It also have same attributes which <a> tag provides. The additional attributes it provides are:-
 
Attributes:
  • alt :- This attribute is used to indicate an alternate text for the area. We can only write it if we have used href attribute.
  • coords :- It is used to indicate the coordinates of an area.
  • shape :- It indicates the shape of an area. Its values can be rect, circ, poly for rectangle, circle, and poly respectively.
Syntax:
 
<img src ="Blue hills.jpg" width="226" height="126" alt="sunset" usemap ="#bluehillsmap" />
<map name="Bluehillsmap">
</map>
 
Code:
  1. <DOCTYPE HTML>  
  2.     <html>  
  3.         <body>  
  4.             <p> I m area tag </p>  
  5.             <img src ="Blue hills.jpg" width="226" height="126" alt="sunset" usemap ="#bluehillsmap" />  
  6.             <map name="Bluehillsmap"></map>  
  7.             <body>  
  8.             </html>  
Output:
 
    area.gif