1. What Is HTML?
HTML (HyperText Markup Language) is the standard markup language used to structure documents displayed in web browsers. It is NOT a programming language (it has no variables, functions, or execution loops) — rather, it tells the browser what content exists and what role that content serves.
🧱 HTML
The raw skeleton. Defines headings, text, buttons, forms, links, and images.
🎨 CSS
The skin and styling. Adds colors, layouts, typography, grids, and responsive design.
⚡ JavaScript
The nervous system. Handles click logic, data fetching from APIs, and state changes.
2. How HTML Works with the Browser
When a browser receives an HTML text stream over HTTP:
- Bytes to Characters: Converts raw binary bytes into characters based on the document encoding (e.g.
UTF-8). - Tokenization: Identifies opening tags, closing tags, and text nodes.
- DOM Tree Generation: Builds the Document Object Model (DOM) — a nested parent-child tree representing every element on the page.
3. HTML Document Structure: The Standard Skeleton
Every valid HTML5 document must follow this standard boilerplate structure:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Welcome to Pathubs</h1>
<p>Start learning frontend engineering today.</p>
</body>
</html>
<head> (Metadata)
Contains info for the browser and search engines: character set, title bar text, viewport scaling, favicons, and stylesheet links. Never visible directly on the page canvas.
<body> (Visible Content)
Contains everything the user sees and interacts with: headings, paragraphs, images, videos, tables, buttons, and navigation bars.
4. HTML Elements and Tags
Understanding the distinction between tags, elements, and void elements:
| Type | Syntax Pattern | Examples | Has Closing Tag? |
|---|---|---|---|
| Standard Elements | <tag>content</tag> | <p>, <h1>, <button>, <div> | ✅ Yes (required) |
| Void / Self-Closing | <tag attribute="..." /> | <img>, <input>, <br>, <hr>, <meta> | ❌ No (Cannot have inner content) |
| Nested Elements | <parent><child>..</child></parent> | <ul><li>Item</li></ul> | ✅ Yes (Strict LIFO nesting order) |
5. Attributes: Adding Properties and Metadata
Attributes provide additional instructions or configuration to elements and are always placed inside the opening tag in name="value" format:
<img src="hero.jpg" alt="Modern frontend classroom" width="600" />
<button type="submit" id="submit-btn" class="btn-primary active" data-user-id="42">Enroll Now</button>
id: Must be unique across the entire webpage. Used for anchor links, form associations, and specific JavaScript targeting.class: Reusable classifier for styling multiple elements with CSS.title: Displays a native browser tooltip when hovering over the element.data-*: Custom data attributes (e.g.data-analytics-id="cart_checkout") for JavaScript to read without altering visual semantics.
6. Headings (h1–h6) and Paragraphs (p)
HTML provides six levels of heading tags (<h1> to <h6>) to create an outline for your document:
Heading Hierarchy
<h2>Major Section Heading</h2>
<h3>Subsection Topic</h3>
<h4>Minor Subheading</h4>
<h5>Deep Section Level</h5>
<h6>Lowest Level Heading</h6>
Paragraphs & Line Breaks
<p>Always use <p> tags instead of multiple <br><br> line breaks to separate text.</p>
7. Inline Text Formatting Elements
| Tag | Visual Result | Semantic Meaning | Example Code |
|---|---|---|---|
<strong> | Bold Text | High importance / urgency | <strong>Warning:</strong> Save work |
<em> | Italicized Text | Stressed emphasis in speech | You <em>must</em> attend |
<mark> | Highlighted | Relevance in search or text reference | <mark>search keyword</mark> |
<small> | Small text | Side comments, disclaimers, copyright | <small>© 2026 Pathubs</small> |
<del> | Deleted or obsolete information | <del>$99</del> $49 | |
<sub> / <sup> | H2O / 102 | Subscript & Superscript formulas | H<sub>2</sub>O |
8. Hyperlinks: The <a> Anchor Element
The anchor tag (<a>) links documents across the internet or navigates to specific sections within the current document:
<a href="https://github.com" target="_blank" rel="noopener noreferrer">Visit GitHub</a>
<!-- 2. Relative Internal Path -->
<a href="/about">About Us</a>
<!-- 3. Same-Page Jump Anchor -->
<a href="#faq-section">Jump to FAQ</a>
<!-- 4. Special Protocols (Email & Phone) -->
<a href="mailto:support@pathubs.com">Email Support</a>
<a href="tel:+1234567890">Call Us</a>
target="_blank" to open a new tab, always add rel="noopener noreferrer" to prevent security vulnerabilities like tab-nabbing.9. Images: The <img> Element
The <img> element is a void tag requiring at minimum a src path and a descriptive alt attribute:
src="/images/profile-avatar.webp"
alt="Portrait of Sandeep smiling in front of a laptop"
width="300"
height="300"
loading="lazy"
/>
altText: Read aloud by screen readers for visually impaired learners and displayed if the image URL breaks.width&height: Providing explicit pixel dimensions prevents Cumulative Layout Shift (CLS) as images load.loading="lazy": Tells the browser to defer downloading images until the user scrolls near them.
10. Lists: Unordered, Ordered, and Description
<ul> Unordered List
Bullet points for items where order does not matter (e.g. navigation links, feature lists).
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ol> Ordered List
Numbered sequence for step-by-step instructions, rankings, and recipes.
<li>Write HTML</li>
<li>Style with CSS</li>
<li>Deploy Live</li>
</ol>
<dl> Description List
Key-value pairs for glossaries, FAQs, and metadata specs.
<dt>DOM</dt>
<dd>Document Object Model</dd>
</dl>
11. Semantic HTML: Clean Code vs "div Soup"
Semantic elements clearly describe their meaning to both the browser and the developer:
| Semantic Tag | Purpose on the Page | Avoid Doing This (div soup) |
|---|---|---|
<header> | Top branding, logos, search bars, and main navigation | <div class="top-header-box"> |
<nav> | Major navigational link groups | <div class="nav-links"> |
<main> | The dominant, unique content of the document (only 1 per page) | <div id="content-wrapper"> |
<section> | Thematic grouping of content, typically with a heading | <div class="section-1"> |
<article> | Self-contained, syndicatable item (e.g. blog post, card, review) | <div class="post-box"> |
<aside> | Tangentially related sidebar content (glossary, related links) | <div class="sidebar"> |
<footer> | Bottom metadata, copyright notices, terms links, and sitemaps | <div class="bottom-footer"> |
12. Generic Containers: <div> vs <span>
When no semantic element matches your structural needs (e.g. creating a CSS flexbox wrapper or styling a single word):
<div> (Block-level Container)
Starts on a new line and takes up 100% of available width. Used as layout wrappers for CSS Grid or Flexbox.
<article>Card 1</article>
<article>Card 2</article>
</div>
<span> (Inline-level Container)
Does not start on a new line. Takes up only the width of its text content. Used to target specific words inside paragraphs.
13. HTML Forms: Collecting User Input
Forms gather data to send to server endpoints or handle with JavaScript:
<div>
<label for="user-email">Email Address:</label>
<input type="email" id="user-email" name="email" placeholder="alex@example.com" required />
</div>
<div>
<label for="user-tier">Select Plan:</label>
<select id="user-tier" name="tier">
<option value="free">Free Community</option>
<option value="pro">Pro Career Track</option>
</select>
</div>
<div>
<label for="user-bio">Tell us about your learning goals:</label>
<textarea id="user-bio" name="bio" rows="4"></textarea>
</div>
<button type="submit">Create Account</button>
</form>
Common <input> Types
Single-line strings.
Validates email syntax (@).
Masks characters with dots.
Toggle options on/off.
14. Tables: Structuring Tabular Data
Tables must ONLY be used for displaying actual grid/matrix data (like spreadsheets, pricing matrices, and schedules) — never for page layout!
<thead>
<tr>
<th>Topic</th>
<th>Est. Time</th>
<th>Difficulty</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML Fundamentals</td>
<td>35 min</td>
<td>Beginner</td>
</tr>
</tbody>
</table>
15. HTML Comments
Comments are ignored by the browser and will not display on screen:
<!--
Multi-line comment:
TODO: Connect authentication backend API endpoint
-->
16. File Paths and Linking CSS & JavaScript
Linking Stylesheets & Scripts
<link rel="stylesheet" href="styles.css" />
<!-- At bottom of <body> or with defer -->
<script src="app.js" defer></script>
Relative Path Rules
./style.css: Same folder as current file../images/logo.png: Up one folder directory/assets/css/main.css: Absolute root path
17. Accessibility (a11y) Basics
Web accessibility ensures all individuals, including people with visual, motor, auditory, or cognitive disabilities, can navigate your website.
1. Descriptive Alt Text
Never leave alt="" empty unless the image is purely decorative background ornament.
2. Explicit Labels
Always connect form controls using <label for="id"> so screen readers announce input purposes.
3. Keyboard Focus
Use real native <button> and <a> elements so users can Tab and press Enter.
18. A Complete HTML Page: From Scratch to Reality
Here is how all these elements come together to create a production-ready, accessible webpage structure:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sandeep • Frontend Engineer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h1>Hi, I'm Sandeep!</h1>
<p>Building modern web applications with clean, semantic code.</p>
<img src="avatar.jpg" alt="Sandeep smiling in front of laptop" width="200" height="200">
</section>
</main>
<footer>
<p>© 2026 Sandeep. Built with accessible HTML5.</p>
</footer>
</body>
</html>
19. Common HTML Beginner Mistakes
Using <div onclick> instead of <button>
Divs are not keyboard accessible by default. Always use native <button> for actions and <a> for page navigation.
Skipping Form <label> Tags
Using only placeholders instead of permanent labels destroys usability on mobile and breaks screen reader navigation.
Jumping Heading Levels
Never jump from <h1> directly to <h4> just to make text small. Control sizes with CSS!
Multiple <h1> tags
Keep exactly one <h1> per document to provide a clear primary subject to search engines.
20. HTML Best Practices
- Always include
<!DOCTYPE html>and<html lang="en">. - Always provide meaningful
alttext on non-decorative images. - Write lowercase tag and attribute names for consistency.
- Always quote attribute values:
class="active". - Validate your markup with the official W3C HTML Validator.
21. What You Should Know Before Moving to CSS
Before jumping into styling with CSS (Cascading Style Sheets):
1. Class & ID Targeting
Know how CSS selectors target tags (p), classes (.btn), and IDs (#header).
2. Block vs Inline
Understand default display behaviors: block elements start on new lines, inline elements flow inside text.
3. Clean Parent-Child Nesting
A clean DOM tree with well-structured semantic parents makes CSS Flexbox and Grid intuitive.
