HTML File Structure Explained for Non-Developers

By the Qorlize team · Last reviewed November 11, 2026

Finipage guide · Edit HTML files without code. Open Finipage

Open almost any web page file in Notepad and you see the same rough shape: a line starting with <!DOCTYPE, a block called head full of things that never appear on screen, and a long body where the visible content lives. Once you know what each part is for, you can tell which part to touch for a given change. The last section shows how to find the exact line behind any piece of text.

The skeleton every page shares

Here is a complete, minimal HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mapo Bakery - Fresh bread daily</title>
  <meta name="description" content="Sourdough and pastries baked every morning in Mapo, Seoul.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Mapo Bakery</h1>
  <p>Open 8am to 8pm, closed Mondays.</p>
  <script src="js/menu.js"></script>
</body>
</html>

<!DOCTYPE html> tells the browser to use modern standards mode. Without it, browsers fall back to an older "quirks" mode where some sizes and spacing are calculated differently. Leave it as the very first line.
<html lang="en"> wraps everything. The lang value tells screen readers and translation tools which language the page is in; a Korean page would use lang="ko".
<head> holds information about the page. Nothing in it is drawn in the page area.
<body> holds everything you see: headings, paragraphs, images, buttons.

What sits inside the head

A broken line in the head rarely produces an error message. Something subtle goes wrong instead, so it helps to recognize each one.

Line	What it does	If it is missing or wrong
`<meta charset="UTF-8">`	Says which character encoding the file uses	Korean, accented letters or symbols can turn into garbled characters
`<meta name="viewport" …>`	Tells phones to use the device width instead of pretending to be a desktop screen	On a phone the page shows tiny, zoomed-out text
`<title>`	The text on the browser tab and usually the headline in search results	The tab shows the file name or address instead
`<meta name="description">`	A summary search engines may show under the title	The search engine picks a snippet from the page on its own
`<link rel="stylesheet">`	Loads an external CSS file	The page appears unstyled: plain black text, default fonts, no layout
`<script>`	Loads or contains JavaScript for menus, sliders, forms	Interactive parts stop working; the text usually still shows

Scripts can sit in the head or at the end of the body. Both are common, and you do not need to move them.

Tags, attributes, class and id

Inside the body, content is wrapped in tags. Most come in pairs, an opening tag and a closing tag with a slash. A few, like <img> and <br>, have no closing tag because they have no content inside them.

<section id="pricing" class="card highlight">
  <h2>Monthly plan</h2>
  <p class="price">12,000 won</p>
  <a href="#contact" class="button">Ask a question</a>
</section>

Everything written inside the opening tag after the tag name is an attribute, in the form name="value". Two attributes matter more than the rest for anyone editing a page:

class is a label that can be shared. Many elements can carry class="price", and one element can carry several classes separated by spaces, like card highlight above. Styles are usually attached to classes.
id is a unique name for one element on the page. It is used for in-page links (href="#pricing" jumps to the element with id="pricing") and by scripts. Two elements should never share an id.

Tags nest like boxes inside boxes. In the example, the heading, price and link are children of the section. That nesting is why deleting a single closing tag can make everything below it look wrong: the browser no longer knows where the box ends.

Three places a style can live

The look of an element (color, size, spacing) comes from CSS, and CSS can be written in three places.

1. Inline, on the element itself:

<p style="color: #c0392b; font-size: 18px;">Sale ends Friday</p>

This affects only that one element. Easy to find, but if the same red is used in twenty places, you have twenty lines to change.

2. In a <style> block in the head:

<style>
  .price { color: #c0392b; font-size: 18px; }
</style>

The rule .price (the dot means "class") applies to every element with class="price" in this file.

3. In an external file, linked from the head:

<link rel="stylesheet" href="css/style.css">

The same kind of rules live in style.css. If several pages link to that file, one change there updates all of them.

This is the part that surprises people: change the color in the .price rule and every price on the page changes at once, because they all point to the same rule. That is usually what you want. When it is not, and you need only one price to look different, give that element an inline style or an extra class instead of changing the shared rule. When the same property is set in more than one place, the inline style generally wins over the class rule, which is a common reason an edit in the stylesheet "does nothing".

If a page looks completely unstyled after you moved it to another folder, the href in the stylesheet link probably no longer points to the CSS file. The same thing happens with images; see images not showing in an HTML file.

Finding the line that controls a piece of text

A long file can run to thousands of lines. Rather than scrolling, let the browser point you to the right place.

Open the page in Chrome or Edge, right-click the text you care about and choose Inspect. Developer tools open with that element highlighted in the Elements panel. Ctrl+Shift+C does the same thing: it turns on a picker so you can click any element on the page.
Look at the highlighted tag. Note its tag name, its class and its id. Those are your search terms.
Check the Styles pane next to it. Each rule shows where it comes from: element.style means an inline style, while something like style.css:42 means line 42 of that stylesheet. Rules that are crossed out are being overridden by another rule higher in the list.
Open the actual file in a text editor and search (Ctrl+F) for the class name or a few words of the text. For CSS, search for the class with a dot in front, such as .price.

Edits you make inside developer tools are temporary and disappear when you reload, so use it to locate and test, then make the real change in the file. The guide on editing HTML without code compares the tools for that last step.

Where a visual editor fits

Knowing the structure helps even if you never type a tag. In Finipage, the Layers tree in the left panel shows the same nesting as the body, and the select-parent button moves the selection one box outward, from a price to its card to the whole section. The Document section of the properties panel edits the <title> and meta description in the head; the text, color and spacing fields apply to the selected element. Finipage has no way to type into the source, so changing a shared rule in style.css, editing a script or adding other head tags still means opening the file in a text editor such as Notepad or VS Code. The View HTML source button shows what the code looks like after your edits.

A good next read is how fonts work on a web page, which builds on the CSS ideas above.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.