HTML Paragraph| HTML Tutorial Part 2
This post will guide you all about the paragraph tag that helps you in defining the paragraph element in your html document.
Introduction
In the previous post, we have learnt how the heading tags define the different headings in our html document and in this post, we are going to learn how the paragraph tags are going to define the different paragraphs in our html document. The idea of using the paragraph tag is to separate out different chunks of texts into various blocks of texts in order to come up with several unique paragraphs that identifies individual set of text content within the respective set of paragraphs , so that the user or reader can experience a smooth reading experience while at the document. As we all know, separate topics and sub-topics if structured within separate paragraphs, could result in an efficiently structured and organized reading content. This kind of structuring of the text inside a website page document is only possible by applying the paragraph tags.
Paragraph Tags
Now that we know, as detailed above, the reason for having paragraphs in our html text document, let us learn , how to create and use the paragraph tags. The paragraph tag is written inside the open p tag as <p> and it also has an ending p tag that is written as </p>
So, the paragraph element is created and defined by writing the starting and ending p tags respectively, that is, starting p tag is written as <p> and the ending p tag as </p> Please note how the p is written in both the cases within the starting and the ending p tags.
After writing the paragraph tags, we can write some content in between the starting and the closing p tags and for the viewer, the p tags are not visible, only the coder is able to see the tags, and the viewer is only able to see the contents within the paragraph tags, Let us consider an example code to understand.
Code
<p> Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren
</p>
Console Output
Inside the console screen, the display will read as the following paragraph lines as shown below:
Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren
Conclusion
As we see in the code block above, the paragraph tags with the opening <p> tag and the ending </p> tag helped in write several paragraph for the html document and form part of the content. The opening tag <p> has the angle brackets as shown here and the ending tag shown as </p> with the forward slash as shown here inside the angular brackets. In both the tags we write the letter p inside the angular brackets to indicate that it is a paragraph tag. If we forget to write either the opening or starting paragraph tag that is, <p> or the ending or closing paragraph tag, that is, </p>, then the code output will throw up an error in the console .
I will be writing on a different html tag in the next post. Until then, read and practise these code blocks to get the syntax right and also have a clear understanding of the html tags.
By the way, the code editor that I am using for these tutorial post coding is the popular coding platform for beginners, called, codepen. You can google for codepen.io and create your free account and start coding in HTML, it is the easiest online code editor that you can use for your beginner coding practice , for a hassle-free learning experience! If you have any difficulty in using it, please comment in the comment section below.
Related reading: