Example of how I write HTML markup in 2021

semantics.html

<timeline-post post-id="54235" source-id="13" >
  <sl-card style="margin-bottom: var(--sl-spacing-large)">
    <a href="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss" target="_blank" slot="image"><img
      src="https://photos5.appleinsider.com/gallery/41951-81380-34258-61556-jamf-pro-head-xl-xl.jpg" 
      alt="article thumbnail"
      class="post-thumbnail"
    /></a>

    <h3><a target="_blank" class="link" href="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss">Jamf acquires 'zero trust' cloud security startup Wandera in $400M deal</a></h3>

    <post-excerpt>Apple mobile device management provider Jamf has purchased nine-year-old cloud security startup Wandera for $400 million.
Credit: Jamf
Jamf announced the deal during its first quarter earnings results this week. The $400 million purchase marks the company's largest acquisition to date. <a href="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss">Read more...</a></post-excerpt>

    <p style="margin-bottom: 0"><small>
      <relative-time datetime="2021-05-11T21:52:18Z">
        2021-05-11 21:52:18 UTC
      </relative-time>
    </small></p>

    <sl-card-footer slot="footer">
      <sl-icon-button
        name="bookmark"
        label="Read Later"
        timeline-post-action="bookmark"
      >
      </sl-icon-button>
      <sl-icon-button
        name="heart"
        label="Favorite"
        timeline-post-action="favorite"
      >
      </sl-icon-button>
      <sl-icon-button
        name="box-arrow-up"
        label="Share"
        timeline-post-action="share"
        data-share-url="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss"
      >
      </sl-icon-button>
      <sl-dropdown placement="bottom">
        <sl-icon-button name="three-dots" label="Options" slot="trigger">
        </sl-icon-button>
        <sl-menu>
          <sl-menu-item data-action="click->post-actions#copyLink">
            Copy Link
            <sl-icon slot="suffix" name="link-45deg"></sl-icon>
          </sl-menu-item>
          <sl-menu-divider></sl-menu-divider>
          <sl-menu-item>
            Report Issue
            <sl-icon slot="suffix" name="exclamation-triangle"></sl-icon>
          </sl-menu-item>
        </sl-menu>
      </sl-dropdown>
    </sl-card-footer>
  </sl-card>
</timeline-post>