📄 Lesson 2: HTML Structure & Syntax

The HTML Document Structure

Every HTML page must follow a specific structure. This structure tells the browser what it's looking at and how to render it properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to my webpage!</h1>
    <p>This content is visible to users.</p>
</body>
</html>
        

Breaking Down the Structure

Tag	Purpose	Required?
<!DOCTYPE html>	Declares this as an HTML5 document. Must be first.	Yes
<html>	Root element that wraps all content	Yes
<head>	Contains metadata and settings (not visible to users)	Yes
<title>	Page title shown in browser tab	Yes
<body>	Contains all visible page content	Yes

The Head Section (Metadata)

The <head> section contains information about your page that isn't directly displayed:

<meta charset="UTF-8"> - Defines character encoding (UTF-8 is universal)

<meta name="viewport"...> - Makes page responsive for mobile devices

<title> - The page title (appears in browser tab and search results)

<link> - Links to external CSS files for styling

<style> - Internal CSS styles

<script> - JavaScript code or links to JS files

The Body Section

Everything inside the <body> tags is rendered and visible to users. This includes text, images, links, forms, and more.

Semantic HTML

Semantic tags describe the meaning of content, not just its appearance. They're better for accessibility and SEO.

<!-- Good: Semantic HTML -->
<header>Navigation here</header>
<nav>Menu items</nav>
<main>
    <article>Blog post</article>
</main>
<aside>Sidebar content</aside>
<footer>Contact info</footer>

<!-- Less good: Non-semantic -->
<div>Navigation here</div>
<div>Menu items</div>
<div>Blog post</div>
        

Common Semantic Tags

Tag	Meaning
<header>	Page or section header
<nav>	Navigation menu
<main>	Primary content area
<article>	Self-contained content (blog post, news item)
<section>	Thematic grouping of content
<aside>	Sidebar or supplementary content
<footer>	Page or section footer

Indentation and Formatting

Always indent nested elements to make code readable:

<!-- Good -->
<body>
    <header>
        <h1>My Site</h1>
    </header>
    <p>Welcome!</p>
</body>

<!-- Hard to read -->
<body>
<header>
<h1>My Site</h1>
</header>
<p>Welcome!</p>
</body>
        

Comments in HTML

Comments help explain your code and are ignored by browsers:

<!-- This is a comment. It appears in the code but not in the browser. -->
<p>This is visible</p>
        

Key Takeaways

Every HTML page needs DOCTYPE, html, head, and body tags
The head section contains metadata and settings
The body section contains all visible content
Use semantic tags to describe content meaning
Proper indentation makes code readable and maintainable

← Back to Course | ← Previous | Next: Text Elements →