HTML is rich with formatting tags. These tags specify special meaning to text and also alter their formatting and layout without using any CSS. These tags can help you make text appear bold, italic or underlined. If you've ever used a Word processor like MS Word or Wordpad, you'd find a lot of similar formatting options with these tags.
Most of these elements are inline, meaning they do not occupy the entire horizontal space like block elements do. The following example demonstrates the formatting tags in action.
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>A <b>bold</b> text</p>
<p>An <i>italicized</i> text</p>
<p>An <u>underlined</u> text</p>
<p>A <sub>subscript</sub> and a <sup>superscript</sup></p> <p>An <strong>important text</strong></p>
<p>An <em>emphasized text</em></p>
<p>This is a <mark>highlighted text</mark></p>
<p>The is a <del>deleted text</del></p>
<p>The is an <ins>inserted text</ins></p>
<p>This is a <code>computer code</code></p>
<p>This is a <small>small text</small></p>
</body>
</html>A proper use of HTML formatting tags enhances readability of the content and makes it easier for users to understand and consume the details. Also, a consistent formatting makes the document feel more professional thus, ultimately enhancing overall user experience.
Formatting Guidelines
As you are now famililar with the HTML formatting tags and how to use them. It is also equally well important for you to know, when to use them and so, some of these guideliens have been listed here to help you understand the appropriate context and usecase for using these formatting tags.
The <b> Tag
The <b> tag makes the text wrapped between it appear bold and stand out from rest of the content. It just makes the text bold without any extra importance.
- When you want to make font bold in order to make it stand out from rest of text.
The <i> Tag
The <i> tag makes the text wrapped between it appear italic adding contrast among the surrounded text content. It just makes the text appear italicized without any extra semantic meaning.
- When you want to draw attention to particular part of text
The <u> Tag
The <u> tag makes the text wrapped between it appear underlined and stand out from rest of the content. The underline signifies that the text is of high importance.
- When you want to clearly highlight the importance of a piece of text.
The <sub> & <sup> Tag
The <sub> or the subscript tag and the <sup> or the superscript makes a text appear half a character below the line and above the line respectively. For eg. 1 <sup>st</sup>produces following output 1st and Fe <sub>55.845</sub> Fe55.845
- These tags are suitable for writing ordinal numbers, chemical formulas and simple mathematical equations involving powers or exponents.
The <strong> Tag
The <strong> tag is used to make text appear bold but unlike <b> tag, it semantically emphasizes on the importance of the text.
- This tag can be used when you want to define text with strong importance.
The <em> Tag
The <em> tag makes text appear italic but unlike <i> tag, it semantically emphasizes on the importance of the text.
- This tag can be used when you want to define some text with emphasis.
The <mark> Tag
The <mark> tag is used to highlight a part of text.
- The tag can be used when you want to highlight a piece of text.
The <del> Tag
The <del> tag defines text that has been deleted from a document. Web Browsers usually strike a line through the deleted text.
- This tag can be used when want to denote a user that certain peice of text is no longer valid or deleted. For eg.
This peice of text was deleted
The <ins> Tag
The <ins> tag defines a text that has been inserted into a document. Web Browsers usually underline the inserted text.
- This tag can be used when you want to denote a piece of newly inserted text. For ex. This part of the text has been updated.
The <code> Tag
The <code> tag is used to display computer code, the wrapped text is usually displayed in a monospaced font.
- Use it when you need to display source code. For eg.
var i = 11;
The <small> Tag
The <small> tag makes font size smaller than that of the parent tag.
- Use it when you need to display smaller text. For eg. Small text
The <abbr> Tag
An abbreviation is a shortened form of a word or a phrase. For eg. HTML, WWW etc. The <abbr> tag along with the title attribute is used to define an abbreviation. A user when hovers over an abbreviation, the content within the title attribute is displayed instantly.
- Use it when you need to define an abbreviations, take a look below:
<p>The <abbr title="Hypertext Markup Language">HTML</abbr> defines the structure of a web page.</p>Additional Formatting Tags
Apart from these inline tags listed above, there are some block level formatting tags as well. These tags are used for formatting text at the block level. Take a look below:
Quotations
The <blockquote> tag specifies a section that is quoted from another source. It is visually rendered as a text with indentation separated from rest of the content.
<blockquote>
<p>Because you are alive, everything is possible. </p>
<cite>—Thich Nhat Hanh</cite>
</blockquote>
The <cite> tag is used for the reference the text is quoted from. It defines the title of a creative work.
Short Inline Quotations
You can also define an inline short quotations using the <q> tag. Web Browsers usually display the short inline quotes within quotation marks.
<q>Do what you can, with what you have, where you are. - Theodore Roosevelt</q>Address
HTML has a dedicated tag for denoting addresses in an HTML document. The <address> tag can be used to define an address. An <address> may contain a physical address as well as emails, URLs, social media links, phone numbers etc. Web Browsers by default render the address content in italics.
<address>
Written by <a href="mailto:[email protected]">Aryan Kashyap</a>.<br>
Visit us at:<br>
Metabust.com<br>
Jharkhand, India
</address>
Notification
A second ago