NICCAI

Block vs. Inline Elements

Before we get into what elements to use in what situations, it is important to have a solid understanding of the difference between block-level and inline elements.

Block-level elements: <div>, <h1>...<h6>, <p>, <ul>, <ol>, <li>, <table>, <tr>, <th>, <td>, <blockquote>

Inline elements: <span>, <a>, <em>, <strong>

Wrapping & Spacing

Block-level elements generally begin on new lines - ie. they will wrap to the next line in the page before rendering.  They will also span the full width of space available to them unless sized to not do so.  Inline elements do not wrap - they will render beside the previous DOM element.

Containment

Block-level elements may contain other block-level elments, inline elements, or data.  However, inline elements can only contain other inline elements or data - they CANNOT contain block-level elements.

OK: <div><span></span></div>

NOT OK: <span><div></div></span>

It is safe to assume that block-level elements are used to create either layout or content structure, while inline elements are typically used to wrap data elements.

Common Mistakes

• Wrapping an <a> tag around a larger block-element such as a <div> in order to make it clickable.  This is a no-no.
• You can’t set width or height on inline elements (which IE sometimes gets wrong).  You should set the width and height on the block level element that contains it if you need to contain an element visually.
• The paragraph tag <p> is an exception to the containment rule.  It CANNOT contain other block-level elements.

Table of Contents » HTML & CSS Guidelines