wunder beta📘 How do HTML and CSS structure a page?
HTML is a markup language: it annotates text to say what each part of a document means rather than how it
What you’ll learn
- HTML: The Structure of Web DocumentsExplain how HTML uses elements, attributes, and a nested tree structure to define the meaning and structure of a web page.HTML (HyperText Markup Language) describes the structure and meaning of a document using elements written as tags, which the browser parses into a tree called the DOM. Every page begins with a document type declaration and a root html element containing a head (metadata) and a body (visible content). Elements can carry attributes that supply additional information, and they nest to form parent-child relationships. Understanding this tree model is the foundation for everything you will do in CSS and JavaScript.
- Semantic HTML and Accessible ContentChoose semantically meaningful HTML elements that communicate document structure to browsers, assistive technologies, and search engines.Semantic HTML means selecting elements based on the meaning of the content rather than its appearance, so that <article>, <nav>, <header>, and similar elements convey structure. Semantic markup improves accessibility because assistive technologies expose landmarks and headings as navigation aids, and it gives non-visual consumers like search engines a clearer picture of the page. Headings must form a logical outline, and generic <div>/<span> elements should be reserved for cases with no more meaningful option. Writing semantic, accessible HTML is a baseline professional expectation, not an optional extra.
- CSS Fundamentals: Selectors, the Cascade, and SpecificityApply CSS rules to HTML by writing selectors and predicting which declarations win when rules conflict via the cascade and specificity.CSS (Cascading Style Sheets) controls presentation through rules made of a selector and a declaration block of property-value pairs. When multiple rules target the same element, the browser resolves conflicts using the cascade, which considers origin and importance, then specificity, then source order. Specificity is computed as a three-part weight counting ID, class/attribute/pseudo-class, and type selectors, with inline styles ranking above selector-based rules and !important overriding normal declarations. Mastering the cascade lets you write predictable styles and debug conflicts instead of fighting them with !important.
- The Box Model and Modern Layout with FlexboxDescribe how the CSS box model sizes elements and use Flexbox to arrange items along an axis with controlled alignment and spacing.Every element is a rectangular box composed of content, padding, border, and margin, and box-sizing controls whether width and height include the padding and border. Setting box-sizing: border-box makes sizing intuitive and is a near-universal professional default. Flexbox is a one-dimensional layout model: declaring display: flex creates a flex container whose children align along a main axis and a perpendicular cross axis, controlled by properties like flex-direction, justify-content, and align-items. Together the box model and Flexbox let you build responsive, well-aligned layouts without older hacks.
- Portfolio Artifact: Building a Responsive Profile CardBuild a small, valid, semantic, and responsive profile-card web page that applies the HTML and CSS concepts from this course.In this capstone you will assemble a single-page profile card from scratch, combining semantic HTML structure with CSS styling, the box model, and Flexbox layout. You will start from a correct document skeleton, mark up content with meaningful elements and accessible attributes, then style it with an external stylesheet that uses classes, border-box sizing, and a flex layout that adapts to screen width via a media query. The finished page is a portfolio artifact you can extend and reuse. Working end to end here consolidates every concept into one verifiable deliverable.
Questions this course answers
Which part of an HTML document contains metadata that is not directly displayed on the page, such as the character encoding and the page title?
The <head> element holds metadata about the document, including <meta charset> and the <title>. The <body> contains the visible content; <main> and <footer> are structural elements inside the body.
In the tag <img src="logo.png" alt="Company logo">, what is "alt"?
alt is an attribute written as a name="value" pair inside the opening tag. It supplies alternative text that assistive technologies announce when the image cannot be displayed or seen.
Why is the markup <b><i>text</b></i> invalid HTML?
Elements must nest properly: an element opened inside another must be closed before the outer element closes. The correct form is <b><i>text</i></b>, which keeps the tree well-formed.
What does the browser build by parsing the nested structure of an HTML document?
Parsing nested elements produces the Document Object Model, a tree of nodes with parent, child, and sibling relationships. CSS selectors target this tree and JavaScript manipulates it.
Which element best represents a self-contained blog post that could be syndicated and still make sense on its own?
<article> is defined for self-contained, independently distributable content such as a blog post. <div> and <span> carry no meaning, and <aside> is for tangential content.
What is the recommended way to use heading elements (<h1>-<h6>)?
Headings define the document outline and should descend in order without skipping levels, because assistive technology users navigate by heading level. Visual sizing is handled separately by CSS.
Grounded in trusted sources
- MDN Web Docs, HTML elements and CSS cascade, https://developer.mozilla.org/
- W3C HTML Living Standard — document structure
- WAI / WCAG primers on semantic structure and accessible names
- CSS Flexible Box Layout Module — Flexbox
- web.dev / learn CSS — box model and layout fundamentals
Every Wunder lesson is built from real, reputable sources — never invented.
Related courses
Wunder is a personalized learn-anything platform — tell it any topic and it builds a beautiful, fact-checked course in minutes, with narration, a knowledge check, and a college-style University track.
© 2026 Wunder Learning LLC · Terms & Privacy