Nesting
Recap of previous lesson
Class workings
- Opdrachten dienen individueel gedaan te worden, tenzij anders vermeld.
- Indienen na deadline = 0
- Wanneer je een vraag op een quiz niet juist hebt, lees zeker het antwoord.
- Positieve inzet zoals thuis oefenen wordt beloond
A basic structure for every HTML page.
Remember
- What is inside the
<head>is not visible to the visitor. Only for 'computers'. - What is inside the
<body>is visible to the visitor. - All visible content should be inside the
<body>.
What other tags/elements do you remember?
Recap quiz
Nesting
In the previous chapter you've learned how to create an HTML document and add how to add basic content. Now we're going to look more closely at how elements can go inside of other elements. After that, we'll use this concept to build tables.
Firstly, as you probably already know, HTML elements can contain other elements. This is called nesting.
In the example above, the <strong> element is inside the <p> element.
In this case <p> is the parent and <strong> is its child, simply because it's inside of it. Just like a kangaroo
!
When an element is inside another element, indent it using Tab. This makes the structure of your code easier to see, and your code easier to read. Use Shift + Tab to move it back.
Tip: you can select multiple lines and indent them in one go.
Recap
- Parent → An element that contains another element.
- Child → An element that is directly inside another element.
- SiblingSibling: Sister/brother → Elements that have the same parent. The two paragraphs above are siblings.
Always close tags in reverse order that you opened them. If you open <p> and then <strong>, close <strong> before <p>.