July 18, 2012

Structuring Texts in HTML


We have already seen how to insert texts into HTML, and now we will see how to structure these texts little more to our use. These ways depends on the needs that we are going to use in our site to make it look neat.

1.Line Breaks

Using <p> tag will start texts in the new line, but whatif we need to make a line break with more than two lines or more? And that's why we use line break <br /> tag.


<p>This is a paragraph.</p>
<p>This is a paragraph, but the next element will be a line break.</p>
<br />
<br />
<p>Two line breaks produced two lines of space.</p>

This above code contains two br tags that will make two line spaces.


2.Quotations

Sometimes, we need to quote important words in our texts, and there are two possible HTML tags called <blockquote> and <q> tags.


<p><q>I always believe everything anyone tells me and I'm always disappointed,</q> 
his companion says.</p>

<blockquote>A warrior trusts other people because, first and foremost, 
he trusts himself.</blockquote>

<p>It's important to trust people; a warrior of light is not afraid of disappointments.</p>


3.Abbreviations and Acronyms

When you use 'LASER' in your texts, users who do not know what is a LASER?,will be puzzled. This can be avoided by giving a hint to the users by the acronym and abbreviation tags.

An acronym always starts with the first letters of each word, like HTML. But, abbreviations doesn't have to be, like LASER.


<p><abbr title="Light Amplified by the Stimulated Emission of Radiation">LASER</abbr></p>

<p><acronym title="Hyper Text Markup Language">HTML</acronym></p>

Now, move your mouse pointer to the below words, and experience abbreviation and acronym tags.

LASER

HTML


4.Preformatted Text

HTML do not allow additional spaces within texts, which means tab spaces or line spaces does not include here and it will be noted as a single letter space. Sometimes, we need to enter text in a new line without any additional spaces or we need to make tab spaces.

Preformatted texts are much useful when we need to enter texts in new line or with tab spaces.


<pre>
''Imagination, which in truth
Is but another name for absolute power
And clearest insight, amplitude of mind,
And reason, in her most exalted mood.'
</pre>


5.Insertions and Deletions

Many times we usually have to make differences and denote what is right from the wrong. At that time, we can also indicate what;s wrong and then move to the right text. In HTML, a text can be marked wrong by a strikethrough <del> tag and also denote the right texts with an underline by the <ins> tag.


<p>The color <del>Yellow</del> will be deleted and the color <ins>Blue</ins> will be 
inserted.</p>


6.Bidirectional and Multilanguage Text

For languages that read from right to left like Arabic or Hebrew, this is a very useful and impressive option.

<bdo dir="rtl">smug desserts</bdo>


No comments:

Post a Comment