What is HTML? – The Simple Definition
HTML stands for HyperText Markup Language. Let's break that down:
- HyperText — text that contains links (hyperlinks) to other text and documents. It is what makes the web a web — pages connected to other pages.
- Markup — HTML "marks up" content with tags to tell the browser what each piece of content is. A
<h1>tag tells the browser "this is a heading". A<p>tag says "this is a paragraph". - Language — HTML has its own syntax (rules about how to write it correctly). It is not a programming language — it has no variables, loops, or conditions. It is a description language.
HTML describes structure and content. It cannot do calculations, make decisions, or respond to events on its own. That is what CSS (appearance) and JavaScript (behaviour) are for. Together, HTML + CSS + JavaScript are the three languages of the web.
Your Very First HTML
HTML uses tags — special keywords surrounded by angle brackets — to label content. Most tags come in pairs: an opening tag and a closing tag (with a forward slash).
<!-- This is an HTML comment — the browser ignores it -->
<!-- A heading -->
<h1>Hello, World!</h1>
<!-- A paragraph -->
<p>This is my first HTML paragraph.</p>
<!-- A clickable link -->
<a href="https://ylearner.org">Visit ylearner</a>
<!-- An image -->
<img src="photo.jpg" alt="A beautiful photo">This is my first HTML paragraph.
Visit ylearner
[image: A beautiful photo]
Notice the pattern: <tagname>content</tagname>. The tag name tells the browser what type of content it is. The browser reads these tags and renders them visually — headings are large and bold, paragraphs have spacing, links are blue and clickable.
HTML, CSS, and JavaScript – The Three Pillars of the Web
Every modern website uses three technologies working together. Think of building a house:
| Technology | Role in a website | House analogy |
|---|---|---|
| HTML | Structure and content — headings, paragraphs, images, links, forms | The walls, floors, rooms, and doors |
| CSS | Appearance — colours, fonts, layout, spacing, animations | The paint, wallpaper, furniture, and decoration |
| JavaScript | Behaviour — responding to clicks, fetching data, updating the page | The electricity, plumbing, and smart home systems |
<!-- HTML: the structure -->
<button id="greetBtn">Click me!</button>
<p id="message"></p>
<!-- CSS: the appearance (inside a <style> tag) -->
<style>
#greetBtn {
background: #E44D26;
color: white;
padding: 0.5rem 1.5rem;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
</style>
<!-- JavaScript: the behaviour (inside a <script> tag) -->
<script>
document.getElementById("greetBtn").addEventListener("click", function() {
document.getElementById("message").textContent = "Hello! Welcome to HTML!";
});
</script>How the Browser Reads HTML
When you type a URL in your browser and press Enter, a lot happens very quickly:
- Request — Your browser sends an HTTP request to a web server asking for the HTML file.
- Response — The server sends back the HTML file as plain text.
- Parsing — The browser reads the HTML text from top to bottom, building a tree-like structure of all the elements. This internal representation is called the DOM (Document Object Model).
- Rendering — The browser applies CSS styles and displays the final visual page. JavaScript runs after the page loads and can dynamically change any part of the DOM.
An HTML file is nothing more than a text file with a .html extension. You could write HTML in Notepad and it would work perfectly. The browser is the program that interprets the text and displays it as a visual page.
The Structure of an HTML Document
Every HTML page has the same essential structure. Here is the minimal valid HTML5 document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>Every part of this has a specific purpose:
| Part | Purpose |
|---|---|
<!DOCTYPE html> |
Tells the browser this is an HTML5 document. Always the first line. Not a tag — it is a declaration. |
<html lang="en"> |
The root element — everything else goes inside it. lang="en" tells search engines and screen readers the page language. |
<head> |
Contains metadata — information about the page that is not displayed directly. Includes the title, charset, viewport settings, CSS links, and meta descriptions. |
<meta charset="UTF-8"> |
Sets the character encoding. UTF-8 supports every character in every language. Always include this. |
<meta name="viewport"> |
Makes the page scale correctly on mobile devices. Without this, mobile browsers zoom out and show a tiny desktop layout. |
<title> |
Sets the text shown in the browser tab and in search engine results. Crucial for SEO. |
<body> |
Contains everything that is actually displayed to the user — headings, paragraphs, images, links, forms, buttons. |
Tags, Elements, and Attributes
Three terms you will hear constantly in HTML. They are related but different:
<!-- A TAG is just the label: <p> and </p> are tags -->
<p>
<!-- An ELEMENT is the complete unit: opening tag + content + closing tag -->
<p>This is a complete paragraph element.</p>
<!-- An ATTRIBUTE adds extra information to a tag -->
<!-- Format: attribute="value" inside the opening tag -->
<a href="https://google.com" target="_blank">Open Google</a>
<!-- ↑ href attribute ↑ target attribute -->
<img src="photo.jpg" alt="Description of photo" width="300">
<!-- ↑ src ↑ alt ↑ width — all attributes -->
<!-- Some elements are "void" — they have no closing tag -->
<br> <!-- line break -->
<hr> <!-- horizontal rule (line) -->
<img> <!-- image -->
<input> <!-- form input -->
<meta> <!-- metadata -->
<link> <!-- external resource link -->HTML Versions – A Brief History
| Version | Year | Key addition |
|---|---|---|
| HTML 1.0 | 1991 | Basic tags: headings, paragraphs, links |
| HTML 2.0 | 1995 | Forms, tables, standardised tags |
| HTML 3.2 | 1997 | Scripting support, applets |
| HTML 4.01 | 1999 | CSS separation, accessibility, frames |
| XHTML 1.0 | 2000 | Stricter XML-based rules |
| HTML5 | 2014 | Semantic tags, video/audio, canvas, local storage, mobile support — the current standard |
| HTML Living Standard | 2019–now | Continuously updated by WHATWG — HTML5 is now just called "HTML" |
Today when developers say "HTML" they mean HTML5 (the Living Standard). This is what every modern browser supports and what this course teaches.
What HTML Cannot Do
Understanding HTML's limits is as important as knowing what it can do:
- No logic — HTML cannot make decisions (
if/else), run loops, or do calculations. That is JavaScript's job. - No styling — HTML creates structure but does not control colours, fonts, layout, or spacing. That is CSS's job.
- No database access — HTML cannot read from or write to a database. That requires a server-side language (Python, Node.js, PHP).
- No interactivity — An HTML-only page is entirely static. Users cannot interact with it beyond clicking links and submitting forms. JavaScript adds interactivity.
HTML is read by search engines and screen readers, not just browsers. Writing semantic, well-structured HTML — using the right tag for the right content — directly affects your Google rankings and makes your site usable by people with disabilities. This course teaches the right way from the start.
Nesting HTML Elements
HTML elements can be placed inside other elements. This is called nesting. The browser builds a tree from nested elements — called the DOM tree. Proper nesting is required: elements must be closed in reverse order of opening.
<!-- CORRECT: elements closed in reverse order -->
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
<div>
<h2>Card Title</h2>
<p>Card description with a <a href="#">link inside</a> the paragraph.</p>
</div>
<ul>
<li>First item</li>
<li>Second item with <strong>emphasis</strong></li>
<li>Third item</li>
</ul>
<!-- WRONG: elements overlapping — browser will try to fix this
but results are unpredictable -->
<p>This is <strong>wrong</p></strong>📋 Summary
- HTML stands for HyperText Markup Language — it describes the structure and content of web pages using tags.
- HTML is not a programming language — it has no logic, conditions, or variables. It describes content, not behaviour.
- The three languages of the web: HTML (structure) + CSS (appearance) + JavaScript (behaviour).
- Every HTML document needs:
<!DOCTYPE html>,<html>,<head>,<title>, and<body>. - HTML uses tags to mark up content. Most tags come in pairs:
<tag>content</tag>. Some (like<img>and<br>) are self-closing void elements. - Attributes provide extra information:
<a href="url">,<img src="path" alt="description">. - The current standard is HTML5 (the HTML Living Standard), maintained by WHATWG.
Frequently Asked Questions
No — HTML is a markup language, not a programming language. A programming language (like JavaScript, Python, or C) has variables, loops, conditions, and functions. HTML has none of these. It simply describes the structure and content of a document. This distinction matters when applying for jobs — do not list "HTML programming" on a CV. Say "HTML and CSS" instead.
No installation is required. Every computer has a text editor (Notepad on Windows, TextEdit on Mac) and a web browser. You can write HTML in any text editor and open the file in a browser to see the result. That said, using a code editor like VS Code (free) is strongly recommended — it provides syntax highlighting, autocompletion, and instant error highlighting that make writing HTML much faster and less error-prone.
The core HTML tags and document structure can be learned in a few days. Building a complete, well-structured web page takes a few weeks of practice. To write production-quality, semantic, accessible HTML fluently takes several months. HTML has one of the lowest barriers to entry of any web technology — you can open your browser, create a file, and see results immediately.
Yes — HTML is the prerequisite for JavaScript. JavaScript manipulates HTML elements on the page via the DOM. Without understanding what a <div>, <p>, or <button> is, JavaScript code that targets those elements makes no sense. Learn HTML first, then CSS for styling, then JavaScript for interactivity. This is the natural order of web development.
HTML5 is the version of HTML released in 2014. It added semantic elements (<header>, <nav>, <article>), native video/audio (<video>, <audio>), the canvas API, local storage, and much better mobile support. Today "HTML" and "HTML5" mean the same thing — all modern browsers support HTML5 and it is the only version worth learning.