{"id":19595,"date":"2020-07-16T06:50:36","date_gmt":"2020-07-16T13:50:36","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19595"},"modified":"2020-11-10T02:16:24","modified_gmt":"2020-11-10T10:16:24","slug":"html-bold-italics-underline","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-bold-italics-underline\/","title":{"rendered":"Emphasis in HTML Text Formatting: Bold, Italics, and Underline"},"content":{"rendered":"\n

There are many ways to format your text in HTML to bring attention to something. In this post, we\u2019ll talk about how to format your text in HTML to be bold, to be in italics, or to be underlined. You\u2019ll be a formatting pro in no time!<\/em>
<\/p>\n\n\n\n

Bold<\/strong><\/h2>\n\n\n\n

Setting text to bold<\/strong> in HTML prior to HTML5 involved surrounding the text that you wanted to be bold with <b><\/code> tags:
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>repl.it<\/title>\n   <link href="style.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n   <p>This text is <b>bold<\/b><\/p>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
When the HTML5 Standard was released, the favored way to make text bold changed to using <strong> <\/code>tags:
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>repl.it<\/title>\n   <link href="style.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n   <p>This text is also <strong>bold<\/strong><\/p>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The only difference between the <b><\/code> and <strong> <\/code>elements is semantics. Screen readers will see the <strong><\/code> tags and will explicitly emphasize the text more when it reads it. The <b> <\/code>does not allow for that. 
<\/p>\n\n\n\n
Italics<\/h2>\n\n\n\n
Same with bold<\/strong>, 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><\/code> tags. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>repl.it<\/title>\n   <link href="style.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n   <p>This text is in <i>italics<\/i><\/p>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
As HTML5 became the standard, the <i><\/code> tag made way for the more semantic <em><\/code> tag. The \u201cem\u201d is short for emphasis<\/em>. The <em> <\/code>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.<\/p>\n\n\n\n
Underline<\/h2>\n\n\n\n
HTML underlined text is most often used to indicate misspelled words. Don\u2019t use it in a place that can be confused for a hyperlink. Markup your text with <u><\/code> tags to mark it for formatting and then use CSS to indicate the type of underline style you would like. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>repl.it<\/title>\n   <style>\n     p u {\n       text-decoration: underline red wavy;\n     }\n   <\/style>\n <\/head>\n <body>\n   <p>This is a <u>mispelled<\/u> word<\/p>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/h2>\n\n\n\n