HTML provides basic text formatting, and each browser will apply standard text styles. These styles can be customised further using cascading stylesheets (CSS).
There’s two ways to make text bold using HTML.
Both have the same effect on normal web browser rendering engines, however are rendered differently for visually impaired and older mobile phones.
<b> | Visual style for text, with a heavier font weight. |
<strong> | Semantic description of how the text should be understood, perfect for screen readers and other devices for visually impaired. On some older mobile phones, this may be displayed with an underline. |
<!DOCTYPE html>
<html>
<head>
<title>Make it strong</title>
</head>
<body>
<!--Normal-->
<p>This text is normal.</p>
<!--Bold-->
<p><b>This text is rendered bold.</b></p>
<!--Strong-->
<p><strong>This text is strong, usually rendered bold.</strong></p>
</body>
</html>
Similarly, there’s two ways to give text emphasis using HTML.
<i> | Italicise – Visual style for text, with a sloping typeface. |
<em> | Emphasis – semantic description of how the text should be understood, perfect for screen readers and other devices for visually impaired. |
<!DOCTYPE html>
<html>
<head>
<title>Give it emphasis</title>
</head>
<body>
<!--Normal-->
<p>This text is normal.</p>
<!--Italic-->
<p><i>This text is rendered italicised.</i></p>
<!--Emphasis-->
<p><em>This is emphasised, usually rendered italicised.</em></p>
</body>
</html>
Any text that should be displayed smaller, should use the <small>
tag.
<!DOCTYPE html>
<html>
<head>
<title>Make it smaller</title>
</head>
<body>
<!--Normal-->
<p>This text is normal.</p>
<!--Smaller-->
<p><small>This text is rendered smaller.</small></p>
</body>
</html>