List of HTML5 elements that can be nested inside P element?

Phrasing content: The VIP list

Imagine our <p> as an exclusive party where the guest list is strictly defined. The favored invitees are the phrasing content: elements that jive well with text. These party-goers include our friends <a>, <abbr>, <img>, <input>, and <video>. They are meant to be inline and don't disturb the document structure and flow.

Conditional acceptance: No plus-ones allowed

Some elements get the conditional pass! They get to party with <p> only when they are chaperoned by phrasing content. <a> and <map> can join the groove as long as they mesh with phrasing content only. Similarly, <del> and <ins> are cool to hang out too, enclosing inline elements and text.

No crashers allowed: Common mistakes

Don't be that guy who brings uninvited friends! It's like trying to fit an elephant (<div>, <ul>, <h1>) into a Mini Cooper (<p>). The <p> party will be over before the crashers even start, often throwing a syntax error.

Media and forms: Special attendees

When you invite media — <img>, <video>, or forms — <input>,<label>, ensure they follow the inline guideline. They should gel with the party's vibe — the narrative flow of your paragraph.

Accessibility: Party for all

While stacking your guest list (<p> content), don't ignore accessibility. Use <abbr> for abbreviations and <code> for inline code, enhancing the semantic meaning and assisting screen readers. It's like having a well-planned party where all guests feel included!

Following the party rules: Example

<!-- The p party is on! Just remember the rules on the invite! -->
<p>
  Welcome to the party! Feel free to chat with <strong>Bold Brad</strong>,
  or crack a code joke with <code>Coding Carl</code>.<a href="#bar">Refill</a> 
  anyone?
</p>
