A wireframe is a simplified representation of a page’s structure. It shows the content groups, navigation and actions that need space. It can be a paper sketch or a digital layout; it does not need to prescribe final colors and fonts.
Use it to make a decision
For a lesson page, place the definition, working example, explanation and next lesson. Give the blocks real names. Compare two arrangements and ask which helps a reader find the answer fastest.
Annotate the behavior
Mark where a link goes, what a control changes and what happens on an error. A rectangle labeled “search” leaves its results and failure behavior unspecified. Those notes prevent the layout from hiding important work.
Add detail when it answers a question
A rough wireframe can show order and emphasis. A more precise one can show proportions and content density. The border between wireframe, mockup and prototype is not rigid; describe what the artifact represents and what is still provisional.
Exercise: wireframe a form with a heading, instructions, fields and a status message. Add a version with long labels and an error. Then implement one small part in HTML to test actual semantics and keyboard behavior.
A wireframe supports discussion, but it does not prove usability. Compare low fidelity, high fidelity and observed testing.
Sources
Reference 1 provide the technical details and current compatibility information.