You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
Every HTML page follows a standard structure. Understanding this structure is essential because the browser relies on it to parse and display your content correctly. A well-structured document also improves accessibility, SEO, and maintainability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2025</p>
</footer>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
The <!DOCTYPE html> declaration must be the very first line. It tells the browser to use standards mode (modern rendering) rather than quirks mode (legacy compatibility). Without it, browsers may render your page inconsistently.
Key fact: In older HTML versions, the DOCTYPE was long and complex. HTML5 simplified it to just
<!DOCTYPE html>.
<html> Element<html lang="en">
...
</html>
The <html> element is the root element — it wraps everything on the page. The lang attribute specifies the language, which helps screen readers pronounce content correctly and assists search engines.
| Language | Code |
|---|---|
| English | en |
| Spanish | es |
| French | fr |
| German | de |
| Japanese | ja |
<head> ElementThe <head> contains metadata — information about the page that is not displayed as content:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML and CSS from scratch">
<meta name="author" content="LearningBro">
<title>Introduction to HTML & CSS</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<meta> Tags| Meta Tag | Purpose |
|---|---|
charset="UTF-8" | Sets the character encoding (supports all languages and symbols) |
viewport | Controls how the page scales on mobile devices |
description | A summary shown in search engine results |
author | The page author |
robots | Instructions for search engine crawlers |
<title> Element<title>My Page Title</title>
The title appears in the browser tab, bookmarks, and search engine results. Every page should have a unique, descriptive title.
<body> ElementSubscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.