HTML5 Block Level Elements: Complete List

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

SelectorHTML UseSelectorHTML Use
article*Article Contentheader*Section or Page Header
aside*Aside Contenthgroup*Groups Header Information
blockquoteLong QuotationhrHorizontal Rule
bodyPage BodyliList Item
brLine BreakmapImage Map
buttonPush ButtonobjectObject Embedding
canvas*Draw AreaolOrdered List
captionTable Captionoutput*Form Output
colTable ColumnpParagraph
colgroupGroup of Table ColumnsprePreformatted Text
ddDefinition Descriptionprogress*Displays progress of time consuming task
divDivisionsection*Section in Web page
dlDefinition ListtableTable
dtDefinition TermtbodyTable Body
embedExternal ContenttextareaForm Text Input Area
fieldsetFieldset LabeltfootTable Footer
figcaption*Figure CaptionthTable Header
figure*Groups Media Content and CaptiontheadTable Header
footer*Section or page footertrTable Row
formInput FormulUnordered List
h1–6Heading Levels 1–6video*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.