Loading lesson
Understanding how structure gives content meaning - even if you never write a single line of code.
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" 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.
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.
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:
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.
You use semantic structure instinctively in other parts of life:
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.
You want to highlight a key finding from your latest research study on the page.
You could:
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.
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.
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?
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?