The Boilerplate Every HTML File Needs
Every HTML document starts with the same skeleton. Memorise it — you'll type it hundreds of times:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Page Title</title>
</head>
<body>
<!-- visible content goes here -->
</body>
</html>
Tags, Elements, and Attributes
An element consists of an opening tag, content, and a closing tag: <p>Hello</p>.
Attributes go inside the opening tag and provide extra information: <a href="about.html">About</a>. Here href is the attribute name and about.html is its value.
Some elements are self-closing — they have no content or closing tag: <img src="photo.jpg" alt="A photo"/> and <br/>.
The <head> vs. the <body>
The <head> contains metadata — information about the page that the browser uses but does not show directly: the title (appears in the browser tab), character encoding, CSS links, and more.
The <body> contains everything the user actually sees: text, images, buttons, navigation, etc.