HTML

In short: The markup language (HyperText Markup Language) used to define the structure of web pages.

In more detail: Consists of nested elements (“tags”) like <div>, <p> or <a>, which tell the browser what’s on the page and how it’s structured — not what it looks like (that’s handled by CSS) or how it behaves (that’s handled by JavaScript). Together with CSS and JS, forms the classic trio of web frontend development.

In Depth

From markup to the DOM

<article>
  <h1>Title</h1>
  <p>A paragraph with <a href="/target">a link</a>.</p>
  <img src="image.jpg" alt="Description for screen readers" />
</article>

The browser reads HTML and internally builds the DOM (Document Object Model) from it — a tree structure of all elements that JavaScript can access and modify at runtime (e.g. inserting a new element when a user clicks, without reloading the whole page). The DOM is therefore not identical to the original HTML text, but a LIVE representation that can keep developing dynamically after the first load — a page’s “view source” shows the original HTML, while the browser developer tools (“Elements” tab) show the current DOM state, which often diverges after JavaScript manipulation.

Semantic HTML

HTML5 (the official standard since 2014) introduced semantic elements like <article>, <nav>, <header>, <footer> and <section>, which describe not just visually but also in terms of content what an element is for — before that, people mostly made do with generic <div> elements and class names that were readable for humans but meaningless for machines. Semantic HTML is important for:

• Accessibility: screen readers for visually impaired users can correctly announce page structure (navigation, main content, footer), instead of reading out an undifferentiated mass of <div>s.
• Search engines: can better categorise and weight content (an <h1> counts as a more important heading than generic text).
• Maintainability: developers understand structure faster, without having to interpret CSS class names.

Separation of structure, presentation and behaviour

Attributes like class or id on tags serve to specifically style elements via CSS or target them via JavaScript — HTML itself deliberately only defines structure/meaning, appearance comes from CSS, behaviour from JavaScript. This separation (often called “separation of concerns”) keeps large websites maintainable: design changes primarily affect CSS files, without touching the HTML structure, and vice versa.

Accessibility beyond ARIA

For cases plain semantic HTML alone doesn’t cover (e.g. a complex, JavaScript-driven component like a dropdown menu), WAI-ARIA (Accessible Rich Internet Applications) adds extra attributes (role, aria-label, aria-expanded) that tell screen readers what kind of element it is and what state it’s currently in — one principle here is “no ARIA is better than wrong ARIA”: a correct semantic <button> is always preferable to a <div> with ARIA attributes bolted on afterwards, which don’t automatically bring the basic functionality of a real button (reachable via Tab, triggerable via Enter/Space) along with them.

See also: CSS, JS, Browser