HTML Inline Elements Tutorial with Stone River eLearning

Having talked in length about the block level elements in a previous blog post, we will now discuss about the other types of elements in HTML, namely, the inline elements. The biggest characteristic of an inline HTML element is that, unlike block level elements it starts from the same line in the web browser. Inline elements are also phase level elements and ‘text-level –elements’, however; inline elements is the name most popularly known. The best and the most used example of block level elements are “<span>” and “<strong>”. We will discuss these two elements in depth later in this blog posts.

What are the major properties of inline elements?

Just like block level elements, inline elements also have some specific properties that make it different and useful at the same time.

  1. Inline elements do not clear the previous content as it flows along with the text content.
  2. Inline elements ignore the width and height properties of the HTML web browser and will also ignore the top and bottom margin settings. However; the left and right margin setting and the padding are not ignored by inline elements.

How are inline elements different from block level elements?

The biggest and the most fundamental difference between block level elements and inline elements is the one that while block level elements display content before or after it in different lines, inline elements are known to display contents on the same. However; this is not the only difference between block level elements and inline elements.

  1. Block level elements create larger structures than inline elements.
  2. Block level elements may contain other blocks, inline elements or data elements in it.

If there are block level elements, ‘big’ structures and inline elements are present in a document, it is always a good approach to establish the block level elements first and include the big structures inside them; and then shift attention towards the inline elements.

<span> element: Probably the most widely used inline element, span is a generic inline element and is used for grouping elements together on a document. It is usually a great practice to group the elements together so that styling of these elements can be done easily.

<strong> element: No matter how your webpage looks like or what operation it performs, an inline element that will surely find great utility is the strong element. The strong element is used to perform the same operation that the bold button on the word document is used for. If you want your text in bold, all you have to do is include it inside the strong elements.

<em> element: Just like the element we discussed above, the <em> element also has great utility and application in web pages as it converts the text within it into italics. “<em>” element is called emphasized element and is used in the same way as the “<strong>” element.

Eg:

<!DOCTYPE html>

<html>

<head>

<meta charset =”UTF-8”>

<title> Inline Elements </title>

</head>

<body>

<span> I am inside the inline elemnt. </span> Now I am outside the inline element.

<br>

<strong> This is bold and beautiful. </strong>

<em> This is italics and stylish </em>

</body>

</html>

Download the source code here:

GET YOUR FREE HTML EBOOK!

(Visited 100 times, 1 visits today)