and here it is.
So we can see the browser defaulted to styling that basically,
visually tells us that this is the main heading.
Heading number 2 is a little less important and on and
on all the way to Subheading 6, which is the least important of the headings.
Couple of important points to understand about these elements.
First, even though their default rendering in the browser appears to give them
visual distinction, these should not be used for styling.
These elements are only meant to convey structure of your HTML page, nothing more.
With CSS,
any regular development can be styled to look like any one of these heading tags.
So, why not just use a div?
Because if we did, we would lose the meaning of what a heading is.
Second, something that's marked h1 is obviously the most important and
generalized description of the content of this page.
And while there are disagreements among the SEO experts about how effective
these semantic tags are for helping your search engine rank in general,
everyone agrees that when it comes to the heading tags, and specifically the h1 tag,
that it is of utmost importance to use it and that it should contain the wording,
which truly conveys the central topic of the rest of the content.
Okay, so let's take a look at another HTML document called semantic-elements.html.
And that file is located in the examples Lecture06 folder right
next to the headings.html file that we just looked at.
And in this document, I introduced a whole bunch of new HTML5 semantic tags.
And so, let's go over them right now.
So the first thing you see here is the new header tag, and
the header tag basically contains some header information about the page.
So usually, it consists of company logo, some tagline, sometimes, navigation.
Actually, often, navigation is contained within the header as well.
As you can see, this is exactly what we have right here.
The nav tag signifies some content that is used for navigation within our website.
Afterwards, we have our familiar h1 tag and
you should absolutely always have that.
And then we have a couple of set of section tags here.
And within each section tag, we have a bunch of article elements.
If you look at the HTML5 specification, you'll see that the way the section
element is defined and the way the article element is defined is that it's usual or
it makes sense that the article should go inside the section element.
However, that is not always the case and there's certainly no hard rule about it.
It's very possible that the article can also have sections within that.
So, you're certainly not constrained to have this structure.
We scroll down, we see we have an aside tag.
An aside tag is basically an element that communicates that there's something
that is inside of this element that is related to the main content of the page,
but not as direct a relationship as the main content.
And finally, we have the footer tag, which, just like it sounds,
has the footer information in it.
Now, the thing to note about all of these tags is they're all block level elements.
So as far as we're concerned,
visually we might as well have just used the div tags everywhere.
However, if you look at the code, it is obvious how much easier it is to read and
understand what's going on structurally in this HTML page.
For example, you can easily see that Article 1, 2 and
3 are somehow related and are somehow different from Articles 4,
5 and 6 since they live in two different sections.
That's the power of the semantic elements.
They inherently convey some meaning.
Let's take a look at this page in the browser.
As you can see, here's our header element and
the nav element is sitting right inside of it.
And as you can see, the section article, the footer, they're all block level
elements since every single one of them is actually on their own new line.
So in summary, well chosen content for h1 element is crucial
to search engine optimization, and you should definitely take advantage of that.
And remember, semantic elements do allow you for
more meaningful expression of the structure of your HTML code, HTML page,
but they don't really give you any more functionality than a regular div or
regular span would without it.
Next, we're going to talk about Structuring Content with Lists.
