HTML5 Tutorial 3 - Document Object Model (DOM) Video Lecture | HTML5 from Scratch - Software Development

Oh Internet my name is Travis Nelson
this is Deb test for designers we're
going to do Internet dr. day the past
two weeks have been talking about the
history and philosophy behind html5 this
we're going to talk about the physiology
of html5 or in other words what does it
look and act like the main concept that
we'll be wrestling with is something
called the document object model or in
other words the Dom the Dom is a
description of the webpage that you're
looking at the markup that makes it what
it is it's the relationship that each
element has in the markup with those
surrounding it let's just jump right in
I'll show you you're looking at the
html5 branding site I mentioned this
site in the last video and I thought it
would be fun to look at it again as an
example today I had the inspector here
open on the right and we're going to
take a look at the structure of these
HTML tags
notice that the markup here is literally
describing the web page that we see on
the Left all of these elements are
called tags and they tell the browser
not only what content we have here but
what kind of content for example this is
a nav and this be a header also notice
that these tags have a nested
organization in other words they are
placed inside each other because they
are nested like this they have a
familial relationship meaning that we
can refer to one tag inside another as a
parent and child and as two tags on the
same level as siblings this becomes very
important to understand when you are
using CSS later on because you need to
select very specific nodes here to style
them understanding the Dom and how it
works and is organized is fundamental to
using CSS and JavaScript now the reason
I'm showing you the Dom inside this dev
tool and not inside a traditional code
editor is because I want to illustrate
an elusive idea the idea is that the Dom
is not the code that you write what I
mean to say is that it is not always the
code that you write that ends up in the
Dom the Dom remember is called the
document object model is the result of
your code
the final output of your browser
sometimes the code that we write is not
the exact same as what we see in the dom
an example of this is when you code a
wordpress template where the output in
the Dom will be the thing that you write
populated by whatever is in the database
and multiplied by how many of them there
are one of the coolest things about the
Dom is that it can be manipulated after
the browser renders it this is often
done with JavaScript
let me type this in here notice that the
navigation here on the left has changed
to reflect what I did here in the dark
now before we end I want to talk a
little bit about something called
semantics using the appropriate elements
or tags in HTML is something that we
call semantic markup the man tags are
very important especially when we
consider that the websites that we're
making are becoming ever more
transportable you can view it on your
computer phone TV even the eyeglasses
you're wearing and everything in between
so it's important that our markup is
device agnostic meaning in everywhere
that you see it it means the same thing
also when we're using semantics we're
using common conventions which becomes
so important when working in teams
it helps us communicate more effectively
with each other and also when you open a
document that you haven't touched in two
years you can easily understand what you
were doing what needs to be done now
[Music]
alright that's it for this episode this
has been part three in a series I call
html5 basics please check out the last
two videos if you haven't already in the
first I talk about html5 history and in
a second the philosophy behind building
it so please check those out as I
mentioned before this channel is really
new I'm still not sure what I'm doing so
thank you for sticking with me this far
lots of love
you can join in on the love by liking
the video sharing with your friends
subscribing we're up them to get down
we're sub scribe to dev tips then send
them to get get subscribe II didn't in
intensive pens we have tips didn't
scrubscribe Dan tips we get some dev
tips for designers