<dialog id="dialog1" open>
  <h2>This is an HTML <code>&lt;dialog&gt;</code></h2>
  <p>
    As an HTML element, it could use some <i>love</i>. But it is
    an example of an element that has some logic.
  </p>
  <p>
    You can close it (but not open it 😓) just with HTML, without
    needing a single line of CSS or JS.
  </p>
  <form method="dialog" action="#dialog1">
    <button>Close dialog</button>
  </form>
</dialog>

<details open>
  <summary>Another example of HTML structures</summary>
  <div>
    <p>
      <b>You guessed right!</b> with <code>&lt;details&gt;</code> 
      and <code>&lt;summary&gt;</code> you can defined some basic 
      logic <strong>with HTML only</strong>. No need for JavaScript 
      code or CSS hacks.
    </p>
    <p>
      Click on the title of this section to open/close the 
      details/summary structure. Simple, no?
    </p>
  </div>
</details>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.