The paragraph tag

Let’s make this learning roadmap of HTML more exciting as we move on. Next on our way is the backbone of the HTML language. Yes, you are correct, we are talking about HTML Tags.

Backbone of English Language!!

As coffee is to morning, a paragraph is to the in a webpage.
Denotation: <p> & </p>
Location: It’s placed inside the body tag.
Usage: It lets you make new paragraphs.
Visibility: The text placed inside this tag will be visible on the main webpage.

Here is an example to take you through:

<body>
	We are the jungle family
		<p>I’m the one denoted as a rabbit</p>
</body>

We are the jungle family. I’m the one denoted as a rabbit. FYI: Putting one tag inside another is termed as Nesting.

The break tag

Writing sentences in a new line provides symmetry to the writing.
The break tag lets you start a sentence from a new line in HTML.
Denotation: <br>
Location: It’s placed inside the body tag.
Usage: Let’s start from a new line.
Special Characteristic: It’s a self-closing HTML Tag.

We have been waiting for you to ask this question: What is a self-closing HTML tag?

  • The opening and closing are both included under the same tag.
  • Not all tags can be used in such a manner.
  • Identified by the forward-slash towards the end.

Here is an example :

 <body>
	<p>I'm just here to help the break tag.<br> 
	These people are mean. I don't wanna be a porcupine.
	</p>
</body>

For better understanding try displaying the above without using <br>

Hint: It would all be in the same line.

The route map has started to take some interesting turns, let’s continue to travel down it.

Headings in HTML

We tend to prioritize the important stuff. In HTML we make use of headings.

Denotation: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

Location: It’s placed inside the body tag.

Usage: <h1> to <h6>-arranged on basis of priority (<h1>- highest)

Visibility: The text placed inside this tag will be visible on the main webpage.

Still not clear? Don’t you worry, this example will resolve any confusion.

 <body>
	<h1>Hey There! I'm Heading 1</h1>
	<h2>Hey There! I'm Heading 2</h2>
	<h3>Hey There! I'm Heading 3</h3>
	<h4>Hey There! I'm Heading 4</h4>
	<h5>Hey There! I'm Heading 5</h5>
	<h6>Hey There! I'm Heading 6</h6>
</body>

Isn’t it amazing how you can sort the important stuff from the content, just by providing a suitable heading structure.

Bold, Italics Underline

There are different tags present to format the content on a web page. Let’s learn about them.

The bold tag

Denotation:<b> </b>
Location: It’s placed inside the body tag.
Usage: Let’s mark the text bold to showcase importance.

The italic tag

Denotation: <i> </i> Location: It’s placed inside the body tag. Usage: Lets you mark the text in italic font.

The underline tag

Denotation: <u> </u> Location: It’s placed inside the body tag. Usage: Just in case you want to underline a text.

Now it’s time to make use of these tags:

 <body>
	<p><b>Hey, What's up? See I am BOLD</b></p>
	<p><i>Everything looks tilted from this angle</i></p>
	<p><u>Now, that's a straight line</u></p>
</body>

PS: We have included everything in a separate paragraph.

Once you try running the code, The content will automatically change.

Time for a little pat on you back. You just crossed the most difficult hurdle.

1 Comment

Write A Comment