Post · BT Free Social

Maximally Semantic Structure for a Blog Post

https://shkspr.mobi/blog/2026/01/maximally-semantic-structure-for-a-blog-post/

Yes, I know the cliché that bloggers are always blogging about blogging!

I like semantics. It tickles that part of my delicious meaty brain that longs for structure. Semantics are good for computers and humans. Computers can easily understand the structure of the data, humans can use tools like screen-readers to extract the data they're interested in.

In HTML, there are three main ways to impose semantics - elements, attributes, and hierarchical microdata.

Elements are easy to understand. Rather than using a generic element like <div> you can use something like <nav> to show an element's contents are for navigation. Or <address> to show that the contents are an address. Or <article><section> to show that the section is part of a parent article.

Attributes are also common. You can use relational attributes to show how a link relates to the page it is on. For example <a rel=author href=https://example.com> shows that the link is to the author of the current page. Or, to see that a link goes to the previous page in a series <a rel=prev href=/page5>.

Finally, we enter the complex and frightening world of microdata.

Using the Schema.org vocabulary it's possible to add semantic metadata within an HTML element. For example, <body itemtype=https://schema.org/Blog itemscope> says that the body of this page is a Blog. Or, to say how many words a piece has, <span itemprop=wordCount content=1100>1,100 words</span>.

There are many properties you can use. Here's the outline structure of a single blog post with a code sample, a footnote, and a comment. You can check its structured data and verify that it is conformant HTML.

Feel free to reuse.

 HTML<!doctype html>
<html lang=en-gb>
<head><title>My Blog</title></head>
<body itemtype=https://schema.org/Blog itemscope>

<header itemprop=headline>
<a rel=home href=https://example.com>My Blog</a>
</header>

<main itemtype=https://schema.org/BlogPosting itemprop=blogPost itemscope>
<article>
<header>
<time itemprop=https://schema.org/datePublished datetime=2025-12-01T12:34:39+01:00>
1st January, 2025
</time>
<h1 itemprop=headline>
<a rel=bookmark href=https://example.com/page>Post Title</a>
</h1>
<span itemtype=https://schema.org/Person itemprop=author itemscope>
<a itemprop=url href=https://example.org/>
By <span itemprop=name>Author Name</span>
</a>
<img itemprop=image src=/photo.jpg alt>
</span>
<p>
<a itemprop=keywords content=HTML rel=tag href=/tag/html/>HTML</a>
<a itemprop=keywords content=semantics rel=tag href=/tag/semantics/>semantics</a>
<a itemprop=commentCount content=6 href=#comments>6 comments</a>
<span itemprop=wordCount content=1100>1,100 words</span>
<span itemtype=https://schema.org/InteractionCounter itemprop=interactionStatistic itemscope>
<meta content=https://schema.org/ReadAction itemprop=interactionType>
<span itemprop=userInteractionCount content=5150>
Viewed ~5,150 times
</span>
</span>
</p>
</header>

<div itemprop=articleBody>
<img itemprop=image src=/hero.png alt>
<p>Text of the post.</p>
<p>Text with a footnote<sup id=fnref><a role=doc-noteref href=#fn>0</a></sup>.</p>

<pre itemtype=https://schema.org/SoftwareSourceCode itemscope translate=no>
<span itemprop=programmingLanguage>PHP</span>
<code itemprop=text>&amp;lt;?php echo $postID ?&amp;gt;</code>
</pre>

<section role=doc-endnotes>
<h2>Footnotes</h2>
<ol>
<li id=fn>
<p>Footnote text. <a role=doc-backlink href=#fnref>↩︎</a></p>
</li>
</ol>
</section>
</div>
</article>

<section id=comments>
<h2>Comments</h2>
<article itemtype=https://schema.org/Comment itemscope id="comment-123465">
<time itemprop=dateCreated datetime=2025-09-11T13:24:54+01:00>
<a itemprop=url href=#comment-123465>2025-09-11 13:24</a>
</time>
<div itemtype=https://schema.org/Person itemprop=author itemscope>
<img itemprop=image src="/avatar.jpg" alt>
<h3>
<span itemprop=name>Alice</span> says:
</h3>
</div>
<div itemprop=text>
<p>Comment text</p>
</div>
</article>
</section>
</main>
</body>
</html>

This blog post is entitled "maximally" but, of course, there is lots more that you can add if you really want to.

Remember, none of this is necessary. Computers and humans are pretty good at extracting meaning from unstructured text. But making things easier for others is always time well spent.

#blogging #HTML #schemaOrg #semanticWeb