Heading Elements (and some HTML5 semantic comments)

SOURCE: https://www.youtube.com/watch?v=6htWMEi8CGU

Okay, so in this lecture, we're going to talk about heading elements and some new HTML5 semantic elements. 

First of all, what does the word semantic mean? Well, definition of semantic is relating to meaning in language or logic. In other words, it has some inherent meaning, the names have some inherent meaning. Now when it applies to HTML, what does semantic html element mean? Well, a semantic html element is an element that implies some meaning to the content. In other words, it's an element that tells you something about the content, whether its importance, whether it's a little bit of its description, it basically hints to you to that meaning. Now the reason that's important is because us, humans, and machines can understand the meaning of that content surrounded by a semantic tag much better than if we just surround it with some tag that doesn't really tell us anything other than this is some sort of a division within the document. And also, it may help search engine rankings. In other words, SEO and SEO stands for search engine optimization. Now I stress may here because there is some controversy and disagreement among experts if this is really true. Now experts who disagree with this say that modern search engines are so sophisticated nowadays that just about nothing other than the content itself affects the ranking of the page. So you're welcome to go and Google for the words, do semantic HTML5 tags help SEO, and you could see a lot of discussion on this topic. Now let's take a look at an example of the first type of semantic tags that we're going to look at, the headings. Okay, so here, I'm in Sublime Text and I'm in the examples Lecture06 folder looking at the file called headings.html, and this is a very simple HTML document. It has all the h1 elements, h1, h2, h3 and all the way to the h6 element, well, basically, all the available heading elements. And what these headings are trying to convey is that the heading content between opening h1 and the closing h1 element is the most important heading in the document, and on, and on, and on. So h6 would be also a heading of the document, but it's the least important one of them all. So, let's take a look at what this document looks like in the browser, 

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.

Video Images