{"id":12436,"date":"2020-04-22T16:01:19","date_gmt":"2020-04-22T23:01:19","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12436"},"modified":"2023-12-01T02:43:37","modified_gmt":"2023-12-01T10:43:37","slug":"bold-text-html","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bold-text-html\/","title":{"rendered":"How to Make Bold Text HTML"},"content":{"rendered":"\n

To make bold text in HTML you can use the <\/em><b><\/em><\/code> tag, the <\/em><strong><\/em><\/code> tag, or font-weight in CSS. <\/em><\/p>\n\n\n\n

\n\n\n\n

When you\u2019re designing a web page, you may want to emphasize a specific piece of text.<\/p>\n\n\n\n

For example, let\u2019s say you have a list of instructions on how to use a new piece of technology, and there is a security notice that is particularly important for the user to read. You may want to emphasize that notice to ensure that the user does not miss it when they\u2019re reading the instructions.<\/p>\n\n\n\n

In HTML<\/code>, there are built-in functions that allow coders to embolden particular text. In this tutorial, we are going to break down the three most common ways to embolden text in HTML<\/code>: the <b><\/code> tag, the <strong><\/code> tag, and the font-weight Cascading Style Sheets (CSS)<\/code> parameter.<\/p>\n\n\n\n

HTML <b> Tag<\/h2>\n\n\n\n

The most common way in which developers create emboldened text in HTML<\/code> is through using the <b><\/code> tag. The <b><\/code> tag works to create an element that represents bold text on an HTML<\/code> webpage. For example, a <b><\/code> tag can highlight subheadings in an online article.<\/p>\n\n\n\n

Here is an example of the HTML<\/code> <b><\/code> tag in action:<\/p>\n\n\n\n

<b>This text is bold<\/b><\/pre><\/div>\n\n\n\n
It\u2019s that simple. If you want to make a particular portion of text bold but leave the rest of a paragraph, you can enclose a <b><\/code> tag in a section as we do below:<\/p>\n\n\n\n
<p>This text is not bold. <b>But this text is bold!<\/b><\/p><\/pre><\/div>\n\n\n\n
Here is the result of our code:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The start of our paragraph appears normal, and the text within our <b><\/code> tag has been emboldened.<\/p>\n\n\n\n
HTML <strong> Tag<\/h2>\n\n\n\n
In addition, you can use the <strong><\/code> tag to create emboldened text in HTML<\/code>. The <strong><\/code> tag is in exactly the same way as the <b><\/code> tag, with one difference: the strong tag indicates that its contents require special attention. Here\u2019s an example of a <strong><\/code> tag being used:<\/p>\n\n\n\n
<p>Your username for your new computer is <b>JohnAppleseed<\/b><\/p>\n<p><strong>Attention!<\/strong> You must change your password after logging in.<\/p><\/pre><\/div>\n\n\n\n
Our code returns the following:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
As you can see, the <b><\/code> tag is being used to highlight text that the reader may want to read. The <strong><\/code> tag is being used to indicate that the word Attention<\/code> should be given special attention by the reader. That said, aside from this difference, <b><\/code> and <strong> <\/code>tags are the same.<\/p>\n\n\n\n
CSS font-weight Property<\/h2>\n\n\n\n
The <strong><\/code> and <b><\/code> tags are used in vanilla HTML<\/code> elements to indicate that text is important and should be read. However, there is also a CSS<\/code> property that gives us more control over how our text appears: font-weight<\/code>.<\/p>\n\n\n\n
font-weight<\/code> allows coders to determine how heavy or light — how bold — a particular portion of text appears. Here\u2019s an example of the font-weight<\/code> tag applied to a paragraph with the tag thick<\/code>:<\/p>\n\n\n\n
HTML<\/code>: <\/p>\n\n\n\n
<p>This is an example paragraph.<\/p>\n<p class=\"thick\">This is a bold example paragraph.<\/p><\/pre><\/div>\n\n\n\n
CSS<\/code>: <\/p>\n\n\n\n
p.thick {\n\tfont-weight: 900;\n}<\/pre><\/div>\n\n\n\n
Our code returns the following:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
In our example, we define a class called thick<\/code>, which sets the font-weight<\/code> property for our text to 900, meaning that the text where we reference the class thick<\/code> will appear emboldened. It\u2019s worth noting that we could customize the number \u201c900,\u201d depending on whether we wanted our text to appear lighter or bolder.<\/p>\n\n\n\n
 Alternatively, we could specify our font-weight<\/code> using the style font-weight<\/code> bold attribute, like so: <\/p>\n\n\n\n
<p>This is an example paragraph.<\/p>\n<p style=\"font-weight:900;\">This is a bold example paragraph.<\/p><\/pre><\/div>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Bold text is an important part of text formatting in HTML<\/code>. If you need to call attention to a particular line of text or a few words, you may want to embolden it. In this tutorial, we have broken down the three main ways to embolden text: <b><\/code>, <strong><\/code>, and font-weight<\/code>. Now you\u2019re ready to create bold text like an expert!<\/p>\n","protected":false},"excerpt":{"rendered":"To make bold text in HTML you can use the <b> tag, the <strong> tag, or font-weight in CSS. When you\u2019re designing a web page, you may want to emphasize a specific piece of text. For example, let\u2019s say you have a list of instructions on how to use a new piece of technology, and…","protected":false},"author":240,"featured_media":12437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-12436","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to Make Bold Text HTML | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn more about how to create HTML bold text using , , and font-weight in this article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Bold Text HTML\" \/>\n<meta property=\"og:description\" content=\"Learn more about how to create HTML bold text using , , and font-weight in this article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-22T23:01:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:43:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Make Bold Text HTML\",\"datePublished\":\"2020-04-22T23:01:19+00:00\",\"dateModified\":\"2023-12-01T10:43:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\"},\"wordCount\":544,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\",\"name\":\"How to Make Bold Text HTML | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg\",\"datePublished\":\"2020-04-22T23:01:19+00:00\",\"dateModified\":\"2023-12-01T10:43:37+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Learn more about how to create HTML bold text using , , and font-weight in this article.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bold-text-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bold-text-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make Bold Text HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Make Bold Text HTML | Career Karma","description":"Learn more about how to create HTML bold text using , , and font-weight in this article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/bold-text-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Bold Text HTML","og_description":"Learn more about how to create HTML bold text using , , and font-weight in this article.","og_url":"https:\/\/careerkarma.com\/blog\/bold-text-html\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-22T23:01:19+00:00","article_modified_time":"2023-12-01T10:43:37+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Make Bold Text HTML","datePublished":"2020-04-22T23:01:19+00:00","dateModified":"2023-12-01T10:43:37+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/"},"wordCount":544,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bold-text-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/","url":"https:\/\/careerkarma.com\/blog\/bold-text-html\/","name":"How to Make Bold Text HTML | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg","datePublished":"2020-04-22T23:01:19+00:00","dateModified":"2023-12-01T10:43:37+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Learn more about how to create HTML bold text using , , and font-weight in this article.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bold-text-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-bold-text.jpg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bold-text-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"How to Make Bold Text HTML"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=12436"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/12437"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=12436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=12436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=12436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}