Fundamentals of HTML Structure
From the html codin curriculum
Fundamentals of HTML Structure
TL;DR
HTML documents are built with elements, which are like containers for content. These elements form a tree-like hierarchy, defining the page's layout and content organization. Understanding this basic structure is crucial for building any webpage.
1. The Mental Model
Think of an HTML document like a house. The <html> tag is the entire house, <head> is like the utility room where you keep important stuff that isn't seen by guests, and <body> is the living space guests actually see.
2. The Core Material
HTML stands for HyperText Markup Language. It's the standard language for creating web pages. You use elements to structure content on a webpage. An element usually consists of an opening tag, content, and a closing tag. For example, <p>This is a paragraph.</p>
a. Tags and Elements
Photo by Eva Bronzini on Pexels
- An opening tag looks like
<tagname>. - A closing tag looks like
</tagname>. - The content goes between the tags.
- Together, the opening tag, content, and closing tag form an element.
Some elements are self-closing (or void elements) and don't need a closing tag because they don't contain content. Examples include <img> for images and <br> for line breaks.
<p>This is a paragraph element.</p>
<h1>This is a heading element.</h1>
<img src="myimage.jpg" alt="A description of my image"> <!-- Self-closing -->
b. The Basic Document Structure
Photo by icon0 com on Pexels
Every HTML document starts with a few essential elements that define its structure.
<!DOCTYPE html>: This declaration tells the browser what version of HTML you're using (in this case, HTML5). It's not an HTML element itself but a directive.<html>: This is the root element of your page. Everything else goes inside it.<head>: Contains meta-information about the HTML document, like the page title, links to stylesheets, and character set. This content isn't directly displayed on the page.<body>: Contains all the visible content of your web page, such as text, images, links, and videos.
c. Nesting Elements
Photo by Marian Florinel Condruz on Pexels
Elements can be placed inside other elements; this is called nesting. You must make sure elements are properly nested. If you open a tag inside another, you must close it before closing the outer tag. Think of Russian nesting dolls.
<p>This is a paragraph with some <strong>bold text</strong> inside it.</p>
Here, the <strong> element is correctly nested within the <p> element.
Here's how the fundamental structure comes together:
graph TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
B --> D["<body>"]
C --> C1["<meta charset='utf-8'>"]
C --> C2["<title>Page Title</title>"]
C --> C3["<link rel='stylesheet' href='styles.css'>"]
D --> D1["<h1>My Heading</h1>"]
D --> D2["<p>My paragraph content.</p>"]
D --> D3["<div> (Container for more elements)"]
3. Worked Example
Let's put together a super simple webpage using the core structural elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Site!</h1>
<p>This is some introductory text on my very first HTML page.</p>
<p>I'm learning about **HTML structure**, and it's pretty cool!</p>
</body>
</html>
In this example:
- <!DOCTYPE html> declares it's an HTML5 document.
- <html> is the root.
- <head> holds metadata; here, we set the character encoding and the page title that appears in the browser tab.
- <body> holds the visible content: a main heading (<h1>) and two paragraphs (<p>). Notice how the <strong> tags for "HTML structure" are correctly nested within the second paragraph.
4. Key Takeaways
- HTML uses elements, made of opening and closing tags, to structure content.
<!DOCTYPE html>is a declaration, not an element, and always goes at the top.- The
<html>element is the root, containing<head>and<body>. <head>holds invisible page metadata like the title and links to stylesheets.<body>holds all the visible content of your webpage.- Elements must be properly nested; inner elements must close before outer ones.
Common Mistakes to Avoid:
Photo by KATRIN BOLOVTSOVA on Pexels
- Forgetting the
<!DOCTYPE html>declaration. - Leaving out closing tags, which can break your page layout.
- Incorrectly nesting tags (e.g.,
<p><strong>text</p></strong>). - Putting visible content inside the
<head>element.
5. Now Try It
Open a plain text editor (like Notepad on Windows, TextEdit on Mac, or VS Code). Copy the "Worked Example" code into it. Save the file as my_first_page.html. Then, open that file in your web browser (you can usually just double-click it).
What success looks like: You'll see a simple webpage in your browser with "My First Webpage" in the browser tab, "Welcome to My Site!" as a large heading, and two paragraphs of text below it, with "HTML structure" appearing bold.
Frequently asked about Fundamentals of HTML Structure
Study this next
Get the full html codin curriculum
Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.
Create Free Account