How the web works (short version). When you type a web address in a browser, the browser (the client) sends a request over the internet to a computer called a web server. The server replies with files (HTML, CSS, JavaScript, images). The browser reads these files and draws the page. You will study this in depth in Unit 10.
What is HTML? HTML stands for HyperText Markup Language.
- HyperText means text with links to other documents.
- Markup means we label parts of the content with tags (heading, paragraph, list) so the browser knows what each part is.
- Language means it has rules (syntax) that must be followed.
HTML describes the structure and meaning of a page. CSS (Unit 6) describes how it looks. JavaScript (Unit 7) describes how it behaves.
Brief history. Tim Berners-Lee, the inventor of the World Wide Web, published the first description of HTML in 1991. The current standard is HTML5 (also called the HTML Living Standard), maintained by WHATWG.
Tags, elements and attributes.
<p class='intro'>Hello, world!</p><p>is the opening tag and</p>is the closing tag.Hello, world!is the content.- The whole thing is an element.
class='intro'is an attribute (name and value) giving extra information.- Some elements are void (no content, no closing tag), such as
<br>,<hr>,<img>,<input>,<meta>.
Structure of every HTML 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>Welcome</h1>
<p>This is my first web page.</p>
</body>
</html>| Part | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser this is an HTML5 document |
<html lang='en'> | Root element; lang helps screen readers and search engines |
<head> | Information about the page (not shown on the page itself) |
<meta charset='UTF-8'> | Character encoding so all languages display correctly |
<meta name='viewport'...> | Makes the page scale properly on phones |
<title> | Text shown on the browser tab |
<body> | Everything visible on the page |
Rules to remember: Nest tags properly (close the inner tag before the outer). Use lowercase tag names. Always close non-void elements. Browsers ignore extra spaces and blank lines, so use indentation freely. Comments are written as <!-- comment -->.
Try it
- Install VS Code. Create a folder
webdevand a fileindex.html. - Type the full structure above. Save and open it in Chrome (or use Live Server).
- Change the title and heading. Refresh and observe.
- Deliberately remove a closing tag and see what the browser does.
Check yourself. The questions for this part are on the 4.2 Review Questions page, with answers to check your work.