What "semantic HTML" actually means in practice
Understanding how structure gives content meaning - even if you never write a single line of code.
The myth of formatting
Most people are familiar with formatting: making text bold, centring it, changing its size. It's visual. It's immediate. And it's often where people stop.
But there's a critical difference between formatting and structure. Formatting is how something looks. Structure is what something is.
This distinction is at the heart of semantic HTML - and it's where your influence, as a content editor, is most powerful.
Semantic = meaningful
"Semantic" means related to meaning. Semantic HTML is about choosing HTML elements that reflect the purpose of the content - not just its appearance.
When you mark something as a heading, a list, a link, or a quote, you're not just changing how it looks on screen. You're labelling it with meaning.
- A heading says: this starts a new section
- A list says: these items belong together
- A link says: this goes somewhere else
- A paragraph says: this is a block of text
These labels are built into HTML. But even if you never see the HTML itself, the CMS tools you use are generating it in the background. Every time you select "Heading 2" from a dropdown, you're writing semantic HTML - whether you realise it or not.
Why semantic structure matters (and when appearance lies)
Semantic structure is how screen readers, search engines, and other software understand your content. It's also how users scan a page for relevance, meaning, and trust.
Think of a web page like a building. To the naked eye, a building may just look like rooms, walls, and furniture. But behind that is a blueprint - a structural plan that dictates how everything holds together. Semantic HTML is that blueprint.
When you pick a heading, add a list, or use a quote block in your CMS, you're not just decorating - you're defining structure. You're laying out the architecture that holds meaning in place.
But it's tempting to fake structure by making content look a certain way - bolding text instead of using a heading, adding dashes instead of a proper list, or spacing out paragraphs to mimic structure. This creates invisible problems:
- Screen readers won't treat bolded text as a heading
- Search engines won't see styled paragraphs as new topics
- Users navigating by headings will miss fake headings entirely
- The document outline breaks, disconnecting related content
- Content becomes harder to maintain, translate, or index
When you structure content semantically, you help every kind of reader - visual, assistive, algorithmic - understand it more clearly. Semantic structure isn't just clean. It's inclusive.
Patterns you already know
You use semantic structure instinctively in other parts of life:
- Headings in a report
- Chapters in a book
- Bullet points in a meeting agenda
- Tables of data in published studies
All semantic HTML does is formalise those patterns on the web. Your job isn't to learn something new - it's to recognise the choices you're already making and apply them with intent.
Case study: the important announcement
You want to highlight a key finding from your latest research study on the page.
You could:
- Make the text bold (❌: looks important but has no structural meaning)
- Put it in italics and center it (❌: visual-only styling)
- Mark it as a heading that introduces the findings section (✅: tells screen readers and search engines this is a new topic)
All three may look similar on screen. But only one carries meaning.
Only one lets assistive tech and search engines understand what's happening.
Only one is semantic.
Building semantic habits
Start by recognising what your content actually is, not just how you want it to look. Is this text introducing a new section? Use a heading. Are these items related? Create a list. Are you comparing data across categories? Use a table.
Match your CMS choices to your content's purpose rather than its desired appearance. This alignment between meaning and markup creates content that works better for everyone while supporting search engine optimisation and long-term maintainability.
Check your understanding
Copy and paste this to ChatGPT when you're ready for feedback:
I've been completing some questions that have been presented to me as part of an SEO course. I'm currently answering questions for a section titled "What semantic HTML actually means in practice". Please check my answers and let me know if I've understood the key ideas correctly. My responses are below.
1. A content editor argues that as long as text looks like a heading (bold, larger font), it doesn't matter whether it's technically marked as a heading in the CMS because "users can see what's important." Explain why this approach creates problems beyond just visual appearance, and how it affects different types of users and systems.
2. Your organisation's homepage currently uses bold text for section breaks, manual line breaks instead of paragraphs, and dashes instead of proper lists because "it looks cleaner and more custom." Which potential consequences should you prioritise when making the case for semantic structure?
- Search engines may not understand the content hierarchy, affecting how pages appear in search results
- Screen reader users won't be able to navigate efficiently between sections or skip to relevant content
- Content will be harder to maintain consistently as the site grows and multiple people edit it
- All of these issues compound to create both immediate usability problems and long-term technical debt
3. You're editing a research study page that needs to present eligibility criteria, study procedures, and contact information. The current version uses inconsistent formatting - some sections use headings, others use bold text, and related information is scattered throughout the page. How would you restructure this content to improve both semantic meaning and user experience, and what challenges might you face when explaining these changes to stakeholders who focus primarily on visual design?