HTML - Formatting

HTML Formatting is the way of representing textual context on the website in a better way, so the user can easily navigate through your website. HTML Formatting are done by using HTML physical and logical tags. Here in this article we will focus on the text appearance with HTML formatting.

  • Physical Tag: These tags are used to give the visual appearance to the the textual content.
  • Logical Tag: These tags are used to give the logical & semantic meaning to the the textual content. There are a few logical tags which are used for screen readers, but the impact of those tags are visible on the bowsers.

What is the use of html formatting?

Without formatting nothing looks good or soothing to our eyes. But HTML Formatting is not only for soothing to the eye or make textual content attarctive. There are few reason to do the HTML Formatting.

  • Apperacne of any text can gives us the idea that how improtant is that keyword is, like if we bold some keyword that indicate the importance of that keyword. Same goes with italic, underline each one of them carry an impotant meaning as well.
  • Formatting helps search engines to crawl the website, in a structure form things are scanbale to the readers as well as seacrh engines.

HTML Formatting Tags

We can use CSS to do the HTML formatting, but when HTML is providing the feature to format the texual content, then why not to use them.

Tag Description
<b> This physical tag is used to make the text bold.
<strong> This logical tag is used to make the text impotant, but this also make the text bold visualy.
<i> This physical tag is used to make the text italic.
<em> This logical tag is used to make the text italic.
<big> This physical tag is used to make the bigger size text. It is not supported in HTML5.
<small> This physical tag is used to make the smaller size text.
<sup> This tag is used to make the text superscript text(Slightly above the normal line).
<sub> This tag is used to make the text subscript text(Slightly below the normal line).
<ins> This tag is used to indicate that the content is added.
<del> This tag is used to indicate that the content is deleted.
<u> This tag is used to put an underline on the text.
<strike> This tag is use to cut the lines or strike on text. It is not supported in HTML5.
<mark> This tag is used to mark the keyword or sentence in yellow color(background).
<tt> This tag is used to make the text appeared in teletype, and it is not supported in HTML5.

HTML Formatting Tags with Example

 

We have covered examples of each tags that can be used to do formatting in HTML. All the examples are described bellow with the output.

Bold Text

HTML <b> tag is used for making the text bold, there is no logical aspect of this tag only used for visual impact.

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Output: 
The following word uses a bold typeface.

Strong Text

HTML <strong> tag is used for making the text strong that has more importance and the text inside it is typically displayed in the bold. 

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
Output 
The following word uses a strong typeface.

Italic Text

Any content that is enclosed within <i>...</i> element is displayed in italicized.

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
Output: 
The following word uses a italicized typeface.

Emphasized Text

It gives semantic meaning to the text contained within it and renders it in italics on the browser.

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
Output: 
The following word uses a emphasized typeface.

Big Text

Any content which is enclosed within <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.

<!DOCTYPE html>
<html>
<head>
   <title>Larger Text Example</title>
</head>
<body>
   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>
</body>
</html>
Output: 
Hello Welcome to Tutorialspoint.

Small Text

The content which is enclosed within <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.

<!DOCTYPE html>
<html>
<head>
   <title>Smaller Text Example</title>
</head>
<body>
   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>
</body>
</html>
Output: 
Hello Welcome to Tutorialspoint.

Superscript Text

Any content enclosed within <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed at half the height of the surrounding characters, giving it a smaller and slightly raised appearance compared to the rest of the text.

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>
Output: 
The following word uses a superscript typeface.

Subscript Text

Any content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it and is displayed half a character's height beneath the other characters. It is typically used for writing things like chemical formulas, where certain characters need to be displayed below the regular text line.

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>
Output: 
The following word uses a subscript typeface.

Inserted Text

Any content that is enclosed within <ins>...</ins> element is displayed as inserted text.

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Output: 
I want to drink cola wine

Deleted Text

Content that is enclosed within <del>...</del> element, is displayed as deleted text.

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>
Output: 
Hello welcome to Madras Chennai

Underlined Text

Any content enclosed within <u>...</u> element, is displayed with underline.

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
Output: 
The following word uses a underlined typeface.

Strike Text

Content that is enclosed within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text.

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
Output: 
The following word uses a strikethrough typeface.

Marked Text

HTML <mark> tag is used to mark or highlight text that is important for notation purposes.

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>
Output: 
The following word uses a marked typeface.

Monospaced Font

Any content enclosed within <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

<!DOCTYPE html>
<html>
<head>
   <title>Monospaced Font Example</title>
</head>
<body>
   <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
Output: 
The following word uses a monospaced typeface.
Advertisements