What HTML is and what it does
HTML (HyperText Markup Language) is the standard markup language used to describe the structure and meaning of content on the web. It does not style or animate—those responsibilities belong to CSS and JavaScript—but it gives browsers, search engines, and assistive technologies the semantic clues they need to present and interact with content correctly.
Minimal structure of a page
A modern HTML document starts with a short DOCTYPE declaration and a root <html> element that usually includes a language attribute. Metadata (character encoding, page title, and other head data) belongs in the <head>, and visible content goes inside the <body>. A typical minimum looks like this:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> <h1>Heading</h1> </body>
</html>
Why charset and language matter
Declaring the character encoding (commonly UTF-8) prevents garbled text for languages and symbols beyond plain ASCII. The language attribute on the <html> element helps screen readers choose correct pronunciation and supports tools like translation and search indexing.
Semantics and accessibility
Semantic HTML uses elements that describe meaning, not appearance. Elements like <header>, <nav>, <main>, <article>, <section>, and <footer> create a document outline that assistive technologies and search engines can use to help users navigate and understand content.
- Use headings (
<h1>–<h6>) in logical order for structure. - Provide
alttext for images and<label>elements for form controls so users with screen readers can interact effectively. - Reserve ARIA roles for cases where semantic HTML cannot express the needed meaning.
Separation of concerns
Think of HTML as the document’s skeleton: it defines what parts exist and what they mean. CSS is the skin (visual presentation) and JavaScript is the nervous system (behavior and interactivity). Keeping structure, style, and behavior separate makes content more maintainable, accessible, and resilient across devices and network conditions.
Best practices checklist
- Start with
<!DOCTYPE html>and a properlangattribute. - Declare
<meta charset="utf-8">early in the<head>. - Use semantic elements for structure; avoid using
<div>as a meaning-bearing container. - Write meaningful headings and link text so people using assistive tech can skim effectively.
- Label form inputs and provide accessible names for interactive controls.
- Favor progressive enhancement: ensure content and basic functionality work without JavaScript, then layer enhancements on top.
Keeping markup healthy
Validate and lint your HTML during development to catch structural errors, missing attributes, or accessibility issues early. Well-formed, semantic HTML improves search discoverability, makes layout and styling simpler, and reduces surprises for users on different devices or with different abilities.
With a clear structure, correct encoding, and attention to semantics, HTML remains the foundational, accessible, and durable way to publish content on the web.
