Common Inline and Block Level Elements in HTML 5
Mastering HTML5 - Part 20
Forward: In this part of the series, we look at lists of commonly used inline and block level elements in HTML 5.
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. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
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)
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
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT