posted on:January 7, 2010
My Top 5 HTML Coding Preferences
Every coder has his/her own coding style based on personal preferences. Not all of us markup the document in a same way. Some decide to choose one element while other coders prefer some other solution. In this article I will list 5 of my most usual coding preferences and explain my reasons.
Unordered list vs any other element in navigation
This is very popular way to markup navigation items for obvious reason: it is a list of links. That alone should be reason enough to choose this kind of marking up the content and go an extra mile to remove the list’s default styling and apply something more suitable.
One more benefit that this markup provides a bunch of elements to work with using CSS. You have a parent list element and each link is also wrapped inside a list item. It’s more than you can wish for
<ul> <li><a href="#">Nav item 1</a></li> </ul>
Paragraph vs list in breadcrumbs
This is open for debate and please let us all know if you have another opinion in comments. I personally like to use the following code pattern for breadcrumb trail (however I don’t always use the » symbol):
<p id="breadcrumbs"><a href="#">Home</a> » <a href="#">About Us</a> » <a href="#">History</a></p>
Breadcrumb trail is a hierarchical path to a certain page. One of the logical thing to do is using nested lists to display this hierarchy. But what is a point of having nested lists if you have only one item in each list? More so, I really feel that breadcrumb trail should be presented linear.
Button vs input
I can’t remember when was the last time that I used input type="submit". I abandoned that element a long ago. A couple of reasons why button element rock and input type="submit" doesn’t: Button is its own element, that makes it easier to identify in the source code, easier to select with css (not all browsers out there support attribute selectors). It also allows use to put child elements inside it so it expands our styling possibilities.
<button type="submit">Submit Form</button>
Ordered list vs unordered list in comments
Lists are great. Really. There are 3 different types of lists (ordered, unordered and definition list) and each has its purpose. If you have doubts when to use ordered and when to use unordered try to shuffle the items randomly and see if the content still makes sense. Comments are somewhat of a textbook example of using ordered list because of their chronological, ascending linear nature. Each comment comes with a certain time stamp so comments must appear in that order.
<ol class="comments"> <li> <ul class="meta"> <li><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li><a href="url-to-authors-homepage.html">Author's name</a></li> <li>posted on date-goes-here</li> </ul> <div class="body">Comment text goes here...</div> </li> </ol>
Div vs any other element in wrapping label / input field
What is the best choice of element to be used as a parent for input field and its related label?
<label for="contactName">Your Name</label> <input type="text" name="contactName" id="contactName" class="field" />
There has been some discussions on this site a while ago about the proper markup. After a while I settled with using DIVs:
<div> <label for="contactName">Your Name</label> <input type="text" name="contactName" id="contactName" class="field" /> </div>
The label and associated form control can be described as a section. DIV element has very wide semantic quality and it fits into every situation.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (37 Comments)
Sorry, the comment form is closed at this time.