TheCodeCrypt

HTML Elements - Block and Inline

: 06 November 2019; By Richard H.

Now that we understand how to create a basic HTML skeleton, let's talk about the different types of tags that can be used. Every HTML element has a default display value associated to it. These default values are block and inline.

Block elements are elements that occur on a new line and always span the entire width of the page from left to right. Examples of block elements are as follows.

Full Width Div

These are examples of block elements

<address >
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>

<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>

<main>
<nav>
<noscript>
<ol>
<p>
<pr>>
<section>
<table>

Inline elements are elements that do not start on a new line and they do not span the entire width of the page. They use only the amount of the width that it needs. Here are some examples of inline elements.

<a >
<button>
<input>
<script>
<textarea>
<code>
<label>
<select>
<em>

<small>
<strong>
<i>
<br>
<img>
<>
<hr>
<big>

I'm sure I missed some of the more uncommon tags, but you get the idea. Let's take a look at what an inline element looks like by creating a form which is a block element and add an input and a textarea to it which are inline elements.

If we wanted to make the form look more like a vertical form, we would change the CSS display attribute to display:block. We can also set the width to 100% so it spans the entire container.

It's not exactly an attractive form, but you get the idea of how inline works compared to block elements.

The <span> tag is somewhat of a unique tag. It's often used for containing pieces of text and you can give them different class names and style them all differently if you wish. There used a lot in forms for displaying error messages and other small areas of text. Unlike the <input> tag where we were able to specify the width:100% which set the <input> to expand the full container, you cannot achieve that directly with the <span> Why? Let's look at an example of using a <span> tag by itself.

This is our span tag containing text

Now let's create the same thing, but set our span tag to a width:100%;

This is our span tag containing text

Wait what?!

Nothing's changed! That's because the <span> tag will not directly take width and height parameters.

Introducing the display:inline-block property. This allows us to give the span tag width and height properties. Let's test it on our previous sample

I'm 100% width now with inline-block!

The same concept can be applied to some other inline elements as well.

Inline Element

inline-block element