HTML Elements: Block-Level vs. Inline Elements

What Is the Difference Between Block-level and Inline Elements?

Woman on computer
Yuri_Arcurs/DigitalVision/Getty Images

HTML is made up of various elements that act as the building blocks of web pages. Each of these elements falls into one of two categories - either a block-level elements or an inline elements. Understanding the difference between these two types of elements is an important step in building web pages.

Block Level Elements

So what is a block-level element? A block-level element is an HTML element that begins a new line on a Web page and extends the full width of the available horizontal space of its parent element.

 It creates large blocks of content like paragraphs or page divisions. In fact, most HTML elements are block-level elements.

Block-level elements are used within the HTML document's body. They can contain inline elements, as well as other block-level elements.

Inline Elements

In contrast to a block-level element, an inline element can:

  • Begin within a line
  • Does not start a new line
  • Its width only extends as far as it is defined by its tags. 

​An example of an inline element is the <strong> tag, which makes the font of the text content contained within boldface. An inline element generally only contains other inline elements, or it can contain nothing at all, such as the <br /> break tag.

There is also a third type of element in HTML: those that aren't displayed at all. These elements provide information about the page but aren't displayed when rendered in a Web browser.

For example:

  • <style> defines styles and stylesheets.
  • <meta> defines meta data.
  • <head> is the HTML document element that holds these elements.

Switching Inline and Block Element Types

You can change an element's type from inline to block, or vice versa, using one of these CSS properties:

  • display: block;
  • display:inline;
  • display:none;

The CSS display property lets you change an inline property to block, or a block to inline, or not to display at all.

 

When to Change the Display Property

In general, I like to leave the display property alone, but there are some cases where swapping inline and block display properties can be useful.

  • Horizontal list menus: Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element so that each menu item doesn't start a on a new line.
  • Headers in the text: Sometimes you might want a header to remain in the text, but maintain the HTML header values. Changing the h1 through h6 values to inline will allow text that comes after its closing tag to continue to flow next to it on the same line, instead of starting on a new line.
  • Removing the element: If you want to remove an element completely from the document's normal flow, you can set the display to none. One note, be careful when using display: none.While that style will, indeed, make an element invibsle, you never want to use this to hide text that you added for SEO reasons, but do not want to display for visitors. That is a surefire way to have your site penalized for a black hat approach to SEO.

Common Inline Element Formatting Mistakes

One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element.

This does not work because inline elements widths are not defined by the container box. 

Inline elements ignore several properties:

  • width and height
  • max-width and max-height
  • min-width and min-height

Note: Microsoft Internet Explorer (now called Microsoft Edge) has in the past incorrectly applied some of these properties even to inline boxes. This is not standards compliant, and this may not be the case with newer versions of Microsoft's Web browser.

If you need to define the width or height that an element should take up, you'll want to apply that to the block-level element containing your inline text.

Edited by Jeremy Girard on 2/3/17