HTML Nesting and Indenting

HTML Nesting and Indenting

HTML Elements" are commonly referred to as "HTML Tags". HTML Tags are the items you see below between the less than(<) and greater than(>) symbols. Most every HTML tag has an opening tag and a corresponding closing tag, making a nest of sorts for you to place other elements and content. There are a few exceptions that are called "void elements" that do not recieve content, they only receive attributes. So while creating HTML markup keep proper nesting and visual indentation in mind.


Understanding the Void Elements

The void elements are the HTML tags you will come across that do not have the closing part to them and therefore cannot have content placed inside them and make no nest. The word "Void" sounds bad but they are all "Good".

The void elements are:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Indenting Your Code

Beginners have a much easier time keeping their code nests clean if they take care to indent each tag into its parent tag. Here is an example of indenting tags into their parent tags.

<div>
   <h2>
     This is some heading text
  </h2>
</div>

Indention also applies to your curly brace nests when you begin to program Javascript, PHP or any other script language. So code indention is agood practice to begin straight away.

Nesting Your Tags Properly

Good Nesting

<div>This is my div tag content</div>
<p>
  This is my paragraph...
</p>

Poor Nesting 

<div>This is my div tag content
<p>
  This is my paragraph... </div>
</p>

This second example is poorly nested. This will result in invalid markup. The </div> closing tag has to go either after the words "tag content" or directly after the closing </p> tag to retain valid markup. It cannot be where it is in the example above because that breaks the nests of both tags.

Tweet