It All Started with the Level Element

After many years teaching web design I came to the realization that most professional designers don’t know how to properly nest tags. Now, you would probably ask, why is this important? the answer is CSS and the Doctype.

It all started with block level and inline level elements. Unfortunately, this should be the first HTML class for anyone, but due to obvious reasons and since many of students want to quickly start coding HTML, it is often skipped.

You see, HTML is divided into two types of elements, block and inline level. Although there are quiet a few characteristics to each, one of the fundamental differences is that Block level include a built-in line break while the inline level doesn’t.

a <p> for example, is a block level element, with the unique exemption than <p> can’t nest another <p>.

Now,  it all starts to make sense, you know discovered why <div>,<br />, <p>, <h1>, etc. once closed, the next element starts automatically on a new line.

Since I said earlier improper nesting affects CSS and the Doctype, lets see why.

Every time you follow best practices and declare a Doctype to each one of your pages, you, without knowing, are setting a rule that will affect the CSS where it will force it to review the nesting of all your tags. Yes, believe it or not, some rare cases of why CSS rules can’t be applied are directly link to improper nesting of tags.

<div> as a block level element allows <p> to be nested inside but even the number of nesting within can in some cases be affected.

I hope this clears some of your confusion regarding proper nesting.