0
0
HTMLmarkup~5 mins

First HTML page

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

We create a first HTML page to show content on the web. It is the basic start for any website.

When you want to make your first simple website.
When you want to learn how web pages work.
When you want to show text and images in a browser.
When you want to practice writing code that browsers understand.
When you want to share information online.
Syntax
HTML
<!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>
  <!-- Your content goes here -->
</body>
</html>

The <!DOCTYPE html> tells the browser this is an HTML5 page.

The <html> tag wraps all the page content.

Examples
This example shows a simple page with a heading.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>
This example shows a paragraph inside the body.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
</head>
<body>
  <p>This is my first HTML page.</p>
</body>
</html>
Sample Program

This page has a header, main content, and footer. It uses semantic tags for better structure and accessibility.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is my very first HTML page. I am learning how to make websites!</p>
  </main>
  <footer>
    <p>Ā© 2024 My Website</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always include lang attribute in <html> for accessibility.

Use semantic tags like <header>, <main>, and <footer> to organize content.

Test your page by opening it in different browsers to see how it looks.

Summary

Your first HTML page starts with <!DOCTYPE html> and <html> tags.

Use <head> for page info and <body> for visible content.

Semantic tags help organize and improve accessibility.