CODEWITHSUNDEEP
html
Joanne
Joanne

Reputation: 315

HTML fieldset with no fields

I'm writing a blog article, and I want to add a "Note" box, which I want to look pretty much exactly like a <fieldset> with a <legend>

<fieldset>
    <legend>Note</legend>
    Please take note of this.
</fieldset>

(see http://www.w3schools.com/tags/tag_fieldset.asp)

As you can see, this <fieldset> won't actually contain any fields, so it seems a bit of a dirty hack just to make the layout work easily.

Does anyone know if there's another tag similar to <fieldset> \ <legend> that is more applicable to the text content that it will be containing?

I can do it with CSS but I just wonder if there's a HTML element that will make the markup nice :)

Upvotes: 1

Views: 514

Answers (1)

No Results Found
No Results Found

Reputation: 102874

From a semantic perspective, tag choices should not be dictated by desired presentation (what you want it to look like), but rather to describe what the content actually is. On the other hand, there's nothing that behaves quite like legend (it is a rather odd element), so there really is no solid alternative, but you can come close. here's one example out of the many possible solutions:

<div>
    <h3>Notes</h3>
    <p>Lorem Ipsum is simply dummy text...</p>
</div>

div {
    padding:20px;
    border:1px solid #ccc;
}
h3 {
    margin-top:-30px; /* estimated, you can be more accurate */
    background:#fff;  /* hide the top border behind it */
    float:left;       /* make it the smallest width possible */
}

I don't believe it's technically illegal to have a fieldset with no form inputs (meaning, your markup will still validate), but it's really meant to be used for forms. If you can find an alternative solution via CSS, it would be the ideal way to solve the puzzle.

Upvotes: 2

Related Questions