How HTML Works

Text & Headings

Heading level 3

Heading level 4

Heading level 5

Heading level 6

This is a paragraph. HTML wraps content in elements. Each element has an opening tag, optional content, and a closing tag. Tags tell the browser what the content means, not how it looks.

Inline text elements let you mark up words inside a paragraph: strong importance, emphasis / stress, highlighted text, fine print, ~~deleted text~~, inserted text, _subscript and ^superscript, inline code, keyboard input, and HTML abbreviations.

"The World Wide Web's markup language has always been HTML."

— W3C HTML 5.2 specification

<p>Hello, world!</p>

Lists

Unordered list

HTML — structure
CSS — presentation
JavaScript — behaviour

Ordered list

Browser reads the HTML file top to bottom.
It builds a DOM tree from the elements it finds.
It renders each element using built-in default styles.

Nested list

Frontend
- HTML
- CSS
- JavaScript
Backend
- Node.js
- Python
- Go

Description list

Element: A building block of HTML consisting of a start tag, content, and end tag.
Attribute: Extra information placed inside the opening tag, e.g. href or alt.
Semantic HTML: Using elements for their meaning, not their default appearance.

Links & Images

Links

The <a> element creates a hyperlink. The href attribute sets the destination.

Images

The <img> element is self-closing (void element). The alt attribute is required — it describes the image for screen readers and when the image fails to load.

A grey placeholder rectangle 400 pixels wide and 200 pixels tall — Figure 1 — `<figure>` and `<figcaption>` associate an image with its caption.

Tables

HTML, CSS and JavaScript — roles at a glance
Technology	Layer	Handles
HTML	Structure	Content and meaning
CSS	Presentation	Colours, fonts, layout
JavaScript	Behaviour	Interactivity, logic
Each layer should stay in its own file.

Forms

A <form> groups controls. The action attribute is the URL that receives the data; method is get or post.

Text inputs Full name

Email address

Password

Short bio

Selectors Experience level

Start date

Age

Choices

Preferred topics (checkboxes — multiple allowed):

HTML
CSS
JavaScript

How did you hear about us? (radio — one only):

Search engine
A friend
Social media

File & range Upload avatar

Self-rated HTML skill (0–10): 5

Media

Audio

The controls attribute adds the browser's built-in player UI.

Video

Inline frame (iframe)

Embeds another web page or resource inside the current page.

Semantic Elements

What is an <article>?

An <article> represents a self-contained piece of content that could be distributed independently — a blog post, a news story, or a forum comment.

What is a <details> element?

<details> is a disclosure widget that the browser makes expandable without any JavaScript. The <summary> is the visible label.

Void elements (self-closing tags)

Some elements have no content and no closing tag:

<br /> — line break
<hr /> — thematic break
<img /> — image
<input /> — form control
<meta /> — document metadata
<link /> — external resource link

Block vs inline elements

Block elements (div, p, h1…) start on a new line and take the full available width.

Inline elements (span, a, strong) flow within surrounding text without breaking the line.