HTML: Block-Level tags versus Inline tags

Remember, Element is just another word for Tag.

In HTML, the concept of block-level elements and inline elements is important for structuring your code and passing a syntax check.

This concept of block-level vs. inline, and the accompanying rules, are important also because they allow for parts of a page to be subdivided, which works well in combination with CSS, JavaScript, and other online technologies...

However, the rules around block-level elements vs inline elements take a little while to absorb. So, first you need to be clear about which tags are block-level and which are inline, and then you need to learn a few rules about which tags are allowed inside one another.

The information below is not meant to be exhaustive, or to substitute for use of a good HTML5 online reference or HTML5 book and/or BBEdit's syntax check.

Some Block-level Tags:

<p> </p>
<h1> </h1>
  down to...
<h6> </h6>
<blockquote> </blockquote>
<pre> </pre>
<div> </div>

Some Inline Tags:

<b> </b>
<i> </i>
<u> </u>
<s> </s>
<a href=""> </a>
<a id=""> </a> 
<img src="" alt="" width="" height="">
<sub> </sub>
<sup> </sup>
<span> </span>

The Overall Rules:

  1. Block-level tags can contain Inline tags.
  2. The reverse is not true -- inline tags cannot contain block-level tags.
  3. Some block-level elements can contain some other block-level elements.

A Few Rules for Block-level Tags inside other Block-level Tags:

Here are some block level tags and rules for what they can contain.

You can use a Syntax Check to help you determine if you are understanding the rules governing interactions between block-level and inline tags in HTML5. Reading the errors you get, plus a little experimentation (and sometimes reference to a good online HTML5 reference or a book) will help you sort out syntax errors. Use BBEdit's Syntax Check (see my notes about how to do a BBEdit syntax check)
or see Online W3C HTML syntax check.