Day Six of Dailydose
Intro
While updating a pricing section for a client site, I wanted the layout fast. I defaulted to styled divs, but stopped to ask: if this is meant to sell services, why not make it easier for everyone, including search engines and screen readers, to understand?
The Common Approach
I sketched a service card using the usual non-semantic elements.
div class="service-card">
<div class="service-title">Premium Plan</div>
<div class="service-price">£49/month</div>
<div class="service-features">
<div>Unlimited bookings</div>
<div>Priority support</div>
<div>Custom branding</div>
</div>
</div>This looks fine visually, but there’s no real structure here. A screen reader wouldn’t know what kind of content it is. A crawler wouldn’t understand this is a product or service.
The Semantic Version
Here’s the same card using meaningful HTML:
article>
<h2>Premium Plan</h2>
<p><strong>£49/month</strong></p>
<ul>
<li>Unlimited bookings</li>
<li>Priority support</li>
<li>Custom branding</li>
</ul>
</article>Element Breakdown
<article> identifies a self-contained block of content. Use it for product cards, service listings, or feature summaries.
<h2> is the headline of the offering. It helps maintain a clear heading hierarchy across the page.
<p> wraps the price. adds emphasis and improves accessibility.
<ul> and <ui> present the features in a structured, readable format.
My Insight
It’s tempting to treat semantic HTML as a concern for blogs or longform content.
But service pages are often where users make decisions.
Structure supports that.
It makes the content more accessible, easier to maintain, and more legible to crawlers.
Conclusion
Semantic elements add little friction but improve clarity and meaning. I now use this as my standard layout for service cards, feature grids, and pricing sections.