Default CSS Display Values for Different HTML Elements

Every element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many.

The three most commonly used values are none, block, and inline. But what if you don’t define a display value for an element? Well, all elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.

Blocks and Text-flow Content

This one is pretty straightforward. I’ve covered block vs. inline before, but here’s a quick review.

Container-type elements (like <div>, <article>, <p>, etc.) will start out as block-level elements, so the computed value of the display property for these is “block”. All headers (<h1>, <h2>, etc.), even though they generally only contain text content, are likewise block elements by default.

On the other hand, elements that flow with text content are inline elements. That is, their computed display value is “inline”. These are elements like <span>, <em>,

and <cite>.

With both block and inline elements, you can (if you choose to) redefine their display value to something other than their default. Generally this is done in order to give an element a value of “none” or one of the alternate values (e.g. table). You can also change an inline element to block and vice-versa. But in most cases, this really is not the right choice. Instead, you’re better off using a different element altogether or otherwise rethinking what you’re trying to do.

Replaced Elements

In HTML, in addition to the elements already mentioned, there are also what are referred to as replaced elements. These include <img>, <input>, <select>, and <video>.

Although these are different from block and inline elements, they still have computed values for their display property. And they’re not always the same. For example, an <img> element, by default, is inline. Also, an <input> element is inline-block (which I’ve covered before).

Unknown Elements

Standards and accessibility advocates will hate me for telling you this, but the fact is, you don’t have to use any valid HTML5 elements in your documents. You could build an entire web page using your own made-up tags like <cookieMonster>, <potato>, and <sarcasm>.

So how would the browser read these foreign elements? Well, here’s a clue. Do you remember seeing this chunk of code in your CSS reset?


article,aside,details,figcaption,figure,
footer,header,hgroup,nav,section,summary {
    display: block;
}

That’s added for older browsers (like IE6-8) that don’t recognize the new HTML5 elements. By default, in all browsers, all unknown elements have a computed display value of “inline”. Here’s a JS Bin that demonstrates this using a made-up element and then logging the display value of the element in the console.

And here’s another example with the same element given “block” status.

Invisible Elements

Here’s something you may not know is possible. HTML5 has a category of elements called document metadata. These include elements like <head>, <title>, and <style>. These elements, by default, are computed to display: none, as you can see by viewing the console in this JS Bin.

But, believe it or not, you can make them visible. Look at the screen shot taken below from the online version of Jeremy Keith’s HTML5 book:

Blocked title element on HTML5 for Web Designers

As shown in Chrome’s developer tools, the header for the site is styled by making the <title> element inside the <head> visible by means of display: block. In this case, both the <title> and <head> elements need to be blocked, not just the <title>.

This can also be done to make an element’s stylesheet editable by the user, as demonstrated in this JS Bin. We do this using the contenteditable attribute on the <style> element. In supporting browsers, with that attribute set to “true”, the user can make changes to the CSS and watch them take effect instantly.

Conclusion

Most of what I’ve discussed here has been covered, to some degree, before, so this might not all be new to everyone. If you know of any other interesting things about the default display values for various elements, or have any corrections/additions to anything I’ve said, I’d love to hear them.