Inline Elements in HTML (with Examples)
Inline elements in HTML are those elements that do not start a new line and only take up as much horizontal width as necessary to accommodate their content.
These elements do not create a line break after them, so they flow within the same line without interrupting anything. Some common examples of inline elements are the span tag (<span>) and the anchor tag (<a>).
An <img> element is also an example of inline element because it flows in the same line. It does not start on a new line. However, it has natural height and width properties, unlike other inline elements. Figure shows an example of an inline element in a block element.
Inline elements cannot exist outside the block-level elements. They must be placed inside block-level elements. In other words, we can place inline elements inside other inline-level elements as well as block-level elements. But, we can never place a block-level element inside an inline element.
Characteristics of Inline Elements in HTML
Inline elements have distinct characteristics in HTML that distinguish them from block-level elements. Some of the key characteristics of inline elements are as follows:
- Inline elements do not start on a new line. They appear on the same line as the content that precedes them, as long as there is space on that line.
- The width and height of inline elements are generally determined by their text contents. Unlike block elements, we cannot set the width and height properties to have any effect on most inline elements.
- Inline elements do not support top and bottom margins and padding. They only support left and right margin and padding, which can push other inline elements horizontally away.
- By default, inline elements align with the baseline of the surrounding text.
Inline elements can be contained within block-level elements as well as other inline elements. - Inline elements maintain the flow of the text in the HTML document. Adding an inline element does not disrupt the structural flow of the HTML document. It simply integrates into the existing flow.
Inspecting an Inline Element
Let’s take an example code which we will inspect inline elements and determine the width of content they contain.
Example 1:
<!DOCTYPE html>
<head>
<title>HTML Inline Level Elements</title>
</head>
<body>
<strong>My strong text</strong>
<em>My emphasized text</em>
</body>
</html>
In this example code, we have used two inline elements, such as <strong> and <em>. Although each is written on a separate line in the HTML code, they appear on the same line in the browser. This is because inline elements do not start on a new line. They continue on the same line as long as there is space available. As you can see in the below picture.
Here, we have used an Edge browser to view the output. You can also use other browsers, such as Chrome or Firefox to inspect inline elements. Now, right-click on the “My strong text” and select “Inspect” from the context menu.
When you will hover over the <strong> inline element, you will see highlighted text in the light blue, as shown in the above picture. This highlighting shows that the horizontal width of an inline element is determined by the width of the content they contain. Unlike block-level elements, inline elements do not take up their own horizontal space.
In the above HTML code, we have written both inline elements on the separate line of code. Still, they appear on the same line on the webpage because inline elements do not automatically start on a newline. They continue on the same line unless the space is full. Thus, inline elements will position side by side on a HTML webpage if we do not add a line break <br> element.
Example 2:
<!DOCTYPE html>
<head>
<title>Inspecting Inline Level Elements</title>
</head>
<body>
<strong>My strong text</strong>
<br>
<em>My emphasized text</em>
</body>
</html>
In this code, we have added a line break <br> tag between two lines of code to break a line. Note that the <br> tag only requires an opening tag and does not wrap around any text. If you inspect to check the size of inline elements, you will see that the width of each text element is still determined by the width of the text content.
HTML5 Inline Level Elements
Here, we have listed all the inline elements in HTML5 in the table form:
| <a> | <abbr> | <acronym> |
| <b> | <bdo> | <big> |
| <br> | <button> | <cite> |
| <code> | <dfn> | <em> |
| <i> | <img> | <input> |
| <kbd> | <label> | <map> |
| <object> | <output> | <q> |
| <samp> | <script> | <select> |
| <small> | <span> | <strong> |
| <sub> | <sup> | <textarea> |
| <time> | <tt> | <var> |
In this tutorial, we have explained the basic characteristics of inline elements in HTML with the help of practical examples. We hope this has helped you understand how inline elements differ from block-level elements and how they behave in various contexts. With this knowledge, you can effectively use these elements to better structure and style your web pages.
Happy coding!!!
