The HTML Document Structure is the basic framework every HTML page follows so that browsers can correctly interpret and display the content.
1. <!DOCTYPE html>
- Declares the document type and HTML version (HTML5 in this case).
- Must appear at the very top of the document.
<!DOCTYPE html>
2. <html> Tag (Root Element)
- Wraps all HTML content.
- Has a
langattribute to define the page’s language.
<html lang="en">
</html>
3. <head> Section
- Contains metadata (information about the page, not visible to users).
- Common elements inside
<head>:<title>→ Page title (shown in browser tab).<meta>→ Encoding, description, keywords.<link>→ External resources (CSS files, icons).<style>→ Internal CSS styles.<script>→ JavaScript code.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
4. <body> Section
- Contains all the visible content on the page:
- Headings (
<h1>–<h6>) - Paragraphs (
<p>) - Images (
<img>) - Links (
<a>) - Lists, tables, forms, videos, etc.
- Headings (
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
5. Putting It All Together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Page</title>
</head>
<body>
<h1>Main Heading</h1>
<p>Some text here...</p>
</body>
</html>
✅ Key Points to Remember
- Always start with
<!DOCTYPE html>. <head>= behind-the-scenes info;<body>= visible content.- The structure should always be DOCTYPE → HTML → HEAD → BODY.
