In previous post we discussed about HTML Paragraph and for that we learned the <p> tag and its align attribute. The requirement to format paragraph however is not sufficient with just <p> tag and its align attribute. Thus, in this post, I’m going to discuss a bit more so that you can present well formatted paragraphs in HTML documents.
Before we dive into today’s topic, let’s review our previous posts:
Session 1: Tutorial -> Getting Started (MCQs -> Questions from Getting Started)
Session 2: Tutorial -> HTML Document Structure (MCQs -> Questions from HTML Document Structures)
Session 3: Tutorial -> HTML Tags, Attributes & Elements (MCQs -> Questions from HTML Tags, Attributes and Elements)
Session 4: Tutorial -> HTML Paragraph (MCQs -> Questions from HTML Paragraph)
Tips!: You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of spaces, and any number of new lines, count as only one space.
HTML Paragraph Formatting using Styles
There are two parts of information delivery – content & presentation. In case of HTML documents, the tags works more on tagging content rather than specifying how they should be presented. Presentation in greater control is handled by styles.
We’ll talk about styles and external CSS in some other session, but for today, I’ll be discussing about the ones that are related to paragraph formatting.
HTML <P> lets you to tag your paragraphs and align attribute enables you to align the paragraphs to left, center, right or justified. Apart from these formatting, we’ll be using a global attribute style to format paragraphs.
Aligning Paragraph
Once again? Yea, but this time using Style rather than align attribute. You can also align paragraph using Style attribute with following values:
text-align: left|right|center|justify|initial|inherit;
Copy following code in your .html file
<!Doctype html><html><head><title>Align Paragraph with Style Attribute</title></head>
<body>
<p style=”text-align:center”>This is center aligned paragraph</p>
<p style=”text-align:right”>This is right aligned paragraph </p>
<p style=”text-align:justify”>This paragraph appears justified in your browser window. Because justified paragraph are aligned both to the left and right stretching the spaces. You can see both the edges straight as compared to left and right aligned paragraphs. In left aligned paragraph, the left edge is straight while right aligned paragraph have right edge straight. Did you see both left and right sides straight for this paragraph? It is due to the text-align:justify style.</p>
<body></html>
You’ll see the output as below:
Set Line Spacing
You can control the line spacing among lines in a paragraph using style=line-height. Use style attribute with <p> tag as below:
line-height: normal|number|length|initial|inherit;
Following is an example of html code showing paragraphs with different line spacing.
<!Doctype html><html><head><title>Set Line Spacing with Style Attribute</title></head>
<body>
<p style=”line-height:1.5; text-align:justify”>This paragraph used two values for style attribute. The first one line-height:1.5 defines the one and half line spacing for paragraph and the second value text-align:justify defines that the lines of paragraph should be justified. </p>
<p style=”line-height:2; text-align:justify”>And this paragraph is double line spaced and justified at the same time. line-height:2 defines double line spacing here. It is not necessary that style attribute should have two values every time. But if you need to use two values you can write them separating with semi colon symbol. </p>
</body></html>
Below are some different uses of line-height value of style attribute:
<p style=”line-height: 13px”>: Sets the 13 pixel line spacing among lines
<p style=”line-height:200%”>: Sets the 200% line height relative to the current font size.
<p style=”line-height:14px”>: Sets 14 pixel line height
Indentation
I used this term ‘indentation’ from WordProcessing just to make it easy to understand. However, in HTML we use the padding to allow some white space around object. We can use Style attribute with padding value to indent paragraph from left or right or both.
Following is the example of left indent and right indent.
<!Doctype html>
<html><head><title>Paragraph Indentation with Style Attribute</title></head>
<body>
<p style=”text-align:justify”> This paragraph is not indented. It is simply justified. Look at the style attribute of P element for this paragraph</p>
<p style=”padding-left:30px; text-align:justify”>I’ve set 30 pixel indentation from left for this paragraph using padding-left:30px style. Also this paragraph is justified using text-align:justify style. As you already know you can write multiple values of Style attribute separating with semicolon.</p>
<p style=”padding-right:30px; text-align:justify”>And this paragraph is indented 30 pixels from right, but is not indented from left. It is also justified. ‘padding-right’ value of style attribute forces the right indentation. If you don’t see the effect, resize your browser to narrower so that the justified paragraph is displayed properly.</p>
</body></html>
Paragraph Spacing (Space Before and Space After)
In fact for HTML or CSS I need not this heading. It is simply the padding style to specify in P element. The padding-top and padding-bottom will specify the white space before and after the paragraph to effect the space before and space after. Look at the P tag in example below. I’ve set 10 pixel space before the second paragraph and 50 pixel space after the second paragraph.
<!Doctype html><html><head><title>Paragraph Spacing with Style Attribute</title></head>
<body>
<p style=”text-align:justify”>This paragraph do not have space before or after. This is just a normal paragraph with justification enabled. As you already know you can justify a paragraph by using Style=”text-align:justify” inside P tag.</p>
<p style=”padding-top:10px; padding-bottom:50px; text-align:justify”>This paragraph is justified. It also has 10 pixel space before the paragraph and 50 pixel space after the paragraph. I’ve written three styles in P tag here. </p>
<p>This is normal paragraph without any spacing and also without justification.</p>
</body></html>
Points to Remember
- HML paragraph can be aligned using align attribute or text-align style.
- HTML will be displayed differently depending upon screen sizes, window sizes.
- Adding extra space or extra line in HTML code can not change the output. The browser removes all extra spaces.
- Tags specify what should be displayed and styles define how they should be displayed.
- Styles can be written in three different ways – inline (written inside tags), Internal (inside same html file using <style> element, and External (written in a separate file)
- The best practice while designing web sites is using external CSS. This separates the content and the presentation nicely.
- Style is global attribute which means it can be used with any other elements and not only with P element.
- text-align style aligns a paragraph to the left, center, right or justified
- Line spacing for a paragraph can be achieved using line-height style. It takes nomal, number, length as values.
- You can specify line-height providing multiples (1 for single, 1.5 for one and half line, 2 for double, 3 for triple and so on), providing pixels, providing percentages and so on.
- Indentation for a paragraph in HTML can be achieved by using padding-left or padding-right depending upon you need left indentation or right indentation. Padding can accept values in pixels, percentage etc.
- Paragraph spacing in HTML can be achieved by using padding-top and padding-bottom styles. It can accept values in pixels, percentage etc.
MCQ Questions from this chapter
I’ve composed 20 multiple choice questions from this chapter you can visit the link below to get those questions. I’ll answer these questions in next session. However, I’ve presented the correct answers of previous set in that page.
https://mcqsets.com/mcq-questions-2/html-web-page-designing/html-paragraph-formatting-mcq-questions
Your Questions & Confusions
- Visit following link
/website-designing/ - 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 questionsthere.
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.
Leave a Reply