Tutorials HTML Your First HTML Page

Introduction to HTML

What is HTML? Your First HTML Page

HTML Elements & Tags

HTML Elements HTML Attributes

Headings & Text

HTML Headings Paragraphs & Line Breaks Text Formatting

Links & Images

HTML Links HTML Images

HTML Lists

Lists in HTML

HTML Tables

HTML Forms

Forms & Inputs Form Elements

Semantic HTML

Semantic Elements

HTML5 Media

Audio & Video

Best Practices

HTML Best Practices

HTML Beginner FREE

Your First HTML Page

Lesson 2 of 16 Beginner Interactive

Let's create your very first HTML page. You only need a text editor (like Notepad, VS Code, or Sublime Text) and a web browser.

Steps

Open your text editor
Type the HTML code
Save the file as index.html
Open the file in a web browser

That's it! You just created a web page.

Syntax

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 Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to web development!</p>
</body>
</html>

Basic HTML Page Structure

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to SukhNexus Academy.</p>
</body>
</html>

Output

Hello World!

Welcome to SukhNexus Academy.

Try It Yourself

Complete HTML Page

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to SukhNexus Academy.</p>
</body>
</html>

Output

Hello World!

Welcome to SukhNexus Academy.

Try It Yourself

HTML Page with Styling

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Styled Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Styled Heading</h1>
    <p>This page has some basic styling.</p>
</body>
</html>

Output

Styled Heading

This page has some basic styling.

Try It Yourself

Practice

Exercise

Create an HTML page with a heading that says "Hello SukhNexus" and a paragraph below it.

Answer

<!DOCTYPE html>
<html>
<body>
    <h1>Hello SukhNexus</h1>
    <p>Welcome to my page.</p>
</body>
</html>

Quick Quiz

What is the correct file extension for an HTML file?

.htm

.html

.html5

.web

.html is the standard file extension.

Interview Questions

The <head> section contains meta-information about the page that is not displayed to users, such as the title, character encoding, stylesheets, and scripts.

What is HTML?

Tutorial Complete

Back to HTML