Inline HTML tags are those tags which are used to format the content within a web page without affecting the layout of the page. These tags are mostly used to apply formatting on text, but can also be used on other elements like images and tables.
The most common inline HTML tags are:
<b>
– Bold
<i>
– Italic
<u>
– Underlined
<strike>
– Strikethrough
<sup>
– Superscript
<sub>
– Subscript
Other inline tags include: <em>
, <strong>
, <small>
, <tt>
, and <abbr>
.
Inline HTML elements don’t start on a new line and only occupy as much space (both width and height) as needed. Their superpower is that they never break the flow of content on the web page.
A very common use case for inline HTML tags is to format text or emphasize it.
For example, you can use the HTML tags <b>
and <i>
to make the text bold or italicized.
Both of these tags are paired, which means they change exactly the text that is placed between the opening and closing tags:
<b> This text will be bold </b>
<i> And this text will be displayed in italics </i>
To make use of inline tags like <b>
and <i>
you can nest them in the paragraph tag <p>
.
<p> This is a paragraph where one word would be in <b>bold</b></p>
<p> And in this paragraph, one word will be written in <i>italics</i></p>
In this example, the structure of the HTML page will not differ in any way with or without the <b>
and <i>
tags.
The only difference is that the parts of the paragraph wrapped in the tags <b>
and <i>
will appear as bold
or italics.
The tags <b>
and <i>
are called nested in relation to the tag <p>
while the <p>
is called a parent tag in
relation to them.