What is Text Formatting ?
While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply speciﬁc text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.
Section 5.1: Highlighting
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.
<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>
A common standard formatting is black text on a yellow background, but this can be changed with CSS.
Section 5.2: Bold, Italic, and Underline
To bold text, use the <strong>or <b>tags:
<strong>Bold Text Here</strong>
<b>Bold Text Here</b>
What’s the diﬀerence? 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 diﬀerently 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 diﬀerent tone of voice to convey that the text is important in some way.
To italicize text, use the <em>or <i>tags:
<em>Italicized Text Here</em>
<em>Italicized Text Here</em>
<i>Italicized Text Here</i>
What’s the diﬀerence? 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 oﬀ from the normal text around it.
For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via
<em>: “Would you just submit the edit already?”
But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use
<i>: “I was forced to read Romeo and Juliet in high school.
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.
<p>This paragraph contains some <u>mispelled</u> text.</p>
Section 5.3: Abbreviation
To mark some expression as an abbreviation, use <abbr>tag:
<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.
Section 5.4: Inserted, Deleted, or Stricken
To mark text as inserted, use the <ins>tag:
To mark text as deleted, use the <del>tag:
To strike through text, use the <s>tag:
<s>Struck-through text here</s>
Section 5.5: Superscript and Subscript
To oﬀset text either upward or downward you can use the tags <sup>and <sub>. To create superscript:
To create subscript: