<div class="card">
  <p>Using divs with appropriate CSS styling, you can create common UI patterns like cards.</p>
</div>

<article>
  <p>The article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.</p>
  <p>Examples of articles would be: a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.</p>
</article>

<section>
  <p>The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis.</p>
</section>

<aside>
  <p>The aside element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.</p>
</aside>

<div class="box">
  <p>The div element is a generic container for flow content. It has no effect on the content or layout until styled using CSS.</p>
</div>

<header>
  <p>The header element represents a container for introductory content or a set of navigational links. A header typically contains:</p>
  <ul>
    <li>One or more heading elements</li>
    <li>Logo or icon</li>
    <li>Authorship information</li>
  </ul>
</header>

<footer>
  <p>The footer element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about:</p>
  <ul>
    <li>The author of the section</li>
    <li>Copyright data</li>
    <li>Links to related documents</li>
    <li>Contact information</li>
  </ul>
</footer>

<nav class="example-nav">
  <p>The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.</p>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<figure>
  <img src="https://i.pinimg.com/736x/8a/a4/5f/8aa45f18be2a559c1e6874062c9223d5.jpg" alt="Example figure">
  <figcaption>Fig.1 - The figure element with a figcaption</figcaption>
</figure>

<details>
  <summary>Details Element (Click to expand)</summary>
  <p>The details element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.</p>
  <p>A summary element provides a summary, caption, or legend for the details.</p>
</details>