My Top 5 HTML Coding Preferences

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

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

Navigation example

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

Breadcrumbs example

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

Button example

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

Comment example

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

Form example

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.

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

Jaina on 7 Jan, 2010 wrote:

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?
cssglobe on 7 Jan, 2010 wrote:

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.
Nikola Plejić on 7 Jan, 2010 wrote:

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.
cssglobe on 7 Jan, 2010 wrote:

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.
Carlos Andre Ferrari on 7 Jan, 2010 wrote:

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?
cssglobe on 7 Jan, 2010 wrote:

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. :)
Stu Greenham on 7 Jan, 2010 wrote:

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.
indie_preneur on 7 Jan, 2010 wrote:

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>.
Jon Hartmann on 7 Jan, 2010 wrote:

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.
Stuart W on 7 Jan, 2010 wrote:

I use p tags for label/input pairs, maybe not semantically pure but divs look terrible unstyled
Sean on 7 Jan, 2010 wrote:

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.
Jordan Walker on 7 Jan, 2010 wrote:

Nice article.
Andy Ford on 7 Jan, 2010 wrote:

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!
Mike on 7 Jan, 2010 wrote:

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!
Wladia Viviani on 7 Jan, 2010 wrote:

Again about label+input: why not use fieldset?
It'd be my semantical bet since it's intended for subsets of a form.
Rafi B. on 7 Jan, 2010 wrote:

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.
Jaine......I LOVE WEB DESIGN on 7 Jan, 2010 wrote:

Great concept. Got it right away! Beautifully executed.

Muchas gracias!
Jay Tillery on 7 Jan, 2010 wrote:

Using <button> absolutely makes sense. Good tip.
Tim on 7 Jan, 2010 wrote:

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.
Susan R on 7 Jan, 2010 wrote:

Sometimes it makes sense do use a data definition list (data pairs) for your forms.
David Hucklesby on 8 Jan, 2010 wrote:

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...
cssglobe on 8 Jan, 2010 wrote:

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.
Sean on 8 Jan, 2010 wrote:

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.
Marco Barbosa on 8 Jan, 2010 wrote:

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

Thanks for shargin!
viettel adsl on 9 Jan, 2010 wrote:

Nice list and reasons for using these elements, but html5 can harm SEO???
Wladia Viviani on 9 Jan, 2010 wrote:

@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)?
prlamnguyen on 9 Jan, 2010 wrote:

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!
zwire on 9 Jan, 2010 wrote:

Greate tips, especially I like your way to coding comments.

Thanks for shargin!
Sandeep on 9 Jan, 2010 wrote:

every 1 will have their own style how they code...
????? ??????? on 10 Jan, 2010 wrote:

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.
????? ??????? on 10 Jan, 2010 wrote:

btw. Your engine doesn't support unicode names in comments? Weird
dave on 11 Jan, 2010 wrote:

Good tips. Sometimes I wrap inputs with the label tag and wrap groups of them with a fieldset.
shpyo on 12 Jan, 2010 wrote:

For me, the most important thing is the way that you argued your choises. I really liked it.
hannes on 13 Jan, 2010 wrote:

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.
Chotrul Web Design and SEO on 15 Jan, 2010 wrote:

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.
SMiGL on 19 Jan, 2010 wrote:

Nice post. Thanks
çabuk zayiflama on 31 Jan, 2010 wrote:

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

Sorry, further comments are disabled for this post.

CSS Globe is looking for writers!
Please contact me here!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe