How to Create Bold Text With HTML

PDF download Download Article
PDF download Download Article

HTML makes it easy to bold text, and there are several tags you can learn if you want more options. Better yet, you can take a few minutes to learn some basic CSS and add it directly to your HTML document. This is quicker than adding a whole CSS stylesheet, and will give you more control over exactly how thick the bolded text displays.

Method 1
Method 1 of 2:

Creating Bold Text with HTML

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","bigUrl":"\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    In HTML5, the preferred standard, the strong tag is recommended for important text. This is almost always displayed as bold text in browsers.
    • Place the text you want bolded in between these tags: <strong> bold text here </strong>.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","bigUrl":"\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    "Headings" are usually placed at the top of the web page or at the beginning of a new section. Usually, headings are displayed as bold and larger than the regular font, but this can vary. There are six different heading tags, from <h1> to <h6>. Follow these guidelines when using them:
    • The h1 tag, written <h1> Your Heading Here </h1> is the most important heading, typically the largest text at the top of the page.
    • <h2> The h2 tag </h2> is for the second most important heading, and so on down to <h6> h6, the smallest </h6>.
    • Use these sparingly, only to organize your page. Users should be able to skim the headings quickly and find the topic they're looking for.
    • When creating subheadings, move down just one level at a time. In other words, don't skip from <h1> to <h3>. This helps the HTML page preserve its formatting when transferred to another format. [1]
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","bigUrl":"\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    The <b> tag is still supported in HTML5, but <strong> is preferred in most situations. Use the <b> tag only when the text should be bolded for stylistic reasons, not to add emphasis. Examples include key words or vocabulary words in a passage, or product names in a review. [2]
    • As with most tags, <b>place the affected text between a start tag and an end tag</b>.
    4. Advertisement
Method 2
Method 2 of 2:

Creating Bold Text with Inline CSS

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","bigUrl":"\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    CSS is a more powerful and consistent way to style your web page. This makes it the ideal way to determine how your page looks , while HTML is designed to determine what your page means . It's completely fine to use HTML tags when you want to emphasize important text, but CSS will give you more close control over the visual appearance of your bold text.
    • Try opening a basic HTML page with different browsers, and you might notice differences in the display. CSS tells the browser exactly how to display text altered by a given tag, to minimize the amount of variation.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","bigUrl":"\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    If you don't know CSS yet, using "inline CSS" is a good way to get started. While you can use this to alter tags such as <p> or <h1>, sometimes you'll want to change text that's not already between tags. [3] In this case, place the text between <span></span> tags. This has no effect on its own, but gives us something to work with. Here's the example we'll be using:
    • <span>I learned how to make this text bold with inline CSS.</span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-6.jpg","bigUrl":"\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    HTML attributes are written directly in the tag, inside the < >brackets. The style attribute is necessary to insert CSS into the HTML tag, so we'll insert style= into the span tag:
    • <span style=>I learned how to make this text bold with inline CSS.</span>
    • There's no reason to add the style attribute without specifying any styles. We're just taking this one step at a time to make it easy to follow.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-7.jpg","bigUrl":"\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    CSS properties are added as part of the style attribute. In our case, we'll use the font-weight property, which determines how thick to draw the font. This single property can be used to display bold (extra-thick) text, thin text, or even specify that the text should be displayed with normal thickness. Add "font-weight: " after the = sign, like this:
    • <span style="font-weight: ">I learned how to make this text bold with inline CSS.</span>
    • Again, this is unfinished and won't do anything by itself.
    • Don't forget the quotation marks before and after font-weight: .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-8.jpg","bigUrl":"\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    The only thing we need to do now is add a value for font-weight, between the font-weight: and the final quotation mark. There are quite a few options for different amounts of "boldness," but the value bold is the easiest to use : [4]
    • <span style="font-weight:bold"> I learned how to make this text bold with inline CSS. </span>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-9.jpg","bigUrl":"\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/aid864852-v4-728px-Create-Bold-Text-With-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    CSS gives you many more options than HTML, so you don't need to feel constricted. Here are several alternatives to the "bold" value: [5]
    • <span style="font-weight:bolder"> "Bolder" text will always be thicker than the parent element. </span> For example, if you make an entire paragraph "bold," then use "bolder" on an individual sentence inside that paragraph, it will be even thicker.
    • <span style="font-weight:normal"> "Normal" text will be displayed as normal even if the span is inside a bold tag. </span>
    • <span style="font-weight:900"> You can instead use a number from 100 to 900 to specify thickness. 400 is normal text, while bold text uses a thickness of 700 by default. </span> [6]
    7. Advertisement

Community Q&A

Search
Add New Question
  • Question
    How do I change the image size?
    Acute Viral
    Community Answer
    Try adding a width and/or height attribute in the image tag. I would recommend using one or the other so your image doesn't get squashed or stretched.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 1 Helpful 2
  • Question
    How do I make one letter bold?
    Community Answer
    You can select the letter with a span element and set the span element to apply a bold face.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 2 Helpful 0
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • When using the font-weight property in CSS, only use numerical values that are multiples of 100. Values that are in between will be rounded up. [7]
        Thanks
        Helpful 0 Not Helpful 0
      • An embedded or external CSS sheet is an even better way to bold text, since it allows you to alter and easily change an entire document at once.
        Thanks
        Helpful 0 Not Helpful 0
      • Each font only has certain "font weights" available. When using CSS, the closest available font weight to the specified amount is used. This means you won't always see a difference between two thicker than normal font weights.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      2 Easy Ways to Underline Text in CSS and HTML
      How to
      Learn HTML
      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Create a Simple Web Page with HTML
      How to
      Insert Spaces in HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      How to
      Write HTML Code
      How to
      Insert Images with HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      How to
      Resize iFrames in HTML
      Advertisement

      References

      1. ↑ http://www.hobo-web.co.uk/headers/
      2. ↑ http://www.quackit.com/html/codes/bold/
      3. ↑ http://reference.sitepoint.com/html/core-attributes/style
      4. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
      5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
      6. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
      7. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 95,127 times.

      Is this article up to date?

      Advertisement