What is HTML?
HTML is the structural language of the web. Browsers parse it into a tree called the DOM and render everything you see on top of that tree. Frameworks like React and Vue eventually output HTML — they don't replace it, they generate it. Read HTML cleanly and the rest of frontend gets easier.
Why it matters
Every UI you'll ever ship is HTML at the bottom. Hiring teams check whether
you can write semantic, accessible markup before they look at your
JavaScript. A <div>-soup portfolio reads as junior even if the React is
clean.
What to learn
- Elements vs attributes vs text nodes
- Document anatomy:
<head>,<body>, metadata,<link>and<script> - Common content tags: headings, paragraphs, lists, links, images
- Structural tags:
<header>,<main>,<section>,<article>,<footer> - Form inputs:
<input>types,<select>,<textarea>,<button> - Self-closing tags and the difference from XML
- The HTML spec as a reference, not a thing to memorize
Common pitfall
The single biggest beginner mistake is reaching for <div> for everything.
Use semantic tags first — <button>, <nav>, <main>, <article>. Divs
are a last resort, not a starting point. Screen readers and search engines
both rely on the right tag for the right job.
Resources
Primary (free):
- MDN — HTML basics · docs
- web.dev — Learn HTML · docs
- HTML in 100 seconds — Fireship · video
Secondary (paid):
- Scrimba — Learn HTML & CSS · course
Practice
Build a one-page résumé in pure HTML — no CSS, no JavaScript. Include
your name and contact in <header>, work history in <section> with
nested <article> per role, and a skills list in <ul>. Validate it at
validator.w3.org. Done when it passes with
zero errors and zero warnings.
Outcomes
- Read raw HTML and predict the rendered structure without seeing the page.
- Write a valid form with at least four input types and labels for each.
- Explain the difference between block and inline elements out loud.
- Pick the right semantic tag (
<button>vs<a>vs<div>) for any UI control.