HTML elements and endtags

Hello everybody,

I thought I post the code below after I saw that someone posted a pretty weird code on a forum asking what was wrong with it. The poster is clearly unaware of the concept of the end-tag. Depending on your doctype all* HTML elements require an end-tag (*xhtml). The code that was posted looks like this:

Code:

    <div class="footer">
      <div class="footertxt">
        <div class="footerme"> <>
        <div class="footerright"><>
        <div class="footerimgmail"><>
        <div class="footercopyleft"><>
        <div class="footercopyright">
          <div class=" "><>
        <>
      <> <!-- closes footertext -->
    <> <!-- closes footer -->

this code is pretty much invalid. A good editor would have told this directly. (netbeans does a great job at this)

now back to the code:

the poster did this : <>   but that doesn't mean anything really.

Since all* elements in html require an end-tag we should do the following
for a div-element

• the start-tag is <div>
• the end-tag is </div>

and for a p-element

• the start-tag is <p>
• the end-tag is </p>

See the / in the end-tag? all end-tags have that.

So in this situation the poster was using a div in a div (nested elements)
so it should look like this:

Code:

<div id="outer-div">
     <div id="inner-div"></div>
</div>

By using clear indentation we can easily see which start-tag is the "partner" of which end-tag. Any-time an element is a nested child, you make an extra indentation. So the code should have looked like this:

Code:

<div class="footer">
      <div class="footertxt">
              <div class="footerme"> </div>
              <div class="footerright"></div>
              <div class="footerimgmail"></div>
              <div class="footercopyleft"></div>
              <div class="footercopyright">
                    <div class=" "></div>
              </div><!-- closes footercopyright -->

      </div> <!-- closes footertext -->
</div> <!-- closes footer -->

Happy coding! Feel free to leave a comment if you have questions or requests

Cssfreakie