HTML Notes
Master the anatomy of an HTML document — DOCTYPE declaration, html element, head section, meta tags (charset, viewport, description), title tag, and body structure with practical examples.
Every valid HTML page follows the same basic skeleton. Understanding this structure is fundamental — you cannot build correct webpages without knowing what goes where and why.
DOCTYPE Declaration
<!DOCTYPE html>This must be the very first line of every HTML document. It is not a tag — it is a declaration that tells the browser:
"Render this document in standards mode using HTML5."
Without <!DOCTYPE html>, browsers enter quirks mode — an old compatibility mode that renders pages using outdated rules. This causes layout inconsistencies, especially across different browsers.
Key points:
- It is not case-sensitive (
<!doctype html>is equally valid) - It has no closing tag
- HTML5 simplified this from the verbose HTML4 doctype
The <html> Element
<html lang="en">The <html> element is the root element — every other element is nested inside it. The lang attribute is important:
| Value | Language |
|---|---|
lang="en" | English |
lang="hi" | Hindi |
lang="fr" | French |
lang="de" | German |
lang="zh" | Chinese |
lang="ar" | Arabic |
Why lang matters:
- Screen readers use it to apply the correct pronunciation
- Search engines use it for language-based indexing
- Browsers may offer translation based on it
- CSS can target language-specific typography
The <head> Section
The <head> contains metadata — information about the document that is not displayed on the page itself. Think of it as the document's settings file.
Charset Meta Tag
<meta charset="UTF-8">UTF-8 is the encoding that supports virtually every character in every language — English, Hindi, Arabic, Chinese, emoji, special symbols. Always include this as the first tag inside <head> because the browser needs to know the encoding before it reads any text.
Without it, non-ASCII characters can appear as garbled symbols (mojibake).
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">This tag controls how the page scales on mobile devices. Without it:
- Mobile browsers render the page at desktop width (typically 980px)
- Then scale it down to fit the screen
- Text becomes tiny and users must pinch-zoom
With width=device-width, initial-scale=1.0:
- The page width matches the device screen width
- No initial zoom is applied
- This is the foundation of responsive design
| Attribute | Value | Meaning |
|---|---|---|
width | device-width | Page width = device screen width |
initial-scale | 1.0 | No zoom on initial load |
maximum-scale | 1.0 | Prevent user zooming (use with caution — hurts accessibility) |
Description Meta Tag
<meta name="description" content="A clear, compelling description of this page.">This text appears as the snippet under your page title in Google search results. While Google sometimes overrides it with its own excerpt, a well-written description:
- Improves click-through rate from search results
- Should be 150-160 characters
- Should describe what the page offers, not just list keywords
Other Useful Meta Tags
The <title> Tag
<title>HTML Guide — Learn HTML | WoHoTech</title>The title appears:
- In the browser tab
- As the clickable headline in search engine results
- When the page is bookmarked
- When the page is shared on some platforms
SEO best practices:
- 50-60 characters max (longer titles get cut off in Google results)
- Include the primary keyword near the beginning
- Format:
Primary Keyword — Secondary | Brand - Each page must have a unique title
The <link> Tag
The <link> element connects external resources to the HTML document. It lives in <head> and is self-closing.
The <body> Section
The <body> contains everything visible on the page: text, images, videos, forms, buttons. All content elements live here.
Script Placement
Where you put <script> tags matters significantly for page performance:
| Approach | When it executes | Blocks rendering? |
|---|---|---|
<script> in <head> | Immediately during parsing | Yes — bad for performance |
<script> at end of <body> | After HTML is parsed | No |
<script defer> in <head> | After HTML parsing completes | No |
<script async> in <head> | As soon as downloaded | Possibly — unpredictable |
Rule of thumb: Use defer for all non-critical scripts.
HTML Comments
Comments are notes in your code that the browser ignores completely:
Comments are helpful for:
- Marking sections of a large document
- Leaving notes for yourself or teammates
- Temporarily disabling code while debugging
HTML Entities
Some characters have special meaning in HTML (<, >, &) and must be escaped using HTML entities:
| Character | Entity | Use case |
|---|---|---|
< | < | Displaying less-than sign |
> | > | Displaying greater-than sign |
& | & | Displaying ampersand |
" | " | Quote inside an attribute |
' | ' | Apostrophe inside an attribute |
(non-breaking space) | | Space that won't wrap/collapse |
© | © | Copyright symbol |
® | ® | Registered trademark |
™ | ™ | Trademark symbol |
→ | → | Right arrow |
€ | € | Euro sign |
Complete Real-World Example
Here is a fully structured HTML document for a real page:
Common Mistakes to Avoid
| Mistake | Problem | Fix |
|---|---|---|
Missing <!DOCTYPE html> | Quirks mode rendering | Always add it as line 1 |
Missing charset meta | Garbled characters | Add <meta charset="UTF-8"> first in head |
Missing viewport meta | Broken mobile layout | Add viewport meta in every page |
Duplicate <title> per page | SEO confusion | Every page needs a unique, descriptive title |
Scripts in <head> without defer | Slow page load | Use defer attribute |
Putting visible content in <head> | Not rendered | Only metadata goes in <head> |
Summary
<!DOCTYPE html>triggers standards mode — always include it first<html lang="...">is the root element — always set the language<head>contains metadata: charset, viewport, title, description, CSS links<body>contains all visible page content- Scripts should be at the end of body or use
deferin head - HTML entities escape special characters (
<,&,©)
*Next: Text, Headings, and Paragraphs*
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for HTML Document Structure — DOCTYPE, Head, Body, and Meta Tags.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, introduction, document, structure
Related HTML Complete Guide Topics