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

December 30, 2008 2:01 PM

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.)

posted by Karmakaze to computers & internet (16 comments total)

This adds a few things to your list, and best of all is pre-ipsum'd.
posted by shownomercy at 2:04 PM on December 30, 2008 [5 favorites has favorites]

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
posted by camcgee at 2:37 PM on December 30, 2008

Should be a comma between button and option, natch.
posted by camcgee at 2:38 PM on December 30, 2008

blockquote

Good on you for making specs!
posted by amtho at 3:07 PM on December 30, 2008

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!
posted by ewingpatriarch at 3:16 PM on December 30, 2008

Headings: h1 - h3 or h4
posted by CaptApollo at 3:33 PM on December 30, 2008

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.
posted by nicwolff at 4:05 PM on December 30, 2008 [1 favorite has favorites]

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.
posted by springbound at 8:29 PM on December 30, 2008

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.
posted by clearlydemon at 8:49 PM on December 30, 2008 [1 favorite has favorites]

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.
posted by malevolent at 6:59 AM on December 31, 2008

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?
posted by nicwolff at 1:51 PM on December 31, 2008

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.
posted by clearlydemon at 10:23 AM on January 7

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?
posted by nicwolff at 3:47 PM on January 7

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.
posted by clearlydemon at 5:57 PM on January 7

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.
posted by nicwolff at 6:27 PM on January 7

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.
posted by clearlydemon at 7:33 PM on January 7