HTML semantics: document elements

HTML semantics: document elements

When it comes to marking up the HTML
documents for our websites, so far we’ve been looking very granularly at
the content itself, but we have to also look at the website as a
whole. So here’s an example of a website, and. On most standard websites, we have some
main points. We have like the header up here. We have the navigation. We have like a main content area, and then
we have a footer. So all of these things can be marked up in
HTML. So first of all, we have a header element to denote like
the masthead of your website. We have a main element like that to denote
like where the main content is and we have a footer element like this to
denote where the copyright statement goes. So inside of each of these elements, we can add other elements that describe
the website. So in our header, we might have an h1 for
Mars like that. If we want to match this and then you can
see we have some navigation. So there’s a navigation element here like
that. Our navigation then could be an unordered
list. [BLANK_AUDIO]. With some li’s inside there. [BLANK_AUDIO]. So what are the things? Overview. [BLANK_AUDIO]. And you’ll notice my indentation is very
specific here. The li is indented because it’s inside the
ul, the ul is indented because it’s inside of nav, nav
is indented because it’s inside of header. So here’s the sort of structure that we
would use for. Our mast head of our website. One other thing about indentation would be
like, you can see here I wrote this whole line
all on one line. But since the a is inside the li, there’s
no reason why you couldn’t write it like this, from an indentation point of
view. I just find it a little bit easier to
write it on one line. So here is our sort of mains, our masthead
of our website our header. So in the main content, maybe we’d have an
h 2, for overview, maybe we have a paragraph of
text here,. Maybe a couple other paragraphs, something
like that, maybe an h3. So that goes in our main section. [SOUND] And then finally down in our
footer, we might have something like our copyright
notice. [SOUND] So, we have semantics that
describe the content directly like paragraph and h3 and list, but we also have semantic
elements that describe the document or the
websites. So we have header. For desc-, describing the header of our website, we
have nav for describing where the navigation is, main
for the main content, and footer, for
describing the footer of our website.

Be the first to comment

Leave a Reply

Your email address will not be published.