Basic Element Behavior

By default, elements within an HTML page follow the basic behaviors of their display type. The two basic display types or content models are block and inline.

Block Elements

Block elements tend to encompass a collection of content. Their width is based on thier containers while their height is based on their contents. Block elements also create a break in the flow of content. In breakng, block elements are positioned on the next line after the content they follow and cause content following them to be positioned on the next line below. Common block elements include: blockquote, div, h1, h2, h3, h4, h5, h6, li, ol, p, pre, ul. Example:

Title

A long string of textual characters representing content.

Some additional content.

Note: Margins have been removed for clarity.

Source code:

<div class="container">
	<h5>Title</h5>
	<p>A long string of textual characters representing content.</p>
	<p>Some additional content.</p>
</div>

Inline Elements

Inline elements are typically used for smaller pieces of content, often (though not limited to) containing a few characters or a few lines of text. Inline elements fit to the size of their content (both height and width) and do not create a break in the flow of the content around them. Sequential inline elements can be seen side by side. Common inline elements include: a, abbr, acronym, cite, code, dfn, kbd, q, samp, var, b, big, em, i, small, span, strong, sub, sup, tt, img. Example:

LinkA long string of textual characters representing content.Some additional content.

Source code:

<div class="container">
	<a href="#">Link</a><span>A long string of textual
	characters representing content.</span><span>Some
	additional content.</span>
</div>

Note: Tag indention has changed in the inline example as whitespace is visible within whitespace content.