Family lines
What & why
When learning HTML (and Flexbox) the parent-child relationships of the elements is critical to good structure & code understanding.
We can use code indentation to help us distinguish the parent-child relationships in HTML and reinforce the structure of our code.
Indentation is a memory aid to find parent & child relationships.
Set up
- Form into pairs
- Download the files
- Print “family-ties.pdf”
- Get out a pencil for marking up the paper
Instructions
- Draw lines to match the opening & closing tags
- Answer questions about family relationships
- Parent of
article#paul? - Sibling of
article#paul? - Child of
article#paul?
HTML
<h1>Skywalkers</h1>
<main id="shmi">
<article id="vader">
<ol id="leia">
<li id="jaina"></li>
<li id="jacen"></li>
<li id="anakin"></li>
</ol>
<strong id="luke"></strong>
</article>
</main>
1. Parent of article#vader?
2. Sibling of li#jacen?
3. Sibling of strong#luke?
4. Great-grandparent of li#anakin?
HTML
<h1>Weasleys</h1>
<ol id="molly">
<li id="bill"></li>
<li id="charlie"></li>
<li id="percy"></li>
<li id="fred"></li>
<li id="george"></li>
<li id="ron">
<span id="rose"></span>
<span id="hugo"></span>
</li>
<li id="ginny">
<span id="james"></span>
<span id="albus"></span>
<span id="lily"></span>
</li>
</ol>
1. Parent of li#ron?
2. Parent of span#albus?
3. Sibling of li#george?
4. Grandchild of ol#molly?
HTML
<h1>Starks</h1>
<article id="rickard">
<div id="eddard">
<strong id="robb"></strong>
<strong id="sansa"></strong>
<strong id="arya"></strong>
<strong id="bran"></strong>
<del id="rickon"></del>
</div>
<p id="benjen"></p>
<div id="lyanna">
<small id="jon"></small>
</div>
</article>