Nesting And Indenting

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

When you nest an element inside of another element, the nested element becomes a child of the parent. Many child elements can be placed into a parent element making a sibling relationship among the group of nested children. If the parent element moves(animated across the page), the children will automatically move with it. This hierarchy provides a good amount of logic for affecting many elements all at once through CSS and JavaScript in your programs, plus a wide array of other benefits.

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. <section> <h2>This is some heading text</h2> </section> Indention also applies to your curly brace nests when you begin to program JavaScript, PHP or any other script language. So code indention is a good practice to begin straight away.

Nesting Your Tags Properly

Good Nesting <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.

Void Elements

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


I Am Developer And Want To Share My Knowledge With The World..:) ;) . I Have Another Social Networking Website (Renewchat) And For Designing Or Developing Of Website Purpose You Can Contact Me On Renew Coder .. :) ;)

Leave a Reply

Your email address will not be published. Required fields are marked *