How the Web Works & HTML5 Structure

A browser builds a page from a document

When you open an address, the browser requests a document from a server, reads its HTML and builds a DOM tree. It then fetches linked styles, scripts and images. HTML labels content; CSS controls presentation; JavaScript supplies behaviour. A heading is not a database operation, and a coloured button is not automatically interactive.

An element combines tags and content: <p>Practice text</p>. An attribute adds information inside the opening tag, such as href on a link. Most elements have an opening/closing pair; void elements such as img and meta do not contain children and do not need a closing tag.

Save one complete document

In your studio-hq folder, use VS Code to create index.html with your own studio wording. This minimal example shows the required structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Practice Studio</title>
  </head>
  <body>
    <header><h1>Practice Studio</h1></header>
    <nav aria-label="Main navigation"><a href="#work">Work</a></nav>
    <main>
      <section id="work">
        <h2>Selected work</h2>
        <p>A small useful product starts here.</p>
      </section>
    </main>
    <footer><p>Made by Practice Studio</p></footer>
  </body>
</html>

The doctype selects modern HTML behaviour. lang tells assistive tools the page language. charset describes text encoding. The viewport makes narrow screens use their real layout width rather than a desktop-sized page squeezed down. title appears in the browser tab; h1 is visible content. head holds document information, body holds the page's content.

Save the file, then open it in a browser. A double-click can show this first plain document; later use your local server for scripts and requests. Confirm the tab title and page heading are different locations. Change a sentence, save, and refresh: an unsaved editor change cannot appear in the browser.

Nest by meaning

Use one main region for the unique content, nav for major links, header/footer for introductory/closing content, section for a topic and article for a self-contained item. A generic div is useful for layout when no semantic element fits. Do not choose a tag solely because its default size looks right.

Keep nesting valid. A list has li children inside ul/ol. A paragraph is for text, not a container for a section or another paragraph. Close inner elements before outer ones. Browsers repair some invalid markup; a page that looks plausible can still have a DOM different from the file you intended.

Links have paths, not wishes

href="#work" jumps to the element whose id is work on this page. href="about.html" points to a file relative to the current page. href="/about.html" starts at the site's origin root, not necessarily your current project subfolder. https://example.com is an absolute web address; it is an illustrative domain, not your studio's actual link.

Images use src for the file and alt for a useful text alternative. Keep path spelling and case consistent. If you move the file into images/, update its link to match. Do not copy a private local drive path into a public website: other visitors do not have your computer's folders.

Build your own outline

Plan a studio page with a header, navigation, one main area, a product/work section and footer. Give the page one clear h1, then use h2 for its sections. Add at least one real navigation target and one meaningful image alternative. You will style the same page later; start with content that makes sense without CSS.

Guided diagnosis

Temporarily point a local image or page link to a missing filename. Check the address/Network request and restore the path. Inspect Elements to compare the DOM hierarchy with your source. Try Tab to reach your navigation link and Enter to activate it.

If your entire markup appears as plain text, check that you saved an .html file and are opening the intended document; extensions affect handling but do not prove content. If a heading appears but the browser tab title does not, inspect which element belongs in head. If a jump link does nothing, compare href and id character by character.

Before the studio-page activity

Open your saved page and identify doctype, head, body and semantic regions. Explain an attribute, show a working link and confirm the DOM outline. Build your own content rather than submitting this generic document unchanged. The next accessibility lesson teaches how that structure becomes usable to keyboard and screen-reader visitors.