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:
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>
More Tips and Tricks for HTML
- How does enterkeyhint work in HTML?
- How to Clear an HTML Canvas
- How to Draw Text with HTML Canvas
- New HTML Native Modals, Without the Fuss
- How to Add Images to HTML Canvas
- SEO HTML Meta Tag Reference List
- Creating Dark Mode, for Lazy People
- How to wrap text in HTML Canvas
- Getting Started with HTML Canvas
- Creating Shapes with HTML Canvas