Every great journey begins with a single step. In web development, that step is traditionally creating a page that says "Hello, World!". In this lesson, we'll do exactly that. It's simple, but it will teach you the essential structure of every single website on the internet.
The Core HTML Boilerplate
"Boilerplate" is a term for a standard block of code you'll use over and over again. The boilerplate below is the absolute minimum required for any HTML page.
Open a plain text editor and copy and paste the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Breaking Down the Boilerplate
Let's go through this line by line to understand what's happening.
<!DOCTYPE html>: This is not an HTML tag; it's an instruction. It must be the very first thing in your file. It tells the web browser, "Hey, the document I'm about to read is a modern HTML5 document."
<html>: This is the root element. Every other element on your page will be inside this one.
<head>: Think of this as the "control room" of the page. The information here is not displayed on the screen. It contains important metadata for the browser.
<meta charset="UTF-8">: This is a crucial meta tag that sets the character encoding for your page. Using UTF-8 ensures that all characters and symbols from any language will display correctly.
<title>: This tag defines the title that appears in the browser tab at the top of the window.
<body>: This is where all the action happens! Any content inside the <body> tag—text, images, videos, links—is the content that will be visible to your users.
<h1>: This is a heading tag. h1 stands for "Heading 1," the most important heading on the page.
How to See Your Page
Save the file: Save the code you wrote as index.html. It's crucial that the file extension is .html, not .txt.
Open in your browser: Find the index.html file on your computer and simply double-click it. It will automatically open in your default web browser.
You will see a simple page with the text "Hello, World!" in a large, bold font. You've done it!
What's Next: You've now written HTML, but what exactly are those things in angle brackets like <h1> and <p>? In our next lesson, we'll learn the fundamental grammar of HTML: Tags, Elements, and Attributes.