EasyCode365EasyCode365

Your first HTML page

1. Intro

Welcome to HTML Foundations! HTML is the standard language used to build the structure of every website on the internet. In this lesson, you will build your very first web page by putting together the essential, bare-bones skeleton of an HTML document.

2. Core idea

Every single web page requires a basic underlying structure to work properly. Think of this structure like the foundation and frame of a house—before you can decorate the walls or move in furniture, you need a solid, properly organized base.

3. Key parts

<!DOCTYPE html>

  • What it is: A special declaration placed at the very top of your file.
  • Why it matters: It ensures the web browser displays your page correctly.
  • Explanation: It simply tells the browser, "Hey, I am using the newest standard version of HTML!".

<html>

  • What it is: The root container.
  • Why it matters: It acts as the grand wrapper for your entire website.
  • Explanation: Every other piece of code you write will go inside this element.

<head>

  • What it is: The control center for hidden information.
  • Why it matters: It holds crucial background details the browser needs to function, rather than content for the user.
  • Explanation: Nothing inside this section is visible on the actual web page; instead, it contains things like the title of the browser tab.

<body>

  • What it is: The main display area.
  • Why it matters: This is where all your text, images, and interactive buttons live.
  • Explanation: Everything placed inside this tag is the actual visible content that your visitors will see and read on their screen.

4. Example

Can edit
<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Welcome to my brand new site.</p>
  </body>
</html>

5. Example breakdown

  • <!DOCTYPE html>: Sets the standard so the browser knows we are using modern HTML.
  • <html>: Starts the main wrapper of the HTML document.
  • <head>: Opens the hidden section reserved for the browser's background information.
  • <title>: Sets the text shown in your internet browser's top tab to "My First Webpage".
  • </head>: Closes the hidden section.
  • <body>: Opens the section for visible content.
  • <h1> and <p>: Displays a large, bold heading and a regular paragraph of text on the screen.
  • </body> and </html>: Marks the end of the visible content and the end of the entire page.

6. Try it yourself

Now it's your turn to write some code! Try changing the text inside the <title> tags to your own name, and then add a second <p> paragraph right below the first one in the body.

7. Free online editors for practice

You can practice HTML directly in your browser with these free tools:

8. Recap

  • HTML is the structural foundation of the web.
  • The <head> contains invisible data used by the browser, while the <body> holds the visible content your users actually see.
  • Every valid page needs a <!DOCTYPE html> declaration and an <html> root wrapper to hold everything together.