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 don't contain any close tag.
Syntax:
<br>
Code:
<!DOCTYPE HTML>
<html>
<body>
<p> I m <br/> br tag </p>
</body>
</html>
Output:
![br.gif]()
2. <span>:- This tag is used basically for
inline elements. It group and apply styles to them.
Syntax:
<span>
Code:
<!DOCTYPE HTML>
< html>
<body>
<p>I m inline tag <span style="color: green"> used for block </span>
tags</p>
</body>
</html>
Output:
![span.gif]()
3. <wbr>:- It is used to give line break in
words which 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:
<!DOCTYPE HTML>
<html>
<body>
<p>
I m br tag. I have no <wbr>closing<wbr>tag
</p>
</body>
</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 href attribute. This attribute indicate whether we want to load the
page in blank document, in same page, in parent page, at 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 the 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 href attribute.
Syntax:
<a href="http://www.google.com" target=_blank> I m search engine </a>
Code:
<!DOCTYPE HTML>
<html>
<body>
<a href="http://www.google.com" target=_blank> I m search engine </a>
</body>
</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:
<DOCTYPE HTML>
<html>
<body>
<p> I m area tag </p>
<img src ="Blue hills.jpg" width="226" height="126" alt="sunset" usemap ="#bluehillsmap"
/>
<map name="Bluehillsmap">
</map>
<body>
</html>
Output:
![area.gif]()