HTML Text Formatting -

HTML Text Formatting

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.

Highlighting (Mark Text)

The element is new in HTML5 and is used to mark or highlight text in a document “due to its relevance in another context”.

The most common example would be in the results of a search were the user has entered a search query and results are shown highlighting the desired query.

Example :

Output:

A common standard formatting is black text on a yellow background, but this can be changed with CSS.

Bold, Italic, and Underline

Bold Text

To bold text, use the or tags:

Example :

Output :

What’s the difference or tag ?

The tag is used to indicate that the text is of strong importance or emphasis. It conveys meaning to both the browser and the user, suggesting that the content is significant. The tag is used purely for visual styling and does not convey any additional meaning about the importance of the text. It simply makes the text bold without implying any significance.

Italic Text

To italicize text, use the or tags:

Example :

Output :

What’s the difference or tag ?

The tag is used to emphasize text. It indicates that the text has a particular importance or stress in the context of the content. This semantic meaning is recognized by browsers and assistive technologies. The tag is used for text that is set off from the normal text, often for stylistic purposes. It does not convey any additional meaning about the importance of the text. It is typically used for foreign words, technical terms, or titles of works.

Underlined Text

While the element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 – to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.

Example :

Output :

Abbreviation

To mark some expression as an abbreviation, use <abbr> tag:

Example :

Output :

If present, the title attribute is used to present the full description of such abbreviation.

Inserted, Deleted, or Stricken

Inserted Text :

The <ins> tag indicates text that has been added to a document. Browsers typically display inserted text underlined by default. This tag is useful for tracking changes or showing new content in a revised document.

Deleted Text:

The <del> tag signifies text that has been removed from a document. By default, browsers render text within the <del> tag with a strikethrough effect. This tag is crucial for demonstrating revisions and showing content that has been intentionally taken out.

Stricken Text:

The <s> tag is used to indicate text that is no longer accurate or relevant, but has not necessarily been “deleted” in the sense of being removed from a document’s history. It also typically displays with a strikethrough. While <s> and <del> both render a strikethrough, <del> carries the semantic meaning of a removal from the document, while <s> indicates content that is simply incorrect or outdated.

Example :

Output :

Superscript and Subscript

To offset text either upward or downward you can use the tags and .

Example :

Output :

Smaller Text:

The tag is used to render text in a smaller font size than its surrounding content. This is commonly used for side comments, disclaimers, copyright information, or other content that is less central to the main text.

Example :