HTML Web Structure
Start with one plain-text page that opens directly in a browser, then progress through document structure, links, data, forms, media, parsing, responsive images, native interaction, accessibility, and one complete multi-page website.
Document skeleton and semantic landmarks
Objective Create, open, change, and explain one valid HTML document using only a text editor and browser.
Core explanation
HTML, or HyperText Markup Language, is plain text that identifies the meaning and relationships of page content. An element is one part of the document, such as a heading or paragraph; most elements are written with an opening tag, content, and a closing tag. An attribute is extra information written inside an opening tag, such as lang="en", and nesting means placing one element inside another as its child. Create a new plain-text file, enter the complete example, save it as index.html in UTF-8, and open that file in a Web browser. The browser parses the text into a document and shows the body; change the h1 text, save, reload, and use the changed heading as evidence that you edited the correct file. The doctype asks for standards behavior, html is the root element, head contains information about the document, and body contains what the reader perceives. CSS and JavaScript are separate later subjects, so neither is needed to complete this chapter.
Create one page with no installation or hidden tool
Use a plain-text editor, not a word processor that adds formatting. Make a new folder named first-page, create a file inside it, and save the exact filename as index.html with UTF-8 encoding. HTML means HyperText Markup Language. “Markup” means that ordinary text is surrounded by written markers that identify what the text means. The file remains readable plain text; the browser interprets that text as a document.
Open index.html directly in a Web browser by using the browser’s Open File command or the operating system’s ordinary file-open action. No terminal, local server, extension, account, package, CSS file, or JavaScript file is required. If the browser shows literal angle brackets instead of a page, first verify that the filename is exactly index.html rather than index.html.txt. If an edit does not appear, verify that the editor saved the same copy the browser opened, then reload.
Read tags, elements, attributes, and nesting from the outside inward
A tag is source notation inside angle brackets. Most elements have an opening tag, content, and a closing tag: `<h1>Course</h1>` is one h1 element whose content is Course. Some elements, such as meta, do not wrap content. An attribute is a name or name-value pair inside an opening tag; in `<html lang="en">`, lang is the attribute and en is its value. An attribute changes or describes that one element rather than becoming visible prose by itself.
Nesting means putting one element inside another. The outer element is the parent and the inner element is its child. The example nests head and body inside html, then nests header and main inside body. Indent child lines consistently so a person can see the tree, but remember that spaces do not create the relationship: the start and end tags do. Read the source from the html root toward the innermost text and point to every matching opening and closing tag.
Separate document information from visible page content
The doctype is the first declaration and asks the browser to use modern standards behavior. The html element is the root that contains the document, and lang="en" states that its main human language is English. The head holds information about the document. `<meta charset="utf-8">` states how saved bytes become characters, while title names the browser tab, history entry, or bookmark. These lines affect interpretation and identity even though they are not ordinary visible page paragraphs.
The body holds the content a reader perceives. h1 states the page’s primary topic. header introduces the page, and main identifies the content unique to this page. These elements are called semantic because their names communicate purpose, not color, size, or screen position. Start with one obvious header and one main. Later chapters add nav, article, section, aside, and footer only after their content relationships are understood.
Prove the source-to-page relationship with one controlled change
Before opening the page, predict two results: the tab will say Course because of title, and the visible page heading will say Course because of h1. Open the file and compare both observations with the prediction. Then change only those two text values to My first course, save, and reload. Do not change the tags during this trial. The new tab label and heading prove that the browser parsed the changed file rather than a different copy.
Now make one reversible failure: rename the closing `</h1>` tag to `</h2>`, save, and reload. Record what remains visible, but do not conclude that visible text proves correct structure; browsers attempt to recover from malformed source. Restore `</h1>`, save, and reload. The lesson is not “the browser accepts anything.” It is that source structure is a separate claim that later validation and parser chapters will examine after the basic file workflow is secure.