Get DevWP - WordPress Development Theme

HTML Block & Inline Elements

HTML has two different types of elements, Block Level and Inline Level Elements. The gist is Block Level Elements take up the full width of the current container while an Inline Level Element only takes up its current space. Confused? It’s not as difficult as it sounds at first.

HTML Block Level Elements Explained

Block level elements always cause a new line break and can either take up one full line or multiple lines depending on the element.

Block Level Element Examples:

  • <p>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <article>
  • <address>
  • <aside>
  • <section>
  • <div>
  • <main>
  • <ul>
  • <li>
  • <nav>
  • <header>
  • <footer>
  • <table>
  • <blockquote>

Those are just a few of the Block Level Elements at your disposal.

HTML Inline Level Elements Explained

As mentioned before, an Inline Level Element does not cause a line break and continue in the flow or context of the current parent element.

Inline Level Element Examples:

  • <span>
  • <a>
  • <img>
  • <strong>
  • <input>
  • <select>
  • <textarea>

Those are just a few of the Inline Level Elements at your disposal.

When to use a Block Level or Inline Element?

A quick example of using a Block level element is when you need some form of container like a <div> for other HTML Elements.

You would use an Inline level element when you need some type of container for text but don’t want to force a line break. Example is using a <strong> which makes the text bold and provides more semantic meaning to the text.

Hopefully this tutorial helped clear up the difference between HTML Block level and Inline Level Elements. Thanks for reading and check out some of the other HTML Tutorials here on PixemWeb.

View Our Themes