IDEA9103 Chap.2 Web Roles and HTML Structure
Web Roles and HTML Structure
HTML, CSS, JavaScript and SVG cooperate by taking different responsibilities. HTML creates structure, CSS controls presentation, JavaScript supplies behaviour and SVG describes vector graphics inside the document.
This chapter uses nesting, parent child relationships, file paths and the browser's document tree to explain how a valid source becomes a rendered page and why a structural error can surface as several visual symptoms.
What this chapter covers
- 01
Web stack responsibilities
- 02
Client and server flow
- 03
HTML elements and tags
- 04
Parent child nesting
- 05
Relative file paths
- 06
DOM inspection
Worked example · free
Repair a caption nested inside an SVG
- 1Identify SVG as the drawing parent.
- 1Close SVG after its final shape.
- 1Place the paragraph after SVG inside body.
- 1Confirm the two nodes are siblings in the DOM.
Key terms
- HTML
- The markup language that describes the structure and content of a web page.
- Element
- A document unit defined by a tag, its content and any relevant attributes.
- Parent element
- An element that directly contains one or more child nodes in the document tree.
- DOM tree
- The hierarchical element structure constructed and exposed by the browser.
- Relative path
- A resource location resolved from the position of the document that refers to it.
Web Roles and HTML Structure FAQ
How do HTML, CSS and JavaScript differ?
HTML identifies and nests the content, CSS applies visual rules to selected elements, and JavaScript evaluates state and changes behaviour. Keeping those roles clear makes the project easier to inspect and revise.
Why does HTML nesting matter for creative coding?
SVG canvases and shapes are document nodes. Their parent child relationships determine where JavaScript can find them, where styles apply and whether a generated element becomes part of the visible page.
How do I diagnose a missing local image or script?
Confirm the filename and extension, then trace the relative folder from the HTML file. After the resource loads, verify that script order and element placement match the relationship your code expects.
What does the browser build from HTML source?
The browser parses the markup into a hierarchical document model made of nodes and relationships. Developer tools show that constructed tree, which can expose a misplaced parent, an unexpected sibling or an element the browser repaired after malformed source. Debug the constructed relationship as well as the text you originally typed.
Why use a local server during development?
A local server preserves the client request and resource response pattern used by web pages. It gives linked stylesheets, scripts and images a predictable base and avoids treating each file as an unrelated object. This makes the project behave more like the environment in which browser JavaScript normally runs.
How can I check whether nesting is correct?
Choose the element that appears wrong and identify its intended parent, siblings and children. Inspect those relationships in the Elements panel, then walk upward until the actual tree differs from the plan. Repair the earliest structural mismatch and reload before making any style or behaviour changes that could hide the original cause.
What makes a project folder portable?
Use a clear project root, stable relative paths and consistent filenames for HTML, styles, scripts and assets. Avoid absolute paths tied to one machine. Test portability by opening the project from its root in a clean session and confirming that every linked resource resolves without relying on a recently opened shortcut or cached state.
How do I audit the boundary between HTML, CSS and JavaScript?
For one visible element, locate the HTML node that supplies structure, the selector that supplies presentation and the script statement that changes behaviour or state. Confirm that each link uses the same id or class spelling and that the referenced files load through valid relative paths.
Temporarily remove one layer and predict what should remain: structure without styling, styling without scripted change, or static content without behaviour. Restoring the layer and observing the expected difference proves the responsibility boundary more clearly than treating the three files as interchangeable code containers.
Assessment move
Sketch the intended DOM as a small tree before writing a complex page. After each structural change, inspect the browser's Elements panel and name the parent, siblings and children of the node you changed. Practise separating errors into file lookup, parsing and intended hierarchy. This prevents you from treating every blank output as a styling or JavaScript problem.
Working through Web Roles and HTML Structure in IDEA9103? Sia is AskSia’s AI Computer Science tutor — ask any IDEA9103 Web Roles and HTML Structure question and get a clear, step-by-step explanation grounded in how IDEA9103 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.