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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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.

HTML describes what exists on the page , not how it behaves.

Every real HTML document must follow this structure:

Every part has a specific purpose - let's explore each one.

This line tells the browser: "This is a modern HTML5 document."

The <head> contains information about the page, not visible content.

Everything visible on the page goes inside <body> .

HTML has 6 heading levels for content hierarchy:

Semantic elements describe meaning, not appearance.

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.