HTML can do this? Part 2

Text modifications with HTML

HTML Using specific tags in HTML, text can directly be modified without additional CSS. This comes in very handy.

<ins>, <del>, <b>, <i>, <code>, <dfn>, <em>, <kbd>, <s>, <samp>, <sup>, <sub>, <strong>, <small>

1. Using <ins>, <del> and <s><a name="one"></a>

The HTML element <ins> shows a part of text that has been added to a document. You can also show a part of text that has been deleted from the document by using the <del> element.

Showcase ins, del and s implementation. ins is highlighted green with a plus sign at the beginning of the line in this example, del is highlighted red with a minus sign at the beginning in this example. s simply strike through the specific text.

The difference of these two and <s> is that the meaning behind that the later is not used for text where it is important what or/and why it is corrected but simply to show that something may is not true anymore.

2. Using <b> and <strong><a name="two"></a>

Using HTML elements like <b>, or <strong>, you can get the same effect using the CSS property [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) and setting it to bold.

Showcase b and strong implementation, which lets text appear bold.

<b> is used to simply let the text appear bold while <strong> adds a certain importance to the text.

3. Using <i> and <em>, and <dfn><a name="three"></a>

The elements <i>,<em>, and <dfn> create the same visual effect as using the CSS property font-style and set it to italic.

Showcase i, em and dfn implementation, which lets text appear italic.

Like the previous example, the difference for the two elements <i> and <em> is, that <i> is used to simply let the text appear italic while <em> adds emphasis to it.

For the <dfn> on the other hand, even though the visual appearance is the same as for the other two elements, <dfn> is used to define a certain part in the text, which appears when hovering over the part defined using <dfn> and set a title to it.

4. Using <code>, <kbd> and <samp><a name="four"></a>

Using the <code>` element indicates that the text is a short fragment of code. The OS default monospace font is used to display the text.

On the contrary, using <kbd> provides a similar effect indicating that the text is a key on the users keyboard.

Showcase code, kbd and samp implementation, which lets text appear like code or a key of your keyboard or the output in the console terminal.

Last but not least, using the <samp> element, you can get a visual style like the one in a terminal, showing the console, error, or such.

5. Using <sup>, <sub>, and <small><a name="five"></a>

The elements <sup> and <sub> can be used to make text looking like e.g. a mathematical or chemical formula.

Use <small> for text like copyright and licence information.

Showcase sup, sub and small which let's appear the code small and above at the end of a word, small and below at the end of a word in the normal flow of a text, or smaller in font-size than the main text.

6. Accessibility Concerns

Keep in mind that most of them are not supported by screen readers, meaning, the screen reader does most likely not say "important", or "cursive", even though there is semantic meaning visually communicated.

It still makes sense to use them, though, because in the future, these HTML tags may will be supported by screen readers one day.

Help yourself by doing some workarounds.

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#accessibility_concerns
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#accessibility_concerns

Check out my codepen to fiddle with the code.

{% codepen https://codepen.io/YuriDevAT/pen/NWJwRVX %}