You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
HTML — HyperText Markup Language — is the standard language used to create and structure content on the web. Every website you visit is built on a foundation of HTML. It is not a programming language; it is a markup language that tells the browser what content to display and how to organise it.
HTML uses elements (also called tags) to describe the structure of a web page. Each element wraps a piece of content and tells the browser what role that content plays — a heading, a paragraph, an image, a link, a list, and so on.
| Concept | Description |
|---|---|
| Element | A building block of an HTML page (e.g., <p>, <h1>, <img>) |
| Tag | The syntax that defines an element — an opening tag <p> and a closing tag </p> |
| Attribute | Extra information on an element (e.g., class="intro", src="photo.jpg") |
| Content | The text or nested elements between the opening and closing tags |
Key fact: HTML was created by Tim Berners-Lee in 1991 as part of his vision for the World Wide Web. The current version, HTML5, was finalised in 2014 and continues to evolve through the WHATWG Living Standard.
When you open a web page, the browser performs these steps:
HTML File
│
▼
Parser → DOM Tree
│ │
▼ ▼
CSS Styles JavaScript
│
▼
Render Tree → Layout → Paint → Screen
Create a file called index.html and open it in any text editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first web page.</p>
</body>
</html>
Save the file and double-click it to open it in your browser. You should see a heading and a paragraph.
Every HTML element follows this pattern:
<tagname attribute="value">Content goes here</tagname>
| Part | Example | Purpose |
|---|---|---|
| Opening tag | <p> | Marks the start of the element |
| Attribute | class="intro" | Provides extra information |
| Content | Hello, World! | The visible text or nested elements |
| Closing tag | </p> | Marks the end of the element |
Some elements have no content and therefore no closing tag:
<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
| Tool | Purpose |
|---|---|
| Text editor | VS Code, Sublime Text, or any code editor |
| Web browser | Chrome, Firefox, Edge, or Safari |
| Developer tools | Press F12 to inspect HTML, CSS, and JavaScript |
| Live Server | VS Code extension that auto-reloads the page when you save |
You can view the HTML of any web page:
Comments are invisible to users but useful for developers:
<!-- This is a comment -->
<!-- TODO: Add navigation bar -->
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden.</p> -->
HTML is the foundational language of the web, using elements and attributes to structure content. Every web page is an HTML document that the browser parses into a DOM tree and renders on screen. You only need a text editor and a browser to start building web pages. In the next lesson, we will explore the structure of an HTML document in detail — the doctype, head, body, and metadata.