Block and Inline elements: Part one

CSS is an important part of any web designer’s skills and therefore it’s extremely important that a designer understands how block elements and inline elements work together and how they can be styled using CSS. This article will explain the default display values of the most commonly used HTML elements whilst part two of this article will explain how CSS can be used to alter the display and visual appearance of these elements.

Block elements

Block elements take up the full width of the page and are naturally displayed on a new line. Block elements can not be nested within inline elements.

Examples of block elements

• <div>
• <h1> … <h6>
• <p>
• <table>
• <ul>, <ol>, <dl>
• <li>, <dt>, <dd>
• <form>
• <blockquote>
• <pre>
• <address>
• <fieldset>

Inline elements

Inline elements only take up as much width as is required to display the element and will not force a new line.

Examples of inline elements

• <span>
• <img>
• <a>
• <strong>
• <em>
• <br>
• <input>, <textarea>
• <abbr>
• <acronym>

Not displayed

Some HTML tags are not displayed and should usually be placed within the head of the document.

Examples of none displaying elements

• <meta>
• <style>
• <script>

Block and Inline elements: Part two