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.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (37 Comments)

1. Jaina
   January 7, 2010

   Great tips, thanks for sharing your wisdom! Is there any particular reason why you should have a parent field for a label and its input field? Would it just be for styling purposes or something more semantic?

2. cssglobe
   January 7, 2010

   Jaina, I see it as a compromise between the two. Without the presentation in mind you can easily go without a wrapping label/input combination almost always. Often I have a need for extra element and I defend myself (from semantic point of view) that I merely grouped it with most appropriate element.

3. Nikola Plejić
   January 7, 2010

   Great advice, I'm doing most of the things in a similar way myself. What's your opinion on using an ordered(?) list as a wrapper to label and input fields in a form? It has some semantic value, as it indeed is a list of fields to be populated by the user, and I've seen a couple of examples using this around the web.

4. cssglobe
   January 7, 2010

   In some cases a list is a very good choice! But, what I am after is a general solution, something I can use on all my forms regardless of the quantity of input fields. I see no point of using lists on single item forms such as search forms.

5. Carlos Andre Ferrari
   January 7, 2010

   Alen, Here I use Paragraphs to wrap the input and label fields, cause its easy like divs to insert something else if nedded. What do you think?

6. cssglobe
   January 7, 2010

   Carlos, paragraphs are meant to format text block so it's not semantically correct to use them in this case. I made the same error not so long ago. :)

7. Stu Greenham
   January 7, 2010

   Great post Alen! I totally agree with using UL's for anything navigational, plus added benefit is if the user for some reason has stylesheets disabled then the menu will still appear in the correct order.

8. indie_preneur
   January 7, 2010

   Nice list and reasons for using these elements. For the label + input, I always use <fieldset> to wrap them in. It's semantically correct and easy to style that way, rather than just a basic <div>.

9. Jon Hartmann
   January 7, 2010

   I personally prefer a ordered list for laying out web forms. Forms have an inherent order, and it provides a wrapper element for each pair in the same way that a div does.

10. Stuart W
    January 7, 2010

    I use p tags for label/input pairs, maybe not semantically pure but divs look terrible unstyled

11. Sean
    January 7, 2010

    I don't have the opportunity to use breadcrumbs much in my sites, but I am thinking some sort of list would work nicely. This way the divider between items is not directly in the content.

12. Jordan Walker
    January 7, 2010

    Nice article.

13. Andy Ford
    January 7, 2010

    I agree with Jon Hartmann on using lists for forms. Most forms on printed paper are indeed numbered and therefor Ordered Lists. So I feel that lists are the most semantic way to do form layout. With that said, I do consider divs as the next best option. I've heard good arguments for doing breadcrumbs in an ordered list. In fact the argument uses the same logic you used to support ordered lists for comments: "try to shuffle the items randomly and see if the content still makes sense". However I don't have super strong opinions on breadcrumb nav. A nested list is probably technically the most semantic way to do it, but is just markup overkill. So I usually use an OL as it provides a lot of hooks to work with. Thanks for starting this conversation!

14. Mike
    January 7, 2010

    I agree with most points here - particularly the button element. It's stylable in separation to input elements and I prefer to use tag names rather than clutter up style sheets with excessive classes and IDs. Another element I use a lot is the <q> for quotes in a paragraphh - again, it's stylable, rather than using &ldquot; etc. Also I find structurally [both with CSS enabled and disabled] a definition list is so under used - try it and you'll soon see how great they are!

15. Wladia Viviani
    January 7, 2010

    Again about label+input: why not use fieldset? It'd be my semantical bet since it's intended for subsets of a form.

16. Rafi B.
    January 7, 2010

    I also use the DIV for label+input. I wish there was something else, some people use OL/UL for organizing their form. I don't. @Wladia: You should use a FIELDSET for grouping a bunch of labels and inputs, not for each one.

17. Jaine......I LOVE WEB DESIGN
    January 7, 2010

    Great concept. Got it right away! Beautifully executed. Muchas gracias!

18. Jay Tillery
    January 7, 2010

    Using <button> absolutely makes sense. Good tip.

19. Tim
    January 7, 2010

    I just recently started using DIV over P for wrapping label/input. Not sure why I used P before, I just always had. I would always have to remove the margin, etc. DIV definitely better. I'm not sure about using OL over UL for comments. Your explanation makes sense in most cases, but falls short if the site is listing comments newest to oldest. (Whether or not comments should ever be listed newest to oldest is a whole different argument.) I don't necessarily disagree, but personally will always use UL unless it is an actual numbered list.

20. Susan R
    January 7, 2010

    Sometimes it makes sense do use a data definition list (data pairs) for your forms.

21. David Hucklesby
    January 8, 2010

    I'm considering using an ordered list for breadcrumbs. Thinking about both semantics and screen readers, the order represents the hierarchy, while the change from the usual unordered list might alert voice and braille visitors that this is a special kind of list. Feedback from screen reader users would be valuable here...

22. cssglobe
    January 8, 2010

    Interesting approach with ordered list for breadcrumbs. I mean, it can be interpreted as i.e. 3 steps to to the page. The thing that bothers me really is a forced sibling relations for what are actually parent/child relations.

23. Sean
    January 8, 2010

    Which browsers support the HTML 5 button? Remember that earlier HTML versions, the button tag was a bad idea for forms. For example, the W3 site makes this comment about the button element: Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

24. Marco Barbosa
    January 8, 2010

    And I have the same preferences except for comments where I'd probably use definition lists :) Thanks for shargin!

25. viettel adsl
    January 9, 2010

    Nice list and reasons for using these elements, but html5 can harm SEO???

26. Wladia Viviani
    January 9, 2010

    @rafi, again about FIELDSET usage: yes you're right, however I feel my question is still open: wouldn't it be semantically better than a div for grouping label+input ( = a one-member subset - still a subset - of a form)?

27. prlamnguyen
    January 9, 2010

    I agree list is great, so great to use for navigation, comment list... However, we need more step to style this one more than other elements because of the browsers compatibility. Thanks for sharing your awesome tips, Alen! I realized that using the div element for wrapping input fields is awesome!

28. zwire
    January 9, 2010

    Greate tips, especially I like your way to coding comments. Thanks for shargin!

29. Sandeep
    January 9, 2010

    every 1 will have their own style how they code...

30. ????? ???????
    January 10, 2010

    About button vs submit — if i'm not mistaken, standart buttons don't trigger form submission onenter event, while submit does. So if client is expecting it (say in login form), then you'll have to write either custom javascript handler for keyboard sumission, or add and hide submit as well.

31. ????? ???????
    January 10, 2010

    btw. Your engine doesn't support unicode names in comments? Weird

32. dave
    January 11, 2010

    Good tips. Sometimes I wrap inputs with the label tag and wrap groups of them with a fieldset.

33. shpyo
    January 12, 2010

    For me, the most important thing is the way that you argued your choises. I really liked it.

34. hannes
    January 13, 2010

    button: @????? ??????? button-tags are reacting on "enter". or what do you mena with stanard, buttons? button type=submit does. breadcrumb: for breadcrumbs I use an unordered list, because in my case normally it's longer then three entrys. in that case it makes sense to me to use a list. forms: for longer forms I use the dl/dd/dt combination for labels and form-elements. with a bit of css, that is looking perfect, even without css.

35. Chotrul Web Design and SEO
    January 15, 2010

    It's very interesting to watch the spread of definition lists in markup over the last few years. There are obvious no-brainers like for FAQ's, etc, but they've also be deployed for all manner of things which are perhaps stretching the concept of name and definition. One of the things I love though about how the whole process of standards and semantic markup is maturing, is the enormous amount of development and sharing of ideas on these things. The internet community is truly a wonderful thing.

36. SMiGL
    January 19, 2010

    Nice post. Thanks

37. çabuk zayiflama
    January 31, 2010

    Extremely interesting article. As a css beginner, I learned so many things from this article

Sorry, the comment form is closed at this time.