Summary -

In this topic, we described about the below sections -

In this Section, we will discuss about basic HTML body tags.

Heading tags

Used to define HTML headings. Any HTML normally starts with Heading. There are six different sizes headers available in HTML. The six headers in html use the tags <h1> to <h6>.

<h1> tag called as level1(top) heading. Similarly <h6> is level6(lowest) heading. If any of the above header tag used, while displaying the browser will add one line before and after the header. Any two heading with same name are at equal in rank.

Ending tag is mandatory for each header from <h1> to <h6>. The tag can be specified like <h1></h1> with the heading text between the opening and closing tags.

Syntax -

<h1>.. text here.. </h1>
<h2>.. text here.. </h2>
<h3>.. text here.. </h3>
<h4>.. text here.. </h4>
<h5>.. text here.. </h5>
<h6>.. text here.. </h6>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Heading tag example..</title>
	</head>
	<body>
		<h1>Displaying Header 1</h1>
		<h2>Displaying Header 2</h2>
		<h3>Displaying Header 3</h3>
		<h4>Displaying Header 4</h4>
		<h5>Displaying Header 5</h5>
		<h6>Displaying Header 6</h6>
	</body>
</html>

Output -

Displaying Header 1

Displaying Header 2

Displaying Header 3

Displaying Header 4

Displaying Header 5
Displaying Header 6

Paragraph tag

Paragraph. HTML paragraphs are defined by using <p> tag. <p> tag can be used to create different paragraphs in wed document. If any other tag is following except the above, then end tag is mandatory.

The paragraph content will go in between opening <p> tag and closing </p> tag. Browsers automatically add a line in between the each paragraph.

The closing tag can be ignored if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, or <ul>, element.

Syntax -

<p>.. text here.. </p>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Paragraph tag example..</title>
	</head>
	<body>
		<p>First paragraph text here…</p>
		<p>Second paragraph text here…</p>
		<p>Third paragraph text here…</p>
	</body>
</html>

Output -

First paragraph text here…

Second paragraph text here…

Third paragraph text here…

Preserve Formatting Tag

Preformatted text in HTML document. HTML paragraphs are defined by using <pre> tag. But the paragraph will display as how it is formatted in HTML document.

For these cases, the paragraph content will go in between opening <pre> tag and closing </pre> tag. Browsers normally extract <pre> text in a fixed-pitched font with whitespace together and without word wrap. The tag can be specified like <pre></pre> with the text inserted in between the opening and closing tags.

Syntax -

<pre>..text here.. </pre>

Optional Attributes -

AttributeDescriptionValues
WidthSpecifies the max number of char per line.Not supported in HTML5number

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Preserve formatting tag example..</title>
	</head>
	<body>
		<pre>First paragraph text here… Second paragraph text here…
		Third paragraph text here…</pre>
	</body>
	</html>

Output -

First paragraph text here… Second paragraph text here…
Third paragraph text here…

Nonbreaking Spaces

Non breaking space used to add space in between words. Non breaking space can be represented to browser by using  . &nbsp should be coded between the start and end tags of any kind.

Syntax -

&nbsp

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Non breaking space example..</title>
	</head>
	<body>
		<p>Without Non breaking space example </p>
		<p>WITH&nbsp;&nbsp;NON&nbsp;&nbsp;BREAKING&nbsp;&nbsp;SPACE&
		nbsp;&nbsp;(TWO&nbsp;&nbsp;SPACES
		&nbsp;&nbsp;IN&nbsp;&nbsp;BETWEEN&nbsp;&nbsp;EACH&nbsp;&
		nbsp;WORD)&nbsp;&nbsp;</p>
	</body>
</html>

Output -

Without Non breaking space example

WITH  NON  BREAKING  SPACE  (TWO  SPACES   IN  BETWEEN  EACH  WORD)  

HTML Links -

HTML links are defined by using <a> tag. The <a> tag adds the 'a' element to a web page. <a> tag called as Anchor. The 'a' element creates a hypertext anchor (hyperlink) from one page to another.

To use the <a> tag, place the text in between the opening and closing <a></a> tags. Attributes used to specify more information along with <a> tag. The link destination should specify in href of <a> tag. URL needs to provide when by using the href attribute.

If attribute not included, the <a> element will be simply place holder. An anchor does not need to be defined with a tag. Applying the id attribute to any tag will achieve anchor.

By default, links will appear as below without override -

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

Syntax -

<a href=” “>.. text/image here.. </a>

Optional Attributes -

AttributeDescriptionValues
charsetSpecifies the character set of a linked documentNot supported in HTML5Char_encoding
coordsSpecifies the coordinates of a linkNot supported in HTML5Coordinates
downloadSpecifies the target should be downloaded instead of navigated to.HTML5 attributeNone.
hrefSpecifies the target destination of a link.URL.
hreflangSpecifies the language of the target link. This attribute can be used if href is used.HTML5 attribute Language code
MediaSpecifies media/device the linked document is optimized.HTML5 attributemedia_query
NameSpecifies the name of the anchor.Not supported in HTML5name
relSpecifies the relationship between the link’s page and the link’s target destination. alternate: Indicates an alternative version of the current web page.
author: Indicates author of the page / article.
bookmark: link to the current section of the page.
help: Indicates the Help specific to the context.
license: Indicates copyright license for the current document.
next: Indicates the linked next page in the sequence.
nofollow: Indicates the linked resource is not certified by the current document’s author.
noreferrer: Indicates the browser not to send an HTTP referrer header.
prefetch: Indicates the linked resource should be cached.
prev: Indicates the linked previous page in the sequence.
search: Indicates the search facility used to search the current, and related, documents.
tag: A tagging term that applies to the link.
ShapeSpecifies the shape of the linkNot supported in HTML5default
rect
circle
poly
targetSpecifies in which the target destination should open.
_self: Opens link in current window / tab.
_blank: Opens link in a new window / tab.
typeSpecifies type of the linked resource.Text.
Note! Download, hreflang, media, rel, target, and type cannot be specified if the href attribute is not present.
A linked page is normally displayed in the current browser window, unless you specify another target.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>HTML link tag example</title>
	</head>
	<body>
		<a href="https://www.tutorialscampus.com">Home Page</a> 
	</body>
</html>

Output -

Line Break Tag -

Line break tag is used to break the line of display. Line break tag represented as <br /> tag in HTML coding. <br> tag inserts a single line break. The <br> tag is an empty tag because of no content and it has no ending tag.

Wherever <br /> represented in paragraph or anywhere the following code from <br/> will be displayed in next line. <br /> tag can be coded in between tags and out of tags. <br> tag to enter line breaks in between the lines, not to separate paragraphs.

Syntax -

<br/>
Note! The forward slash is only for older version browsers and can be ignored for new browsers.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Line break tag example..</title>
	</head>
	<body>
		<pre>
	First paragraph text here…<br /> 
	Second paragraph text here…<br /> 
	Third paragraph text here…
		</pre>
	</body>
</html>

Output

First paragraph text here…
Second paragraph text here…
Third paragraph text here…

Horizontal Lines Tag

Horizontal Rule in HTML document. Horizontal lines tag used to separate the sections visually by drawing a line in between horizontally. <hr> tag represents the paragraph level break.

Horizontal lines tag represented as <hr /> in HTML coding. If <hr /> tag specified, the browser draws a line in the next line from current position. <hr /> tag is an empty element, the closing tags doesn’t required.

The <hr> tag defines a thematic break in HTML5. The <hr> tag represents a horizontal rule in HTML 4.01. All the layout attributes are removed in HTML5.

Syntax -

<hr/>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Line break tag example..</title>
	</head>
	<body>
		<p>First paragraph text here…<p><hr /> 
		<p>Second paragraph text here…<p><hr/> 
		<p>Third paragraph text here…</p>
	</body>
</html>

Output -

First paragraph text here…


Second paragraph text here…


Third paragraph text here…