HTML

HTML tags for text

📣 Sponsor

HTML is full of lots of different tags for text. These tags let us display text in our HTML documents in the ways we want it to be displayed. Although a basic feature of HTML, there is a lot to learn about these tags. Most tags for text are inline but there are exceptions. When an element is inline, that means by default they have this line of CSS applied to them:

display: inline;

What is an inline element in HTML?

Inline tags for text behave differently than block elements. They do not break the flow of content, and only take up as much space as is necessary. Block elements, on the other hand, tend to take up the full width of a page.

Therefore, HTML tags for text are all inline, since they are used in writing text, and they flow with other inline elements on the page.

Are there any block tags for text?

Some tags we use for text are block elements. This mostly refers to headers and paragraphs, which usually take up an entire line or section on a page. As such, a new paragraph appears below the last paragraph, instead of next to it, as you would expect.

Now that we've covered the basics, Let's look at some of the main inline tags we use for text in HTML, some of which you may not have heard of before.

The header tags

In HTML, we can denote headers using numbered header tags. These are all block elements. The <h1> is the biggest tag on the page, while the <h6> is the smallest and least important. In modern search engines and when following best practice, the <h1> tag usually denotes the title of the page you are on - so you typically only have one <h1>.

Here is an example of all the header tags, from most important and biggest, to least important and smallest:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The p tag

This tag is a block tag for text, used to denote a paragraph. A paragraph in HTML usually has some margin, to separate it from other paragraph tags. An example is shown below:

    <p>I am a paragraph</p>

The list tags: ul, ol and li

If we want to make a list in HTML like the example below, we use list tags:

  • Hi there
  • I am a list

There are two types of list - ol, or ordered lists, and ul, or unordered lists. Essentially, ordered lists have numbers, and unordered lists have standard bullet points.

Within ol and ul lists, you have li elements, which refer to list items. All 3 are block elements. Two examples are shown below:

<ul>
    <li>Hi there</li>
    <li>I am a list</li>
</ul>
<ol>
    <li>Hi there</li>
    <li>I am a list</li>
</ol>

The blockquote tag

The blockquote tag is, as the name suggests, a block element. It let's us create quotes. This is often combined with figcaption for the caption, cite for who is cited, and figure, to encapsulate everything, to create a fully fledged quote. Here is an example of all that in action:

<figure>
    <blockquote>
        I am HTML
    
    <figcaption>HTML, from <cite>HTML in action</cite></figcaption>
</blockquote></figure>

The result looks like this:

I am HTML
HTML, from HTML in action

The em tag

The em tag is used to make text emphasised or italic. Here is an example of how that looks. In code, we write it like this:

<em>An emphasised piece of text</em>

The strong tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

<strong>An emphasised piece of text</strong>

The br tag

This element makes a line break anywhere you like. It looks like this in code:

<br>

The i tag

This element makes text underlined It looks like this in code:

<u>underlined</u>

The code tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

<strong>An emphasised piece of text</strong>

The code tag

This element highlights a piece of code on the page. It is styled like below:

I am some code 
<code>I am some code</code>

The pre tag

This element denotes text that shouldn't have any line breaks. If you keep typing, this element will stop the text from breaking at any point, instead overflowing. An example is shown in the code element below. The text keeps going, even though it reaches the end of the container:

<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.</pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.

The button tag

This element lets us create a button. An example is shown below, along with the code:

<button>I am a button</button>

The s tag

This tag represents a striked through piece of text, like this. It can be written in code like this:

<s>strikethrough</s>
Last Updated 1643921371068

More Tips and Tricks for HTML

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email