Elements, tags, attributes, nesting, and the document skeleton that every web page is built upon
Every website begins with an HTML document. Before a browser can display text, images, links, or any other content, it needs a correctly structured file that tells it what kind of document it is reading and how that document is organized. In Part I, you learned how the web works as a system — clients, servers, requests, and responses. Now it is time to write the actual documents that browsers request and display.
This chapter introduces HTML: what it is, how it works, and how to write a valid, well-structured HTML page from scratch. You will learn the vocabulary of elements, tags, and attributes; the rules of nesting and indentation; and the required skeleton that every HTML document must follow. By the end of this chapter, you will understand every part of the basic HTML document skeleton and be able to write a clean starter page that a browser can interpret correctly.
Two students each write a web page. One forgets a single closing tag. The other writes every tag correctly but never declares a document type. Both pages "sort of work" when opened in a browser — but neither behaves entirely as intended, and neither would pass a professional code review. What is actually happening inside the browser when it reads a file like this? What rules is HTML following, and what happens when those rules are broken? By the end of this chapter, you will be able to answer both questions — and avoid both students' mistakes.
By the end of this chapter, you should be able to:
html, head, and body elements, including the purpose of the lang attribute.title element and write descriptive, well-formed page titles.<!DOCTYPE html> and Standards ModeWhy the DOCTYPE declaration matters; standards mode versus quirks modeWhen you visit a website, your browser receives a file from a server. That file is almost always an HTML file. HTML stands for HyperText Markup Language. It is the foundational language of the web.
HTML is not a programming language. It does not make decisions, run calculations, or respond to user actions on its own. HTML is a markup language: it uses a set of structured labels, called tags, to describe the meaning and organization of content. Those labels tell the browser things like "this is a heading," "this is a paragraph," "this is a link," or "this is an image." The browser reads those labels and uses them to build a visual page on the screen. Without HTML, the browser has no way to know what anything means or how anything should be organized.
HTML does not control visual appearance — that is the job of CSS. HTML does not add interaction, animation, or behavior — that is the job of JavaScript. HTML does not store or process data — that is the job of servers and databases. HTML structures content and gives it meaning. That is its job, and it does that job very well.
The building blocks of HTML are called elements. An element represents a piece of content and the meaning assigned to it. A heading is an element. A paragraph is an element. A link is an element. An image is an element.
Most HTML elements have three parts: an opening tag, the content inside the element, and a closing tag. A tag is the actual text you write to mark the beginning or end of an element, written inside angle brackets.
<p> — marks the start of a paragraph element. "p" stands for paragraph.</p> — marks the end of the element, using a forward slash before the element name.HTML element names are technically not case-sensitive — <P> and <p> are interpreted the same way. However, modern HTML standards and professional convention both use lowercase element names. Always write <p>, never <P>.
Most HTML elements have both an opening and a closing tag. Some elements, however, do not have content inside them — they insert something into the page rather than wrapping around text. These are called void elements.
| Void Element | What It Inserts |
|---|---|
<img> | An image |
<br> | A line break |
<hr> | A horizontal rule |
<input> | A form input field |
<link> | A link to an external resource, such as a CSS file |
<meta> | Metadata about the document |
You may sometimes see void elements written with a trailing slash, such as <img /> or <br />. This was required in an older version of HTML called XHTML. In modern HTML5, the trailing slash is optional and not required.
Understanding opening tags and closing tags clearly will save you many hours of debugging. An opening tag marks the beginning of an element: a less-than sign, the element name, and a greater-than sign — for example, <h1>, <ul>, or <section>. It tells the browser, "Start treating content as this type of element here."
A closing tag marks the end of an element: a less-than sign, a forward slash, the element name, and a greater-than sign — for example, </h1>, </ul>, or </section>. It tells the browser, "This element ends here."
One of the most common beginner HTML mistakes is forgetting to write a closing tag. When a closing tag is missing, the browser attempts to recover — but the result may not be what you intended.
Always write your closing tag immediately after your opening tag, before writing the content in between. This habit prevents forgetting the closing tag entirely.
Many HTML elements accept additional information called attributes. Attributes provide details about an element — details that modify how it works or what it refers to. Attributes are always written inside the opening tag, never in the closing tag. An attribute has two parts: a name and a value, separated by an equals sign, with the value wrapped in quotation marks.
For example, the <a> element creates a link. But a link is useless without knowing where it goes. The href attribute provides the destination:
An element can have more than one attribute, separated by spaces inside the opening tag:
img elementAttribute values should always be wrapped in double quotation marks: href="https://example.com". Single quotation marks work technically, but double quotation marks are the universal standard in HTML.
Some attributes do not need a value — their presence alone signals something to the browser. These are called boolean attributes, such as checked, required, and disabled.
Writing the attribute name is enough. You do not need to write required="true", though some developers do write the value explicitly for clarity.
HTML elements can contain other HTML elements. When one element lives inside another, this is called nesting. Nesting is fundamental to HTML — almost every page you write will have deeply nested structures. A list contains list items. A section contains paragraphs and headings. A navigation menu contains links.
Here, three <li> (list item) elements are nested inside a <ul> (unordered list) element. The <ul> is called the parent element. The <li> elements are called child elements.
When you nest elements, the inner element must be completely inside the outer element. Overlapping elements — where an inner element starts inside an outer element but closes outside it — is invalid HTML. Think of nested elements as boxes inside boxes. A small box must be entirely inside the large box; it cannot stick out through the wall.
Indentation means adding spaces (or tabs) at the beginning of lines to show the nesting structure of your HTML. Well-indented HTML is far easier to read and debug. The standard indentation in HTML is two spaces per nesting level. Some developers use four spaces; some use tabs. Choose one style and be consistent throughout your project.
The browser ignores extra whitespace, so indentation does not change how a page renders. But it dramatically improves readability for humans, including you when you return to your code later. A child element should be indented one level more than its parent, and a closing tag should line up with its matching opening tag.
A valid HTML document is not just a collection of elements. It has a required structure. Every HTML file you write should follow this skeleton:
<!DOCTYPE html> and Standards ModeThe very first line of every HTML file should be the document type declaration: <!DOCTYPE html>. This line tells the browser which version of HTML you are using. It is the declaration for HTML5, the current version of HTML, and it is written before the opening <html> tag — it is not itself an HTML element.
Web browsers have been handling HTML files for decades, across many versions of HTML. If a browser cannot tell what kind of document it is reading, it may switch into a compatibility mode called quirks mode, which changes how it renders the page — sometimes dramatically.
Writing <!DOCTYPE html> at the top of your file tells the browser: "This is a modern HTML5 document. Use current web standards to interpret it." This is called standards mode.
Always include the DOCTYPE declaration, and always write it on the first line. Never write anything before it — not even a blank line — because some browsers may interpret a preceding blank line as an absent DOCTYPE.
Immediately after the DOCTYPE declaration, the html element begins. It wraps the entire document and is called the root element because it is the outermost element of every HTML document. Everything else lives inside it.
The lang="en" attribute declares the document's primary language. Screen readers use it to apply correct pronunciation rules; search engines use it to index content by language; browsers may use it for hyphenation and typography. Always include lang on your html element — it is not an optional decoration.
Inside the html element, there are two direct children: head and body.
| Element | What It Holds | Visible on the Page? |
|---|---|---|
<head> | Page title, character encoding, viewport settings, links to CSS and JavaScript files, meta descriptions, social sharing information | No — metadata only |
<body> | Headings, paragraphs, images, links, navigation menus, forms, and every other piece of visible content | Yes — everything seen on screen |
None of the information inside head appears directly in the visible content area of the browser window. Everything you can see when you load a web page comes from what is inside the body element.
The title element lives inside head and sets the title of the page. This title appears in the browser tab, in the browser's history list, in bookmarks, and in search engine results.
The title element sets the browser tab title. It does not add a visible heading to the page content itself — that comes from heading elements like <h1>, which you will study in Chapter 6. Many beginners confuse these two: title lives in head and is invisible on the page; h1 lives in body and is visible as a large heading.
Now that you understand every part of the HTML document skeleton, you can write a complete, valid HTML page. Here is a full starter page with meaningful content:
<!DOCTYPE html> — this is an HTML5 document; use standards mode.<html lang="en"> — the root element begins; the language is declared as English.<meta charset="UTF-8"> — declares character encoding. UTF-8 supports virtually all languages and symbols on earth, and should be the first thing inside head.<meta name="viewport" ...> — sets up responsive behavior so the page displays correctly on phones and tablets. Studied in depth in Chapter 17.<title>...</title> — sets the text that appears in the browser tab.<h1>...</h1> — a top-level heading, visible on the page.HTML files must be saved with the .html file extension. Your browser reads this extension to know it should interpret the file as HTML. The main file of any web project is almost always named index.html — when a browser or server loads a folder without specifying a filename, it automatically looks for index.html. You will learn much more about this convention in the project structure chapters.
This worked example walks through building a valid HTML page for a fictional school club, explaining each decision along the way. The goal: build a complete, valid HTML page for a "Film Club" with a correct DOCTYPE and language declaration, a clear title, a visible heading, and two paragraphs of content.
index.html.<html lang="en"> element right away. The lang attribute is easy to forget later, so include it immediately.<head> and <body> elements at the same time, even though both are empty — this prevents the common mistake of forgetting one of them.head metadata in order: charset first, viewport second, title third.body: a heading and two paragraphs about Film Club.Open the saved file in a browser. You should see "Film Club — MGU School" in the browser tab, a large heading reading "Welcome to Film Club," and two paragraphs of text below it. No styling yet — the page uses only the browser's default appearance. CSS arrives in Part III.
img, br, and meta have no closing tag because they have no content to wrap.required need no value.html root element, a head section, and a body section.<!DOCTYPE html> must be the first line of every HTML file. It triggers standards mode rather than the inconsistent, older quirks mode.html element is the root of the document. head holds invisible metadata; body holds all visible content. The lang attribute is an accessibility requirement.title element sets the browser tab text and is distinct from the visible h1 heading on the page..html file extension.<elementname>.</elementname>.img, br, and meta.lang="en".checked, required, or disabled.<!DOCTYPE html> statement that must appear on the first line of every HTML file, triggering HTML5 standards mode.html element, which wraps the entire HTML document.head that sets the text shown in the browser tab, bookmarks, and search engine results.head and not directly visible on the page.html element that declares the document's primary language, important for accessibility and search engines.Answer these questions before beginning the full review questions. They check basic understanding, not deep analysis.
img and br have no closing tag?head and what belongs in body?title element and an h1 heading?lang attribute is not a translation tool — it is an accessibility and standards requirement. Screen readers use it to apply correct pronunciation rules, and search engines use it to index content correctly, regardless of which language the page is written in. Always include lang="en" (or the appropriate language code) on the html element.head does not mean "the top of the visible page" — it means "metadata about the document." Visible content such as headings and paragraphs belongs inside body. When content is mistakenly placed inside head, browsers typically move it into body automatically, but the document structure remains invalid and confusing to read.lang="en", never lang=en.index.txt or simply index will not be interpreted as HTML, no matter how correctly it is written inside. HTML files must be saved with the .html extension.Read each HTML code block carefully. Answer the questions that follow without running the code first. Then open the code in a browser to check your predictions.
head and one piece of content in body.lang attribute on the html element communicate to a screen reader?<html> tag?<head>?Read the code and predict what you will see in the browser window and in the browser tab before you open the file.
Find and describe every error, then write the corrected version.
Explain, for each one, why it is correct or incorrect.
lang attribute set to English; a charset meta tag; a viewport meta tag; a browser tab title that reads "Reading List — The Open Page Book Club"; a visible heading that reads "Our Current Reading List"; and two paragraphs describing the club's reading selections. Make sure your code is properly indented.<head> section because it is the most important part." Write a clear, friendly explanation of what is wrong with this approach, what the head section is actually for, and where visible page content belongs.This is the first step in the course's running project. You will add to this project in every subsequent chapter.
student-learning-site containing a single file, index.html.index.html and write a complete valid HTML document with: a correct DOCTYPE declaration; lang="en" on the html element; a charset meta tag using UTF-8; a viewport meta tag; a title element reading "Home — Student Learning Site"; a visible h1 heading reading "Welcome to the Student Learning Site"; and two paragraphs describing what the site is about.html element has lang="en"head section contains meta charset, meta viewport, and titlebody section contains the heading and paragraphs.html extensionSave your project folder. You will return to it in Chapter 6, where you will add headings, paragraphs, and semantic structure to the page content you just created.
For each issue you find, explain why it matters and how to fix it. Consider: Is the language of the document declared? Is the page title descriptive enough for a user who cannot see the page?
These questions draw on earlier chapters as well as Chapter 5. Answering them helps you connect new knowledge to what you already know.
my-site/ with a file called Homepage.HTML inside. They try to open the file in the browser but nothing useful appears. (a) What is likely wrong with the filename? (b) What are two problems with the filename that could cause issues on some systems?html, head, and body.title element and how it differs from h1.Chapter 5 gave you the skeleton of an HTML document — the structure that holds everything together. But a skeleton with no content is just an empty shell. Chapter 6 fills that skeleton with text. You will learn how to mark up headings at different levels, write paragraphs, add emphasis, and use semantic elements like main, section, article, header, and footer. You will build a complete structured article page and begin to understand why semantic HTML matters not just for appearance, but for accessibility and search engines. By the end of Chapter 6, you will be able to build an HTML page with meaningful, well-structured written content — the kind of page a screen reader can navigate clearly, a search engine can understand, and a human reader can follow logically.