What are the different ways to represent text in HTML?

There are so many ways to represent text in HTML.

The HTML specs specify 29 different ways to mark up text.

Here are they:

1. You can hyperlink to a text or even a section of text or a picture using <a> element

Example:

Hyperlinks: <a href="https://fullstackdeveloper.gur">The Full Stack Developer </a>

When user clicks on the words “The Full Stack Developer” they will be taken to my blog home page.

2. You can emphasize text using <em> element

Example:

Emphasis: I love <em>programming</em>

If some one were to read out the above sentence they need to stress the word programming.

Browsers render them italicized . The element <i> also italicizes text but convey a different meaning. <em> stresses a text and give it added meaning

3. You can make a text important using <strong> element

Example:

 Importance: I am <strong>full stack developer </strong>

The <strong> element is almost similar to <em> element but carries more weight.

4. You can make a text small using <small> element

Example:

Small: It rained today <small>(Isn't that beautiful?)</small>

5. You can strike off inaccurate text using <s> element

Example:

Inaccurate: The price is now <s> Rs.100 </s> Rs.75!

Output for the above 5 tags:

6. You can cite a title of a book or a movie or a poem etc using <cite> element:

Example:

Cite: My favourite movie is <cite>Sillu Karupatti </cite>

7.You can quote someone using the <q> element:

Example:

Quote: Kohli said <q> It was a good wicket to bat </q>

8. You can represent something which is going to be defined using <dfn> element

Example:

Define: <dfn> Full Stack Development </dfn> means end to end programming using necessary technologies 

9. You can represent the abbreviation of a sentence using <abbr> element.

Example:

 Abbreviate: <abbr title="Hyper Text Markup Language">HTML</abbr> is an important technology to learn for web developers 

On hovering over the text HTML , browsers will show the entire title.

10, 11, and 12. You can represent japanese and east asian languages using <ruby> <rp> and <rt> elements

Example :

 East Asian Language: <ruby> Ruby <rp><rt>This is Ruby</rt></rp></ruby>

Output for the above few tags:

13. You can represent machine readable content along with the data to be displayed by the browser using <data> element

Example:

Machine readable: The age of Kavin is <data value="8"> eight </data>

In the above case the value 8 can be passed to the server for server side processing instead of the display friendly value “eight”. This eases server side programming.

14. You can represent time using <time> element.

Example:

Time: We have a meeting tomorrow at 9 pm <time datetime="2020-10-01T09:00">9 pm</time>

Here the actual value of the time that can be understood by the machine is represented by datetime attribute , this can be then sent to the server for processing.

15. You can represent computer code using <code> element.

Example:

<code>System.out.println("Hello World");</code>

16. You can represent variables using <var> element.

Example:

Variable: If the value of <var> x </var> is 4 , what is the square root of <var> x </var>

17. You can represent computer output through <samp> element:

Example:

Variable: If the value of <var> x </var> is 4 , what is the square root of <var> x </var>

Output of the above few tags:

18. You can represent keyboard input using <kbd> element:

Example:

User input: Press <kbd>F1</kbd> to continue

19. You can represent subscripts using <sub> element:

Example:

Subscripts: The chemical formula for water is H<sub>2</sub>O

20. You can represent superscripts using <sup> element:

Example:

Superscripts: 2<sup>2</sup> is four

21. You can italicize text using <i> element:

Example:

Italicize: The day started well but then <i>the devil appeared </i> 

Again this element is often overused but the HTML specs advises to use this only for the following:

“The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts” (quoted from the specs)

22. You can bring attention to a particular text using <b> element:

Example:

 Bold: Take two spoons of <b> sugar </b> and put in the <b> coffee </b> 

Again the HTML spec advises to use this as a last resort. Quoting it:

“The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.”

Output for the above few tags:

23. You can underline text using <u> element:

Example:

Underline: Raghu is a full <u>stck</u> developer

In the above case it is used to highlight a spelling mistake.

Again the HTML specs advise to use it as a last resort. Quoting it:

“In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for technical terms, taxonomic designation, transliteration, a thought, or for labeling ship names in Western texts, the i element should be used.”

24. You can highlight a piece of text using <mark> element:

Example:

Highlight: At the time of the murder , Mark was in his <mark> office </mark>

25 &26. You can represent Arabic text using <bdi> and <bdo> elements .

Arabic text are written from right to left. So browsers need to interpret them differently . They use Unicode bidirectional algorithm for the same. To instruct browser to apply that algorithm we can use <bdi> element.

Here is an example using <bdi> element quoted from HTML specs:

<ul>
 <li>User jcranmer: 12 posts.
 <li>User hober: 5 posts.
 <li>User 3 إيان posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

Notice the arabic text above. If you remove <bdi> element from the above text , below gets displayed:

The number 3 goes in front of the arabic text , to avoid this you need to use <bdi> element.

The element <bdo> is used to override the bidirectional formatting algorithm.

Here is a sample code which reverses the text:

Reverse: <bdo dir="rtl">Can you read this ?</bdo>

The output:

27. You can use <span> element for generic purposes like applying CSS.

Span element does not represent anything in specific and is usually used for styling text.

Example:

<span class="cssClassName"> Hello World </span>

28. You can use <br> element to provide line breaks.

Example:

<p> Street no 3 <br> Chennai City <br> Pin : 600001 </p>

You can also use CSS styling to show styled lines by applying the styling to <br> tag . By default it prints a newline.

29. You can break words using the <wbr> element.

When you resize browsers and if there is a long text on the page , browsers will split the text based on spaces between the words.

For example, the below sentence

“Once upon a time , there lived a king named Michael who was handsome , funny and had a long brown hair which had magical powers”

got displayed like this:

when I resized by browser. The browser split the sentence based on the space after the word “was”. But if I remove the spaces , the browser displays the sentence like this:

It didn’t split the sentence.

For some reason if you have a long text which includes words not separated by spaces and you want the browser to break the sentence at an appropriate place , you can use word breaks .

Here is the updated code :

<p>Onceuponatime,therelivedakingnamedMichaelwhowashandsome,funny<wbr>and<wbr>hadalongbrownhairwhichhadmagicalpowers</p>

It includes word breaks at two places and browser will decide which one to use based on the resized size.

Here is the output:

That’s it!

Choosing the right element for representing text content has advantages like :

• The code becomes more readable and maintainable.
• It better enables blind people to hear HTML content read by screen readers.
• It is easier to apply styling using CSS.