Skip to main content

HTML APIs

on
0

HTML Structure

on

HTML Document Structure: The Foundation of Every Web Page

Visual representation of HTML document structure

Understanding the basic structure of an HTML document is the first step in web development. Let's break down each component.

1. The DOCTYPE Declaration

<!DOCTYPE html>

This tells the browser what version of HTML the page is written in. For HTML5, this is all you need.

2. The HTML Element

<html lang="en"></html>

The root element that wraps all content on the page. The lang attribute specifies the language.

3. The Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

Contains meta information about the document that isn't displayed on the page.

HTML head section explained with annotations

4. The Body Section

<body>
  <h1>Main Heading</h1>
  <p>This is paragraph text.</p>
</body>

Contains all the visible content of your web page.

Complete Example

<!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>Welcome to My Website</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Now that you understand the basic structure, you're ready to start adding content to your web pages!

Comments

Post a Comment