Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

What is text formatting in HTML?

For general web development questions using HTML and CSS.
Post Reply
admin
Site Admin
Posts: 45

What is text formatting in HTML?

Post by admin » Sat Oct 19, 2019 7:47 pm

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
The <mark>The <mark> 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.

Code: Select all

<p>Here is some content from an article that contains the <mark>searched query</mark>
that we are looking for. Highlighting the text will make it easier for the user to
find what they are looking for.</p>

Output
Image

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 <strong> or <b> tags:

Code: Select all

<strong>Bold Text Here</strong>
or

Code: Select all

<b>Bold Text Here</b>
What’s the difference? Semantics. <strong> is used to indicate that the text is fundamentally or semantically
important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.

If you were to use <b> a text-to-speech program would not say the word(s) any differently than any of the other
words around it - you are simply drawing attention to them without adding any additional importance. By using <strong>, though, the same program would want to speak those word(s) with a different tone of voice to convey
that the text is important in some way.

Italic Text
To italicize text, use the <em> or <i> tags:

Code: Select all

<em>Italicized Text Here</em>
or

Code: Select all

<i>Italicized Text Here</i>
What’s the difference?
Semantics. <em> is used to indicate that the text should have extra emphasis that should be
stressed, while <i> simply represents text which should be set off from the normal text around it.

Underlined Text
While the <u> 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.

Code: Select all

<p>This paragraph contains some <u>mispelled</u> text.</p>
Abbreviation
To mark some expression as an abbreviation, use <abbr> tag:

Code: Select all

<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
If present, the title attribute is used to present the full description of such abbreviation

Inserted, Deleted, or Stricken
To mark text as inserted, use the <ins> tag:

Code: Select all

<ins>New Text</ins>
To mark text as deleted, use the <del> tag:

Code: Select all

<del>Deleted Text</del>
To strike through text, use the <s> tag:

Code: Select all

<s>Struck-through text here</s>
Superscript and Subscript
To offset text either upward or downward you can use the tags <sup> and <sub>.
To create superscript:

Code: Select all

<sup>superscript here</sup>
To create subscript:

Code: Select all

<sub>subscript here</sub>

Post Reply