Nesting and Indenting
HTML elements are made up of tags. The tag is a component of the element the same way that a “word” is a component of a “sentence”. Tags are the items you see below between the less than(<) and greater than(>) symbols. Almost every element 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 receive content, only attributes. While creating HTML markup keep proper nesting and visual indentation in mind.
Child and Parent Relationships
Indenting Your Code
As a beginner take care to indent each element into its parent element. It will help you avoid improper nesting of elements. This is a great visual benefit for the author during code production, and for others that may view the source code afterward.
Nesting Your Tags Properly
<div><p>This is my paragraph...</p></div> Poor Nesting
<div><p>This is my paragraph... </div></p> This second example will result in invalid markup. The </div> closing tag has to go after the closing </p> tag in order for the paragraph to be nested into the div properly.
The void elements are ones that do not have a closing tag and therefore cannot have content placed inside them, and they make no nest. The void elements are:
area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr