Html Basics
HTML (HyperText Markup Language) is the standard language for building web pages, using elements written as tags to define the structure and content of a page, such as headings, paragraphs, links, lists, and images.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
Master the foundation of every website - clean, correct HTML structure.
What You'll Learn
- ✓ The required HTML document skeleton
- ✓ DOCTYPE, html, head, and body tags
- ✓ Semantic HTML elements (header, nav, main, footer)
- ✓ Headings hierarchy (h1-h6)
- ✓ HTML comments for documentation
- ✓ Lists, links, and images
1) Why HTML Structure Matters
HTML structure is the foundation of every website. No matter how advanced the design, animations, or backend logic become, everything still rests on clean, correct HTML.
- ❌ Broken layouts
- ❌ Accessibility problems
- ❌ Hard-to-maintain code
- ✅ Faster websites
- ✅ Easier styling
- ✅ Easier JavaScript later
- ✅ Professional-quality projects
2) What HTML Really Does
HTML describes what exists on the page , not how it behaves.
- • What is a heading?
- • What is a paragraph?
- • What is a section?
- • What is navigation?
3) The Required HTML Page Skeleton
Every real HTML document must follow this structure:
Every part has a specific purpose - let's explore each one.
4) <!DOCTYPE html>
This line tells the browser: "This is a modern HTML5 document."
- ❌ Browsers may switch to old compatibility modes
- ❌ Layout bugs can occur
- ❌ CSS may behave strangely
5) <html> and lang Attribute
6) <head> Section (Invisible but Critical)
The <head> contains information about the page, not visible content.
7) <body> Section
Everything visible on the page goes inside <body> .
8) Headings (h1 - h6)
HTML has 6 heading levels for content hierarchy:
- ✅ Use one <h1> per page
- ✅ Headings should be hierarchical
- ❌ Do NOT skip levels randomly
9) Comments (For Humans, Not Browsers)
10) Semantic HTML (VERY IMPORTANT)
Semantic elements describe meaning, not appearance.
- ✅ Better SEO
- ✅ Better accessibility
- ✅ Easier to style
- ✅ Cleaner code
11) Lists (Ordered & Unordered)
12) Links and Images
Practice Challenge
- Proper HTML structure (DOCTYPE, html, head, body)
- Semantic elements (header, main, footer)
- Headings, paragraphs, and lists
- At least one link and one image
Key Takeaways
- ✓ Every HTML page needs DOCTYPE, html, head, and body
- ✓ The head contains meta info; the body contains visible content
- ✓ Use semantic elements (header, nav, main, section, footer)
- ✓ Headings create hierarchy - use one h1 per page
- ✓ Always include alt text on images for accessibility
Practice quiz
What does the <!DOCTYPE html> declaration tell the browser?
- That the document is a modern HTML5 document
- Where to find the CSS file
- The language of the page
- To run the page in compatibility mode
Answer: That the document is a modern HTML5 document. <!DOCTYPE html> declares a modern HTML5 document and helps browsers avoid old quirks modes.
Which four parts make up the required HTML page skeleton?
- DOCTYPE, html, head, body
- html, style, script, footer
- head, body, main, footer
- DOCTYPE, header, section, footer
Answer: DOCTYPE, html, head, body. Every page needs the DOCTYPE plus the html, head, and body elements.
What kind of content goes inside the <head> element?
- Visible page content like paragraphs and images
- Information about the page (meta, title, links) that is not directly visible
- Only JavaScript
- The page footer
Answer: Information about the page (meta, title, links) that is not directly visible. The <head> holds metadata such as the title, charset, and meta tags — not visible body content.
Where does all visible page content belong?
- Inside <head>
- Inside <body>
- Inside <title>
- Inside <meta>
Answer: Inside <body>. Everything the user sees lives inside the <body> element.
What does the lang attribute on <html> (e.g. lang="en") do?
- Sets the page font
- Tells browsers and screen readers the page's language
- Loads a translation automatically
- Changes the text direction to right-to-left
Answer: Tells browsers and screen readers the page's language. lang declares the document language, helping screen readers and search engines.
How many <h1> elements should a page typically have?
- One main h1 per page
- Exactly six
- One per paragraph
- As many as possible for SEO
Answer: One main h1 per page. Use a single h1 as the main page title and keep the heading hierarchy meaningful.
Which is correct about HTML heading levels?
- There are 6 levels (h1-h6) and you should not skip levels randomly
- There are 3 levels (h1-h3)
- Headings have no order and can be used freely
- h6 is the most important heading
Answer: There are 6 levels (h1-h6) and you should not skip levels randomly. HTML has h1-h6; headings form a hierarchy and you should avoid skipping levels arbitrarily.
What is the correct syntax for an HTML comment?
- // comment
- /* comment */
- <!-- comment -->
- # comment
Answer: <!-- comment -->. HTML comments are written as <!-- comment --> and are ignored by the browser.
Which meta tag is essential for mobile responsiveness?
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="...">
- <meta name="author" content="...">
Answer: <meta name="viewport" content="width=device-width, initial-scale=1.0">. The viewport meta tag makes the page scale correctly on mobile devices.
Why are semantic elements like <header> and <main> preferred over generic <div>s?
- They load faster than divs
- They describe meaning, improving SEO and accessibility
- They are required by the browser
- They automatically add colorful styling
Answer: They describe meaning, improving SEO and accessibility. Semantic elements convey meaning, which benefits accessibility and SEO; divs are meaningless wrappers.
Continue this course
- Previous: Introduction to Web Development
- Next: HTML Elements & Attributes