HTML 5 Inline and Block-Level Elements
HTML5 Basics - Part 15
Forward: In this part of the series, we see how elements are positioned on the web page as they are typed.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Normal Flow
As you add elements in the body element or in a div element, the elements fit themselves in a horizontal line. That is, the elements would be displayed in a horizontal line in the browser, everything being equal. If the elements are too many, they wrap into the next line. This behavior is called the Normal Flow of elements. In any horizontal line, the tallest element determines the height of the line. That is, the elements may have different heights, but the height of the line is that of the tallest element. This normal flow will always be respected independent of whether you type the elements horizontally or Vertically in the HTML document (text editor).
Illustration
For this illustration, you need two small images (image files) and the following HTML document. So copy two small images into the directory in which you will save the following code as an HTML file.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <span style="background-color:cyan">Another phrase</span> <img src="secondImg.gif" />
</body>
</html>
Try the code by saving it as an HTML file, using a text editor and then open it in a browser; replace the image file names in the code with the actual image file names in your directory.
In the code, you have a span element, then a space, then an image element, then a space, then another span element, a space and finally an image. At the display, all these items are shown on a line of the body element. If the line is short, the elements are wrapped into the next line. Note: if any of the space is made by typing the spacebar more than once, at the browser, you would have only one space (equivalent to typing the spacebar once).
You can break the normal flow using the line break element (<br>). The line break element forces whatever is on its right on the line, to the next line. This is what we saw with text; the same thing is applicable to elements. Try the following code and you will notice that the second span element and second image element are on the next line:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <br><span style="background-color:cyan">Another phrase</span> <img src="secondImg.gif" />
</body>
</html>
In the above code, the line break element has been included after the first image element. So at the display, you have two lines: The first line has the first span element and the first image element; the second line has the second span element and the second image element.
For the code just mentioned, there are two lines at the browser because of the line break element. So, if we want three lines at the browser from these four elements, all we need to do is to include a line break element in another position among the four elements. Try the following code and note that at the browser there are three lines:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <br><span style="background-color:cyan">Another phrase</span><br> <img src="secondImg.gif" />
</body>
</html>
In the code you have a line break element just before the second span element and just after this same span element. In the first line at the display (browser) you have the first span element and the first image element; in the second line, you have only the second span element; in the third line you have the second image element. So we have got three lines from a series of elements. We achieved this simply by putting two line break elements at different positions among the four elements. If you do not use the line break elements, you would only have new lines as a result of element wrapping at the end of the line (just like with text wrapping in a word processor).
I want you to note that in the above code, we have a line break element just before the second span element and just after it. In this way the second span element stands alone on a line. The HTML developers made some elements like this. Such an element has an implicit line break element just before it and just after it. Well, you the web site designer do not see these line break elements of the elements, in your code. These elements are called block-level elements. Examples of block-level elements that we have seen, are the div element, the hr element and the p element. Try the following code to demonstrate this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>DIV Element</div> <p>Paragraph Element</p> <hr />
</body>
</html>
Each of the above block-level elements occupies a horizontal stripe (line) at the browser. With inline elements (elements like the image elements that would be on one line), a space in between two inline elements fits itself in the normal flow. With block-level elements a space in between two block-level elements should fit itself in a separate line in between the two block level elements (at the browser). This is because the line break element just after the previous block-level element forces whatever comes after it to the next line and the line break element just before the next block-level element forces the block-level element to a new line. Well, in practice, when a browser sees a space between two block-level elements it might not display the space and so one block-level element would appear immediately below the previous block-level element.
If you want a blank line in between two block-level elements, include the line break element in between the two block-level elements in the code. Try the following example and note that there is a blank line between the div element and the p element.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>DIV Element</div> <br><p>Paragraph Element</p> <hr />
</body>
</html>
Examples of Inline and block-level elements
Examples of inline elements that we have seen are, the image element, the span element and the hyperlink (A) element.
Examples of the block-level elements that we have seen are the div element, the hr element and the p element.
Any HTML element for display is either an inline element or a block level element.
Well, time to take a break. We stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT