Member Avatar for Violet_82

Chaps, I have a question about nesting elements. I am using bootstrap for a project I am working on, and for whoever didn't know that - I am one of those - in bootstrap buttons are display:inline-block;
Now, I have this situation at the moment:
<p><button>My button</button> This button means X</p>
Is it acceptable to have the button before the text of the paragraph? Personally I think so, because p is a block element and button regardless of the value of its display property can be inside p, but I thought I'd double check.
Any objection?

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 38 Minutes Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Short answer: yes, putting a <button> before the text inside a <p> is valid HTML and fine in Bootstrap. As hinted, validation is the key question. A <p> may contain phrasing content, and <button> is phrasing content. The CSS display:inline-block from Bootstrap does not change HTML semantics, so it does not affect validity. was right that there is nothing inherently wrong with that structure.

One thing to watch for is meaning and accessibility. If the trailing sentence is meant to describe the button, connect it to the control so assistive tech reads them together:

<p>
  <button class="btn btn-primary" type="button" aria-describedby="btn1-help">
    My button
  </button>
  <span id="btn1-help">This button means X.</span>
</p>

Practical tips:

  • Do not put block-level elements (e.g., div, ul, another p) inside a p; the browser will auto-close the paragraph before them.
  • Avoid nesting interactive elements (e.g., do not put an <a> inside a <button> or vice versa).
  • If the sentence is just explanatory text (not specifically describing the control), consider keeping the button in its own paragraph and the explanation in the next one for clarity.
  • If the button might ever live inside a form, set type="button" unless you actually want it to submit the form.

Recommended Answers

All 3 Replies

Member Avatar for //Gonz

Hi Violet 82
I don't see anything wrong with that!
might want to let a more skilled member of the community confirm this though ;)

Member Avatar for JorgeM

Is it acceptable to have the button before the text of the paragraph?

So from an HTML standards perspective, that will validate. So is that what you mean by acceptable?

Member Avatar for Violet_82

That's right JorgeM, mainly validation. 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.