Historically, web pages were mainly used for displaying text, so HTML includes a variety of text formatting tags.

<div>

The <div> tag is a generic container that represents a division or section in a document. It has no semantic meaning, so it’s often used as a block-level element when no other suitable tag is available.
Its most common use is to provide CSS hooks for styling purposes. In the past, it was common to see deeply nested <div> elements for layout:

1
2
3
4
5
6
7
<div class="main">
  <div class="article">
    <div class="title">
      <h1>Article Title</h1>
    </div>
  </div>
</div>

However, this approach can be cumbersome due to the lack of semantics. HTML5 introduced semantic elements to improve this:

1
2
3
4
5
6
7
<main>
  <article>
    <header>
      <h1>Article Title</h1>
    </header>
  </article>
</main>

While <div> is a non-semantic block-level element, it can be used to group images and text, like in a warning section:

1
2
3
4
<div>
  <img src="warning.jpg" alt="Warning">
  <p>Be careful</p>
</div>

Use <div> when you need to group elements for styling, but prefer semantic tags (like <article>, <section>, <aside>, <nav>, etc.) whenever possible for better readability and structure.

<p>

The <p> tag is a block-level element that represents a paragraph. It can enclose any content meant to be displayed as a paragraph, including text, images, or form elements.
For example:

1
<p>Hello world</p>

This code creates a simple paragraph.

<span>

The <span> tag is an inline element with no semantic meaning, meaning it does not cause line breaks. It’s commonly used as a hook for CSS styling. You can use <span> to apply styles to specific inline content.
For example:

1
<p>This is a <span>important</span> sentence.</p>

In this code, the <span> tag is used to emphasize the word “important” within the sentence.

<br>

The <br> tag creates a line break on a webpage. It is a self-closing tag and does not have a closing counterpart.
For example:

1
hello<br>world

In this code, the browser renders “hello” and “world” on separate lines.
The <br> tag is useful for breaking lines in poems and addresses:

1
2
3
4
5
6
<p>
  To see a world in a grain of sand,<br>
  And a heaven in a wild fllower,<br>
  Hold infinity in the palm of your hand,<br>
  And eternity in an hour.
</p>

Without the <br> tags, this text would appear on a single line.
However, for controlling spacing between block-level elements, such as paragraphs, it is better to use CSS rather than multiple <br> tags:

1
2
3
4
<p>the first paragraph</p>
<br>
<br>
<p>the second paragraph</p>

In this example, using <br> to create space between paragraphs is not ideal. Instead, CSS should be used to manage the spacing.

The <wbr> tag, similar to <br>, indicates optional line break points. If the line width is sufficient, no break occurs; if the width is not enough, a break happens at the <wbr> point. This is particularly useful for long words or URLs to prevent improper line breaks:

1
2
3
<p>
  Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

This code shows a long German word, and the <wbr> tags suggest where line breaks can occur if necessary.

<hr>

The <hr> tag is used to separate two different topics within an article, and it renders as a horizontal line in browsers. This tag is self-closing and does not require a closing tag.

1
2
3
<p>First topic</p>
<hr>
<p>Second topic</p>

In the example above, a horizontal line appears between the two paragraphs.
This tag is considered somewhat outdated. It’s recommended to use <section> to divide topics and employ CSS if you want to achieve a horizontal line effect.

<pre>

The <pre> tag is a block-level element used to preserve formatting, meaning browsers keep the original line breaks and spaces within the tag. By default, the content is displayed in a monospaced font.

1
2
3
<pre>hello

   world</pre>

In this example, line breaks and multiple spaces are preserved by the <pre> tag, and the browser displays them exactly as written.
Note that HTML tags inside <pre> still function. The <pre> tag retains spaces and line breaks but does not preserve HTML tags.

1
<pre><strong>hello world</strong></pre>

In this case, the content within <pre> will be displayed with bold text.

<strong>, <b>

The <strong> element is an inline element that indicates its content is of great importance and should be highlighted. Browsers display this content in bold.

1
<p>The meeting time is <strong>2:00 PM</strong>.</p>

The <b> element, while similar to <strong>, also indicates that its content needs to be emphasized and is displayed in bold by browsers. However, <b> is a stylistic element without semantic meaning, a remnant of older practices. It is a shorthand for “Boldface.” 

1
<p>The meeting time is <b>2:00 PM</b>.</p>

Due to its lack of semantic value and the principle of separating content from style, it’s recommended to use the <strong> tag instead.

<em>, <i>

The <em> tag is an inline element used to emphasize text. Browsers typically display the content within <em> in italics.

1
<p>We have <em>already</em> discussed this matter.</p>

While browsers usually render <em> text in italics, this is not always guaranteed. It’s a good practice to use CSS to explicitly define the styling for this tag.
The <i> tag is similar to <em>, also used to indicate text with a different style, typically rendered in italics. It stands for “Italic.”

1
<p>I wonder, is this <i>really</i> true?</p>

The <i> tag is more of a presentational element and lacks strong semantic meaning. It’s generally recommended to use <em> for emphasis instead.

<sub>, <sup>, <var>

The <sub> tag turns content into subscript, while the <sup> tag turns content into superscript. Both are inline elements, commonly used in mathematical formulas, chemical formulas, and so on.

1
<p>Water is represented as H<sub>2</sub>O.</p>

The <var> tag denotes a variable in code or mathematical formulas.

1
2
3
<p>The Pythagorean theorem is expressed as
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
.</p>

<u>, <s>

The <u> tag is an inline element used to provide a note or indicate a potential issue, primarily for marking spelling errors. By default, browsers render the content with an underline.

1
<p>One common misspelling is writing <em>government</em> as <u>goverment</u>.</p>

In the example above, <u> underlines “goverment” to signal a spelling error.
Note that since links also default to underlined text, you should use <u> cautiously to avoid confusing users into thinking the text is clickable. If necessary, consider using CSS to modify the default style of <u>.
The <s> tag is an inline element that adds a strikethrough to the content.

1
<p>Today's special: <s>Salmon</s> (Sold out)</p>

In this example, “Salmon” will be displayed with a strikethrough.

<blockquote>, <cite>, <q>

The <blockquote> tag is a block-level element used to indicate a quotation from someone else. Browsers typically display it with styling that sets it apart from normal text.

1
2
3
<blockquote cite="https://quote.example.com">
  <p>Genius is 1% inspiration and 99% perspiration.</p>
</blockquote>

The <blockquote> tag includes a cite attribute, which specifies the source of the quotation. This URL does not appear on the webpage itself.
The <cite> tag is used to reference the source of a quotation or the author’s name. Browsers typically display content inside <cite> in italics.

1
2
3
4
<blockquote cite="https://quote.example.com">
  <p>Genius is 1% inspiration and 99% perspiration.</p>
</blockquote>
<cite>-- Thomas Edison</cite>

The <cite> tag does not need to be used with <blockquote>. It can also be used on its own to refer to sources mentioned in the text.

1
<p>For more information, see <cite>Wikipedia</cite>.</p>

The <q> tag is an inline element that also represents a quotation. Unlike <blockquote>, it does not create a line break.

1
2
3
4
<p>
  A famous line from Shakespeare's Hamlet is:
  <q cite="https://quote.example.com">To be or not to be, that is the question.</q>
</p>

In this example, the quotation appears on the same line as the surrounding text.
Similar to <blockquote>, the <q> tag also has a cite attribute for specifying the source of the quotation. By default, browsers display <q> content in italics and automatically add quotation marks. Therefore, be cautious when quoting text in languages that use different quotation marks.

<code>

The <code> tag is an inline element used to display computer code. By default, browsers render the content inside <code> using a monospaced font.

1
<code>alert()</code>function displays a popup alert box on a webpage.

To represent multiple lines of code, you should place the <code> tag inside a <pre> tag. The <code> tag itself only handles single-line code snippets.

1
2
3
4
5
6
<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

<kbd>, <samp>

The <kbd> tag is an inline element originally intended to represent user keyboard input, but it now also includes other types of input, such as voice commands. Browsers display the content inside <kbd> using a monospaced font.
For example:

1
<p>On Windows, you can press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> to restart.</p>

The <kbd> tag can be nested, which helps in styling multiple key combinations:

1
2
<p>On Windows, you can press 
<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd></kbd> to restart.</p>

The <samp> tag is an inline element used to represent sample output from a computer program. By default, browsers display content inside <samp> with a monospaced font.
For example:

1
2
<p>If you use an undefined variable, the browser will throw an error:
<samp>Uncaught ReferenceError: foo is not defined</samp>.</p>

<mark>

The <mark> tag is an inline element used to highlight text. In Chrome, the default display is a bright yellow background for the highlighted content.
For example:

1
<p>After discussion, we decided that the <mark>games will be held next Wednesday</mark>.</p>

The <mark> tag is also useful for highlighting important sentences within quoted content, such as in <q> or <blockquote> elements:

1
2
3
<blockquote cite="https://quote.example.com">
  <p>Genius is 1% <mark>inspiration</mark> and 99% <mark>perspiration</mark>.</p>
</blockquote>

Besides highlighting interesting text, <mark> can be used to highlight matching keywords in search results.
Note that the <mark> tag should not be used solely for visual highlighting, as browser handling may vary. For consistent highlighting, it is better to use CSS styles.

<small>

The <small> tag is an inline element that displays its content in a smaller font size by default, without needing additional CSS styles. It is often used for supplementary information like copyright or legal notices.

For example:

1
2
<p>Main content of the article.</p>
<p><small>Content licensed under Creative Commons.</small></p>

<time>, <data>

The <time> tag is an inline element that provides a machine-readable format for dates and times.
For example:

1
<p>The sports meet is scheduled to take place on <time datetime="2015-06-10">next Wednesday</time>.</p>

In this example, <time> specifies the exact date for “next Wednesday.” This makes it easier for search engines to index or for other processes to handle.
The datetime attribute of the <time> tag is used to specify a machine-readable date, and it can have various formats:

  • Year only: 2011
  • Year and month: 2011-11
  • Year, month, and day: 2011-11-18
  • Month and day only: 11-18
  • Week of the year: 2011-W47
  • Time only: 14:54, 14:54:39, 14:54:39.929
  • Date and time: 2011-11-18T14:54:39.929

For instance:

1
<p>The concert starts at <time datetime="20:00">8 PM</time>.</p>

The <data> tag is similar to <time>, providing machine-readable content but for non-time-related information.
For example:

1
<p>The first place in the marathon is <data value="39">John Doe</data>.</p>

Here, the machine-readable data for the runner’s position is stored in the value attribute of the <data> tag.

<address>

The <address> tag is a block-level element used to specify contact information for a person or organization.
For example:

1
2
3
4
5
<p>Author's contact details:</p>
<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

Here are some important points to keep in mind when using the <address> tag:

  1. Use <address> only for contact information, not for addresses mentioned in the text (e.g., a previous address before a move).
  2. The content of the <address> tag should not include non-contact information, such as publication dates.
  3. <address> cannot be nested and should not contain heading tags (<h1> to <h6>) or other structural elements like <article>, <aside>, <section>, <nav>, <header>, or <footer>.
  4. Typically, the <address> tag is placed inside a <footer>. Here’s an example:
    1
    2
    3
    4
    5
    <footer>
      <address>
        For questions related to this article, contact <a href="mailto:zhangsan@example.com">Zhang San McClure</a>.
      </address>
    </footer>

<abbr>

The <abbr> tag is an inline element used to indicate that the content is an abbreviation. The title attribute provides the full form or description of the abbreviation. When you hover over the element, the value of the title attribute is displayed as a tooltip.
For example:

1
<abbr title="HyperText Markup Language">HTML</abbr>

Note that some browsers may underline the abbreviation with a dot.

<ins>, <del>

The <ins> tag is an inline element used to indicate content that has been added to a document. Similarly, the <del> tag denotes content that has been removed. These tags are commonly used to show edits to a document.
For example:

1
2
<del><p>The meeting was scheduled for May 8.</p></del>
<ins><p>The meeting is now scheduled for May 9.</p></ins>

By default, browsers render the content of the <del> tag with a strikethrough, while the <ins> tag content is underlined.
Both tags support the following attributes:

  • cite: Provides a URL that explains the reason for the edit.
  • datetime: Specifies when the edit took place.

Example:

1
2
3
<ins cite="./why.html" datetime="2018-05">
  <p>The project is now ending two weeks earlier than originally planned.</p>
</ins>

<dfn>

The <dfn> element is an inline element used to mark a term that is being defined. The term’s definition should be included in the surrounding context.

1
<p>A global network of interconnected computers using the TCP/IP protocol is called the <dfn>Internet</dfn>.</p>

For convenience in scripting, you can include the term’s definition in the <dfn> tag’s title attribute.

1
2
3
<p>A global network of interconnected computers using the TCP/IP protocol is called the 
  <dfn title="Global network of interconnected computers">Internet</dfn>.
</p>

In this example, the title attribute causes the definition to appear as a tooltip when the mouse hovers over the term.

Sometimes a term itself is an abbreviation. In such cases, <dfn> and <abbr> can be used together.

1
2
3
<p>
  The full form of <dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn> is Acquired Immune Deficiency Syndrome.
</p>

<ruby>

The <ruby> tag is used to add phonetic annotations to text, primarily for East Asian languages like Chinese and Japanese. It typically displays these annotations in a smaller font above the main text.
For example:

1
2
3
4
<ruby>
汉<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

In the rendered output, this code shows the Chinese characters with the pinyin annotations “han zi” above them.
The <ruby> tag is an inline element and a container. To use phonetic annotations, you must place both the text and the annotations within this tag.
Inside <ruby>, there are several related tags:

  1. <rp>: The <rp> tag provides a fallback for browsers that do not support phonetic annotations. For these browsers, it displays the annotations in parentheses.For example:

    1
    2
    3
    4
    <ruby>
    汉<rp>(</rp><rt>han</rt><rp>)</rp>
    字<rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

    In browsers that do not support annotations, this renders as 汉(han)字(zi). For supporting browsers, the parentheses are not displayed.

  2. <rt>: The <rt> tag contains the phonetic annotations.

  3. <rb>: The <rb> tag is used to separate text units and corresponds one-to-one with <rt> tags.For example:

    1
    2
    3
    4
    5
    6
    7
    <ruby>
      <rb>汉</rb><rb>字</rb>
      <rp>(</rp>
      <rt>han</rt>
      <rt>zi</rt>
      <rp>)</rp>
    </ruby>

    Here, each Chinese character is wrapped in <rb> tags to match the <rt> annotations.

  4. <rbc>** and **<rtc>: The <rbc> tag groups a set of text units, usually containing multiple <rb> elements. The <rtc> tag groups corresponding phonetic annotations. For example:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ruby style="ruby-position: under;">
      <rbc>
        <rb>汉</rb><rp>(</rp><rt>han</rt><rp>)</rp>
        <rb>字</rb><rp>(</rp><rt>zi</rt><rp>)</rp>
      </rbc>
      <rtc style="ruby-position: over;">
        <rp>(</rp><rt>Chinese</rt><rp>)</rp>
      </rtc>
    </ruby>

    In this example, there are two sets of annotations for the Chinese characters: pinyin and English. One set is placed in <rbc> and the other in <rtc>, with styles specifying that pinyin appears below the text and English above it.Note that Chrome does not currently support these tags either.

    <bdo>, <bdi>

    Most text is read left to right, but some languages, like Arabic and Hebrew, are read right to left. The <bdo> tag is an inline element that overrides the text direction for specific content.
    For example:

    1
    <p>To be or not to be, <bdo dir="rtl">noitseuq eht si taht</bdo>.</p>

    In the above code, the text inside <bdo> will be rendered in the opposite direction, resulting in “To be, or not to be, that is the question”.
    The dir attribute of <bdo> specifies the text direction, with ltr for left-to-right and rtl for right-to-left.
    The <bdi> tag is used for text with an unknown direction, such as user input. It tells the browser to determine the text direction on its own.
    For example:

    1
    <p><bdi>To be, or not to be, that is the question.</bdi></p>

Link to original article:
https://wangdoc.com/html/text