Comments on: What are the most common HTML tags you use in main content divs?

Question: What are the most common HTML tags you use in main content divs?

Karmakaze — Tue, 30 Dec 2008 14:01:14 -0800

What are the most common HTML tags you use in main content divs? I'm trying to put together a sample document to test css.

I'm sorting through a bunch of third party css templates and have been tasked with dropping actual content into them. Not surprisingly, I'm finding a bunch of them break when faced with reality. (For example, a lot of the designers zero'd out margins and padding and seem to have forgotten to add them back to anything but paragraphs for the main content areas.)

I'd like to put together a simple sample content block to plug into the templates so I can say "Look, if this snippet won't render properly, I'm not even looking at it." I know I need to check P, UL, OL, LI (including some nested lists), IMG, TABLE, TR, TH, TD and BLOCKQUOTE. What other tags turn up in main content a lot that I should include, too?

(I realize part of the answer is to get better designers, but I have to work with what I have, and I figure getting better specs to them will smooth a lot of this out.)

By: shownomercy

shownomercy — Tue, 30 Dec 2008 14:04:48 -0800

This adds a few things to your list, and best of all is pre-ipsum'd.

By: camcgee

camcgee — Tue, 30 Dec 2008 14:37:40 -0800

Definition lists: dd, dl, dt

Text formatting: a, strong, em, abbr, del, cite, q, sub, sup (of course there are more but these are really the only ones I personally ever use)

Forms: form, fieldset, textarea, input, label, button option, select, legend

By: camcgee

camcgee — Tue, 30 Dec 2008 14:38:21 -0800

Should be a comma between button and option, natch.

By: amtho

amtho — Tue, 30 Dec 2008 15:07:53 -0800

blockquote

Good on you for making specs!

By: ewingpatriarch

ewingpatriarch — Tue, 30 Dec 2008 15:16:30 -0800

allll the different [input] types.

take a look at http://sencss.kilianvalkhof.com/ - it might be relevant to what you're working on. unfinished, but still, maybe a link to have your designers check out. good luck!

By: CaptApollo

CaptApollo — Tue, 30 Dec 2008 15:33:30 -0800

Headings: h1 - h3 or h4

By: nicwolff

nicwolff — Tue, 30 Dec 2008 16:05:54 -0800

CSS templates can't handle user-formatted HTML. Try dropping a <p style="clear:both"> in and it'll break just about any CSS template. In the end, you'll use tables.

By: springbound

springbound — Tue, 30 Dec 2008 20:29:22 -0800

br is one I don't see mentioned yet, and I've seen people use a couple of them sequentially to create the appearance of paragraphs.

You might also want to decide on a strategy for dealing with old HTML-style non-CSS tags like b, i and u, which people seem to use a lot still - whether that be to style them both as normal text in an effort to dissuade people using them (obviously you'd want to accompany such a change with a style guide for them to learn better ways of doing this), or style them up along with your ems and strongs to maintain consistent styling wherever they do make appearances.

By: clearlydemon

clearlydemon — Tue, 30 Dec 2008 20:49:42 -0800

nicwolff: Not true. It would break a CSS template in some cases, and in some places of the page, but it's not common. I haven't used tables for several years (except for tabular data).

To answer the question, here's another template with many different tags: Placeholder Markup with Lorem Ipsum.

By: malevolent

malevolent — Wed, 31 Dec 2008 06:59:46 -0800

Another vote for definition lists (once you start using them it's hard to stop), and don't forget the various link states (visited/hover/active/focus). Also maybe acronym, abbr, hr, pre, code, and caption.

By: nicwolff

nicwolff — Wed, 31 Dec 2008 13:51:51 -0800

clearlydemon: So far as I know it will break any template that uses floated divs for sidebars or columns, which is very common. I'd love to find out differently though — can you make this work without tables or display: table-cell?

By: clearlydemon

clearlydemon — Wed, 07 Jan 2009 10:23:19 -0800

Sorry for not answering sooner, nicwolff.

I should be working, so I used an existing method from A List Apart. This layout uses floats and negative margins, but there are many other methods.

The content is a bit buggy in IE6, but it works in IE5+, Safari, Firefox 2 and 3. The sidebar is not full height, so I'm using background color to emulate it. In the real life I'd rather use a background image (Faux Columns). In IE6, 5.5 and 5 you'll see that the container background color "bleeds" under the sidebar", which could be prevented with faux columns. Also, I'd use a better clearing method.

By: nicwolff

nicwolff — Wed, 07 Jan 2009 15:47:48 -0800

Well butter my biscuit, that does seem to work — I guess because the sidebar <div> comes after the content, so it isn't rendered yet when the p { clear:both } in the content area is calculated?

By: clearlydemon

clearlydemon — Wed, 07 Jan 2009 17:57:26 -0800

Well, the technique I used puts the content area first to make the page easier to read in case a visitor sees it unstyled for some reason. But most CSS layout techniques have the content in the source in the same order they display.

Here's another test with the navigation first in the source.

In my experience, the floats are kept inside their containing element (a div in this case). If the floated element is bigger than the containing element (an image for example), the layouts can break, but it depends on the layout technique.

By: nicwolff

nicwolff — Wed, 07 Jan 2009 18:27:33 -0800

Ah, but your test with the nav first breaks if the nav block extends down past the bottom of the floated div in the content area that you're trying to clear.

By: clearlydemon

clearlydemon — Wed, 07 Jan 2009 19:33:57 -0800

Ack! You're right. It works fine in a fixed layout though. I might be able to fix it but I have more experience with fixed layouts.