My Top 5 HTML Coding Preferences

written on:7 Jan, 2010 by Alen Grakalic

My Top 5 HTML Coding Preferences

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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

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.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

Jaina 7 Jan, 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?
cssglobe 7 Jan, 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.
Nikola Plejić 7 Jan, 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.
cssglobe 7 Jan, 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.
Carlos Andre Ferrari 7 Jan, 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?
cssglobe 7 Jan, 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. :)
Stu Greenham 7 Jan, 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.
indie_preneur 7 Jan, 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>.
Jon Hartmann 7 Jan, 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.
Stuart W 7 Jan, 2010

I use p tags for label/input pairs, maybe not semantically pure but divs look terrible unstyled
Sean 7 Jan, 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.
Jordan Walker 7 Jan, 2010

Nice article.
Andy Ford 7 Jan, 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!
Mike 7 Jan, 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!
Wladia Viviani 7 Jan, 2010

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

Great concept. Got it right away! Beautifully executed.

Muchas gracias!
Jay Tillery 7 Jan, 2010

Using <button> absolutely makes sense. Good tip.
Tim 7 Jan, 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.
Susan R 7 Jan, 2010

Sometimes it makes sense do use a data definition list (data pairs) for your forms.
David Hucklesby 8 Jan, 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...
cssglobe 8 Jan, 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.
Sean 8 Jan, 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.
Marco Barbosa 8 Jan, 2010

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

Thanks for shargin!
viettel adsl 9 Jan, 2010

Nice list and reasons for using these elements, but html5 can harm SEO???
Wladia Viviani 9 Jan, 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)?
prlamnguyen 9 Jan, 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!
zwire 9 Jan, 2010

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

Thanks for shargin!
Sandeep 9 Jan, 2010

every 1 will have their own style how they code...
????? ??????? 10 Jan, 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.
????? ??????? 10 Jan, 2010

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

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

For me, the most important thing is the way that you argued your choises. I really liked it.
hannes 13 Jan, 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.
Chotrul Web Design and SEO 15 Jan, 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.
SMiGL 19 Jan, 2010

Nice post. Thanks
çabuk zayiflama 31 Jan, 2010

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 a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News