---

Because almost every document you create will contain some form of text, the elements you are about to meet are likely to feature in most pages that you will build. In this section, you learn how to use what are known as basic text formatting elements:

< h1 > , < h2 > , < h3 > , < h4 > , < h5 > , < h6 >
< p > , < br / > , < pre >

White Space and Flow

<h1> Basic Text Formatting </h1>
<p> This section is going to address the way in which you mark up text.
Almost every document you create will contain some form of text, so this
will be a very important section. </p>
<h2> Whitespace and Flow </h2>
<p> Before you start to mark up your text, it is best to understand what
XHTML does when it comes across spaces and how browsers treat long sentences
and paragraphs of text. </p>
<h2> Creating Headings Using hn Elements </h2>
<p> No matter what sort of document you are creating, most documents have
headings in some form or other... </p>

Live Preview

---

Paragraph

<h1> A Short Story : The Golden Egg </h2>

<p><b>This Short Story The Golden Egg is quite interesting to all the people. Enjoy reading this story.</b></p>



<p><i>Haria, a poor barber lived alone in his small hut. He was dedicated to his work. And whatever he earns was enough to fulfill his needs.</i></p>



<p><em>One evening, after returning from work, Haria was hungry. “What shall I cook tonight?" he thought. Just then he heard a hen clucking outside his hut. "That hen would make a great feast for me," thought Haria and prepared to catch the hen. </em> </p>



<p><u>With a little effort he was able to catch the hen. As he was about to kill the hen, it squeaked, "Please do not kill me, O kind man! I will help you." Haria stopped. Though he was surprised that the hen spoke, he asked, "How can you help me?"</u></p>



<p><mark>If you spare my life, I will lay a golden egg everyday for you," said the hen. Haria’s eyes got widened in delight. Haria was surprised to hear this promise. “A golden egg! That too everyday! But why should I believe you? You might be lying," said Haria. “If I do not lay a golden egg tomorrow, you can kill me," said the hen. After this promise, Haria spared the hen and waited for the next day. </mark> </p>



<p><strong>The next morning, Haria found a golden egg lying outside his hut and the hen sitting beside it. “It is true! You really can lay a golden egg!" exclaimed Haria with great delight. He did not reveal this incident to any one, fearing that others would catch the hen.</strong> </p>



<p style="color:blue">From that day onwards, the hen would lay a golden egg everyday. In return, Haria took good care of the hen. Very soon, Haria became rich.  </p>



<p style="font-size:20px">But he became greedy. He thought, "If I cut open the hen’s stomach, I can get out all the golden eggs at once. I do not have to wait for the hen to lay the golden eggs one by one."  </p>



<p style="font-size:10px">That night, he brought the hen to the interior portion of his house and killed the hen. But to his dismay, he found no golden eggs. Not even one. </p> 



<p>"What have I done? My greed had made me kill the hen, "he wailed. But it was too late. </p>

Live Preview

---

The align Attribute

Value	Meaning
left	The heading is displayed to the left of the browser window (or other containing element if it is nested within another element). This is the default value if the align attribute is not used.
center	The heading is displayed in the center of the browser window (or other containing element if it is nested within another element).
right	The heading is displayed to the right of the browser window (or other containing element if it is nested within another element).

Here is an example of using the deprecated align attribute

<h1 align="left"> Left-Aligned Heading </h1>
<p> This heading uses the align attribute with a value of left. </p>
<h1 align="center"> Centered Heading </h1>
<p> This heading uses the align attribute with a value of center. </p>
<h1 align="right"> Right-Aligned Heading </h1>
<p> This heading uses the align attribute with a value of right. </p>

Live Preview

---

Creating Line Breaks Using the <br> Element

<p>  When you want to start a new line you can use the line break element.
So, the next <br> word will appear on a new line.  </p>

Paragraph one <br>  
Paragraph two <br>
Paragraph three <br> 

Creating Preformatted Text Using the <pre> Element

Sometimes you want your text to follow the exact format of how it is written in the HTML document — you don ’ t want the text to wrap onto a new line when it reaches the edge of the browser; you don ’ t want it to ignore multiple spaces; and you want the line breaks where you put them.

 
void main()
{

int a, b, c;
a=2;
b=3;

c=a+b;
printf("%d",c)


}
 

Any text between the opening <pre> tag and the closing <pre> tag will preserve the formatting of the source document. You should be aware, however, that most browsers would display this text in a monospaced font by default. (Courier is an example of a monospaced font, because each letter of the alphabet takes up the same width. In non - monospaced fonts, an i is usually narrower than an m .)

Live Preview

---

---