This fourth session is to discuss about HTML Paragraph. We’ll learn how to create paragraphs in HTML and what are the various things you should know to control your paragraphs. Before we begin today’s topics let’s look back to the previous sessions first.
What is a Paragraph?
Collection of one or more sentences related to the same context in discussion – That’s what you learned a paragraph defined, isn’t it?
And in MS Word? A paragraph is a block of text or objects until an ‘Enter’ is pressed or the text and objects in between two paragraph marks! right?
So, what’s it in HTML?
Well, it’s not much different than in MS Word. But rather than an Enter, in HTML we use <p> tag to separate paragraphs. A paragraph is started with opening <p> tag and ends when an closing </p> is encountered.
You remember the opening and closing tags, don’t you?
Enter following html code in your Notepad and save it in desktop folder as para-example.html
<!Doctype html> <html> <head> <title>Paragraph Illustration 1</title></head> <body> This is a block of text written in same context. There can be only one sentense or more than one. Sometimes, there can be only one line and some times there can be multi line. The HTML paragraph begin with a <p> and ends at </p> Anything in between these two tags is considered a paragraph. </body> </html>
Now open that file in browser.
First of all, did that open in browser when you double clicked? If it did not, make sure you typed ‘.html’ as file extension and selected ‘All files (*.*)’
If that file opened in browser how many paragraph it appeared in browser? Also, Did you notice <p> and </p> in HTML code (in notepad)? Confused to see it produces <p> and </p> while in browser?
For you information, HTML supports some &codes to produce characters in browser. < produces a less than symbol > produces greater than symbol. Similarly you can write © produces a copyright symbol. One of the frequently used code is which stands for non-breaking space. When you don’t have any content and enter a space somewhere, you can use code.
But one problem is still there. We wrote two paragraph and there appeared only one in browser. Now Add <p> and </p> tag to enclose paragraphs as displayed below:
<!Doctype html> <html> <head><title>Paragraph Illustration 1</title></head> <body> <p>This is a block of text written in same context. There can be only one sentense or more than one. Sometimes, there can be only one line and some times there can be multi line.</p> <p>The HTML paragraph begin with a <p> and ends at </p> Anything in between these two tags is considered a paragraph.</p> </body> </html>
Notice opening <p> tag and closing </p> tag in above example. Save the file and reload in browser (Press F5 in browser to refresh when you make change and save in same file).
You saw two paragraphs, din’t you? So, you should understand the white spaces has nothing to do in HTML to format. Consecutive spaces (more than one spaces) is dealt as single space. So you can’t create blocks of text by adding a number of spaces as in Notepad. Though it appears separated in Notepad, but when it’s loaded in browser, the spaces vanish.
Aligning the paragraph
Now, when you can create paragraphs, the next thing you quite often need is to align the paragraph properly. In following example, I use center alignment, left alignment, justified and a right alignment. Look at the example closely:
<!Doctype html> <html> <head> <title>Paragraph with Allignment</title></head> <body> <p align="center">XYZ Trading Company <br> Paknajol, Kathmandu</p> <p align="left">To,<br> The Secretary<br> Ministry of Information and Communications</p> <p align="justify">In reference to your letter dated 15 October 2015 we have attached the MOE between XYZ Trading Company, Paknajol, Kathmandu and ZTE Communications, Xiang, China for your kind reference. We expect positive response from your side in the earliest possible date.</p> <p>Thanking You.</p> <p align="right">Yours Sincerely<br> Managing Director<br> XYZ Trading Company</p> <p align="right"> Date: 25 October 2015</p> </body> </html>
Save the file and load it in your browser (open the file in browser).
Did you notice how paragraphs are aligned to the left, center, right and justified? What caused them to align properly?
The, ALIGN attribute. align=”left” attribute in P tag causes the paragraph align to the left while the “center”, “right” and “justify” values for align attribute causes them to align accordingly.
Note: HTML 5 does not support align=”left” because the default alignment of <p> tag is left.
Also, notice the use of <br> tag. The <BR> tag is used in HTML to force line breaks like Shift+Enter breaks a line in WordProcessors (MS Word).
Note: Apart from align attribute, <p> tag supports the Global HTML Attributes.
Points to Remember
- HTML has <p> tag to mark paragraphs in web page. A paragraph is started with <p> tag and ended with </p> tag.
- <p> tag is a pair tag as it has it’s associated closing tag.
- You can press Enters to separate paragraphs. Though they appear paragraph in Notepad, but they are joined while rendered in browser.
- White spaces (pressing Enter, Space, Tabs multiple times to create space) are removed while displaying in browsers. So that’s not the way to format paragraphs.
- Sometimes, if you need to display a space, you should insert non-breaking space with the code
- HTML supports some codes such as < (less than), > (greater than), © (Copyright symbol).
- When you need to reload a page after the source code is changed, you can simply press F5 key to refresh browser.
- Paragraph can be aligned as required by using align attribute. align=”right” aligns a paragraph to the right. align=”center”, aling=”justify” are well supported.
- The attribute align=”left” is not necessary and thus not supported in HTML 5. Paragraph are aligned left automatically by default.
- If you need to force a line break within same paragraph you can insert a <BR> tag. It will create a new line and the line will remain in same paragraph.
- <br> is a single tag so there is no </br> tag. However if you wish to follow XHTML way, you can write <br /> to indicate opening and closing tag in same tag.
MCQ Questions for this chapter
Click the link below to visit page for multiple choice questions composed for HTML Paragraph.
Your Questions & Confusions
- Visit following link
- Log in using your Facebook, Google, Yahoo accounts. (Use the Log in buttons on right sidebar. If you are viewing this page in mobile device, you’ll find the login buttons below)
- Post your questions or confusions. You are equally welcomed to answer other member’s questions there.
Comments, Suggestions & Feedback
We’ve a comment form below this post. You’re most welcome to write your comments, suggestions or feedback. They are highly appreciated.