HTML 5 Inline and Block-Level Elements
Basics of HTML 5 - Part 18
Foreword: In this part of the series, I explain what is inline and block-level element; I also talk about floating an element.
By: Chrysanthus Date Published: 4 Apr 2015
Introduction
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).
Block-Level Elements
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>
List of Inline Elements
- All text level elements, e.g. the strong and the time elements
- span element
- Image element
- audio element
- video element
- All form controls, e.g. the button control
- label element
List of Block Level Elements
- All section elements e.g. the article element
- All heading elements, e.g. h1
- table element
- All grouping elements (p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, div)
Containing Element
A containing element is an element that has other elements as its content. Good examples of contain elements are the body, div and section elements.
Floating an Element
To float an element means you sent it to the right end or left end inside the containing element. When you do this, everything being equal, text will go around it on the other side. A typical element to float to the right or left end, is an image, which is an illustration for the text on the other side around it. Other elements you would like to float are the nav and aside elements.
To float an image element to the right, you use the following attribute and value in the image tag:
style="float:right"
To float the image element to the left, you use the following attribute and value in the image tag:
style="float:left"
The difference between the above two attributes is that one has the word, “left” and the other has the word, “right”. So an image tag would be something like,
<img src= "url" style="float:right">
The position of the tag in the web page would be like in,
<!DOCTYPE HTML>
<html>
<head>
<title>Quick Illustration</title>
</head>
<header>
</header>
<img src= "url" style="float:right">
<section>
</section>
<footer>
</footer>
<body>
</body>
</html>
In this page, as the presentation of the section starts at the browser you would see the image at the right end inside the body element. Read the above code if you have not done so.
For an element to be floated, it should be an inline element. The image element is an inline element by default (naturally). You can convert a block element to an inline element. To do this, you use the following attribute and value in the start tag of the element:
style="display:inline"
To float the converted element to the right, the attribute is modified as follows:
style="display:inline; float:right"
To float the converted element to the left, the attribute is modified as follows:
style="display:inline; float:left"
Note the use of the colon and semicolon.
style="display:inline"
To float the converted element to the right, the attribute is modified as follows:
style="display:inline; float:right"
To float the converted element to the left, the attribute is modified as follows:
style="display:inline; float:left"
Note the use of the colon and semicolon.
Converting a Block Level Element to an Inline Element
You can convert a block element to an inline element. To do this, you use the following attribute and value in the start tag of the element:
style="display:inline"
With this, the element should fit itself within a line of text. The height of the line becomes the height of the highest element in the line.
To float the converted element to the right, the attribute is modified as follows:
style="display:inline; float:right"
To float the converted element to the left, the attribute is modified as follows:
style="display:inline; float:left"
Note the use of the colon and semicolon.
Inline to Block Element?
You can convert an inline element to a block level element. However, hardly would you have the need to do this. So I will not go into that.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT