If you work exclusively in a content management system like CMS Hub or WordPress, you’re used to being able to bold, italicize, and underline text with a click of the button. But what if your toolbar doesn’t offer the exact formatting option you want? Or you’re not working in a word processor or a CMS? No problem. All you need is some HTML and CSS. Below we’ll discuss some use cases for formatting text. Then, we’ll walk through the process for creating bold, italicized, underlined, strikethrough, subscript, and superscript text. To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.” When bolding text, it’s considered a best practice to use the <strong> tag in favor of the <b> tag. This is because the <strong> a semantic element whereas <b> is not. Non-semantic elements can make content localization and future proofing difficult, according to the HTML5 specification. Additionally, if the text bolding is purely stylistic, it’s better to use CSS and keep all page styling separate from the content. For this reason, we’ll only be showing examples using <strong> and the CSS font-weight property. Featured Resource To define text with strong importance, place the text inside <strong> tags. Let’s look at an example. Here’s the HTML: <p>This is some normal paragraph text, <strong>and this is some important text.</strong></p> Here’s the result: To bold text simply for decoration, use the CSS font-weight property instead of the HTML strong element. Let’s say you want to bold a word in a paragraph — you’d wrap the word in <span> tags and use a CSS class selector to apply the font-weight property to the specific span element only.
How to Bold Text in HTML
The Beginner's Guide to HTML and CSS for Marketers
Fill out the form for the free introductory guide.
How to Bold Text in HTML with the Strong Element
-Dec-07-2021-05-35-44-66-PM.png "How to Bold, Italicize & Format Text in HTML (3)")
How to Bold Text in HTML with the CSS Font-Weight Property
Here’s the CSS:
.bolded { font-weight: bold; }
Here’s the HTML:
<p>This is some normal paragraph text, and this <span class="bolded">word</span> is bold for decoration.</p>
Here’s the result:
-Dec-07-2021-05-35-43-66-PM.png "How to Bold, Italicize & Format Text in HTML (4)")
How to Italicize Text in HTML
To italicize the text in HTML, use either the em tag or the i (italics) tag. Both of these tags will italicize the text, but the em tag additionally indicates that the text has stress emphasis when read. You can also italicize text with the CSS font-style property set to “italic.”
Like <strong> and <b>, the <em> tag is generally preferred over the <i> tag as it is a semantic element, so we’ll be using it in our HTML examples. For styling, stick with CSS and avoid the <i> tag.
Learn More:
Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.
How to Italicize Text in HTML with the Emphasis Element
To define text with stress emphasis, place the text inside <em> tags. Let’s see an example.
Here’s the HTML:
<p>This is some normal paragraph text, <em>and this is some emphasized text.</em></p>
Here’s the result:
-Dec-07-2021-05-35-44-39-PM.png "How to Bold, Italicize & Format Text in HTML (6)")
How to Italicize Text in HTML with the CSS Font-Style Property
To italicize text for decoration, use the CSS font-style property. Imagine you want to italicize a word inside a paragraph. First, wrap the word in <span> tags, then apply the font-style property to the span element only.
Here’s the CSS:
.emphasized { font-style: italic; }
(Video) How to Bold, Underline or Italicize HTML TextHere’s the HTML:
<p>This is some normal paragraph text, and this <span class="emphasized">word</span> is italicized for decoration.</p>
Here’s the result:
-Dec-07-2021-05-35-43-87-PM.png "How to Bold, Italicize & Format Text in HTML (7)")
How to Underline Text in HTML
To underline text in HTML and CSS, use the CSS text-decoration property, set to “underline.”
You can also underline text with the <u> element, but this should not be used to underline text for presentation purposes. The <u> element is meant for specific use cases like marking up misspelled words, denoting proper names in Chinese text, or indicating family names.
Let’s look at both methods below.
How to Underline Text in HTML with the Unarticulated Annotation Element
If you’d like to display text that is unarticulated or has a non-textual annotation, place the text inside <u> tags. For example:
<p>This <u>wrd</u> is misspelled, so we've underlined it.</p>
Here’s the result:
-Dec-07-2021-05-35-45-13-PM.png "How to Bold, Italicize & Format Text in HTML (8)")
How to Underline Text in HTML with the CSS Text-Decoration Property
If you’d like to underline text for decoration, rather than to represent a non-textual annotation, then you’d use the CSS text-decoration property, like so:
Here’s the CSS:
.underlined {text-decoration: underline;}
Here’s the HTML:
<p>This text is normal, and <span class="underlined"> this text is underlined</span>.</p>
And here’s the result:
-Dec-07-2021-05-35-43-46-PM.png "How to Bold, Italicize & Format Text in HTML (9)")
How to Render Strikethrough Text in HTML
There are multiple ways to render strikethrough text in HTML, which is text displayed with a horizontal line through it. You can use the <s> tag to indicate that the text is now incorrect, inaccurate, or irrelevant. If you want to indicate text that has been deleted, use the <del> tag.
If you want to show the text as strikethrough for another reason, then you’d use the CSS text-decoration-line property and set this property to “line-through.”
It’s important to note that the HTML <strike> element has been deprecated and is no longer a viable option for rendering strikethrough text.
Let’s look at examples for the three methods supported in the current version of HTML.
How to Strikethrough Text in HTML with the Strikethrough Element
If you’d like to strikethrough text to show that it is no longer correct, accurate, or relevant, place the text inside <s> tags. Let’s look at an example.
Here’s the HTML:
<p>The meeting will begin at 5:00 PM on <s>Saturday</s> now on Sunday.</p>
Here’s the result:
-Dec-07-2021-05-35-45-88-PM.png "How to Bold, Italicize & Format Text in HTML (10)")
How to Strikethrough Text in HTML with the Deleted Text Element
To strikethrough text to show that it has been deleted, place the text inside <del> tags. Let’s see an example with a list element:
Here’s the HTML:
<p>Appointments are now available for:</p>
<ul>
<li><del>3 PM</del></li>
<li><del>4 PM</del></li>
<li>5 PM</li>
</ul>
Here’s the result:
-Dec-07-2021-05-35-45-33-PM.png "How to Bold, Italicize & Format Text in HTML (11)")
How to Strikethrough Text in HTML with the CSS Text-Decoration-Line Property
To strikethrough text for another purpose, use the CSS text-decoration-line property.
Here’s the CSS:
.strike { text-decoration-line: line-through; }
Here’s the HTML:
<p>This text is normal, and <span class="strike"> this text is line-through</span>.</p>
Here’s the result:
-Dec-07-2021-05-35-44-11-PM.png "How to Bold, Italicize & Format Text in HTML (12)")
How to Make Text Subscript in HTML
Usually rendered in a smaller but heavier font, subscript text appears half a character below the normal line. It can be used in chemical formulas, math equations, fractions, and more.
To create subscript text in HTML, use the <sub> element. See the example below.
Here’s the HTML:
<p>The chemical formula for water is H<sub>2</sub>O.</p>
Here’s the result:
-Dec-07-2021-05-35-45-68-PM.png "How to Bold, Italicize & Format Text in HTML (13)")
How to Make Text Superscript in HTML
Usually rendered in a smaller but heavier font, superscript text appears half a character above the normal line. It can be used to write footnotes, copyright, registered trademarks, and some chemical formulas as well.
To create superscript text in HTML, use the <sup> element. See the example below.
Here’s the HTML:
<p>Water is essential for all forms of life.<sup>1</sup></p>
Here’s the result:
-Dec-07-2021-05-35-44-90-PM.png "How to Bold, Italicize & Format Text in HTML (14)")
Formatting Text with HTML & CSS
By formatting text in any of the ways described above, you can help your readers to better understand and retain information from your site. Whether you want to bold keywords or include subscript in chemical formulas, formatting text only requires basic knowledge of HTML and CSS.
Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.
Topics: HTML
FAQs
How do you bold and italicize in HTML? ›
- Bold Text. To bold text, use the <strong> or <b> tags: <strong>Bold Text Here</strong> ...
- Italic Text. To italicize text, use the <em> or <i> tags: <em>Italicized Text Here</em> ...
- Underlined Text.
To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.”
How do you italicize text in HTML? ›To make text italic in HTML, use the <i>… </i> tag or <em>… </em> tag. Both the tags have the same functioning, but <em> tag is a phrase tag, which renders as emphasized text.
Can you bold text in HTML? ›HTML Formatting Elements
<b> - Bold text. <strong> - Important text. <i> - Italic text. <em> - Emphasized text.
...
| Element name | Description |
|---|---|
| <em> | This is a logical tag which is used to display content in italic. |
| <mark> | This tag is used to highlight text. |
HTML Formatting basically refers to the enhancing of text in order to increase the visual appeal. HTML provides a range of formatting tags that can be used to make the text attractive to the users. There are many options available that can be used for formatting, just like any other text editor.
How do you change text style in HTML? ›How to Change Font Type in HTML. To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
How do I make my text bold? ›Type the keyboard shortcut: CTRL+B.
How do you do text in HTML? ›The Html <text> tag is used to define the single-line text field on a web page.
How do you italicize text? ›To make your selected text italic or start writing text in italic, press the Ctrl + I keys on your keyboard.
What is the use of italic tag in HTML? ›
The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
How do I make a font italic? ›How to Make Italics on Adobe Illustrator CC - YouTube
What is mark up text appear italic and underline in HTML? ›Italic: i. /i. • Underline: <u>
How do I change font color in HTML? ›To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
What are the shortcuts for bold italics and underline? ›- Bold: Ctrl+B.
- Italic: Ctrl+I.
- Underline: Ctrl+U.
Wrap your text inside the <pre> tag. Show activity on this post. To be on the safe side in formatting, put the <pre> tag right at the start of the first line and the </pre> tag right at the end of the last line. Otherwise some browsers may behave as if there were an empty line at the start or at the end of the element.
What is text formatting? ›Unlike paragraph formatting, which determines the type of text in an HTML document (body text, headings, captions, etc.), text formatting determines its style, color, alignment, etc.
How do you use font tags in HTML? ›You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.
Why is formatting is important in HTML? ›Formatting elements are provided in HTML to mark special types of text. You should know that, since most of these elements contribute solely towards changing the appearance of the marked text, using them is not recommended.
How do you use HTML tags? ›...
Attributes.
| Value | Description |
|---|---|
| help | Provides a link to context-sensitive help. |
What is style tag in HTML? ›
The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser.
Where is style tag in HTML? ›You can place HTML style tags in <head> or <body> elements. We'd recommend choosing the first option, as that allows you to keep the content and styling information separate. Note: you can also use <link> elements to apply styles kept in external stylesheets.
How do you add styles in HTML? ›There are three ways to add CSS to HTML. You can add inline CSS in a style attribute to style a single HTML element on the page. You can embed an internal stylesheet by adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML.
How do I bold a paragraph in HTML? ›In HTML, there are three major ways that you can use to make text bold. You can use the <b> tag, the <strong> tag, or you can do it in CSS with the font-weight property.
What is bold italic and underline? ›Bold, Italic and Underline Commands in MS Word
Bold: It allows you to Bold the text of your document. Italic: It allows you to Italicize the text of your document. Underline: It allows you to underline the text of your document.
In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
What is text field in HTML? ›The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters.
How do you use italics? ›Italics are used primarily to denote titles and names of particular works or objects in order to allow that title or name to stand out from the surrounding sentence. Italics may also be used for emphasis in writing, but only rarely.
How do I make a font italic in CSS? ›Use the <em> tag
The “em” in <em> literally stands for emphasis. Browsers will, by default, make italicize text that is wrapped in HTML <em> tags.
Italics are typically used to show emphasis (For example: “I don't care what he thinks. I do what I want!”) or to indicate titles of stand-alone works (Black Panther, Lost in Translation).
What tag is used to make text italicized? ›
</em> tag. The full form of em in the <em> tag is emphasize. This tag is used to make a text italic when we want to emphasize the meaning of that text.
What is bold tag? ›Definition and Usage
The <b> tag specifies bold text without any extra importance.
For italics, put text between a pair of single asterisks, as in *italics* . For bold, put text between two pairs asterisks, as in **bold** . For bold italics, put text between two sets of three asterisks, as in ***bold italics*** .
How do you bold or italicize text on Instagram? ›How To Bold Text On Instagram! - YouTube
How do you bold and italicize on Facebook? ›How to Bold Text in Facebook Post - YouTube
What is the HTML code for color text? ›HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. There are 16,777,216 possible HTML color codes, and all are visible on a 24-bit display.
How do I make text white in HTML? ›To specify white, for example, use #ffffff. To specify bright blue, use #0000ff. For purple, use #ff00ff.
How do you change the font style? ›- On your device, open the Settings app.
- Search and select Font size.
- To change your preferred font size, move the slider left or right.
Bold and italic and underline are all examples of typographical emphasis.
What happens if you click on bold and italic options? ›The function should also implement a check to ensure the array is square or else it should throw an error and return 0 and this should include any other error scenarios as well such as passing in alphabets or invalid data. In all instances of an exception, the function should return 0.
How do you bold and underline on a keyboard? ›
How to Use Underline Italic Bold in Word with a Keyboard Shortcut
How do I use font style in HTML? ›To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
How do you change font size and bold in HTML? ›To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
How do you emphasize text in HTML? ›The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
How do you Unbold in HTML? ›just add font-weight:normal to that bit of the CSS. The result of it is good. Thank you for that.
How many fonts are there in HTML? ›In CSS there are five generic font families: Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. Sans-serif fonts have clean lines (no small strokes attached).
How do you change font-size and color in HTML? ›You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.
How can you make a text bold? ›Type the keyboard shortcut: CTRL+B.
How do I make a font italic in CSS? ›Use the <em> tag
The “em” in <em> literally stands for emphasis. Browsers will, by default, make italicize text that is wrapped in HTML <em> tags.
- On your device, open the Settings app.
- Search and select Font size.
- To change your preferred font size, move the slider left or right.
How do I make text bigger in HTML? ›
The <big> tag was used in HTML 4 to define bigger text.
What are the shortcuts for bold italics and underline? ›- Bold: Ctrl+B.
- Italic: Ctrl+I.
- Underline: Ctrl+U.
To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
Which element is used to get highlighted text in HTML? ›The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
How do I make text bold in HTML input? ›The <b> tag specifies bold text without any extra importance.
What does Unbold mean? ›Adjective. unbold (comparative more unbold, superlative most unbold) Not bold; timid. (typography) Not bold.
What is font weight HTML? ›Font weight is the “value” placed on your font that will determine how bold or light your text will appear. There are many “values” that you can use that provide a great deal of flexibility towards creating the font weight that works best for how you want to display your text.