How to use HTML formatting tags to format text
HTML formatting refers to the process of structuring and styling webpage content using HTML tags. When used correctly, these tags allow you to display content in a clear and visually appealing manner.
What does HTML formatting refer to?
HTML provides basic tools for structuring different webpage elements. Organizing these elements using HTML tags is referred to as HTML formatting. These tags allow you to define how text, images and other types of content are displayed in an HTML document. With tags, you can create headings, paragraphs and lists, helping you to organize the information on your webpages.
Why is HTML formatting important?
HTML formatting helps optimize the structure and the visual appearance of webpage elements. Proper formatting improves text readability and makes it easier for users to navigate websites. A well-structured website is also more easily understood by search engine crawlers (programs that analyze webpage content). As such, HTML plays a key role in search engine optimization (SEO).
In our HTML beginner’s tutorial, we go over the basics of the markup language.
What types of formatting tags does HTML have?
In HTML, there are two main types of formatting tags: physical tags and logical tags.
-
Physical tags determine the exact appearance of a webpage element. They define how text and other elements are visually displayed. For example, the
<b>tag is used to make text bold, and the<i>tag makes text italic. However, physical tags don’t influence the semantic meaning of the content. -
Logical tags define the meaning of an element, contributing to the semantic structure of a webpage. These tags help search engines, browsers and assistive technologies better understand the content. For instance, the
<em>tag is used to emphasize parts of text, often displaying them in italics.
- Stay online with 99.99% uptime and robust security
- Add performance with a click as traffic grows
- Includes free domain, SSL, email, and 24/7 support
Essential tags for HTML formatting
HTML offers a wide range of tags for formatting website content. These include everything from tags for structuring entire page layouts to tags for adjusting individual elements. The following table focuses specifically on text formatting tags. For a comprehensive look at HTML tags, you can check out our dedicated article on HTML tags:
| HTML Tag | Description |
|---|---|
<b>
|
This physical tag makes text bold. |
<strong>
|
This logical HTML tag marks text as important, by making it standing out visually from surrounding text and indicating its importance to browsers. |
<i>
|
This physical tag displays text in italics. |
<em>
|
The logical tag emphasizes text, often making it italicized. |
<u>
|
This tag underlines text. |
<h1> to <h6>
|
These tags are used to create headings. The lower the number, the larger the heading. |
<p>
|
This tag creates paragraphs. |
<big>
|
This HTML tag makes text larger than normal. |
<small>
|
This tag makes text smaller. |
<sup>
|
This tag places text above the normal line of text, such as in the equation e = mc². |
<sub>
|
This tag places text below the normal line of text, like in the chemical formula H2O. |
<ins>
|
This tag indicates text that has been inserted into a document. |
<del>
|
This tag shows text that has been deleted from a document. |
<strike>
|
This tag strikes through text. |
<mark>
|
This tag highlights text, usually using the color yellow. |
- Free Wildcard SSL for safer data transfers
- Free private registration for more privacy
- Free Domain Connect for easy DNS setup
HTML formatting examples
HTML formatting offers countless ways to structure and style text and other elements on webpages. To fully unlock the potential of HTML formatting, it’s important to understand how to use different HTML tags. The following examples show how HTML formatting works in action.
Example 1: Display text in bold
To display a word or passage in bold, you can use the <b> tag. Since it’s a physical tag, it only influences the appearance of the text.
<!DOCTYPE html>
<html>
<head>
<title> Example of bold text</title>
</head>
<body>
<p>Using this tag will display <b>text in bold</b>.</p>
</body>
</html>Output:
Using this tag will display text in bold.
Example 2: Place a strong emphasis on text
To make a passage stand out to readers, search engines and browsers, you can use the <strong> HTML tag. This tag emphasizes the importance of the marked section, and the text is usually displayed in bold.
<!DOCTYPE html>
<html>
<head>
<title>Example of marking text as important</title>
</head>
<body>
<p>The last word in this sentence will be marked as <strong>important</strong>.</p>
</body>
</html>Output:
The last word in this sentence will be marked as important.
Example 3: Italicize text
Foreign words are often displayed in italics to make them stand out in text. The <i> HTML tag can be used to do this.
<!DOCTYPE html>
<html>
<head>
<title>Italics example</title>
</head>
<body>
<p>The following word will be displayed in <i>italics</i>.</p>
</body>
</html>Output:
The following word will be displayed in italics.
Example 4: Underline text
HTML formatting also allows you to underline words or entire passages of text. To do this, use the <u> tag.
<!DOCTYPE html>
<html>
<head>
<title> Example of how to underline text</title>
</head>
<body>
<p><u>Underlining</u> a word is useful in different situations.</p>
</body>
</html>Output:
Example 5: Strike through words
Content wrapped in <strike> tags will be displayed with a line through it. This is useful for marking information that is outdated or no longer relevant.
<!DOCTYPE html>
<html>
<head>
<title>Example of strikethrough text</title>
</head>
<body>
<p>The offer is valid until <strike>November 1st</strike> December 1st.</p>
</body>
</html>Output:
