Summary -

In this topic, we described about the below sections -

Basic body tags

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 -

Attribute	Description	Values
Width	Specifies the max number of char per line.Not supported in HTML5	number

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 -

Attribute	Description	Values
charset	Specifies the character set of a linked documentNot supported in HTML5	Char_encoding
coords	Specifies the coordinates of a linkNot supported in HTML5	Coordinates
download	Specifies the target should be downloaded instead of navigated to.HTML5 attribute	None.
href	Specifies the target destination of a link.	URL.
hreflang	Specifies the language of the target link. This attribute can be used if href is used.HTML5 attribute	Language code
Media	Specifies media/device the linked document is optimized.HTML5 attribute	media_query
Name	Specifies the name of the anchor.Not supported in HTML5	name
rel	Specifies 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.
Shape	Specifies the shape of the linkNot supported in HTML5	default rect circle poly
target	Specifies in which the target destination should open.	_self: Opens link in current window / tab. _blank: Opens link in a new window / tab.
type	Specifies 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 -

Home Page

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…