1. What is HTML?
HTML (Hypertext Markup Language) is the foundational language used to structure and format content on the web. It's not a programming language—it's a markup language, meaning it uses special tags to organize information rather than perform calculations or logic.
The Big Picture:
Think of HTML like the skeleton of a webpage. CSS is the skin and styling; JavaScript is the muscles and movement. HTML provides the basic structure that everything else builds on.
How HTML Works: Tags
HTML uses tags (also called elements) to structure content. Tags are keywords wrapped in angle brackets: <tag>
- Most tags are paired (opening and closing):
<html> and </html>
- Some tags are self-closing (only open):
<img> and <link>
- The <html> tag is the root element—every other HTML element sits inside it
The Content Layer
The content layer of a webpage is made up of HTML elements such as:
- Headings:
<h1>, <h2>, etc.
- Paragraphs:
<p>
- Links:
<a>
- Images:
<img>
- Tables:
<table>
- Lists:
<ul>, <ol>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
✓ Practice Question:
What is the difference between a tag that opens and closes (like <p>) and a self-closing tag (like <img>)? Give an example of each.
2. The Head Section
The <head> section contains metadata about the webpage—information that helps browsers and search engines understand the page, but is not displayed on the page itself.
Key Difference: What goes in <head> appears in the browser tab or search results, not on the visible page. What goes in <body> is what users see and read.
Page Title
The <title> element sets the page title that appears in the browser tab. This is the first thing users see when they open your page.
Rule: Always place the title inside <head> tags.
<title>My Web Page</title>
External Stylesheets
CSS stylesheets control how your page looks (colours, fonts, layouts). External stylesheets are linked in the <head> section using the <link> element.
Syntax:
<link rel="stylesheet" href="styles.css">
What each part does:
rel="stylesheet" — tells the browser this is a stylesheethref="styles.css" — the file path to your CSS file
Order Matters: Stylesheets are loaded in the order they appear. If two stylesheets style the same element differently, the last one wins. This is called the cascade.
Metatags
Metatags are snippets of text in HTML that describe the page's content. They don't appear on the page itself, but search engines, browsers, and social media platforms use them to understand and display your page.
Charset (Character Encoding)
The <meta charset> tag specifies which character set the page uses.
Character Encoding:
A system that maps characters (letters, numbers, symbols) to numerical codes so computers can display them correctly.
Standard: <meta charset="UTF-8">
Why UTF-8? UTF-8 is universal and includes almost all characters from all writing systems (Latin, Arabic, Chinese, emoji, etc.). It's the standard for modern web.
Keywords
keywords
<meta name="keywords" content="HTML, web design, tutorial">
Author