START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

In this HTML lesson, you’ll learn the difference between block-level elements and inline elements. I’ll give examples of both block-level and inline elements to clarify how this plays out in the real (code) world. With these examples you’ll learn how block-level elements behave differently than their inline cousins. Finally, I’ll help you make sure your tags in are in the right order, by introducing you to “proper nesting”.

*NOTE: Throughout this site, we’ve been referring to the building blocks of HTML as “tags.” They’re also called “elements,” and since I don’t want you to forget that, for this tutorial I’m using the term “element” to be sure you keep it glued in your noodle.

HTML Elements Fall Into Two Categories: Block-Level Elements and Inline Elements

There are two kinds of elements. Block-level elements act like separate paragraphs, and everything that is done to them applies to the entire paragraph.

Don’t worry Robert, HTML elements aren’t people.

Conversely, inline elements can do things block elements can’t: there can be more than one inline element in a row, inline elements can format characters, and they can fall inside paragraphs. It sounds complicated, but the “rules” for block-level elements make sense when you get into the examples.

For example, you can use the  <strong>  element for bold within a paragraph, you can make a letter, word or phrase bold—you’re not limited to affecting the whole paragraph.

On the other hand,  <h1>  is a block-level element: as soon as you surround content with the  <h1>  heading element, it looks like a separate paragraph with spacing around the paragraph. Any content following the  </h1>  closing element will appear as a separate paragraph below the heading.

Fear not, minutes form now inline elements will make all kinds of sense

Rather than worrying about the rules, over time it simply makes sense that the  <h1>  tag should apply to the entire paragraph, and not to some select part of it. After all, if you declare said text is the title of your post, it shouldn’t very well be part of the first paragraph too, should it?

Examples of HTML Block-Level and Inline Elements

Here are some examples of block-level (paragraph based) elements and inline elements. See if you can figure out whether the element will be block or in-line, based on how it’s used.

Is the  <img>  Element (To insert an Image) a block-level or inline element?

Clues:

  • You can have more than one picture in a row, left-to-right.
  • You can stick an image element anywhere on the page.
  • The  <img>  element does not force the text to break into new paragraphs.

ANSWER: Therefore,  <img>  (the image tag) is an inline element.

Are List Elements (To Create Bulleted and Numbered Lists) block-level or inline?

Clues:

  • Every list item is on its own line.
  • Each separate list is arranged vertically, like separate paragraphs, with space between each list.

ANSWER: Therefore, list elements are all block level, including  <ol>  (ordered lists),  <ul>  (unordered lists), and  <li>  (list items).

Is the  <a>  Element (For Links) block-level or inline?

Clues:

  • A link can take up a whole paragraph but it can also be just one word or phrase.
  • You can insert the link within the paragraph without affecting the rest of the paragraph.

ANSWER: Therefore, the  <a>  anchor element is an inline element.

Summary:

Block Level Elements: Inline Elements:
Heading Elements <h1> through <h6> Bold <strong>
Paragraph Element <p> Emphasis (Italics) <em>
List Elements <ul>   <ol>    <li> Image Element
<img src=”path-to-image”>
Div Element (a container used for layout) <div> Anchor Element for Links
<a href=”path-to-link-address”>

I hope you will take a minute to think on these distinctions. Does it make sense to you that these block-line elements behave the way that they do? Does it make sense to you that a paragraph element should be treated differently, and apply to the whole paragraph?

If HTML was Candy, the filling would be inline, and the outer chocolate shell would be block-level.

If HTML was Candy, the filling would be inline, and the outer chocolate shell would be block-level.

Proper Nesting of Block and Inline Elements

Inline elements go inside block level elements. For example, bold or italic elements should go inside paragraph elements.

This is correct nesting:

This is incorrect:

I remember that nesting rule by thinking of the inline elements like bold as being small objects, and small things naturally go inside big things like paragraphs (and other block-level elements).

Here’s another common example. Most navigation bars menus use list tags with links to the main pages within the site. List tags are block-level, and the anchor tag (for links) is an inline tag. Can you guess which order the tags go in?

I bet you’ve caught on that the block-level tag goes first:

If you think of elements like buckets or containers, it makes sense that they must be properly nested. After all, you can have as many buckets inside as many other buckets as you want. But you can’t have a bucket that is half inside one bucket and half inside another. It needs to be clear where one thing ends and the next begins.

HTML is like Russian nesting dolls. You can put a smaller doll inside a larger one, but you can't put one doll inside two at once, no matter how small. <li><a href="" target="" title="" ><img src="" alt="" /></a></li>

HTML is like Russian nesting dolls. You can put a smaller doll inside a larger one, but you can’t put one doll inside two at once, no matter how small. [image via Wikipedia]

A different way to muck up the order of those elements would be to not nest them at all. (So many ways to do it wrong, uh-oh).

This would be wrong, for example:

…because all tags must be completely nested within other tags. This means you have to finish the <strong> tag before you close your <p> paragraph, in this example. Make sure you close the tags in the opposite order they began.

If you had several paragraphs in a row that are all bold, you would place a separate pair of strong tags around each paragraph (so that the inline tags always fall inside their bigger block-level cousins).

Here’s how three bold paragraphs in a row would be coded:

Let me say that again, because it is one of the biggest rookie mistakes!

All tags must be completely nested within other tags.

One way to understand the idea of “nesting” is to see the matching open and closing elements connected with a line. Here’s a diagram that shows how it would look if your tags are properly nested:

Proper nesting of tags

If you connect the matching open and closing tags, they appear nested, one pair of tags inside another.

Here’s a diagram showing how it would look if your tags were in the wrong order:

Tags in the wrong order

These tags are in the wrong order. Notice that if you diagram and connect the pairs of matching tags, the lines overlap. It’s a visual way of seeing that the tags re not nested correctly.

The anchor element is an inline element, so it should go inside block level elements such as  <p>  or  <li>  elements.

For example, if you have a list of links, the list item element  <li>  should wrap around the  <a>  element for the link. It would look like this:

Proper nesting is why many web coders break new elements out into separate lines in their code. The above code could be written out as:

…and you’re browser would read it just find. If you are getting confused, break each new element into a new line, and use the “Tab” key to push nested elements further to the right, like this:

This makes the proper nesting easier to see.

The pattern of nesting is “First In, Last Out”. The first tag you open, should also be the last tag you close. In the above, the first element in is the block-level element, <ol> so the last element out is the closing tag </ol>.  All elements introduced under <ol> must be closed out before that first element.

You’ll avoid a lot of coding errors (and broken web pages) by knowing the rule of “First In, Last Out”!

Remember bro, First in, Last out

Here’s a checklist you can use to see if you tags are in the right order:

Proper Nesting Checklist

  1. Did you close all tags?
  2. Are block-level tags starting before inline tags?
  3. Did you close tags in the right order—following the “First In, Last Out” rule?
The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • http://Www.Lmgtfy.com/?q=google+adwords+login jquery google api

    Hi there would you mind letting me know which webhost
    you’re working with? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot
    quicker then most. Can you recommend a good web
    hosting provider at a honest price? Kudos, I appreciate it!

    • http://www.learnhtmlwithsong.com Diane Presler

      Stable host is a great host!

  • http://fiverr.com/eebest8 eebest8

    wow, awesome blog.Much thanks again. Great.

  • Ebnul Karim Khan

    Hello Diane,
    You have done a great job. This is really very good guide about online store template of HTML coding.
    Thanks for your great effort.

  • Pingback: The Image Tag: Insert a Picture in Your HTML()

HTML Lessons

©2013 Diane Presler. All rights reserved.