HTML
HyperText Markup Language is the backbone of the web. It defines the structure and content of your web pages. Without it, the web wouldn't exist.
What is HTML
Web Page vs Website
A Web Page is a single document (like this one). A Website is a collection of many pages linked together.
Structure & Skeleton
Think of HTML as the Chassis of a car or the Skeleton of a person. It's the rigid frame that everything else attaches to.
Pro Tip: Don't Overthink It
As mentioned in the video, a shallow understanding of HTML is often enough to start. Prioritize learning why it's used before memorizing every single tag.
Syntax and HTML Tags
<p>Hello</p>
<img src="/logo.png" alt="akademyas logo" />
<a href="/roadmap/html">Go</a>Self-Closing Tags
Some tags don't need a closing pair because they don't hold content.
Examples: <br> for line breaks and <img> for images.
The Box Analogy
Think of <div> tags as boxes. You can put smaller
boxes (elements) inside bigger ones. This is called Nesting.
VS Code Trick
When you click on an opening tag in VS Code, it will automatically highlight the matching closing tag. This is a lifesaver when dealing with heavily nested code!
Anatomy of a Tag
Every HTML element follows a specific "grammar". Let's break down a standard paragraph tag.
The "Yes/No" Attributes
Some attributes don't need a value. Just having the attribute name present means "True".
Writing Clean HTML
- Nesting HierarchyAlways close tags in the reverse order they were opened.
- Quote AttributesWhile not always required, wrapping values in quotes is best practice.
- Void ElementsElements like <img>, <input>, and <br> never take a closing tag.
HTML Structure
A good baseline structure helps browsers, SEO, accessibility tools, and your own future self.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Page</title>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>- Has
langattribute - Has
viewportmeta - Only one
h1per page (usually) - Main content inside
main
The DOM Tree
Browsers see your HTML as a "Family Tree" of elements. Nesting determines which elements are "parents" or "children".
Visual: How the Page Is Read
Browsers parse HTML top-to-bottom to build the DOM tree. A clean structure makes everything easier: styling, scripting, SEO, and accessibility.
HTML Attributes
Attributes live in HTML. Properties live on DOM objects in JavaScript. They’re related, but not the same.
<input id="email" type="email" value="" />const el = document.querySelector('#email')
el.value = 'test@example.com'
el.setAttribute('value', '…')Attribute Impact
How do attributes change an element? Toggle them to see the browser's perspective.
Common Elements, Tags, and Properties
Learn the small set of tags you’ll use every day, then expand as needed.
Choose the Right Tag
HTML is like a toolbox. You need to pick the right tool for the job. Which tag fits the scenario below?
Watch it in action
Mastering common elements
Semantic HTML
Writing semantic HTML means using tags that describe their meaning (like <article>, <nav>, <footer>) instead of just their appearance (<div>).
Semantic HTML improves accessibility and makes your intent obvious.
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div><header>...</header>
<main>...</main>
<footer>...</footer>What the Browser Sees
Semantic tags aren't just for you; they're for search engines and screen readers.
<div class="nav">...</div>
</div>
<div class="main">...</div>
<nav>...</nav>
</header>
<main>...</main>
Inputs and Forms
Inputs are powerful. Use the correct type so the browser can help users (mobile keyboards, validation, autocomplete).
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required />
<label for="dob">Birthday</label>
<input id="dob" type="date" />
The Virtual Keyboard
The type attribute doesn't just validate data; it tells
mobile browsers which keyboard to show.
Video Walkthrough
Mastering forms and user interactions
Linking CSS and JavaScript to HTML
Use link for external CSS and script (usually with defer) for external JS.
<link rel="stylesheet" href="/app.css" />
<script src="/app.js" defer></script>deferkeeps HTML parsing fast- Use
modulefor modern JS:type="module" - Keep CSS in
head
Mini Projects
Build these without any framework first.
- A personal profile page: headings, sections, lists, links, images, contact card.
- An article page: article, time, figure/figcaption, table of contents links.
- A checkout form UI: proper labels, validation attributes, fieldset groups, button types.
Comments
Comments help during development, but don’t ship sensitive information in them.