HTML format­ting refers to the process of struc­tur­ing 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 format­ting refer to?

HTML provides basic tools for struc­tur­ing different webpage elements. Or­gan­ising these elements using HTML tags is referred to as HTML format­ting. 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, para­graphs and lists, helping you to organise the in­form­a­tion on your webpages.

Why is HTML format­ting important?

HTML format­ting helps optimise the structure and the visual ap­pear­ance of webpage elements. Proper format­ting improves text read­ab­il­ity and makes it easier for users to navigate websites. A well-struc­tured website is also more easily un­der­stood by search engine crawlers (programs that analyse webpage content). As such, HTML plays a key role in search engine op­tim­isa­tion (SEO).

Tip

In our HTML beginner’s tutorial, we go over the basics of the markup language.

What types of format­ting tags does HTML have?

In HTML, there are two main types of format­ting tags: physical tags and logical tags.

  • Physical tags determine the exact ap­pear­ance 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, con­trib­ut­ing to the semantic structure of a webpage. These tags help search engines, browsers and assistive tech­no­lo­gies better un­der­stand the content. For instance, the <em> tag is used to emphasise parts of text, often dis­play­ing them in italics.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

Essential tags for HTML format­ting

HTML offers a wide range of tags for format­ting website content. These include everything from tags for struc­tur­ing entire page layouts to tags for adjusting in­di­vidu­al elements. The following table focuses spe­cific­ally on text format­ting tags. For a com­pre­hens­ive look at HTML tags, you can check out our dedicated article on HTML tags:

HTML Tag De­scrip­tion
<b> This physical tag makes text bold.
<strong> This logical HTML tag marks text as important, by making it standing out visually from sur­round­ing text and in­dic­at­ing its im­port­ance to browsers.
<i> This physical tag displays text in italics.
<em> The logical tag em­phas­ises text, often making it it­alicised.
<u> This tag un­der­lines text.
<h1> to <h6> These tags are used to create headings. The lower the number, the larger the heading.
<p> This tag creates para­graphs.
<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 high­lights text, usually using the colour yellow.
Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup

HTML format­ting examples

HTML format­ting offers countless ways to structure and style text and other elements on webpages. To fully unlock the potential of HTML format­ting, it’s important to un­der­stand how to use different HTML tags. The following examples show how HTML format­ting 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 in­flu­ences the ap­pear­ance 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>
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 em­phas­ises the im­port­ance 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>
html

Output:

The last word in this sentence will be marked as important.

Example 3: Italicise 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>
html

Output:

The following word will be displayed in italics.

Example 4: Underline text

HTML format­ting 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>
html

Output:

Image: HTML Formatting: An example of text that is underlined
HTML format­ting: Example of un­der­lined text

Example 5: Strike through words

Content wrapped in <strike> tags will be displayed with a line through it. This is useful for marking in­form­a­tion 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>
html

Output:

Image: HTML Formatting: An example of text that has been crossed out.
HTML Format­ting: Example of text that has been crossed out.
Go to Main Menu