If you are not inclined to use HTML comments in your web page markup you certainly never spent hours trying to fix a messed up CSS layout. That’s a loss of productivity and money that could have been avoided with just a simple preventive measure: using HTML comments. It takes less than 20 seconds to write one that could save you an hour of layout troubleshooting.
You just devoted hours creating a pixel-precision CSS layout, tweaked and tested it on various web browsers. It all looks good and works perfectly even in IE6. You now have a template you can use to create your web pages. You start adding content, preview that web page in a browser and surprise, oh surprise, your nicely crafted layout is now out of control.
What happened? More likely mismatched <div>, <p> or <span>,… tags!!
Without proper comments to indicate where each main container tag is closed in the HTML markup, it can be challenging and painful to “hunt” the source of this layout issue. Because you now have so many nested tags, you would have to look into your HTML markup line by line to match each opening and closing tag. And if you happen to miss just one of them, you will have to start all over again from the “<body>” tag down.
Let’s just take a look at this typical markup within a body of an HTML document:
<div id=”wrapper”><div id=”header”>Header content goes here </div><div id=”maincontent”><div id=”content”> Page content goes here</div><div id=”sidebar”> Sidebar Navigation</div></div><div id=”footer”> Footer Content goes here</div></div>
It looks clean and is self-explanatory. However once you start to copy & paste content in the different containers and add new blocks , matching tags becomes a daunting task. That’s because each container can wrap smaller containers through a nesting process that can go on and on. It’s hard to tell which closing “</div>” corresponds to which opening “<div …>”.
That’s why you need to always comments your HTML markup before you start adding content. For instance the markup shown above would be properly commented as follow:
<div id=”wrapper”>
<div id=”header”>Header content goes here </div><!– end header –>
<div id=”maincontent”>
<div id=”content”> Page content goes here</div><!– end content –>
<div id=”sidebar”> Sidebar Navigation</div><!– end sidebar –>
</div><!– end maincontent –>
<div id=”footer”> Footer Content goes here</div><!– end footer –>
</div><!– end wrapper –>
The portions “<!– … –>” are HTML comments. The will never be displayed by a web browser when placed in your HTML markup.
So the tips I would like to share with you based on my daily experience are:
- Comments helps you annotate your markup for future reference.
- Add an HTML comment right after the closing tag “</div>” tag of each main container.
- Commenting your HTML code help you set reference point where each HTML tags is closed.
- HTML comments helps you isolate each block and quickly fix a CSS layout issue.
Tags: comments, container, css, div, html, layout, nest, nested, nesting, wrapper
Posted in CSS Tips and Tricks, Dreamweaver Tips, HTML Tips
Use HTML Comments To Solve CSS Layout Issues
February 2, 2010If you are not inclined to use HTML comments in your web page markup you certainly never spent hours trying to fix a messed up CSS layout. That’s a loss of productivity and money that could have been avoided with just a simple preventive measure: using HTML comments. It takes less than 20 seconds to write one that could save you an hour of layout troubleshooting.
You just devoted hours creating a pixel-precision CSS layout, tweaked and tested it on various web browsers. It all looks good and works perfectly even in IE6. You now have a template you can use to create your web pages. You start adding content, preview that web page in a browser and surprise, oh surprise, your nicely crafted layout is now out of control.
What happened? More likely mismatched <div>, <p> or <span>,… tags!!
Without proper comments to indicate where each main container tag is closed in the HTML markup, it can be challenging and painful to “hunt” the source of this layout issue. Because you now have so many nested tags, you would have to look into your HTML markup line by line to match each opening and closing tag. And if you happen to miss just one of them, you will have to start all over again from the “<body>” tag down.
Let’s just take a look at this typical markup within a body of an HTML document:
<div id=”wrapper”><div id=”header”>Header content goes here </div><div id=”maincontent”><div id=”content”> Page content goes here</div><div id=”sidebar”> Sidebar Navigation</div></div><div id=”footer”> Footer Content goes here</div></div>
It looks clean and is self-explanatory. However once you start to copy & paste content in the different containers and add new blocks , matching tags becomes a daunting task. That’s because each container can wrap smaller containers through a nesting process that can go on and on. It’s hard to tell which closing “</div>” corresponds to which opening “<div …>”.
That’s why you need to always comments your HTML markup before you start adding content. For instance the markup shown above would be properly commented as follow:
<div id=”wrapper”>
<div id=”header”>Header content goes here </div><!– end header –>
<div id=”maincontent”>
<div id=”content”> Page content goes here</div><!– end content –>
<div id=”sidebar”> Sidebar Navigation</div><!– end sidebar –>
</div><!– end maincontent –>
<div id=”footer”> Footer Content goes here</div><!– end footer –>
</div><!– end wrapper –>
The portions “<!– … –>” are HTML comments. The will never be displayed by a web browser when placed in your HTML markup.
So the tips I would like to share with you based on my daily experience are:
Tags: comments, container, css, div, html, layout, nest, nested, nesting, wrapper
Posted in CSS Tips and Tricks, Dreamweaver Tips, HTML Tips