What Is HTML and How a Web Page Is Structured

In short: HTML is the skeleton of a page

HTML (HyperText Markup Language) is a markup language, not a programming language. It does not calculate or make decisions; it describes what is on the page: where the heading is, where a paragraph, a link, an image or a button goes.

CSS controls the look and JavaScript controls the behavior, but every web page is built on HTML. Without it the browser has nothing to show.

Tags and attributes

HTML is made of elements. An element is usually written as a pair of tags — opening and closing — with content in between:

<p>This is a paragraph of text.</p>

Some elements are void and have no closing tag, such as an image or a line break:

<img src="logo.png" alt="Company logo">
<br>

Attributes refine an element and are written inside the opening tag as name="value":

• href — the link address;
• src — the path to an image or video file;
• alt — a text description of an image for blind users and search engines;
• class and id — names used by styles and scripts;
• lang — the page language.

Elements can be nested, but they must be closed in reverse order.

Document structure

Every HTML page has the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>This is my first web page.</p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML documentation</a>
  </body>
</html>

What is going on:

• <!DOCTYPE html> — tells the browser this is modern HTML.
• <html> — the root element that contains everything else.
• <head> — service information not shown on the page: encoding, the tab title, a description for search engines, linked styles.
• <body> — all the visible content of the page.

Save this code as index.html and double-click it — the browser will show a working page.

Common elements

Semantics: tags with meaning

Besides <div>, HTML has semantic elements that describe a block's role:

• <header> — the site or section header;
• <nav> — navigation;
• <main> — the main content of the page;
• <article> — a self-contained publication;
• <section> — a thematic section;
• <footer> — the footer.

Semantics helps search engines understand the page and screen readers read it correctly to people with visual impairments. These elements look the same as a <div> but are far more useful.

Common beginner mistakes

• Several <h1> tags just for big text. Heading level is structure; size is set in CSS.
• Empty or missing alt on meaningful images. Accessibility and SEO suffer.
• Nothing but <div> instead of semantic tags.
• Buttons made from <div>. Use <button> for actions — it works with the keyboard without extra code.
• Unclosed tags and wrong nesting. The browser will try to fix the error, but the result may be unexpected.