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