ReviseAlgo Logo

HTML Basics

Introduction to HTML

Learn the foundational concepts of HTML, its role in web development, and how browsers parse tags into the Document Object Model (DOM).

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will learn the absolute foundation of web document structure. By the end of this topic, you will be able to:

  • Explain what HTML is and its structural role alongside CSS and JavaScript.
  • Understand how a web browser requests, parses, and renders an HTML document.
  • Identify and define the core components of an HTML tag, element, and attribute.
  • Trace how the browser compiles nested HTML tags into a Document Object Model (DOM) tree.

2. Overview

HTML (HyperText Markup Language) is the standard markup language used to structure content on the World Wide Web. Rather than a programming language that executes logic, HTML is a structural layout tool. It uses a predefined set of tags (e.g., <h1>, <p>, <div>) to describe to the browser how text, images, forms, and media should be organized and displayed on a screen.

3. Why This Topic Matters

Every website you visit—from a simple search engine page to a highly interactive SaaS dashboard—is built on HTML. No matter what modern frameworks you use (React, Next.js, Angular, or Vue), they all compile down to HTML at the rendering stage.

Misunderstanding how HTML works leads to severe consequences:

  • Poor Accessibility: Non-semantic tags block screen readers from announcing content properly to users with visual impairments.
  • Sub-optimal SEO ranking: Search engine bots (like Googlebot) fail to index and rank pages that use generic containers instead of structured markup.
  • Slow performance: Unnecessarily deep nested markup trees inflate browser memory layout trees, increasing rendering times.

4. Real-World Analogy

Think of building a website like constructing a modern high-rise building:

  • HTML is the Steel Skeleton: It defines the structural layout—where the pillars, floors, doors, and window openings sit. Without it, the building has no physical shape.
  • CSS is the Interior Design & Exterior Finish: It specifies the colors, paint types, window styles, and lighting. It makes the building look premium and styled.
  • JavaScript is the Utility Systems: It drives dynamic behaviors—running the elevators, activating sliding doors, and turning lights on when motion sensors are triggered.

5. Core Concepts

Before drafting markup, we must clarify the core terms that govern browser rendering:

Term Definition Example
HTML Tag The syntax markers surrounding text, indicating start and end bounds. <p> (start tag) and </p> (end tag)
HTML Element The complete unit containing the start tag, content inside, and the end tag. <p>Hello World</p>
HTML Attribute Metadata key-value pairs declared inside a start tag to modify its behavior or styling reference. href="https://google.com"
DOM Tree The hierarchical JavaScript object model constructed by the browser to represent document nesting. Root <html> branching to <head> and <body> nodes.

6. Syntax & API Reference

A standard HTML element follows a precise syntax declaration. Opening tags house attributes, followed by content, closed by an end tag:

Attributes Rules:

  • Declared strictly within the opening tag.
  • Follow the naming convention name="value" using double quotes.
  • Can contain multiple attributes separated by whitespace.

7. Visual Diagram

The diagram below illustrates how a browser parses a nested HTML layout structure into a hierarchical tree in memory (the Document Object Model):

8. Live Example — Full Working Code

Here is a complete, standards-compliant HTML5 document showing standard page boilerplate and tags:

What Just Happened?

  • <!DOCTYPE html>: Tells the browser that this is an modern HTML5 document. Prevents browser "quirks mode".
  • <html lang="en">: The wrapper for the whole page. The `lang` attribute is highly important for screen readers.
  • <head>: Houses page configuration metadata, character set rules, viewport layouts, and stylesheet links. It does not display on the visible body.
  • <body>: The visible workspace of the browser where the content is rendered.

9. Interactive Playground

You can experiment with this code in your browser using local files or environments.

Try It Yourself Challenges:

  1. Change the content inside the <h1> tags to display your name.
  2. Add a new <p> paragraph explaining what you hope to build on the web.
  3. Add a second link (<a>) pointing to your favorite developer tool.

10. Common Mistakes

Mistake Why it happens ❌ Wrong ✅ Correct
Unclosed Tags Forgetting the closing slash, causing layouts to break. <p>Hello World <p>Hello World</p>
Improper Nesting Order Closing an outer tag before closing an inner tag. <strong><em>Text</strong></em> <strong><em>Text</em></strong>
Missing alt attributes on images Forgetting alt tags, breaking accessibility for screen readers. <img src="logo.png"> <img src="logo.png" alt="Company Logo">

11. Best Practices

  • Always Declare DOCTYPE: Never omit <!DOCTYPE html>. Without it, browsers fall back to "Quirks Mode" rendering, causing inconsistent layout sizes.
  • Enforce Semantic Hierarchy: Use headings (<h1> through <h6>) sequentially. Avoid skipping from <h1> directly to <h4> just to change text sizes. Use CSS to style sizes instead.
  • Always Close Elements: Although browsers try to automatically close certain unclosed tags during DOM parsing, it creates memory leaks and unexpected styling cascades.
  • Keep Case Lowercase: While tag names are technically case-insensitive in HTML (e.g. <DIV> is valid), always use lowercase tag and attribute names as per standard W3C guidelines.

12. Browser Compatibility

Basic HTML tags are universally supported across 99.99% of global browsers:

Tag / Feature Chrome Firefox Safari Edge
HTML5 standard structure ✅ Version 1.0+ ✅ Version 1.0+ ✅ Version 1.0+ ✅ Version 12.0+
lang attribute support ✅ Fully Supported ✅ Fully Supported ✅ Fully Supported ✅ Fully Supported

13. Interview Questions

🟢 Q1 (Easy): What is the difference between a Tag, an Element, and an Attribute?

Answer: - A Tag is the individual markup marker using angle brackets (e.g., <p>). - An Element is the complete wrapper including the start tag, the content, and the end tag (e.g., <p>Hello World</p>). - An Attribute represents metadata located within the start tag providing configuration values (e.g. id="intro-text").

🟡 Q2 (Medium): What does the browser do when it runs into an unclosed HTML tag?

Answer: The HTML parser executes a tolerance algorithm called tag-reconstruction. When it hits an unclosed block, it attempts to guess the ending boundary by scanning next sibling tags or closing it at the document's end. However, this recovery process triggers "Layout Shifts" and can nest subsequent unrelated elements inside it, breaking styling hierarchies.

🔴 Q3 (Hard): How does the browser render a page from a raw HTML string? Describe the critical rendering path.

Answer:
1. Conversion: The browser parses raw bytes of HTML and converts them to characters based on the specified encoding (e.g. UTF-8).
2. Tokenization: The characters are parsed into tokens (StartTag, EndTag, Attribute, Text).
3. Lexing: The tokens are converted into objects that define node properties.
4. DOM Construction: The browser builds the DOM tree representing parent-child relationships.
5. Style Rules (CSSOM): Parallel to DOM construction, CSS is parsed into the CSS Object Model.
6. Render Tree: The DOM and CSSOM are combined into a Render Tree containing only visible nodes.
7. Layout: The browser calculates exact coordinates and sizes for elements.
8. Painting: The nodes are rasterized into pixels on the screen.

14. Debugging Exercise

Identify the nesting and markup bugs in this snippet:

View Solution

Bugs detected:

  • Nesting Order: The anchor tag <a> is opened inside <p>, but the paragraph tag is closed before the anchor (</p></a>). This violates tree nesting rules.
  • Missing Boilerplate: The document lacks the <!DOCTYPE html> declaration and the required <head>/<title> elements.
  • Missing Alt attribute: The <img> element lacks an alt description tag.

Corrected version:

15. Practice Exercises

Exercise 1 (Easy): Create a Recipe Layout

Write a small HTML snippet that outlines a cooking recipe. Include a heading for the recipe name, a short paragraph description, and an ordered list for the step-by-step instructions.

Exercise 2 (Medium): Add Link Navigation

Build a navigation menu using anchor tags wrapped inside list items. The menu should link to three local coordinates using relative anchor hashes (e.g. href="#section1").

16. Scenario-Based Challenge

The Multi-Lingual Landing Page Challenge:

Your product team wants to deploy a landing page that supports localization across English, Spanish, and Arabic. The Arabic layout must render in a right-to-left (RTL) reading format.

Design requirements:

  • Use standard HTML attributes to notify translation engines of the document's base language.
  • Allow specific components on the page to declare a direction change (LTR vs RTL) without hard-coding CSS layouts.
View Solution

1. Declare the language attribute on the main html tag: <html lang="ar" dir="rtl">. The dir="rtl" attribute automatically switches the browser's block layout engine to right-to-left formatting.
2. If rendering mixed-direction paragraphs (e.g. English code quotes in an Arabic article), wrap the block in a <bdo dir="ltr"> element to isolate and reverse the text display coordinates locally.

17. Quick Quiz

Q1: What does the term DOM stand for?

A) Document Object Management

B) Dynamic Oriented Markup

C) Document Object Model

D) Division Object Module

Answer: C — Document Object Model is the browser's structured object representation of the parsed HTML document.

Q2: Which attribute is used to provide alternate descriptive text for an image element?

A) src

B) alt

C) desc

D) title

Answer: B — The alt attribute defines descriptive text that screen readers read and display when image files fail to load.

Q3: Which element holds configuration metadata, stylesheet linkages, and script tags without being visibly displayed in the viewport?

A) <body>

B) <section>

C) <head>

D) <html>

Answer: C — The <head> element acts as the configuration metadata repository of the HTML document.

18. Summary & Key Takeaways

  • • HTML stands for HyperText Markup Language and is used to structure document layout on the web.
  • • HTML elements are defined by an opening tag, optional attributes, content, and a closing tag.
  • • The browser parses HTML markup sequentially to generate the Document Object Model (DOM) tree in memory.
  • • Proper tag nesting and semantic markup are required for accessibility (screen readers) and SEO indexation.
  • • Always declare <!DOCTYPE html> to ensure browsers use standard standards mode layout instead of quirks mode.

19. Cheat Sheet

Element / Attribute Syntax Example Key Purpose
<!DOCTYPE html> <!DOCTYPE html> Identifies HTML5 standards rendering mode.
<html> <html lang="en">...</html> The root element enclosing all document blocks.
<head> <head>...</head> Houses page configuration metadata and imports.
<body> <body>...</body> Contains visible layout elements rendered in viewport.
href attribute <a href="url">Link</a> Specifies destination coordinates of anchor element.