Introduction to HTML & Setting Up Your Editor

Before you read the main lesson, make sure you understand these three ideas. They are not hard · each takes less than two minutes.

What is a Web Browser?

A web browser is the program you use to visit websites. Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari. The browser's job is to read files and display them as nice-looking pages. It does not show the code · it reads the code and turns it into what you see on screen.

What is a File?

A file is a collection of data saved on your computer with a name. Files have extensions (the letters after the dot in the name) that tell your computer what kind of file it is. For example:

• photo.jpg → a photo image
• song.mp3 → an audio file
• index.html → a web page file

What is Plain Text?

Plain text is text with absolutely no formatting · no bold, no colour, no font. Programs like Notepad (Windows) or TextEdit (Mac) can produce plain text. This is important because HTML files must be saved as plain text, not as a Word document or rich-text file.

1.1 The Big Picture: HTML in One Sentence

HTML stands for Hyper Text Markup Language. It is the standard language used to create and structure web pages.

Let's break that definition word by word:

1.2 What Problem Does HTML Solve?

Imagine you want to share a document on the internet. You type:

My First Heading
My first paragraph.

A browser would have no idea whether "My First Heading" is a title, a subtitle, a caption, or ordinary text. It would just display it all as one flat blob. HTML solves this by letting you label every piece of content so the browser knows how to display it.

With HTML, you tell the browser:

• "This line is a big heading"
• "This line is a paragraph"
• "This word is a clickable link"
• "This item belongs to a list"

1.3 What HTML Is NOT

HTML is not a programming language · it does not run calculations or make decisions. It is purely a description language. It tells the browser what things are, not what to do.

Analogy: HTML is like the blueprint of a building. It says "this room is the kitchen, this room is the bedroom." The actual construction (making things interactive and beautiful) is done later by CSS (styling) and JavaScript (behaviour).

1.4 A Brief History of HTML

HTML has evolved over 30+ years. Here is a quick timeline:

This tutorial follows HTML5, the modern standard used by all websites today.

This is the most important section. Take your time here.

2.1 What is an HTML Tag?

A tag is a special label you write in your HTML file. Tags are always enclosed in angle brackets < >. They look like this:

<h1>

There are two kinds of tags:

• Opening tag · signals the start of something: <h1>
• Closing tag · signals the end of something: </h1> (notice the forward slash /)

2.2 What is an HTML Element?

An element is the complete unit: opening tag + content + closing tag together.

<tagname>Content goes here</tagname>

Simple example · a heading:

<h1>My First Heading</h1>

• <h1> → Opening tag · "start a big heading"
• My First Heading → Content · the actual text shown on screen
• </h1> → Closing tag · "end the heading"

Simple example · a paragraph:

<p>My first paragraph.</p>

• <p> → Opening tag for a paragraph
• My first paragraph. → The text that will appear
• </p> → Closing tag

Thinking prompt: What do you think would happen if you forgot the closing tag </p>? Try to guess before reading the "Common Mistakes" section later!

2.3 The Element Table · Input → Process → Output

2.4 Empty Elements (Self-Closing Tags)

Some HTML elements have no content and no closing tag. They are called empty elements or void elements. The most common example is <br>, which creates a line break.

<p>Line one.<br>Line two.</p>

Expected output in the browser:

Line one.
Line two.

Notice: <br> has no closing tag </br>. It stands alone. Other common empty elements you will meet later: <img> (images), <input> (form fields), <hr> (horizontal rule).

Every valid HTML page follows a specific structure. Think of it as the skeleton every web page must have. Let's examine it piece by piece.

3.1 The Complete Minimal HTML Document

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

Expected output in the browser:

• The browser tab shows: Page Title
• The page displays a large heading: My First Heading
• Below it, a paragraph: My first paragraph.

3.2 Line-by-Line Explanation

Line 1: <!DOCTYPE html>

This is a declaration (not a tag · notice it starts with !). It tells the browser: "This file uses HTML5." Every single HTML page should start with this. Without it, older browsers may display your page incorrectly.

<!DOCTYPE html>

It is not case-sensitive · <!doctype html> also works · but the capitalised form <!DOCTYPE html> is the standard convention.

Line 2: <html>

This is the root element. Everything on your page goes inside <html>...</html>. Think of it as the outer container that holds everything else.

<html>
  ... everything goes in here ...
</html>

Lines 3 · 5: <head>...</head>

The <head> section holds information about the page that is NOT displayed on screen. It is invisible to visitors but important for the browser.

<head>
  <title>Page Title</title>
</head>

The <title> tag inside <head> sets the text shown in:

• The browser's title bar (the top bar of the window)
• The browser tab (the small clickable tab)
• Search engine results (e.g. Google shows this as the clickable link title)

Lines 6 · 11: <body>...</body>

The <body> section holds all the visible content · everything the visitor actually sees on the page.

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

• <h1> · Defines the largest (most important) heading. There are 6 heading sizes: <h1> through <h6>, where <h1> is biggest and <h6> is smallest.
• <p> · Defines a paragraph of text.

3.3 Visual Page Structure

Here is a visual map of how the sections relate:

┌─────────────────────────────────────────┐
│  <html>                                 │
│  ┌───────────────────────────────────┐  │
│  │  <head>                           │  │
│  │    <title>Page Title</title>      │  │  ← NOT shown on page
│  │  </head>                          │  │
│  ├───────────────────────────────────┤  │
│  │  <body>                           │  │
│  │    <h1>This is a heading</h1>     │  │  ← SHOWN on page
│  │    <p>This is a paragraph.</p>    │  │  ← SHOWN on page
│  │    <p>Another paragraph.</p>      │  │  ← SHOWN on page
│  │  </body>                          │  │
│  └───────────────────────────────────┘  │
│  </html>                                │
└─────────────────────────────────────────┘

3.4 How a Browser Reads Your HTML

Here is the simple journey of your HTML file to the screen:

1. You write HTML code in a text editor and save it as a .html file.
2. You open the file in a browser.
3. The browser reads the file from top to bottom.
4. It sees the tags and understands what each piece of content is.
5. It renders (draws) the page according to those instructions.
6. You see the finished, formatted page · without seeing any of the HTML code.

Key insight: The browser never shows the tags. It only uses the tags to decide how to display the content.

Now that you understand what HTML is, you need a place to write it. That place is a text editor.

4.1 What is a Text Editor?

A text editor is a program that lets you write and save plain text files. This is different from a word processor like Microsoft Word, which adds hidden formatting. HTML files must be plain text · no hidden formatting.

Analogy: A word processor (like Word) is like a fancy restaurant · it adds decorations automatically. A plain text editor is like a blank notebook · you write exactly what you want, nothing more.

4.2 Two Approaches: Simple Editor vs Code Editor

Option A · Simple Text Editor (Beginner-Friendly, Free, Already on Your Computer)

These are already installed on your computer and require zero setup. They are perfect for learning because you see exactly what you type.

Option B · Code Editor (More Powerful, Free Download)

As you progress, many developers use dedicated code editors that offer features like:

• Syntax highlighting (colours your HTML tags so they are easier to read)
• Auto-complete (suggests tag names as you type)
• Error detection (helps you spot unclosed tags)

Popular free code editors: Visual Studio Code (VS Code), Sublime Text, Atom, Brackets.

For this lesson, we will use Notepad or TextEdit · they are the best tools for learning because there is nothing hiding from you.

4.3 Step-by-Step: Writing Your First HTML File (Windows · Notepad)

Follow these steps exactly:

Step 1: Open Notepad

• Windows 8 or later: Press the Windows key, type Notepad, press Enter.
• Windows 7 or earlier: Click Start → Programs → Accessories → Notepad.

Step 2: Type the HTML Code

In Notepad, type the following HTML code exactly as shown (or copy-paste it):

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Important: Type everything yourself at least once. Your fingers will remember it faster than your eyes.

Step 3: Save the File

• Click File → Save As
• In the "File name" box, type: index.htm
• In the "Encoding" dropdown, select: UTF-8
• Choose a location (e.g. your Desktop)
• Click Save

Why UTF-8? UTF-8 is a character encoding standard. It ensures all special characters (accents, symbols, foreign letters) display correctly. Always use UTF-8 for HTML files.

Why .htm or .html? Both .htm and .html are valid file extensions for HTML files. They work identically. .html is more common today.

Step 4: Open the File in Your Browser

• Go to where you saved the file (e.g. your Desktop)
• Double-click the file index.htm
• Your default browser will open and display the page

Expected output in the browser:

My First Heading     ← displayed as a large bold heading

My first paragraph.  ← displayed as normal paragraph text

Congratulations · you have created your first web page! 🎉

4.4 Step-by-Step: Writing Your First HTML File (Mac · TextEdit)

Step 1: Open TextEdit

• Click Finder → Applications → TextEdit

Step 2: Configure TextEdit for Plain Text (VERY IMPORTANT)

By default, TextEdit saves in "rich text" format (like a word processor). You must switch it to plain text mode:

• Click TextEdit (top menu) → Preferences
• Under "Format", select Plain Text
• Click "Open and Save" tab
• Check the box: "Display HTML files as HTML code instead of formatted text"
• Close the Preferences window
• Open a new document (File → New)

Step 3: Type the HTML Code

Type the same HTML code from above into the new document.

Step 4: Save the File

• Click File → Save As
• Name the file: index.html
• Make sure "Plain Text Encoding" is set to Unicode (UTF-8)
• If prompted to use .txt extension, click "Use .html"

Step 5: Open in Browser

Double-click the saved file to open it in your browser.

4.5 The W3Schools Online Editor · "Try it Yourself"

W3Schools also provides a free online editor at w3schools.com/tryit. This is extremely useful because:

• No installation needed · works in any browser
• Type code on the left → instantly see the result on the right
• Saves you from creating files on your computer while experimenting

The online editor has two panels:

• Left panel: You type your HTML code
• Right panel: The browser output is shown live

Tip: Use the online editor when you want to quickly test a small idea. Use Notepad/TextEdit when building a full project you want to save on your computer.

Now let's practise the concepts with fully explained examples.

Example 1 · The Simplest Possible Web Page

<!DOCTYPE html>
<html>
<body>

<p>Hello, World!</p>

</body>
</html>

What each line does:

• <!DOCTYPE html> · Tells the browser this is HTML5
• <html> · Opens the HTML document
• <body> · Opens the visible content area
• <p>Hello, World!</p> · Creates a paragraph containing "Hello, World!"
• </body> · Closes the body
• </html> · Closes the HTML document

Expected browser output:

Hello, World!

Thinking prompt: What happens if you remove the <p> tags? The text would still appear, but it would lose the paragraph spacing. Try it!

Example 2 · A Page with a Title and a Heading

<!DOCTYPE html>
<html>
<head>
  <title>My Learning Page</title>
</head>
<body>

  <h1>Welcome to HTML!</h1>
  <p>I am learning how to build web pages.</p>

</body>
</html>

What changed from Example 1:

• We added a <head> section with a <title> · the browser tab now shows "My Learning Page"
• We added an <h1> heading · a big, bold title on the page

Expected browser output:

• Browser tab label: My Learning Page
• Page content:

``` Welcome to HTML! ← large bold heading

I am learning how to build web pages. ← paragraph below it ```

Example 3 · Multiple Headings and Paragraphs

<!DOCTYPE html>
<html>
<head>
  <title>My First Full Page</title>
</head>
<body>

  <h1>My Favourite Subject</h1>
  <p>I love learning about computers and the web.</p>

  <h2>Why I Like It</h2>
  <p>Building websites lets me create things that anyone in the world can see.</p>

  <h3>My Goal</h3>
  <p>One day I want to build my own app.</p>

</body>
</html>

New concepts introduced:

• <h2> · A second-level heading (smaller than <h1>, but still a heading)
• <h3> · A third-level heading (smaller than <h2>)

Expected browser output:

My Favourite Subject         ← largest heading (h1)

I love learning about computers and the web.

Why I Like It                ← medium heading (h2)

Building websites lets me create things that anyone in the world can see.

My Goal                      ← smaller heading (h3)

One day I want to build my own app.

Thinking prompt: There are headings <h1> through <h6>. What do you think <h6> looks like compared to <h1>? Add both to your page and see.

Example 4 · Using a Line Break Inside a Paragraph

<!DOCTYPE html>
<html>
<body>

<p>Line one of the poem.<br>Line two of the poem.<br>Line three of the poem.</p>

</body>
</html>

<br> explained: The <br> tag inserts a line break inside a paragraph. Without it, all the text would appear on one line. It is an empty element · no closing tag needed.

Expected browser output:

Line one of the poem.
Line two of the poem.
Line three of the poem.

Study these carefully. Every beginner makes these mistakes at least once.

Mistake 1: Forgetting the Closing Tag

❌ Wrong:

<p>This paragraph has no closing tag.
<p>This is the next paragraph.</p>

✅ Correct:

<p>This paragraph is properly closed.</p>
<p>This is the next paragraph.</p>

Why this matters: Browsers are forgiving and may still display the page, but missing closing tags can cause unpredictable layout problems, especially when you add more content later.

Mistake 2: Using a Forward Slash in the Opening Tag

❌ Wrong:

</p>My paragraph text.</p>

✅ Correct:

<p>My paragraph text.</p>

Rule: The opening tag has NO slash: <p>. The closing tag has a slash: </p>.

Mistake 3: Saving the File with the Wrong Extension

❌ Wrong: Saving as index.txt (it saves as plain text, browser won't recognise it as HTML)

✅ Correct: Save as index.html or index.htm

In Notepad: Always choose "All Files (.)" in the "Save as type" dropdown before typing the filename with .html, otherwise Windows adds .txt to the end.

Mistake 4: Forgetting <!DOCTYPE html>

❌ Wrong:

<html>
<body>
<p>My page.</p>
</body>
</html>

✅ Correct:

<!DOCTYPE html>
<html>
<body>
<p>My page.</p>
</body>
</html>

Why this matters: Without <!DOCTYPE html>, older browsers may switch into "quirks mode" and display your page incorrectly.

Mistake 5: Putting Visible Content in the <head>

❌ Wrong:

<head>
  <title>My Page</title>
  <p>This text is in the wrong place!</p>  <!-- ← This belongs in <body> -->
</head>

✅ Correct:

<head>
  <title>My Page</title>
</head>
<body>
  <p>This text is in the right place.</p>
</body>

Rule: All visible content goes inside <body>. The <head> section is only for metadata (information about the page, not the page content itself).

Mistake 6: Using TextEdit in "Rich Text" Mode on Mac

❌ Wrong: Saving an HTML file from TextEdit without switching to Plain Text mode · the file will contain hidden formatting codes that will break your HTML.

✅ Correct: Go to TextEdit Preferences → Format → Plain Text. Then create a new document before writing HTML.

Mistake 7: Wrong Tag Nesting Order

❌ Wrong:

<h1><p>Mixed up tags</h1></p>

✅ Correct:

<h1>Heading text</h1>
<p>Paragraph text</p>

Rule: Tags must be properly nested · the last tag opened must be the first tag closed. Think of it like opening and closing brackets: ( [ ] ) not ( [ ) ].