The problem with using the <CENTER> tag...What's wrong with the center tag, you might ask. "We've used it for years!" you might say. After all, it's been around since HTML first started. Everyone uses it. The CENTER tag is actually a valid tag so it is okay to use it, but it is a badly deisgned tag (the originator of the CENTER tag will tell you this!) and it allowes for, indeed it practically encourages, badly designed code. Here's an example that was given in a recent eBay Photo/HTML board thread:
(user id's and graphics changed to protect the innocent of course)
Okay, so it works, right? So what's wrong with it? Well, first off, it really doesn't work. It's incomplete. In order to get the graphic and text to align properly in the center as intended and finish off the code I had to add a closing </CENTER> tag... it worked on the Photo/HTML board because the board compensates for errors like that. What about the person that posted the thread asking for help who was so thankful to get this code? Well, they must have been smart enough to add the closing tag also, or like so many me pages and auction listings you see, everything on their page was simply centered. That's a great way to overcome errors... just leave everything centered anyway! But if you want to control your page layout and make things a little more organized rather than just centered, you would have to put the closing tag into the code. So where would you put it? The obvious and typical answer would be "at the end" and that seems right at first glance... but it's not. There's a little thing about nesting tags. Tag pairs that go inside of other tag pairs, like this:
Notice that the tags close in the reverse order from the way they open... P, B, I, then I, B, P. That is called nesting. You should always nest tags like this and never cross them like this: P, B, I, then P, B, I. Here's a graphic to help show you what I mean:
Tags should be nested like stacked mixing bowls, one pair inside another pair working from the inner to the outer sets. That's the right way to do it. So what's that got to do with the CENTER tag and the above example? Well, let's look at our original code again: <a href=http://www.store.ebay.com/id=1234567&ssPageName=L2><center><img src=http://www.ourhutch.net/examples/graphics/moreStore_88x31 width=88 border=0> </a><br> click to see my Stores Sales Just where were you going to put that closing /CENTER tag? At the end? But then you will have tags nested like this: Anchor Center Image /Anchor Break (text) /Center Notice that the Anchor pair and the Center pair cross over each other rather then nest properly. So, what do we do? Well, if we insist on using the CENTER tag, then we need to add one closing tag and a whole second pair, like this: <a href=http://www.store.ebay.com/id=1234567&ssPageName=L2><center><img src=http://www.ourhutch.net/examples/graphics/moreStore_88x31 width=88 border=0> </a></center><br><center> click to see my Stores Sales</center> I've colored them red so you can see where they are. The original one is green. That's four tags to do what two should be able to. It is valid code but it seems like a wasted effort to me when it can be handled better. Another choice would be to move the original CENTER tag to the front of the code and add its closing tag at the end, like this: <center><a href=http://www.store.ebay.com/id=1234567&ssPageName=L2><img src=http://www.ourhutch.net/examples/graphics/moreStore_88x31 width=88 border=0> </a><br> click to see my Stores Sales</center> This is valid code using just two tags, but why wasn't it offered in the beginning? Well, that's because the CENTER tag just encourages bad code. It's too easy to plop it in somewhere without thinking about nesting or other good coding practices. Even so-called experts who rely on the CENTER tag often end up making bad code just because it is so easy to do so. What's the best solution? Well, first I would have to say, "Anything that doesn't use the CENTER tag!" and again, HTML is flexible so there are several good solutions. What I would personally use in this instance is the DIV (division) tag. The whole block of code I'm using for our example hangs together for a single purpose... it is a division or complete idea within the page code. So the DIV tag is a natural. We enclose the whole code block with the tag pair and use the ALIGN attribute to obtain the centering, like this: <div align=center><a href=http://www.store.ebay.com/id=1234567&ssPageName=L2><img src=http://www.ourhutch.net/examples/graphics/moreStore_88x31 width=88 border=0> </a><br> click to see my Stores Sales<</div> Now, that is fairly good code. It's easy, clean and just two tags. When you understand the purpose of the DIV tag (ie: to mark out a block or division of code) then you would never be tempted to plop it in the middle of this code as was done with the CENTER tag. But there are still two more things that I would do to finish with this code example:
<div align="center"> Okay, so this is just a small code block and the world isn't going to end because the CENTER tag was used, but it is typical of the simple problems that build upon each other to eventually make your web page, me page or auction listing no longer work. The small problems compound into bigger ones and eventually you have a real mess on your hands! It's alwasy the right time to use good code!
[ back to main | back to top ]
| ||
