Nested Elements: HTML Web Development Tutorial Series Part 3

nested elements

Nested Elements

Continuing on from the last lesson, where we talked about TAGS, ELEMENTS, AND EMPTY ELEMENTS, we are going to work with nested elements. The simplest way to describe a nested element is “an element inside of another element. Let’s use a very simple example to start this lesson off. See the line of code below.

<p><em><strong>This is an example of nested elements.</strong></em></p>

In the line of code above, we have a strong element that is nested inside of an em element; the em element is nested inside of a p element, and this line of code would be nested inside of the body element. This code would give us a paragraph sentence that is completely italicized and bold. The important part to notice here is how the elements are opened and closed. They are opened inside of each other and closed in the exact reverse order. Let’s use some nested elements in an exercise. We’ll nest elements the right way, and then show an example of the wrong way. See the images below.


html nested elements

Displayed Page


As you can see in the Displayed Page image, both sentences display in the same way. But only the first one is the correct way to nest elements. If you copy the html code and validate it in the W3C CODE VALIDATOR you will see the errors that pop up. When nesting more complex code, you will see more dramatic results in what outputs in the display. Lists and list items are often nested to create lists inside of lists. This can be one of the more tricky nested elements to write correctly. Basically, the important thing to know here is that you need to always close nested elements in the exact opposite order as you opened them. Think of nesting dolls. Those dolls that you open up and find another doll inside, and another doll inside of that. Nested elements are exactly like that. You wouldn’t be able to exchange the pieces to a nesting doll and still have it fit together.

Every html document has nested elements. Even in the most basic document with no visible content. Body is nested inside of html, title is nested inside of the head element, and the head element is nested inside of html. Knowing the right way to nest elements can give you the ability to create some really amazing, unique content for your website.

Before we finish up with this quick lesson, I want to talk about code spacing and indentation a little bit. This might not seem important, but it really is. When you start building websites, you are going to end up with hundreds or even thousands of lines of code. Indentation helps you and others be able to read the code easily. It helps organize the code, so that you can quickly find certain areas, and just makes updating or debugging a whole lot easier. Besides making your code easier to read and more organized, by writing code correctly, you are avoiding future problems. In the future, programs like XML readers, might need to read your html. XML is a tool that stores and transfers data, and code needs to be well organized. HTML5 which is essentially the version of html that we are using in this tutorial series is much more sloppy and accepting of messy code. So, you are much better off doing everything as close to a very strict language like XHTML as possible. With so many different coding terms like HTML, XHTML, XML, etc., you are far better off writing your code in a way that won’t create any issues down the line. This is something that even I do wrong a lot of the time. As you code more and more you start to form your own system, which in HTML5 is flexible, but you should follow the guidelines as close as possible. Some rules for indenting and spacing are below.

  1. Do not add blank lines to your code without a good reason. Blank lines should be used to separate large sections of code.
  2. When indenting code, do not use the tab key, hit the spacebar two times.
  3. It isn’t necessary to indent every element.
  4. The doctype declaration should be written in lowercase for continuity. like <!doctype html>

See the final example below, for proper use of indents and spacing.

Incorrect way to indent and space code

incorrect way of spacing and indenting

Correct way to indent and space code

correct way to space and indent

As we go through this series, we will discuss in more detail how things should be spaced and indented with the strict guidelines. We’ve been using a lot of html elements that you might not understand right now. This is still the early stages where we are going over some important rules and have to use some examples with code you haven’t learned yet. Don’t worry about not understanding every detail in the first few lessons. We are going to work with these things individually as well. P.S. Although, from this point on out I will try to stick to the coding standards, there might be times where I don’t follow them exactly, but I still want to make you aware of the guidelines. It’s hard to break certain habits after you’ve done something one way for so long. Much of the time I don’t even realize that I’m doing it. That’s it for this lesson on nested elements and good coding practice. I’ll see you in the next lesson.

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: