What Is HTML? The Skeleton of Every Web Page

HTML (HyperText Markup Language) is the language that describes what each piece of content on a web page is: this is a heading, this is a paragraph, this is a menu, this is an image, this is a link. Browsers and search engines read your page through this description. That is why well-built HTML directly affects both how well Google understands your site and whether everyone can use it.

What is HTML?

In MDN's definition, HTML is the most basic building block of the web and defines the meaning and structure of web content. If you think of a web page as a building:

• HTML is the structural frame: the walls, floors and doors.
• CSS is the interior design: colors, typefaces, layout.
• JavaScript is the wiring and plumbing: it makes something happen when you press a button.

A piece of HTML looks like this:

“html <h1>Core Drilling Service</h1> <p>We core-drill reinforced concrete walls up to 300 mm.</p> <a href="/en/contact/">Request a quote</a> “

Here <h1> marks the main heading of the page, <p> a paragraph and <a> a link to another page. The browser turns these tags into what you see on screen. A search engine uses the same tags to understand what the page is about, which information matters more and which pages it links to.

What does HTML5 mean?

"HTML5" is the name of the modern HTML that became widespread in the 2010s. Built-in tags for video and audio (<video>, <audio>), a drawing surface (<canvas>) and meaningful structural tags (<header>, <nav>, <main>, <footer>) arrived in this period. Today, instead of separate version numbers, there is a single "living standard": in a memorandum of understanding signed in May 2019, the W3C and the WHATWG agreed that HTML would be developed as a single document continuously updated by the WHATWG. So there is no need to wait for an "HTML6"; the standard is updated in small steps.

How does it work?

When someone visits your site, the process works roughly like this:

1. The browser requests the page's HTML file from the server and receives it (this communication happens over HTTP or HTTPS; see our post on the difference between HTTP and HTTPS for details).
2. It reads the HTML from top to bottom and builds a tree structure of the page.
3. It separately downloads the CSS, JavaScript, image and font files referenced in the HTML.
4. It combines everything and draws it on the screen.

A search engine crawler (Googlebot, in Google's case) works in a similar way. Google states that, to follow links reliably, they need to be real <a> tags with an href attribute. A <div> or <span> that has only been made clickable with JavaScript may work for visitors but may not be a link at all for a search engine.

How it affects your website and your business

You may never write HTML yourself. Even so, the quality of your site's HTML has direct consequences in four areas:

1. Being understood by search engines

Heading tags (<h1>–<h6>) are like the chapter titles of a book. A main heading that states the topic on each page, followed by a logical order of subheadings, helps both readers and search engines grasp the page quickly. The page title (<title>) and meta description are also part of the HTML and affect how you appear in search results. We cover the bigger picture in our post What is SEO?

2. Accessibility

Blind and visually impaired users listen to pages with screen readers. A screen reader learns what an image shows from its alt attribute, the sections of the page from meaningful tags such as <nav> and <main>, and what a form field asks for from its <label> tag. If these are missing, the page is largely unusable for these users. Google also states that when an image is a link, it uses the image's alt text as the link text. So good alt text serves both people and search engines.

3. Speed

HTML bloated with unnecessary nested boxes makes the browser do more work. Some page builders in particular can produce many layers of structure even for a simple section. On its own this won't break a site, but it adds to the feeling of slowness on a phone.

4. Maintenance and portability

Meaningful, well-organized HTML makes things easier when you hand your site over to another team years later or redesign it. If the content is marked up correctly as structure, you don't need to touch the content to change the look.

Common mistakes

• Using heading tags for appearance: Making everything an <h1> "so it looks big," or skipping levels in the heading order. Size is CSS's job; a heading tag expresses meaning.
• Images without alt text, or alt text stuffed with keywords. Alt text should describe the image briefly and naturally.
• Burying important text inside an image: Neither a search engine nor a screen reader can read the words "Offer ends 31 December" inside a banner image as text.
• Clickable boxes instead of links: Menus or buttons that are not real <a href> links.
• "Click here" links: Link text should describe the page it leads to.
• Unlabeled form fields: Form fields left with only gray placeholder text lose that text as soon as you start typing, and they are ambiguous for screen readers.

Our experience

In our web projects, we plan the content as structure first: which main heading goes on which page, which subheadings the service pages follow, where the contact actions sit. The design is then built on top of that structure.

We build most corporate sites on WordPress. In that case, the HTML is generated by the theme and the page builder, not written by hand. That is why we separately check the heading order, image alt text and menu links before handover: a page that looks right visually can still have a flawed structure. The service page structure we describe in our post on building an SEO-friendly website for local businesses also relies on a sound HTML skeleton.

Frequently asked questions

Conclusion

HTML is the invisible layer of your website that carries everything else. When it is built correctly, Google understands your pages better, people who use screen readers can use your site, and the site is easier to maintain over the years. However your site looks, if its skeleton is not sound, you lose most of these advantages.

If you'd like to review your site's structure together, take a look at our web design and WordPress development services, or get in touch.