How to Teach HTML to Non-Developers (and Why You Should)

The first time I taught HTML to a room of marketers, someone whispered, “I thought this was for engineers.” By the end, that same person was editing an email template, fixing a mislabeled button, and smiling at the sudden quiet of clarity. That is the part I love. When structure becomes visible. When the page breathes.

This is not about turning writers into coders. It is about teaching a shared language for meaning. HTML is a palimpsest of intention. Beneath colors and carousels and campaigns, there is a simple question: what is this thing, really, and how does it relate to the rest.

Continue reading

Begin with meaning

I no longer start with tags. I start with a question. “If this page could speak, what would it say first.” We write that as a sentence. Then we choose the element that declares it. Usually a proper <h1>. Then we ask what supports it. Those become <h2> sections. We ladder down only when the story needs it. It feels like editing. It is editing.

Subtext matters. A banner is not just a rectangle. A button is not just color. A label is a promise that a control is knowable. When non-developers feel this, they stop decorating and start describing.

Quiet rule: if you can read the page with styles off and still follow the point, the markup respects the reader.

Use what they already touch

I bring examples from their week. A Mailchimp campaign with two <h1>s. A CMS post where the “Read more” is a <div>, not a <button>. A Notion page that reads like a poem but renders like a jumble because headings were chosen for size, not sense. We fix one thing at a time. People learn faster when the stakes are real.

In one workshop, a product marketer changed a “Book a Demo” link from a naked <a> hidden inside a span chain to a labeled button, associated with the form via aria-describedby. Conversions ticked up. Support emails went down. Nothing magical. Just honest structure.

Teach the small set that changes everything

We do not need an encyclopedia. We need a reliable kit. A heuristic we can trust when the calendar is ruthless.

Let them break it

I ask the room to remove all CSS for a minute. The page goes plain. Someone laughs. Then we tab through. We listen to headings with a screen reader. We try to submit the form with the keyboard. Every gap becomes visible. The fix feels obvious once you can see it.

Imperfect is fine. Honest is better. A slightly plain document with correct hierarchy beats a glossy fragment that strands people in the margins.

Stories from the field

A healthcare client had a “Find a Doctor” tool where filters were styled as pills without labels. Sighted users glided through. Keyboard users abandoned the flow. We added <fieldset> and <legend>, real <label>s, and visible focus. The bounce rate dropped for precisely the people the tool was built for. That day changed how their team writes tickets. Structure first. Shine later.

Another case: a quarterly email that kept failing in Outlook. The copy was strong. The markup was an obstacle course. We simplified tables, removed stray wrappers, and aligned headings to the actual message hierarchy. Fewer escalations. More replies that sounded like relief. Practical mercy, shipped in under two hours.

Language choices that teach without scaring

Words can invite or repel. I avoid jargon unless it earns its keep. I explain semantics as “names that say what things truly are.” I describe landmarks as “regions that help people and machines jump to the right place.” When people understand the why, they accept the constraints with less friction.

Subtext: constraints are not handcuffs. They are rhythm. They help the work breathe.

Assess like a team sport

Teaching sticks when assessment is collaborative. We run a ten-minute audit in pairs. One person navigates with a screen reader. The other maps the DOM in their head, calling out headings and regions as they go. There is laughter. There is surprise. There is ownership.

Let AI help, then finish like a human

I use automation to scaffold. It drafts a section. I rename wrappers. I restore intent. Machines are fast at shape. Humans are better at sense. If the model writes a tidy <div> stack, I promote the parts that carry meaning to <header>, <section>, <article>, or <aside>. I connect labels. I clean heading jumps. The result reads like it cares.

What changes when they learn

Handoffs shrink. Tickets get clearer. Designers stop fighting the system and start naming it. Marketers send fewer apologies. Developers see fewer mysteries. Leaders hear fewer surprises. The culture gets a little kinder because the work is more legible.

And yes, careers grow. The person who can shape meaning at the source becomes indispensable. Not because they know every tag. Because they protect the reader.

Take this with you

If you teach one colleague HTML this month, you will feel it ripple. Fewer fixes. Clearer work. A page that sounds like it knows why it exists. Reach out if you want a short workshop. We can start with your next campaign and make the structure sing.