Alongside the usual human readers, machines are now reading our content in new ways. Agentic AI systems that browse pages, parse information and act on what they find are becoming more common. And they read differently than people do.
So, I’d like to give my tuppence-worth about what this means for how we structure type and content on the web. Not as a prediction about the future, but as a practical question about what’s happening now.
How machines read differently
When a human lands on a page, they scan. They notice hierarchy, colour, spacing. They skip over things that don’t interest them. They use visual cues to decide what matters.
An agentic system reads the code underneath. It parses HTML, CSS, and text. It looks for structure and meaning. A heading styled with bold text and size? To an agent, that’s just a DOM element. If the HTML doesn’t say it’s a heading, the agent has to guess.
Visual hierarchy means nothing to a machine. Semantic hierarchy means everything.
This creates a tension. We design for humans who see. Machines read the underlying structure. When those two things don’t line up, something gets lost.
Where it matters
Take a typical project site. You have a headline in a large, bold typeface. It’s clearly the main message. A human visitor gets this instantly.
But if that headline is just a div with large text styling, and there’s no h1 tag underneath it, the machine doesn’t know it’s a headline. It treats it as body text. The meaning flattens.
Or consider lists. A designer might style a group of items with consistent spacing and typography to show they belong together. Visually clear. But if there’s no ul or ol in the code, the machine reads them as separate paragraphs. The relationship disappears.
Type size, weight, spacing, colour – these all carry meaning for humans. But machines need that meaning encoded in the HTML structure first. The visual choices sit on top of semantic choices. Without the structure underneath, the visual choices become decoration.
What gets lost in translation
Information designed for human reading can become ambiguous for machines. Consider these real cases:
A sidebar with smaller text that humans understand as secondary information. The machine sees it as part of the main content unless the structure marks it differently.
A call to action in a distinctive colour and typeface. Humans recognise it as a button. The machine needs a button element to know it’s actionable.
Numbered steps in a process, styled with custom typography to look distinct. Humans parse the sequence. The machine reads them as separate items unless the markup shows the order.
None of this is wrong. It’s just incomplete. The visual layer works. The structural layer doesn’t.
Why this matters now
For years, semantic HTML and proper heading hierarchies were things we did for accessibility and SEO. Good practice. Important for screen readers and search engines.
Agentic systems add another reason. These systems need to understand what your content means so they can act on it accurately. If your page structure is unclear, their actions might be wrong.
A travel booking site where dates aren’t marked up as date fields? The agent might misread them. A pricing table where row and column headers aren’t properly marked? The numbers could get mixed up. A form where the relationship between labels and fields is unclear? The agent might fill it wrongly.
The stakes get higher when machines are acting on what they read.
What I’m thinking about
This isn’t about designing differently. It’s about being more thoughtful about why we make the choices we do.
A few questions I’m sitting with:
Should we reconsider how we handle hierarchy? Is bold and large enough if the semantic structure doesn’t match? Should type choices always reflect the underlying structure rather than override it?
When we use custom typography and spacing to create meaning, are we creating meaning that’s only visible to humans? Should the meaning live in the HTML first?
What happens to type systems when they need to communicate to both humans and machines? Does this change how we document them?
Are there moments where visual hierarchy and semantic hierarchy need to be the same thing?
It’s not new, just more urgent
None of this is actually new. Web accessibility has asked these questions for years. A well-structured, semantically clear page is accessible to humans with different abilities and to machines reading the structure.
The difference is that agentic systems make this matter more broadly. It’s not just about helping people with screen readers. It’s about machines understanding your content well enough to act on it correctly.
What I’d do now
If you’re building something now, I think the answer is the same as it’s always been: start with structure. Make sure your HTML reflects your content hierarchy. Use semantic elements – real headings, real lists, real buttons. Then layer your typography on top of that structure.
The visual choices work better when they’re reinforcing something that’s already clear underneath.
Still thinking
I’m paying attention to how machines read what we build. And I’m thinking about what it means for how we structure content and type.
Because it turns out the old advice – clear structure, semantic HTML, strong hierarchy – hasn’t gone anywhere. It’s just become more important for reasons we didn’t expect.
