HTML5 Basics - Display Types (Part5) 

In this video we are going to talk about something inherent to html tags: display types. Display types define how the tags behave when rendered by the browser. We can use Style Sheets to change these at any time, but each tag has a default behavior and its important to understand how they will work when you are describing your page when writing the initial markup.
Got that?
Three Types
There are a lot, but we are going to concern ourselves with three main display styles.
Block
Block level elements are big blocks, just like they sound. They are generally used to divide content, because by default block level elements begin on new lines.
Block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
An example is a "p" tag, that sections off the whole paragraph, and forces the next paragraph tag to a new line.
Check out the notes below for a link to a list of all the block level tags in HTML. [developer.mozi...]
Inline
Inline elements may contain only data and other inline elements. Where block level elements are larger structures that contain all kinds a crap.
By default, inline elements do not begin with new line when rendered by the browser.
An example of this would be to wrap some words in your paragraph in an "a" tag. the words become a link, but the link does not start a new line in the paragraph, or disrupt the flow of content. It just sits inline in the paragraph.
When we get to styling our document, we will note that inline elements cannot take width, height, margin and padding styles.
For more on that check out this link [www.maxdesign.c...]
Inline-block
This is the strange, but handy one. An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. So it can take those margins and paddings and dimensions.
The only tags that default to inline-block are images and buttons. But with css, later on we will see that we can change any element to inline-block if we want to.
Check out the link below for more information on inline-block [www.impressivew...]
Display None & Table and others...
There are other default display types that all have their little display behavior quirks; like display:table, or display:none. And there are a lot of interesting display methods on the horizon in css3, but today we wanted to just talk about how the html tags cary certain display types by default.