The Big Idea
HTML is not a programming language. It does not make decisions or do calculations. It does one thing: it describes the structure and meaning of content. It tells the browser: "this is a heading, this is a paragraph, this is a link, this is a button." The browser then renders that structure as a visible page.
This is exactly why HTML is the correct starting point. Before you can make things look good (CSS, essay 1.2), or make things do things (JavaScript, essay 1.4), you need a structure to apply those things to. HTML is that structure. Without it, CSS and JavaScript have nothing to work with.
HTML stands for HyperText Markup Language. HyperText means text with links — text that connects to other text. Markup means annotating content with tags to describe its purpose. Language means it has rules (syntax) that must be followed. Put it together: HTML is a way to annotate content so that browsers — and humans — understand what each piece of it means.
Google's entire search engine is built on reading and understanding HTML. When Googlebot crawls the web, it reads HTML to understand what a page is about, what its headings say, what its links point to. Writing correct semantic HTML is literally the difference between your web app being indexed by Google or ignored by it. Bad HTML = invisible to search engines = invisible to users.
This week's project: by the end of essay 1.1, you will have a complete personal portfolio page built entirely in HTML. No CSS yet — raw structure only. It will look plain. That is the point. You are learning to build the skeleton before you learn to dress it.
Where This Fits
HTML is the foundation of Phase 1. CSS (1.2, 1.3) styles the HTML you write here. JavaScript (1.4–1.6) manipulates the HTML elements you define here. React (Phase 2) generates HTML automatically from components. Every phase builds on this one.
The portfolio page you build this week will be restyled in essay 1.2 (CSS), made interactive in essay 1.6 (DOM events), and rebuilt as a React component in essay 2.4. Think of this essay as laying foundations the entire series builds on.
All three final projects (essays 10.1–10.3) involve HTML deeply. Job Board (10.1) uses complex form HTML for job submissions. The AI Study Assistant (10.2) uses file upload inputs. The Real-Time Notes app (10.3) uses contenteditable elements. The HTML you learn today appears in your final portfolio work.
The Intuition
HTML is one of those subjects that seems trivial until you understand it deeply — and then you see it everywhere, all the time, in everything you build.
Analogy 1 — The Body
Your body has a skeleton (bones), flesh and appearance (skin, muscle), and a nervous system that makes it move (nerves). A webpage is the same. HTML is the skeleton — the structure and organisation. CSS (essay 1.2) is the skin — the appearance. JavaScript (essay 1.4) is the nervous system — the movement and behaviour. You build the skeleton first. Always.
Analogy 2 — The Newspaper
A printed newspaper has a clear structure before any design is applied: a main headline, a byline, body paragraphs, pull quotes, image captions, and a footer with publication info. An editor can lay out this structure on any page without caring yet what font or colour will be used. HTML is that editorial structure. Tags like <h1>, <p>, <blockquote>, and <footer> are exactly this — editorial decisions about what type of content each piece is.
Analogy 3 — Labels on Boxes
Imagine moving house. Before you style how a room looks, you label every box: "Kitchen", "Books", "Fragile." HTML tags are those labels. <nav> labels something as navigation. <main> labels the primary content. <form> labels a user input area. These labels help the browser, search engines, screen readers, and you understand what each piece of content is for.
HTML is just writing text with labels. Instead of writing "Hello World", you write <h1>Hello World</h1> and the browser knows it's a big important heading. Instead of "Click here", you write <a href="page.html">Click here</a> and the browser makes it a clickable link. Every HTML tag is just a label that says "this content is a ___."
The Visual
Click any tag below to see what it does, how to use it, and what it looks like in the browser.
Now see how these tags combine into a real page skeleton. Hover each block to understand its role:
The Depth
HTML is simple on the surface. The depth is in understanding why tags exist, how the browser processes them, and what "semantic" really means — and why it is one of the most important concepts in modern web development.
How HTML Works: From File to Screen
When you type a URL and press Enter, the browser fetches an HTML file. It then reads that file top to bottom and builds something called the DOM — the Document Object Model. The DOM is a tree-shaped representation of your entire HTML document in the browser's memory. Every HTML tag becomes a node in that tree. CSS then styles those nodes. JavaScript can read and modify them. The DOM is the bridge between your HTML file and everything else that happens in the browser — it is the most important concept in all of web development, and it begins with understanding HTML tags.
When JavaScript does document.querySelector('h1'), it searches the DOM for the first <h1> node. When React re-renders a component, it updates specific DOM nodes. When you add a CSS class in JavaScript, you are modifying a DOM node's attribute. Every front-end concept you will ever learn involves the DOM — which is built entirely from your HTML.
Tags, Elements, and Attributes
There are three distinct things beginners often confuse:
A tag is the raw markup: <p> is an opening tag, </p> is a closing tag. An element is everything from opening to closing tag including content: <p>Hello</p> is a paragraph element. An attribute is additional information added to the opening tag: <a href="https://google.com"> — here href is the attribute and the URL is its value.
Most elements need both an opening and closing tag. Void elements (also called self-closing) have no content and no closing tag: <img>, <input>, <br>, <hr>, <meta>, <link>. You will see these written as <img /> in React/JSX, but in plain HTML the slash is optional.
Semantic HTML — The Most Important Concept
Semantic HTML means using tags that describe the meaning of content, not just its appearance. Compare:
<div class="logo">Rahul</div>
<div class="nav">
<span>About</span>
<span>Work</span>
</div>
</div>
<h1>Rahul</h1>
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
</nav>
</header>
Both examples render identically in a browser. But the semantic version tells everyone who reads it — the browser, Google, screen readers, other developers — exactly what each piece means. The <header> tag says "this is the header." The <nav> says "these are navigation links." The <h1> says "this is the primary heading." Google's algorithm specifically boosts pages that use semantic HTML correctly.
The key semantic tags you must know and use correctly:
HTML Attributes — The Complete Picture
Every HTML tag can carry attributes that provide extra information or change behaviour. There are global attributes (work on any tag) and tag-specific attributes (only make sense on certain tags).
HTML Forms — The Most Important HTML Concept for Applications
Forms are how users send data to your server. Every login page, search box, sign-up form, payment page, and contact form is an HTML form. A form is a container (<form>) that holds input fields (<input>, <select>, <textarea>) and a submit button (<button type="submit">).
The form has two critical attributes: (1) action — the URL where form data is sent. (2) method — the HTTP method (GET or POST) used to send the data. GET appends data to the URL (e.g. search queries); POST sends data in the request body (e.g. login credentials).
Code Lab
Build your personal portfolio page skeleton using correct semantic HTML5 markup. Copy the template code block below into your index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rahul Kothari — Software Engineer Portfolio</title> </head> <body> <!-- NAVIGATION ────────────────────────────────── --> <header> <nav> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> </header> <!-- MAIN CONTENT ──────────────────────────────── --> <main> <!-- ABOUT SECTION --> <section id="about"> <h1>Rahul Kothari</h1> <p>Software engineer specializing in building high-performance web applications. Focused on UI engineering, accessibility, and front-end system performance. Looking for software engineering roles in London, UK.</p> <p>Find me on <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a> or <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a>. </p> </section> <!-- PROJECTS SECTION --> <section id="projects"> <h2>Featured Projects</h2> <article> <h3>Job Board Platform</h3> <p>Built a full-stack job board with search, filter, and email notification pipelines. Optimized DB queries to reduce query latency by 45%.</p> <a href="https://github.com/rahul/jobboard">View Code Repository</a> </article> </section> <!-- CONTACT SECTION --> <section id="contact"> <h2>Get in Touch</h2> <form action="https://formspree.io/f/xyz" method="POST"> <label for="name">Name</label> <input type="text" id="name" name="name" required> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" rows="4" required></textarea> <button type="submit">Send Message</button> </form> </section> </main> <!-- FOOTER ──────────────────────────────────────── --> <footer> <!-- © is an HTML entity for the © copyright symbol --> <p>© 2025 Rahul. Built from scratch, committed daily.</p> </footer> </body> </html>
After writing this, right-click index.html in VS Code and choose "Open with Live Server". Your browser opens at localhost:5500 and shows the page. It looks plain — just black text on white. That is correct. This is pure structure, no design. Essay 1.2 adds the design.
Now try this: Open Chrome DevTools with F12, go to the Elements tab, and expand the tree. You will see every HTML element you just wrote, organised as the DOM tree. This is the first time you are seeing the DOM — remember this moment. Everything in JavaScript, React, and CSS interacts with this tree.
Build your own form by clicking elements below and see the HTML generate in real time.
← Click elements to add them to your form
Common Mistakes
The most common HTML mistake. Beginners learn that <div> is a generic container and use it for everything. The problem: Google's crawler cannot understand what your page is about. Screen readers cannot navigate your page. Other developers cannot read your code. Rule: ask yourself "does a semantic tag exist for what I'm building?" Navigation? Use <nav>. Page header? Use <header>. Main content? Use <main>. Blog post? Use <article>. Only use <div> when no semantic alternative exists (usually for layout grouping only).
Every <input> needs a <label>. Always. This is not optional. The for attribute on the label must match the id attribute on the input exactly. When done correctly, clicking the label focuses the input — massively improving usability, especially on mobile. Without labels, screen readers cannot tell users what to type into an input field. Without labels, your form fails basic accessibility — which means it fails legal accessibility requirements in many countries.
<!-- WRONG: input without label --> <input type="text" placeholder="Your name"> <!-- CORRECT: label with matching for/id --> <label for="name">Your Name</label> <input type="text" id="name" name="name">
There should be exactly one <h1> per page. It is the main heading — the title of the page as a whole. Google treats <h1> as the most important signal about what a page is about. Having two <h1> tags confuses search engines about which is the real primary topic. Think of it this way: a newspaper has one main headline per front page. Use <h2> for section headings, <h3> for subsections. Never skip heading levels (don't jump from <h1> to <h4>).
Without <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the <head>, your page will look zoomed out on mobile devices — showing a tiny desktop version of the page. This tag tells mobile browsers to render the page at the device's actual width. It is the single most important line for mobile responsiveness. Forget it and your entire CSS (essay 1.2) will break on mobile. This is so important that Google penalises pages in mobile search rankings if it is missing.
Every <img> must have an alt attribute. If the image is informational (a photo, a diagram), the alt should describe what it shows: alt="Rahul's portfolio project screenshot showing a job board". If the image is decorative (a background, a divider), use an empty alt="" so screen readers skip it. Without alt, images are invisible to: users with broken connections who see no image, visually impaired users who use screen readers, and Google's image search algorithm.
Real World
<title> tag becomes the blue link in search results. The <meta name="description"> becomes the snippet beneath it. <h1> signals the page's primary topic. <a> tags create the web graph Google uses for PageRank. Google's Lighthouse tool specifically audits your HTML for semantic correctness, accessibility, and performance — and surfaces these scores to affect your search ranking. Writing good HTML is literally optimising for Google.Interview Angle
"What is semantic HTML and why does it matter?"
<div class="nav">, you use <nav>. This matters for three concrete reasons: (1) Search engines use semantic tags to understand page structure and improve rankings. (2) Screen readers use them to help visually impaired users navigate pages with keyboard shortcuts — skipping to <main>, jumping between <h2> headings. (3) Code maintainability — semantic HTML is self-documenting; another developer immediately understands what each section is for. Semantic HTML is also required for WCAG accessibility compliance, which is legally mandated in many countries."What is the difference between <div> and <span>?"
<div> is a block-level element — it takes up the full width of its container and starts on a new line. It is used to group larger sections of content. <span> is an inline element — it sits within the flow of text without creating a new line. It is used to target and style a specific piece of text within a paragraph. Neither has semantic meaning; they are purely structural grouping elements. A good follow-up answer: "Both are non-semantic. In modern HTML, I try to use semantic alternatives like <section>, <article>, or <p> before reaching for a generic <div>.""How does poorly structured HTML affect your application at scale?"
querySelector on a 10,000-node DOM is measurably slower than on a 1,000-node DOM. Teams at scale use tools like Lighthouse and axe to audit HTML quality as part of CI/CD pipelines.Explain It Test
The DOM (Document Object Model) is the browser's in-memory representation of your HTML document as a tree of objects. When the browser reads your HTML file, it parses each tag and creates a corresponding node in this tree. The <html> element becomes the root node, <body> becomes a child of it, and so on. CSS then styles these nodes. JavaScript reads and modifies them. When you write document.querySelector('h1') in JavaScript (essay 1.6), you are searching this tree. The HTML file is the blueprint; the DOM is the living, modifiable structure built from that blueprint.
The alt attribute serves three users: (1) Visually impaired users whose screen readers read the alt text aloud instead of showing the image. (2) Users whose internet is slow or broken — alt text appears when the image fails to load. (3) Google's image indexing algorithm, which reads alt text to understand what an image depicts and ranks it in image search. The value should describe what the image shows, not what it is: alt="Screenshot of job board homepage with search filters", not alt="image" or alt="screenshot.png". For purely decorative images, use alt="" to tell screen readers to skip it.
id must be unique — there can be only one element with a given id on a page. It is used for unique elements: the main navigation, a specific form, a modal. CSS targets it with #idname. JavaScript finds it with document.getElementById('idname'). class can be shared across many elements. Multiple elements can have the same class, and one element can have multiple classes: class="card highlighted featured". CSS targets it with .classname. JavaScript finds all instances with document.querySelectorAll('.classname'). The practical rule: use id for one-of-a-kind things, class for reusable patterns.
HTML entities are special codes that represent characters that either cannot be typed directly, might be misinterpreted by the browser, or are not present on standard keyboards. © renders as ©, & renders as &, < renders as <, > renders as >. The last two are critical: if you write < directly in text content, the browser thinks you are starting an HTML tag. You must use < instead. In practice today, UTF-8 encoding (specified in your charset meta tag) means you can type © directly and browsers handle it fine — but HTML entities are the technically safe and universally supported way.
<head> contains metadata — information for the browser and search engines that is not displayed on the page: the title, meta tags, CSS links, font imports, and script tags that should load before page render. <body> contains everything users see. If you put a <link> to a CSS file in the <body> instead of <head>, browsers may show a "flash of unstyled content" — the page renders without styles briefly before the CSS loads. If you put a <title> in the <body>, some browsers show it as visible text rather than the tab title. The browser's error recovery handles most mistakes, but correct placement is required for predictable, professional behavior.
Do This Today
3 Things + Terms
<h1> means "most important heading" — not "big text." Always choose tags based on what the content is, not how you want it to look.Vocabulary you now own