Lesson 3 - Document Object Model (DOM)
March 14, 2019
It’s time to get into some gritty technical details about what is going on with your HTML and specifically how does your browser interpret what it sees when it reads the code that makes up your HTML.
Enter the Document!
<body> <div> <p> Hello <span>World</span> </p> </div> <footer> <p> My amazing footer </p> </footer> </body>
You should already know from the second lesson that HTML ‘tags’ can live inside
of other ‘parent’ tags, and here we have a
div and a
footer inside of the
body tag, and inside each of those is a
p tag. You will also notice I have
formatted the text so that each thing that is in a parent is indented by two
blank spaces - this is very intentional and super good habit to get into. This
structure of parents and children would look like this:
Here you can see the
p inside the
div and it’s two children ‘Hello’ (which
is just text content) and a
span which has it’s own text content ‘World’.
Why Do I Care About It?
Generally speaking the structure of your HTML should give some sense as to it’s
meaning, so in the above example we have our
footer tag would make sense to be
the footer section of our website. You might also want to group posts in a blog
in their own
article tags with the various tags that then make up
that content inside of it like
Written by Darren who lives and works in Oxford, being a wizard like Harry Potter ⚡. You should follow him on Twitter