So far all the elements we've added have directly affected how text is interpreted by the browser headings
paragraphs lists links and so on.
But there are more astm out elements that we need to add to semantically mark-up our page properly.
Websites commonly have a header that contains common information shown on every page in a website like
the title our logo navigation links which usually remain consistent across different pages.
The main content of the page which could include various different articles subheadings and so on related
content which could be related articles Arthur information or even advertised months and a footer which
generally contains copyright information and secondary navigation links we generally use font size and
colour to divide up and draw attention to different parts of the page.
However this is just far sighted use as a visually impaired user for example might not find a larger
font very useful for knowing that a section is a heading.
Are that a section is only related content and not the main content of the page and so on.
Each team provides us with elements that we can use to mark up the sections of the page based on their
function.
The header element for the common information at the top of a page like a logo are the main title.
This element can also be used at the top of a section element which will see in a moment the nav element
for the navigation bar which is usually just a series of links.
The main element which represents the main content of a document the article element which represents
a standalone piece of content that would make sense if taken out of the context of the page.
For example a news article are a blog post.
The section element which is similar to the article element but represents a standalone section that
doesn't otherwise have a more semantic elements like article forit the a side element which is for content
that is related to the main content often shown in a sidebar and the footer element which typically
contains information about an Arthur R copyright information.
Let's add these elements to this h.t. AML to give it some semantic structure the H one heading here
is the main title of the site.
That would appear on every page.
So this belongs in a header element.
This is followed by the main navigation links of the site.
So these belong in a nav element.
Following this we have the main content of the page.
Which will go inside the main element
inside the main element.
We have the content foreign article so this goes in an article element.
This secondary content and advertise meant and some related links go in an aside element.
And finally at the end we have some copyright information which would go in a footer element like that.
These elements don't affect how a visual browser like this dispose the content but they are taken into
account for screen readers and other software for visually impaired visitors and they also help search
engines to index your content.
So although they aren't required it's generally good practice to include these semantic sectioning elements
if you can.
There are two more elements I want to mention in this video and they are the div and span elements wrapping
content in a div are a span doesn't represent anything semantically but they do allow you to mark-up
content for styling purposes are for use with javascript which will look at later on.
The only difference between div and span is that a div element is shown on a new line in the browser
whereas a span element is shown in line with the rest of the surrounding content.
We'll see why you might want to use these elements later on.