Docs
HTML Tutorials
Setting Up Your First HTML Page

Setting Up Your First HTML Page

Creating your first HTML page is an exciting step into the world of web development. HTML (HyperText Markup Language) is the backbone of all websites, and learning how to structure a simple page is the perfect starting point for any beginner. In this guide, we’ll walk you through setting up your first HTML page from scratch.

What You Need

Before you begin, ensure you have the following:

  • A text editor (such as Notepad++ or VS Code for Windows, Sublime Text or BBEdit for macOS, and Vim, Gedit, or Nano for Linux)
  • A web browser (like Google Chrome, Firefox, or Edge)

Step 1: Create a New HTML File

  1. Open your text editor.
  2. Click on File > New to create a new document.
  3. Save the file with a .html extension (e.g., index.html).

Step 2: Write the Basic HTML Structure

Every HTML page follows a standard structure. Copy and paste the following code into your new file:

<!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>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a simple paragraph explaining what this page is about.</p>
</body>
</html>

Explanation of the Code

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html lang="en">: Defines the root element and sets the language.
  • <head>: Contains meta-information about the document.
    • <meta charset="UTF-8">: Ensures proper character encoding.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive on all devices.
    • <title>: Sets the title of the page (displayed on the browser tab).
  • <body>: Holds the visible content of the page.
    • <h1>: A large heading.
    • <p>: A paragraph of text.

Step 3: View Your HTML Page

  1. Save the file.
  2. Open the file location in your file explorer.
  3. Double-click index.html to open it in your web browser.

You should now see a webpage with a heading and a paragraph!

Step 4: Customize Your Page

Try modifying the content inside the <h1> and <p> tags to personalize your page. You can also add:

<img src="image.jpg" alt="A sample image">
<a href="https://example.com">Visit Example</a>

Conclusion

Congratulations! You’ve just created your first HTML page. By mastering the basics, you’re laying a strong foundation for learning CSS and JavaScript to enhance your web development skills. Keep experimenting and building more pages!

Further Reading

Introduction to HTML