Is it possible to achieve a -like effect without using the tag?

Question

I personally like the

tag because of how it draws a box and puts the

at the top of it, over the border. Like this.

Answer 1

No, it isn't really possible. Even browser makers themselves are struggling with that.

Of course, I couldn't resist having a go at it anyway. And I spent so much time on that, that Anonymous came up with a "solution" rather similar to mine in the mean time (his test1). But mine doesn't need the fixed width "legend".

This code is evidently a bit of a hack, though, and I don't know how well it'll fare in complex sites. I also agree with Anonymous that using a fieldset for grouping isn't nearly as bad as using tables for layout. Fieldsets were designed for grouping elements, though in HTML they're really only supposed to be used for grouping form controls.

.fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}

.fieldset>h1 {
  font: 1em normal;
  margin: -1em -0.5em 0;
}

.fieldset>h1>span {
  float: left;
}

.fieldset>h1:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}

.fieldset>h1:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}

  
Legend
 Fieldset



  
Legend
 Fieldset

As a side note, you might also want to have a look at the HTML5 figure and figcaption elements. Those seem to be the best elements to use in your example.

That's only for the semantic part of the issue, though, since I don't think those elements are rendered the same as a fieldset/legend. Not to mention that current browsers probably don't support these elements yet to begin with.