HTML (HyperText Markup Language) is the standard language for creating web pages. It's not a programming language, but a markup language that describes the structure and meaning of content. Think of HTML as the skeleton of a website: it defines what content exists and how it's organized, but not how it looks or behaves.
HyperText means documents linked together through hyperlinks - the foundation of the web as we know it. Markup refers to tags that annotate content with meaning: this is a heading, this is a paragraph, this is a link.
https://www.youtube.com/watch?v=ok-plXXHlWw
Web pages are built using three core technologies working together:
The main focus for this lesson is HTML.
<aside> 💡
Info HTML is like the blueprint of a house, CSS is the interior design, and JavaScript is the electricity and plumbing that makes everything functional.
</aside>
HTML was invented by Tim Berners-Lee in 1991 while working at CERN, the European physics research organization. He created it to solve a simple problem: how could scientists share research documents across different computers?
HTML5 introduced the semantic elements we use today (<header>, <nav>, <article>, etc.) and native support for video, audio, and interactive graphics without plugins like Flash.
Timeline of HTML evolution:
<aside> 😄
Inspirational Tim Berners-Lee created the web and HTML to share information freely. He could have patented it and become incredibly wealthy, but instead he gave it to the world for free. Every website you visit exists because of that decision.
</aside>
Every HTML document follows a standard structure. Here's the basic template you'll use for every web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Let's break down each part:
<!DOCTYPE html>
<html lang="en">
lang="en" attribute declares the language (English)</html> tag at the very end<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<body>
<body> per document<aside> ⌨️
Hands On
Create a new file called index.html in a folder. Copy the basic template above, change the title to your name, and add a paragraph about yourself. Open the file in your browser (File → Open or drag it into the browser window).
</aside>
https://www.youtube.com/watch?v=2oCN2q1x3c4
<aside> ⌨️
Hands On
Create a new file called index.html in a folder. Copy the basic template above, change the title to your name, and add a paragraph about yourself. Open the file in your browser (File → Open or drag it into the browser window).
</aside>
Now let's learn the building blocks you'll use to create web pages. HTML has over 100 elements, but you'll use these core ones constantly.
Headings: <h1> through <h6>
Headings create document structure from most important (h1) to least important (h6):
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Even Smaller Heading</h5>
<h6>Smallest Heading</h6>
Paragraphs: <p>
The paragraph element groups related sentences:
<p>This is a paragraph. It can contain multiple sentences. Browsers automatically add spacing above and below paragraphs.</p>
<p>This is another paragraph. Each paragraph is separated visually from others.</p>
Line breaks: <br>
Forces a line break within text without creating a new paragraph:
<p>
First line<br>
Second line<br>
Third line
</p>
When to use <br>:
When NOT to use <br>:
<p> elements)<aside> 💡
</aside>
Emphasis and importance
<!-- Emphasis (italic by default) -->
<p>This is <em>emphasized</em> text.</p>
<!-- Strong importance (bold by default) -->
<p>This is <strong>important</strong> text.</p>
<!-- Both together -->
<p>This is <strong><em>really important</em></strong>!</p>
Why not use <i> and <b>?
<em> and <strong> have semantic meaning (they communicate importance)<i> and <b> only change appearance without meaningInline text: <span>
A generic inline container with no semantic meaning:
<p>This paragraph has <span style="color: red;">red text</span> in the middle.</p>
Use <span> when you need to style or manipulate part of text without adding semantic meaning.
Anchor element: <a>
Creates clickable links to other pages, files, or locations:
<!-- Link to another website -->
<a href="<https://www.google.com>">Go to Google</a>
<!-- Link to another page on your site -->
<a href="about.html">About Page</a>
<!-- Link to a section on the same page -->
<a href="#contact">Jump to Contact Section</a>
<!-- Email link -->
<a href="mailto:[email protected]">Send us an email</a>
<!-- Phone link -->
<a href="tel:+31612345678">Call us</a>
<!-- Open in new tab -->
<a href="<https://www.google.com>" target="_blank">Open Google in new tab</a>
Attributes explained:
href (hypertext reference) - Where the link goestarget="_blank" - Opens in new tab (use sparingly, users can choose to open in new tab themselves)Link best practices: