Introduction to HTML Structure

Welcome to your first lesson on HTML! In this lesson, you'll learn the basics of how web pages are built using HTML. No prior experience is needed—let's start from the very beginning.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages. HTML tells your web browser how to display content like text, images, and links.

The Basic Structure of an HTML Document

Every HTML page follows a basic structure. Here is what a simple HTML document looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Let's break down each part:

<!DOCTYPE html>: Tells the browser that this is an HTML5 document.
<html>: The root element that wraps all the content on the page.
<head>: Contains information about the page (not shown on the page itself), like the title.
<title>: Sets the title of the page (shown in the browser tab).
<body>: Contains everything you see on the web page.
<h1>: A heading (the largest one).
<p>: A paragraph of text.

Understanding Tags and Attributes

HTML uses tags to mark up content. Tags usually come in pairs:

Opening tag: <tagname>
Closing tag: </tagname>

For example, <p> starts a paragraph, and </p> ends it.

Attributes provide extra information about elements. They go inside the opening tag. For example:

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

Here, href is an attribute that tells the browser where the link goes.

Common Beginner Mistakes

When starting with HTML, it's easy to make some common mistakes. Here are a few to watch out for:

Forgetting to close tags: Always close your tags, or your page might not display correctly.
Improper nesting: Make sure tags are properly nested. For example, this is incorrect:
```
<b><i>Text</b></i>
```
The correct way is:
```
<b><i>Text</i></b>
```
Missing required elements: Every HTML page should have <html>, <head>, and <body> tags.

Why Structure Matters

A well-structured HTML document is easier to read, maintain, and style. It also helps browsers and assistive technologies (like screen readers) understand your content.

Looking Ahead

Now that you know the basics of HTML structure, you'll soon learn how to make your pages look better with CSS (Cascading Style Sheets) and add interactivity with JavaScript.

Summary

HTML is the language for creating web pages.
Every page has a basic structure: <!DOCTYPE html>, <html>, <head>, and <body>.
Tags mark up content; attributes add extra information.
Avoid common mistakes like missing or improperly nested tags.

In your practical environment, you'll get to try writing your own HTML page. Remember to check your structure and close your tags!

HTML Structure Basics