There are many ways to format your text in HTML to bring attention to something. In this post, we’ll talk about how to format your text in HTML to be bold, to be in italics, or to be underlined. You’ll be a formatting pro in no time!
Bold
Setting text to bold in HTML prior to HTML5 involved surrounding the text that you wanted to be bold with <b> tags:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is <b>bold</b></p> <script src="script.js"></script> </body> </html>
When the HTML5 Standard was released, the favored way to make text bold changed to using <strong> tags:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is also <strong>bold</strong></p> <script src="script.js"></script> </body> </html>
The only difference between the <b> and <strong> elements is semantics. Screen readers will see the <strong> tags and will explicitly emphasize the text more when it reads it. The <b> does not allow for that.
Italics
Same with bold, there are two different standards that we know of for creating text that is italicized. Prior to the HTML5 standard, italic text was created by encapsulating it in <i> tags.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is in <i>italics</i></p> <script src="script.js"></script> </body> </html>
As HTML5 became the standard, the <i> tag made way for the more semantic <em> tag. The “em” is short for emphasis. The <em> tag signals a screen reader to also give more emphasis to the text so that a user can distinguish between normal text and emphasized text.
Underline
HTML underlined text is most often used to indicate misspelled words. Don’t use it in a place that can be confused for a hyperlink. Markup your text with <u> tags to mark it for formatting and then use CSS to indicate the type of underline style you would like.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
p u {
text-decoration: underline red wavy;
}
</style>
</head>
<body>
<p>This is a <u>mispelled</u> word</p>
</body>
</html>Conclusion
In this article we discussed many of the formatting tags in HTML. In the case of <strong> and <em>, we use them to apply semantics to those elements that, on screen, look bold and italic. On a screen reader, those words are emphasized. With a <u> tag, we can use it to underline text. There are many more formatting options in addition to these three.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
