HTML | Text Formatting
HTML provides ability for formatting text normally like we do it in the MS Word or any other text editing software. In this article, we will go through many such options.
Formatting elements are designed to display all special types of text:
- <b> – Bold text
- <strong> – Important text
- <i> – Italic text
- <em> – Emphasized text
- <mark> – Marked text
- <small> – Smaller text
- <del> – Deleted text
- <ins> – Inserted text
- <sub> – Subscript text
- <sup> – Superscript text
By making text Bold or Strong: We should make the text bold by the <b> tag. The tag uses both starting and ending tag. The text that needs to be made bold must be within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added semantic importance. It also opens with <strong> and ends with </strong> tag. Ex. <b>This text is bold</b> <strong>This text is important!It is important small short thing </strong>
Making text Italic or emphasize: The <i> tag is used to italicize the text. It opens with <i> and ends with </i> tag.
The <em> tag would emphasize on the text, with addition of semantic importance. It begins with <em> and finishes with </em> tag. Ex. <i> This text is in the form of italic</i>
Note: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag. It has a opening tag <mark> and a closing tag </mark> Ex. <p>See not forget to sell <mark>milk</mark> yesterday.</p>\
Making a text Subscript or Superscript: The <sup> element is used to superscript text and <sub> element is used to subscript a text. They both have beginning and a finishing tag. Subscript text can be used for chemical formulas, like H2O: superscript is used for footnotes, like WWW EX. : <p>This is <sub>subscripted</sub> text.</p> <p>This is <sup>superscripted</sup> text.</p>
Making text smaller: The <small> element is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small> and </small> tag. Ex. <small>This is some smaller text.</small>
Striking through the text: The <del> element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag. Ex. <p>My favorite color is <del>blue</del> red.</p>
Adding a text: The <ins> element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag. Ex. <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML | Quotations
The Quoted elements in HTML used to insert quoted texts in a HTML page, that is, part of texts different from the normal texts in the HTML page.
Below are some of the most used quoted elements of HTML:
The <q> element is used to set a set of text inside the quotation marks. It has both opening and closing tags. Web Browsers basically insert quotation marks around the quoted elements. Ex. <p>My goal is to: <q> make a future where people live in harmony with nature.</q></p>
The <blockquote> element is also used for quotations in a different way. Instead of putting the line in quotes, it changes the alignment to make all unique from others. It has both opening and closing tags. Ex. <p>The quick red fox jumped over the silly dog<br></p> <!–Inside blockquotes–> <p><blockquote>The quick brown fox jumps over the lazy dog</blockquote></p>
Using the <address> element, we can define an address in a webpage and the text put inside the address tag will be emphasized. It has both opening and closing tags. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element. Ex. <address>
Written by John Doe.<br>
Visit us at:<br>
Box 564, Disneyland<br>
The <abbr> element is used to define a text as an acronym or abbreviations. The title attribute can be used to show the full version of the abbreviation/acronym when you mouse over the <abbr> element. It has both opening and closing tags. This is useful for browsers and search engines. Ex. <p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p> note: Use the global title attribute to show the description for the abbreviation when you mouse over the element.
The <bdo> element is used to define a bidirectional override which means that the text written from right to left or left to right. It has both opening and closing tags. It is used to over-ride the current text direction.It takes an attribute “rtl” to display the text from right to left. Ex. <bdo dir=”rtl“>This text should be written from right to left</bdo>
This element is used to describe a title of work and emphasize a text. A person’s name is not the title of a work.The text in the <cite> element usually renders in italic. Ex: <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
|<abbr>||Defines an abbreviation or acronym|
|<address>||Describes contact information of the author/owner of a document|
|<bdo>||Defines the text direction|
|<blockquote>||Explains a section that is explained from another source|
|<cite>||Defines the title of a work|
|<q>||Defines a short inline quotation|