This article explores insights gained from attempting to explain HTML and CSS to a five-year-old.
While setting up a basic HTML boilerplate in a code editor and browser, a five-year-old niece quietly approached, seemingly curious.
Niece: Wassat? Wassat you typing? Me: Something for the computer. Niece: It looks funny. All the little lines. Me: They are instructions. Niece: Instwu… inschu… instwushun? Me: Instructions.
This prompted a recollection of a Quora question encountered previously about teaching HTML and CSS to a child. Although initially overlooked, the presence of the child made revisiting that question seem pertinent.
The subsequent explanation revealed unexpected insights into fundamental concepts often taken for granted.
Building a “House” with “Bricks”
The child showed little interest in the specific HTML tags in the code editor, focusing instead on the visual output in the browser.
Niece: Oh. So, this big box is your house? Me: Kind of, yes.
The initially empty screen, resembling a vast white space, was interpreted by the child as a house under construction. This observation prompted an explanation of the fundamental process.
The editor was described as a place for building blocks, similar to where LEGOs are stored. As a simple heading, text, and a non-functional button were added, the child watched intently.
Upon refreshing the browser, text appeared, causing the child to react as the empty “house” transformed into a page with rendered elements.
The child, unable to read code, began to grasp the connection between the “house” and the structural “LEGO pieces.”
LEGOS as Bricks in the House
HTML was explained as the language that structures the “house,” placing “bricks” on the screen without defining their appearance. A heading, paragraph, or button each represents a distinct type of brick, and the browser follows instructions to add them.
This explanation necessitated a slower pace, leading to HTML being described as the page’s vocabulary. It assigns names to each component, enabling the browser to construct a document tree, which serves as a foundation for CSS and JavaScript. Without these names, element relationships would be unclear. Describing HTML without introducing other core languages proved challenging.
Observing the child’s reaction brought a realization: just as polished writing starts with an idea and outline, a refined interface begins with structure. Before colors, spacing, or layout, only the underlying structure exists.
Articulating these fundamentals re-emphasized their importance, akin to the initial understanding of separating concerns between HTML, CSS, and JavaScript.
The child stared at the screen for an extended period, and the silence grew. Despite the visible structure, the page appeared empty, prompting a question about its appearance.
The expectation was a house with shapes and rooms, but the screen displayed a plain surface. The editor was used to show semantic tags. The <body> was explained as a container, the <header> as the “roof,” and the <footer> as the bottom floor of the “house.”
These elements were described as functioning like rooms and doorways, rather than decorations. They inform the browser about existing components and their relationships, essentially “framing” the document before visual styling like doors, walls, paint, and carpet are applied.
Decorating the House
Once the structural concept was understood, simple CSS rules were introduced, adding minimal width, height, and a border to an element. The child observed the unfamiliar symbols of property names, curly braces, and brackets appearing in the editor with intense focus, like solving a puzzle.
The next step involved explaining CSS. It was described as another set of instructions, similar to HTML, but focused on the appearance of the “bricks” rather than their placement. This included defining a brick’s size, position, and overall look.
This fundamental aspect of CSS—selecting an element and describing its appearance to the browser—highlighted the literal and logical nature of CSS.
Basic properties like width, height, and a border were sufficient to introduce shape.
While more academic approaches to teaching CSS exist, such as starting with writing modes for directionality and positioning, these concepts are too complex for a five-year-old. Basic width and height must precede advanced topics like aspect-ratio.
The goal was to achieve an “A-ha!” moment. The exercise continued with drawing a small house, and upon refreshing the page, the structure finally took shape.
The resulting image was simple: a triangle for a roof, a square for a wall, two small squares for windows, and a thin rectangle for a door, resembling a quick sketch. Nevertheless, the child immediately leaned in, captivated.
Niece: Why does the house not have color? It looks so plain. Me: I haven’t added color yet. Niece: You forgot. You always forgot. Me: I’ll add it.
Adding color to the house marked a significant breakthrough in understanding.
Niece: So this brick says what is there. Me: Yes. Niece: And this color thing make it pretty? Me: That’s right. Niece: So HTML says what is there, and CSS makes it pretty. Me: Exactly.
This observation provided an ideal opportunity to clarify the distinction between HTML and CSS. HTML defines the elements within the document tree, while CSS dictates their visual presentation. Without styling, elements are present but not visible.
“Now it looks real!” the child exclaimed, drawing a parallel between the on-screen house and the room’s drawers, relating their structure to their decorative appearance.
HTML establishes the components, and CSS animates them with lines, colors, and styling. This process can still feel magical, and guiding the child to this understanding reaffirmed the inherent satisfaction in fundamental web development.
Lessons from a Five-Year-Old
“Now I can do computer, too!” the child declared before leaving the room, satisfied. The small house remained on screen, prompting reflection on the interaction.
It is common to lose sight of the inherent magic in web development, often prioritizing tasks and overlooking fundamental details. The question arises: how often is there a pause to truly examine the work, line by line?
A key lesson from the five-year-old was the enduring magic in web development, regardless of task size. While discussions on toolsets, techniques, best practices, and naming conventions are important, the brief interaction with the child felt more significant and satisfying. Ultimately, the web’s foundation remains simple.
The colored boxes held attention longer than the intended task, perhaps due to a realization of often rushing past fundamental concepts. This experience encouraged a slower, more deliberate examination of the work, line by line.
HTML began to appear less as code and more as building materials. CSS, in turn, seemed to function not just as a paintbrush but also as a tool to mold these materials into intricate shapes, much like clay.
While the initial intent was to teach HTML and CSS, the child ultimately provided valuable insights. Her perception of the page as a house clarified the concepts more effectively than other explanations. Her articulation of the HTML and CSS relationship was remarkably direct and impactful.
How Would You Explain It?
Explaining HTML and CSS fundamentals demonstrated that teaching any subject reveals both knowledge and assumptions. Instructing someone new to code necessitates self-assessment, aligning with The Feynman Technique of learning through teaching.
Learning is a subjective process, varying for visual, reading, or activity-based learners, and significantly influenced by age. Adults possess more context and experience than children, even outside of coding. Therefore, while a technical approach might suit an adult, an analogy relatable to a child proved more effective, even without extensive coding.
This raises the question: how would one explain HTML and CSS to a five-year-old? What analogies would be employed? Reflecting on such an explanation can offer insights into one’s own understanding and assumptions about web development.
Further Reading
- “HTML, CSS and our vanishing industry entry points” (Rachel Andrew)
- “In Praise of the Basics” (Geoff Graham)
- “Learning to Learn” (Sarah Drasner)
- “A 6-year old wants to make a website.” (Quora)
