A basic HTML page is the foundation of a website, used to structure and display content on the web. It uses simple HTML tags to define elements like headings, paragraphs, images, and links, allowing browsers to present information in an organized and readable format.

1. What is HTML?

HTML (HyperText Markup Language) is the standard language for creating webpages. It defines the structure and content of a webpage.

Key points:

HTML uses tags like <p>, <h1>, <a>
Tags can have attributes like id, class, href, src
HTML pages are read by browsers and displayed as structured content

2. Basic HTML Page Structure

Every HTML page follows this minimum structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a basic HTML page.</p>
</body>
</html>

Explanation of each part:

Tag	Purpose
`<!DOCTYPE html>`	Tells the browser this is an HTML5 document
`<html lang="en">`	Root element of the page, `lang="en"` specifies English
`<head>`	Contains metadata, links to CSS/JS, title
`<meta charset="UTF-8">`	Ensures special characters display correctly
`<meta name="viewport" ...>`	Makes page responsive on mobile
`<title>`	Title displayed on the browser tab
`<body>`	The visible content of the page
`<h1>`	Main heading
`<p>`	Paragraph

3. Adding More Content

Headings

HTML has 6 levels:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Smaller Heading</h4>
<h5>Even Smaller</h5>
<h6>Tiny Heading</h6>

Paragraphs

<p>This is a paragraph of text.</p>
<p>Another paragraph here.</p>

Links

<a href="https://www.example.com">Visit Example</a>

Images

<img src="logo.png" alt="Logo" width="200">

src = image file path
alt = alternative text (important for accessibility)
width / height = optional size

Lists

Unordered List

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
</ol>

Buttons

<button>Click Me</button>

4. Adding CSS (Styling)

CSS makes your page look nice. You can add it in three ways:

1. Inline CSS

<p style="color: red; font-size: 20px;">Red text</p>

2. Internal CSS

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
        }
    </style>
</head>

3. External CSS (Recommended)

Create style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: blue;
}

Link it in HTML <head>:

<link rel="stylesheet" href="style.css">

5. Adding JavaScript (Optional)

JavaScript adds interactivity.

Inline JavaScript

<button onclick="alert('Hello!')">Click Me</button>

External JavaScript
Create script.js:

document.querySelector("button").addEventListener("click", () => {
    alert("Hello from JS!");
});

Link it before </body>:

<script src="script.js"></script>

6. Full Basic HTML Page Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
    <style>
        body { font-family: Arial; background-color: #f9f9f9; margin: 20px; }
        h1 { color: #333; }
        p { color: #555; }
        button { padding: 10px 20px; background: #007BFF; color: white; border: none; border-radius: 5px; }
        button:hover { background: #0056b3; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This page contains headings, paragraphs, links, images, lists, and a button.</p>
    
    <a href="https://www.example.com">Visit Example</a>
    <br><br>

    <img src="logo.png" alt="Logo" width="150">
    
    <h2>My List</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

7. Tips for Beginners

Always use <!DOCTYPE html> for HTML5
Use semantic tags (<header>, <footer>, <section>) as you progress
Keep CSS separate in real projects
Always include alt for images
Test your page in multiple browsers

Basic html page example in detail