Stop Censorship Stop Censorship Ribbon  Semantic meaningful names in html elements. | A Blog about Web Design & Development. WordPress development. Tutorials

Semantic meaningful names in html elements. Published on March 10, 2010

Reduzir tamanho de letra Aumentar tamanho de letra Impressão optimizada do artigo Enviar por email
“When coding a webpage layout, one tends to organize the html elements, naming them by their present location or purpose. Ignoring that, in the future, that organization can make no sense at all.”

Lets say you’re coding a three column layout with a header and a footer. You will use two columns as sidebars and the third as the central to hold the content.

Naturally you would name your columns with some semantic significant names, like “Left Column”, “Central Column”, “Right Column”, “Header” or “Footer. Probably something like that, right?

Ok, fair enough, these “location” names will definitely help you to organize your content trough the layout development. But what will happen if a couple of months later you decide to refresh your layout and move things around?

Let’s say you are tired of your old-fashioned layout, and you decide to change the elements positions.

For instance, move your content to the left, and the two other columns to the right, in a different order as they where originally.

Now all your semantic meaningful names will make no sense at all!

Now the “Central Column” will be at the left! and your “Left Column” will be at the most right position!, and the “Right Column” will now be at the center! – Chaos!

- The above was an exaggerated example to show you why you should’t use semantic-meaningful names in your html elements names, especially ones that are named after something as volatile as the element’s position, the element’s size, or appearance.

If you really MUST use semantic-meaningful names, DO name them after their function, and never after their position in the layout.

An element will probably always keep the same content even if its position or its appearance varies. So chances are, you could safely name the element bearing your contents as “Content” and another bearing a menu, could be safely named “Menu” and another bearing widgets or pub could be named “widgetBar”…

Purists would say the names (class names, ID Names) should have no semantics at all, and should have abstract names like “element A” or “element B”. In my experience I tend to use a compromise between abstract and content-dependent-semantic-meaningful-names (ouch!) in some cases I do name my elements (lets say Divs) with abstract Id names like div id=”div1” but sometimes I will also name others like div id=”myMenu”.

It’s really up to you. Use common sense and think about the future implications of your present layout organization.

Remember that, this was one of the main reasons we’ve abandoned table-based layouts: – To be able to easily move things around, without completely destroying the layout. – Keep that in mind!

Have fun!

2 comments on “Semantic meaningful names in html elements.”

  1. Mark says:

    Very good and interesting way of explaining why to use semantic names for your divs. Well done :D

Go ahead! Leave your comment on this subject!

Fields marked with (*) are mandatory!

Spam Protection by WP-SpamFree

Resources
Goodies & Infos
Earn money with your photos

Tip: go to Shutterstock, submit your photos and make an extra income every month. - I do!

MAC

 

Categories

 

External Resources
Twitter Updates
    © 2010 - All rights reserved - WDMAC A Blog about Web Design & Development. WordPress development. Tutorials