What is the best HTML5 element to use when tagging meta data for a blog post?

• Po开发者_JS百科sted by John Doe

  on Dec 12th

  in Design

  Leave a Comment

i would typically put this sort of info in the footer.

<article role="article" class="post" itemscope itemtype="http://microformats.org/profile/hatom">
    <h1 itemprop="entry-title">Title</h1>
    <section itemprop="entry-content">
        ...
    </section>
    <footer role="contentinfo">
        <div itemscope itemtype="http://microformats.org/profile/hcard">
            Posted by <span itemprop="fn">John Doe</span>
        </div>
        on <time itemprop="published" pubdate datetime="2011-12-12">Dec 12th</time>
        in <a rel="tag" href="#">Design</a>
        <a href="#">Leave a Comment</a>
    </footer>
</article>

for more information see:

http://microformats.org/wiki/microdata

http://microformats.org/wiki/hatom

http://www.w3.org/TR/wai-aria/

Almost but not HTML5 Semantic, entirely. Reference Previous Answer

The POSH Outline in HTML5

<main>
  <article role="article" class="post h-entry">
    <header role="banner">
      <h1 class="p-name">Title</h1>
      <p class="p-author h-card">
        Posted by 
        <a href="/author/john-doe/" title="Author John Doe">
          John Doe
        </a>
      <p>
        Published on <time class="dt-published" datetime="2021-10-09">9<sup>th</sup> of October 2021</time>
      </p>
    </header>
    <aside>
      <p class="p-summary">
        This article summary ~~~
      </p>
    </aside>
    <div class="e-content">
      <p>blah blah blah ~~~</p>
      <section role="complementary">
        <h2>Comments</h2>
        <article>
          <header>
            <h3>Posted by: Apple Lover</h3>
            <p>
              <time class="dt-published" pubdate datetime="2009-10-10T19:10-08:00">~1 hour ago</time>
            </p>
          </header>
         <p>I love apples, my favourite kind are Granny Smiths</p>
        </article>
      </section>
    <footer><!-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role Footer's are automatically contentinfo! -->
      in <a class="p-category" rel="tag" href="#">Design</a>
      <a href="#">Leave a Comment</a>
    </footer>
    </div>
  </article>
</main>

Microformats JSON

{
  "items": [
    {
      "type": [
        "h-entry"
      ],
      "properties": {
        "name": [
          "Title"
        ],
        "author": [
          {
            "value": "John Doe",
            "type": [
              "h-card"
            ],
            "properties": {
              "name": [
                "John Doe"
              ],
              "url": [
                "http://example.com/author/john-doe/"
              ]
            }
          }
        ],
        "published": [
          "2021-10-09 12:00:00"
        ],
        "summary": [
          "This article summary ~~~"
        ],
        "content": [
          {
            "value": "blah blah blah ~~~",
            "html": "<p>blah blah blah ~~~</p> ..."
          }
        ]
      }
    }
  ]
}

Additional Steps

You can move one step further and notate JSON-LD, Microdata or RDFA