- 3 years ago
- Shahzad Gujjar
- 2,106 Views
-
3
This tutorial will teach you how to use HTML tags to format text on web pages.
Formatting Text with HTML
You can use the tag <b> to make the text bold, the tag <i> to make the text italic, the tag <mark> to highlight the text, the tag <code> to display a fragment of computer code, the tags <ins> and <del> to mark editorial insertions and deletions, and so on to make some text on your web pages appear differently than normal text.
The most widely used formatting tags are demonstrated in the example below. Let’s put this to the test to see how these tags work in practice:
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
The <strong> tag is usually rendered as <b> in the browser by default, while the <em> tag is typically rendered as <i>. There is, however, a distinction in the interpretation of these tags.
Difference between <strong> and <b> tag
By default, both the <strong> and <b> tags make the enclosed text bold, but the strong> tag shows that the contents are important, whereas the b> tag simply draws the reader’s attention without conveying any special meaning.
<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>
Difference between <em> and <i> tag
Similarly, both the <em> and the <i> tags make the enclosed text in italic type by default, but the <em> tag shows that its contents have emphasized focus compared to surrounding text, while the <i> tag is used to mark up text that is set off from the usual text for readability purposes, such as a technical word, an idiomatic sentence from another language, a thought, and so on.
<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>
NOTE: When the content of your page requires that certain words or phrases have a lot of emphasis or relevance, use the <em> and <strong> tags. Also, the <b> and <i> tags have been redefined in HTML5; previously, they had no semantic meaning.
Formatting Quotations
With the HTML <blockquote> tag, you can conveniently format quotation blocks from other sources.
Blockquotes are typically formatted with indented left and right margins and a little extra space above and below. To see how it works, consider the following scenario:
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>
NOTE: The cite tag is used to indicate a creative work reference. It must contain the title of the work, the author’s name (individual or organization), or a URL link.
The HTML q> tag can be used for short inline quotes. Inline quotations are shown in most browsers by enclosing the text in quotation marks. for example:
<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>
Showing Abbreviations
A shortening of a word, sentence, or name is called an abbreviation.
The abbreviation can be indicated using the abbr> tag. When the mouse cursor has hovered over the element, the title attribute is used to provide the complete expansion of the abbreviation, which is displayed as a tooltip by browsers. for example:
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>
Marking Contact Addresses
Street or postal addresses are frequently included on web pages. The HTML tag address> is used to denote physical and/or digital contact information for a person, group of people or organization.
This tag is best used to display contact information about the document itself, such as the author of the article. An address block is usually displayed in italic in most browsers. for example:
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>
For a complete list of HTML formatting tags, see the HTML reference section.
- 3 years ago
- Shahzad Gujjar
- 2,106 Views
-
3
