Learn

HTML describes the structure of a web page. Tags tell the browser which words are a heading and which belong in a paragraph. The browser reads those instructions and displays the content. In this lesson you will change the words in a complete page, then run it to see the result.

Walkthrough: why the code works

1. Find the visible part of the page

   Open View starter code below. The <!DOCTYPE html> line tells the browser to use modern HTML. The html element contains the document. Inside it, head holds settings and body holds the content shown on the page. For this first edit, find the h1 and p inside body. Leave the settings and empty style element in place.

2. Read a heading from left to right

   In <h1>My hobby</h1>, <h1> is the opening tag, My hobby is the text, and </h1> is the closing tag. The slash marks the end. Together they form an element. h1 identifies the main heading, so the browser normally displays it larger and bolder than a paragraph. The tags give the words meaning; they are not printed on the page.

   <h1>My hobby</h1>
   <p>I enjoy learning something new.</p>

3. Change the content and run the page

   Choose Practise in the sandbox. In the editor, replace My hobby with My garden and replace the words inside p with I enjoy growing herbs. Keep the opening and closing tags. Choose Run Code to rebuild the preview from your edited HTML.

   <h1>My garden</h1>
   <p>I enjoy growing herbs.</p>

4. Understand why the result changes

   You kept h1 and p, so the content still has the same roles: one main heading and one paragraph. Only their words changed. The browser shows them in their order inside body. Spaces and indentation in the editor help you read the code; a new line in the editor alone does not create a new paragraph. Another p element does.

Expected results

• Before editing, the preview shows the heading My hobby and the sentence I enjoy learning something new.

• After the example edit and Run Code, it shows a large heading My garden with I enjoy growing herbs. underneath. You should see the words, without the <h1> or <p> tags.

• For your challenge, use your own hobby instead. Both pieces of text should change while remaining a heading and a paragraph.

Common mistakes and how to fix them

• Changing title instead of h1: The title in head names the browser tab when the HTML file is opened as its own page. It does not create the visible heading. Change the h1 inside body to change the heading in the preview.

• Deleting part of a tag: Keep both angle brackets and the slash in the closing tag: <h1>...</h1> and <p>...</p>. Browsers try to repair broken HTML, so a page can appear to work even when a tag is missing. Compare your tags with the starter if the result looks unexpected.

• Expecting an edit to appear before running it: Choose Run Code after changing the editor. If the old text remains, check that you changed the words inside the body tags and then run the code again.

• Thinking the preview saves your work: Run Code displays the current code. Choose Download HTML to keep a file you can open again; saving and reopening your work is covered in Lesson 2.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
  </body>
</html>

Your challenge

Choose a hobby. Replace the heading and paragraph with your own words.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

<h1>My garden</h1>
<p>I enjoy growing herbs.</p>

Check your work

Your preview shows your hobby and a sentence about it.

Completion is your own check, not an automatic grade.