Platform under construction

HTML Basics

Intermediate

HTML Elements

Explore the HTML element system and open dedicated lessons for headings, text, links, images, lists, forms, tables and layout.

<header>Intro</header>
<main>Content</main>
<footer>Footer</footer>

HTML elements

Elements are the vocabulary of an HTML document.

Elements are the named building blocks of a page. A heading is not just large text, a list is not just lines under each other and a form is not just a few input boxes. Each element tells the browser what kind of content it is reading.

Use this page as the element map. Start with the document root, metadata and body, then move into landmarks, sections, headings, text, media, tables and forms. Each card opens a dedicated lesson with syntax, examples, common mistakes, accessibility notes, production context and a live code lab.

Learning rule: choose an element for meaning first. Styling belongs in CSS. Behavior belongs in JavaScript. HTML should make sense before either of them is added.

Hello world

Opening tag 

The element starts here. The browser now knows a paragraph begins.

Attribute class="intro"

The class is a styling or scripting hook. It does not change the meaning of the paragraph.

Content Hello world

This is the actual text content the paragraph contains.

Closing tag 

The paragraph ends here. Most text elements need a closing tag.

Complete element Hello world

The complete element is the opening tag, optional attributes, content and closing tag together.

1. Document shell

Learn html, head and body first. They decide where metadata ends and visible content begins.

2. Page structure

Use landmarks, sections and headings to create a page that can be scanned, indexed and navigated.

3. Real content

Text, lists, links, media, tables and forms become easier when the structure underneath is already clean.

Main root

`html`

The root of the document. Everything else lives inside it.

Metadata

`head, title, meta, link`

Information for browsers, search engines, CSS, icons and sharing previews.

Page body

`body`

The visible interface and content of the document.

Landmarks

`header, nav, main, footer`

Large page regions that make a layout easier to understand.

Sections

`section, article, aside`

Meaningful content regions instead of neutral wrappers.

Headings

`h1 to h6`

The readable outline of the page.

Text blocks

`p, blockquote, pre, hr, address`

Paragraphs, quotes, preformatted text, contact details and topic breaks.

Lists

`ul, ol, li, dl`

Grouped items, ordered steps and term-description pairs.

Inline text

`a, strong, em, code, span`

Meaning and neutral hooks inside a sentence: links, importance, emphasis, code and span.

Media

`img, picture, video, audio`

Images and rich media with accessibility and performance concerns.

Embedded

`iframe, embed, object`

External or isolated content that needs security thinking.

Graphics

`canvas, svg`

Programmatic drawing and scalable vector markup.

Tables

`table, thead, tbody, tr, th, td`

Real structured data, never layout hacks.

Forms

`form, label, input, button`

Inputs, conversion flows and data collection.

Scripting

`script, noscript, template`

JavaScript loading, fallback content and reusable hidden markup.

Interactive

`details, summary, dialog`

Native disclosure and dialog behavior.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change the first paragraph into a short list with two items.
Add one new section with its own h2 heading.
Run the preview and check whether the page still makes sense without looking at the CSS.

Practice assignment

Do this before moving to the next lesson.

Keep one h1 as the main subject of the page.
Use two h2 elements for two clear sections.
Write four paragraphs and check whether the HTML still reads well without CSS.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 14px;
  place-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  box-sizing: border-box;
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; }
.highlight { color: #8cffc1; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
svg { width: 180px; height: 180px; fill: #8cffc1; }
svg text { fill: #07111f; font: 700 20px system-ui, sans-serif; }

input, button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

table { border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }
details { margin-top: 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 14px 16px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you point out the opening tag, attributes, content and closing tag in a complete element?
Can you explain why an element should be chosen for meaning before appearance?
Can you name one case where a div is weaker than a semantic element?
Can you identify which part of the page belongs in head and which belongs in body?
Can you turn a loose group of content into a clear section with a heading?

HTML Elements

Elements are the vocabulary of an HTML document.

1. Document shell

2. Page structure

3. Real content

html

head, title, meta, link

body

header, nav, main, footer

section, article, aside

h1 to h6

p, blockquote, pre, hr, address

ul, ol, li, dl

a, strong, em, code, span

img, picture, video, audio

iframe, embed, object

canvas, svg

table, thead, tbody, tr, th, td

form, label, input, button

script, noscript, template

details, summary, dialog