Start Here: Build Your First Web Page

01What HTML Actually Does

HTML stands for HyperText Markup Language. It is the language that gives a web page its structure. Every heading, paragraph, link, image, form, and video you have ever seen on the web is described with HTML.

HTML is not a programming language. It has no loops, variables, or calculations. It is a markup language: you wrap pieces of content in tags so the browser knows what each piece is. That makes HTML a friendly first step if you have never written code before.

Think of a web page like a house. HTML is the frame, walls, and rooms. CSS is the paint and furniture. JavaScript is the electricity and plumbing. A page can exist with HTML alone, but it cannot exist without it.

02Your First Complete Page

Create a new file called index.html. You can use Notepad, TextEdit, or a free editor such as VS Code. The .html ending matters: it tells your computer to open the file in a browser instead of a text editor.

Paste the code below into the file and save it. Every line has a job, and the first module explains each one in detail. For now, notice the pattern: an opening tag, some content, and a closing tag.

<!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>Hello, world!</h1>    <p>I built this page with HTML.</p>    <a href="https://developer.mozilla.org/">Learn more on MDN</a>    <img src="https://placehold.co/320x160" alt="A simple placeholder image" />  </body></html>

03Tags, Elements, and Attributes

A tag is the piece of markup inside angle brackets, such as <p>. Most elements have an opening tag and a closing tag: <p> is the opening tag and </p> is the closing tag. The opening tag, the content, and the closing tag together form an element.

Attributes add extra information to an element. In <a href="https://example.com">, the href attribute tells the browser where the link should go. In <img src="photo.jpg" alt="A cat">, src points to the image file and alt describes the image for people who cannot see it.

Some elements are empty, which means they do not wrap around content. <img>, <br>, and <meta> are common examples. In HTML5 you can write them without a trailing slash, but either style works.

Elements can sit inside other elements. This is called nesting. Keep your nesting tidy: close the most recently opened element first, and indent child elements so the structure is easy to read.

<p>This is a paragraph element.</p><a href="https://example.com">This link has an href attribute.</a><img src="photo.jpg" alt="A description of the image" />

04Open It in Your Browser

Save the file, then double-click index.html. It should open in your default browser. You can also drag the file into an open browser window or use File > Open.

You should see a large heading, a paragraph, a blue link, and a placeholder image. If you see the code instead of the page, the file probably has a .txt ending. Rename it so it ends in .html.

Edit the file, save it, and refresh the browser tab. That is the entire workflow for this course: write, save, refresh. No server or build step is required.

05What You Just Built

The <head> contains information about the page: the character encoding, the viewport settings for mobile, and the title shown in the browser tab. The <body> contains everything people actually see.

The <h1> is the main heading. The <p> is a paragraph. The <a> is a link. The <img> is an image. These are the building blocks you will combine for the rest of the course.

Open the page in your browser and use your keyboard to tab through it. Notice that the link receives a visible focus ring. That small detail is the beginning of accessibility, which you will study in depth later.

You now have a complete web page. The next lessons explain why the document starts with <!DOCTYPE html>, how the browser turns your text into the page you see, and how to structure real content with confidence.