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 |
Your information is well used. Please check out my site and connections!!!!
i noticed footer element is inline in Firefox and block in Chrome. Please clarify.
I’m surprised to find nav and details is not on this list but on inline, nevertheless great work.
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).
that is the break tag \. Also your comment section should not ignore or render tags when used inside a comment.