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>
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.
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>
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.
<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>
The elements <i>,<em>, and <dfn> create the same visual effect as using the CSS property font-style and set it to 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>
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.
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>
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.
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.
Top comments (0)