With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline.

Block elements

Block elements represent rectangular blocks of content. They have an implied line break before and after. Block elements include sectional content like paragraphs, divisions, and headlines. It is standard practice to type most block-level tags on individual lines above and below their content. Block-level elements can be nested, but some block-level elements can not contain other block-level elements:

Ex:


		  
 Title of an article

  		

  		  First paragraph of article.

Paragraphs and headlines cannot contain other block-level elements.

Inline elements

Inline elements are elements used within text. Bold, italic, and links are all inline elements. Inline elements are sometimes called “span-level” elements. There is also a generic span-level elements, simply called a span. This doesn’t do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.

Ex:

This text is special.

Images feel like block-level elements — they are rectangular, have definite dimensions, and are usually displayed outside of the flow of text. However they are actually inline elements. The reason for this is mostly a hold-over from a less-sophisticated period of web design, but we’re stuck with it now. The weird implications of this can be avoided easily, but its good to know. There are other weird issues like this, and they will be covered later in this guide when they come up.