HTML Fundamentals

HTML is the foundation of every web page — the structure and meaning that CSS styles and JavaScript animates. The single highest-leverage habit is writing semantic HTML: elements chosen for what they mean, not how they look.

Semantic markup pays off three ways at once: better accessibility (screen readers understand the page), better SEO (search engines parse structure), and better maintainability (the markup documents itself).

TL;DR

• Use semantic elements (header, nav, main, article, footer) over generic divs.
• Set the essential meta tags (charset, viewport, description, Open Graph).
• Keep a logical heading hierarchy — one <h1>, don't skip levels.
• Every form control needs an associated <label>; reach for ARIA only when native semantics can't express it.

Quick Example

A semantic page skeleton — each landmark element tells assistive tech and search engines what it is:

Meta Tags

Semantic Structure

Use elements for their meaning — they act as landmarks assistive tech can jump between:

Headings

Headings form the document outline — use them for structure, not size: exactly one <h1>, never skip levels (<h2> → <h4>), and style with CSS.

Forms

Every input needs a label tied by for/id; group related controls in a <fieldset>:

Use the right type (email, tel, url, number, date, search) for better keyboards and built-in validation, and lean on native validation attributes (required, minlength, maxlength, pattern, min/max) before reaching for JavaScript. See Forms & Validation.

Accessibility

Semantic HTML gets you most of the way; ARIA fills the gaps:

• Landmarks come free from <nav>, <main>, etc.
• Images need descriptive alt (or alt="" if decorative).
• Keyboard — everything operable by mouse must work by keyboard.

See Accessibility.

Images, Tables & Media

Best Practices

• Reach for the semantic element before a <div>; div/span are last resorts.
• Label every control and associate help/error text with aria-describedby.
• Provide meaningful alt text; mark decorative images alt="".
• Use <button> for actions and <a> for navigation — never the reverse.

Common Mistakes

Div soup

Buttons vs links

FAQ

Why does semantic HTML matter?

It improves accessibility (screen readers announce landmarks and structure), SEO (search engines understand the content), and maintainability (the markup conveys intent). A <nav> says far more than <div class="nav"> — to machines and to the next developer.

When should I use ARIA?

Only when native HTML can't express the semantics — e.g. a custom widget with no HTML equivalent. The first rule of ARIA is "don't use ARIA if a native element does the job," because native elements bring behavior and accessibility for free.

Button or link — how do I choose?

Use <button> for actions that do something (submit, toggle, open a dialog) and <a href> for navigation to a URL. The distinction drives keyboard behavior, screen-reader announcements, and whether the browser treats it as a destination.

Do I really need one <h1> per page?

Aim for one clear top-level heading that names the page, then nest <h2>–<h6> without skipping levels. It gives users and assistive tech a coherent outline and reinforces the page's primary topic for SEO.

What meta tags actually matter?

charset and viewport are essential for rendering; a unique description and a canonical link help SEO; Open Graph/Twitter tags control how links look when shared. Skip keywords — search engines ignore it.

Related Topics

• CSS Fundamentals — Styling the markup
• Accessibility — Building usable, inclusive UIs
• Forms & Validation — Robust, accessible forms
• SEO for SPAs — Structure that search engines read
• Frontend Development — The broader landscape

References

• MDN — HTML reference
• HTML Living Standard (WHATWG)
• WebAIM — Web accessibility
• W3C Markup Validation Service