How a web page is structured; HTML tags · HTML and CSS

What HTML is, how tags and elements nest, and the skeleton every web page starts from.

The idea

Every web page you've ever opened is, underneath, a plain text file written in HTML (HyperText Markup Language). HTML doesn't make things pretty, and it doesn't make them move. Its one job is to describe what each piece of content is: this is a heading, this is a paragraph, this is a link, this is a list.

The browser reads that description and draws the page. Later you'll add CSS to control how things look, and JavaScript to make them interactive. A good way to remember the split:

Analogy

HTML is the skeleton of a page, CSS is the skin and clothes, and JavaScript is the muscles. You can't dress a body that has no skeleton, so we start here.

Tags and elements

HTML marks up content with tags. A tag is a word wrapped in angle brackets. Most come in pairs: an opening tag and a closing tag, which has a slash.

<h1>Toko Kita</h1>
<p>Fresh coffee beans, delivered across Indonesia.</p>

<h1> opens a top-level heading and </h1> closes it.
<p> opens a paragraph and </p> closes it.
The opening tag, the content and the closing tag together make an element. "The h1 element" means the whole thing.

Press Try it to see how the browser shows them. The heading is big and bold, the paragraph is normal text, and neither of those styles came from you. Browsers have built-in default styles for every element, which is why HTML alone already looks like a (plain) document.

Headings come in six levels

There are six heading elements, <h1> to <h6>, from most to least important. They describe the outline of your page, like chapter and section titles in a report:

<h1>Toko Kita</h1>
<h2>Coffee</h2>
<h3>Arabica Gayo</h3>
<h3>Toraja Kalosi</h3>
<h2>Kitchen</h2>
<h3>French Press</h3>

Use one <h1> per page for the main title, and don't skip levels just to make text smaller. Choose a heading by its meaning, then change its size with CSS later. Screen readers and search engines use your headings to understand the page, so a clean outline matters.

Elements nest inside each other

Elements can contain other elements. This is called nesting, and it's how every page is built:

<p>Our <strong>best seller</strong> is the <em>French Press</em>.</p>

The <strong> element (important text, usually bold) and the <em> element (emphasis, usually italic) live inside the paragraph. The rule is simple: close elements in the reverse order you opened them, like stacking boxes. Open p, open strong, close strong, close p.

<!-- Wrong: the tags overlap -->
<p>Our <strong>best seller</p></strong>

Browsers try to guess what you meant when tags overlap, but different browsers guess differently, so always close them in the right order.

The text between  is an HTML comment. The browser ignores it, just like # comments in Python.

Attributes add extra information

Opening tags can carry attributes: extra settings written as name="value".

<a href="https://www.python.org">Visit Python's website</a>
<img src="mug.jpg" alt="A white ceramic mug">

The <a> (anchor) element makes a link. Its href attribute says where the link goes.
The <img> element shows an image. src is the image file and alt describes the image for people who can't see it.
<img> has no closing tag. Elements that can't contain anything are called void elements. Others you'll meet are <br> (line break) and <input>.

Two attributes work on every element and you'll use them constantly: id gives one element a unique name, and class gives a group of elements a shared label. CSS and JavaScript both use them to find elements.

<p id="welcome" class="intro">Selamat datang!</p>

The page skeleton

A complete HTML document always has the same outer structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Toko Kita</title>
  </head>
  <body>
    <h1>Toko Kita</h1>
    <p>Fresh coffee beans, delivered across Indonesia.</p>
  </body>
</html>

Here's what each part does:

Part	What it's for
`<!DOCTYPE html>`	Tells the browser "this is modern HTML". Always the first line.
`<html lang="en">`	The root element that wraps everything. `lang` says the page's language.
`<head>`	Information about the page that isn't shown in it: the title, the character set, links to CSS files.
`<meta charset="UTF-8">`	Lets the page show any character, from é to 日本 to ₹.
`<title>`	The text in the browser tab and in search results.
`<body>`	Everything visible on the page.

The indentation isn't required, since browsers ignore extra spaces and line breaks. It's there for you: it shows which elements live inside which, at a glance.

Watch out

Browsers collapse whitespace. Pressing Enter five times between two words in your HTML still shows one space on the page. To start a new paragraph, use a new <p> element instead.

Why this matters for clean code

HTML that describes meaning ("this is a heading", "this is important") instead of looks ("this is big and bold") is called semantic HTML. It's easier to style, easier to maintain, works better for screen readers, and ranks better in search engines. Picking the right element is the HTML version of picking a good variable name.

Recap

HTML describes what content is. CSS handles looks, JavaScript handles behaviour.
An element is an opening tag, content and a closing tag: <p>Hello</p>.
Elements nest. Close them in the reverse order you opened them.
Attributes add settings: href for links, src and alt for images, id and class for naming.
Every page has the same skeleton: <!DOCTYPE html>, <html>, <head> and <body>.
Use one <h1>, and pick headings by importance, not size.