I am writing this tutorial to complete the second type of HTML elements i.e block level elements, as i have already posted html and html5 inline elements list in my previous article.

HTML5 Block Level Elements

Block-level elements place a line break before and after the element

Here is a complete list of block levele selectors that can by used to style the HTML document by using the power of CSS / CSS3

* will represent Block Level Elements new in HTML5

Selector HTML Use Selector HTML Use
article* Article Content header* Section or Page Header
aside* Aside Content hgroup* Groups Header Information
blockquote Long Quotation hr Horizontal Rule
body Page Body li List Item
br Line Break map Image Map
button Push Button object Object Embedding
canvas* Draw Area ol Ordered List
caption Table Caption output* Form Output
col Table Column p Paragraph
colgroup Group of Table Columns pre Preformatted Text
dd Definition Description progress* Displays progress of time consuming task
div Division section* Section in Web page
dl Definition List table Table
dt Definition Term tbody Table Body
embed External Content textarea Form Text Input Area
fieldset Fieldset Label tfoot Table Footer
figcaption* Figure Caption th Table Header
figure* Groups Media Content and Caption thead Table Header
footer* Section or page footer tr Table Row
form Input Form ul Unordered List
h1–6 Heading Levels 1–6 video* Video player

5 thoughts

  1. Thanks for the post. Definitely good food for thought. I don’t think the following elements default to block, though: video, output, canvas, progress. Progress and output in particular seem like they would regularly be used inline (for instance, performing a look-up within a form or displaying the results of a calculation).

Comments are closed.