Member Avatar for Violet_82

HI all, I was wondering if it is legal to have a span tag inside a legend, something like this <legend>This is my<span>legend</span></legend>
Can't quite work out whether legend is a block element or inline
thanks

  • 3 Contributors
  • 4 Replies
  • 1K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Short answer: yes — a span may be placed inside a legend. The legend element accepts phrasing content and span is explicitly phrasing content, so that markup is valid. This is what was pointing to; 's "inline/block" intuition is understandable, but the legend has special rendering rules (it shrink-wraps and is effectively blockified by user agents). MDN: <legend> (developer.mozilla.org) MDN: <span> (developer.mozilla.org) MDN: <fieldset> notes on rendering (developer.mozilla.org)

Practical tips: wrap only the text you want to style in a span and target it with a class rather than changing the legend display. Avoid placing block elements (div, p, etc.) inside legend — that would be invalid. Example:

<fieldset>
  <legend>Choose plan <span class="muted">(recommended)</span></legend>
  <!-- inputs -->
</fieldset>

<style>
legend .muted { color: #666; font-weight: normal; font-size: 0.95em; }
</style>

Because legend rendering is nonstandard across engines, avoid relying on display:inline for exact layout; use safe properties like color, font, padding, or float/width: fit-content where supported. MDN: <fieldset> rendering notes (developer.mozilla.org)

Accessibility notes: use fieldset + legend to group related controls and keep the legend concise — screen readers read it as the group label. For complex or long instructions (or to work around known VoiceOver issues), use aria-labelledby/aria-describedby instead of stuffing lots of text into the legend. See government/accessible-forms guidance for details. USWDS / gov guidance on forms and legend use (designsystem.digital.gov) GOV.UK accessible forms explanation (accessibility.blog.gov.uk)

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

With regard to being "legal" I assume that you mean conforming to the W3C standards? Having a span element within the legend element should not cause the document to not pass validation.

I assume the reason why you want to use the span tag is for applying certain styles that you just cant do alone with the legend element.

inline/block? I'm pretty sure its an inline element.

Member Avatar for Violet_82

cool, thanks for that. Yes it is to apply some style

Member Avatar for Violet_82

fab thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.