HTML – Overview
Chapter 1 • Beginner
HTML stands for HyperText Markup Language. It is the standard language used to build web pages.
Think of HTML as the "skeleton" of every website. It does not make things look pretty by itself (that’s the job of CSS), and it does not make things interactive by itself (that’s usually JavaScript). HTML mainly tells the browser:
- What the content is (heading, paragraph, image, link, table, etc.)
- How the content is structured on the page
What does “HyperText” mean?
"HyperText" simply means text that contains links to other text or pages.
- When you click a link on a webpage and move to another page, that is hypertext in action.
- These links are usually created using the <a> (anchor) tag.
So, hypertext = text + links.
What does “Markup Language” mean?
A markup language uses special symbols called "tags" to mark or label parts of a document.
- In HTML, tags are written inside angle brackets, like <p>, <h1>, <img>, etc.
- These tags tell the browser: “This is a heading”, “This is a paragraph”, “This is an image”, and so on.
Example:
- <h1> defines a main heading
- <p> defines a paragraph
- <a> defines a link
You don’t "program" in HTML. You "mark up" content with tags.
How HTML fits in the web stack
A common way to remember:
- HTML → structure (what is on the page)
- CSS → style (how it looks: colors, fonts, layout)
- JavaScript → behavior (how it reacts and interacts)
HTML is always the starting point.
Basic roles of HTML
HTML lets you:
- Organize content into headings, paragraphs, lists, tables, images, forms, etc.
- Create navigation using links and menus
- Group related content using semantic tags like <header>, <nav>, <section>, <article>, <footer>
- Provide meaning to content so that search engines and screen readers can understand it better
Why HTML is important for developers
No matter which web framework you use (React, Angular, Vue, Next.js, etc.), under the hood everything becomes HTML in the browser.
If you understand HTML well:
- You debug UI issues faster
- You write better, more accessible code
- You work better with designers and frontend frameworks
Suggested image prompt
"Flat illustration of a browser window showing a simple web page, with labeled callouts: HTML as structure, CSS as style, JavaScript as behavior, with arrows connecting them."
Interview-style questions from this topic
- What does HTML stand for, and what is its main purpose?
- How is HTML different from a programming language?
- What is meant by “hypertext” in HTML?
- Explain the difference between HTML, CSS, and JavaScript in simple words.
- Why is HTML considered the foundation of web development?
- How do modern frameworks like React or Angular relate to HTML?
- What happens to HTML when a web page is loaded in the browser?
Hands-on Examples
Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here...</p>
</body>
</html>This is the basic structure of an HTML page. <!DOCTYPE html> tells the browser we are using HTML5. The <html> tag wraps the whole page, <head> contains information about the page (like the title), and <body> contains the content the user actually sees on the screen.