3.3 Semantic and Generic Elements

HTML has a lot of elements. And you can place those elements in a variety of different categories. But in this lesson, I'm going to focus on just two categories. We have what are called semantic elements. And then we have more generic elements. But first, what do I mean by semantic elements? Well, these are elements that's by their very name or their definition they have some specific purpose. So that whenever we see them in an HTML document, we know what that is used for. Like for example, in our documents we have h1, h3 and p elements. These are all semantic elements, because they are used for very specific purposes. So whenever we see an h1 elements, we know that whatever is inside of the opening and closing h1 tags, we know that that is a heading. The same is true for an h3 elements. And because we have different levels of headings, we also know the importance of those headings. So just by looking at our HTML, we can point out and say, there's a heading, there's a heading, and down here is another heading. Well, the same can be applied to p elements. We know that means paragraph. But what is a paragraph? Well, it contains content. So we can say the same thing. That's anything inside of an opening and closing p tag is content, and that is more of the body or rather the main content that we are concerned with within the document. So, in this particular document we can look at all of the p elements, so we can know that this is main content. This is main content, and this is main content. Now, that isn't always going to be the case, because there are some elements that are more generic, and we can use them for just about anything that we want. Now we want to use them only in times when there's not already an element for that specific purpose. Like for example, one of the generic elements is called div just D-I-V. That stands for division. And basically you are dividing a document into different sections. So if we wanted to have a sidebar, we could do that. And we could specify a sidebar with a div element. And then if we wanted to have the main content inside of another div elements, we could do that. So in fact, let's do that. I'm going to move these div elements to the top of the body. I'm going to take all of the main content that we have and put it inside of this other div element. Now the problem with just using div elements is that they are not semantic. We don't know what these div elements are for. Now we know right now that this div elements contains all of the content for this document. So we could guess that this is for the main content. But with something like a div element, we want something specific. We want to say that okay, this div element is for the main content. This dev element is for the sidebar, so that when anybody else is looking at our documents, they know what it is. And it's not just for other people. As you will soon find out whenever you write a webpage and you just leave it alone, you come back six months later, you will have no idea what you did inside of that document. So we can give some semantics to our div elements by using attributes. And there's a couple of attributes that we can use. But in this lesson, I'm going to introduce you to an attribute called id. Now first of all, what is an attribute? Well it just adds information to an element. And an attribute goes inside of the opening tag, and you can have a variety of different other attributes. So there is this id attribute here. We have an equals sign and then a pair of quotes. Now you don't have to have the quotes but I like to have the quotes. And then if we wanted to have another attribute, let's find one here in this list and this isn't a complete list. This is just what brackets things that we can use here. One of them is class, and we will talk about class whenever we started adding style. So we have an id attributes, and we have a class attributes, but right now they don't have any values assigned to them. But you can have multiple attributes here. And that's what I wanted to show you for right now. But let's get rid of class, and we're going to stick with id. Now, this is a unique identifier. This is a way that we could eventually find this div element based upon the value that we have with the id. So this needs to be unique and we can say that okay, this is sidebar and then we will give another id attribute to this other div element that says main-content. And you can have dashes, you can have underscores, or you can have nothing and just one string. I like to break mine up so that we can see that this is main content, and that this is sidebar. Although we could argue that it is site dash bar, I'm just going to stick with sidebar. Okay, so we have essentially two sections within our document. And if we look at this in the browser, right now, we're still just going to see kind of what we saw before. It looks like that nothing else changed. However, let's add some content to our sidebar. Let's just have this is the sidebar. And we're going to see that this will change up. There it is right there. This is the sidebar that appears above where we have the main contents. Now, a sidebar should be on the side and the main content should be next to the sidebar. And throughout this lesson and probably the next one we're not going to see that, because that is achieved with CSS. But as far as our markup is concerned, this is perfectly fine and this is more of what we would want to do. But in a sidebar, we would have more content that isn't really pertaining to this particular document, but it would be something that would be used site wide like a navigation pane. And the navigation pane is just a list of links. So we have a semantic element for displaying a list. In fact, we have two of them. We have what are called unordered lists, and then we have an ordered list. The only difference between the two is that an unordered list has bullet points, so that could be a little circle or some other type of glyph. But an ordered to list has numbers instead of bullets. Since this is going to be a list of links, we're going to use the unordered list. And that is simply ul. This is a semantic elements, whenever you see ul you know that it is a list of things. Because what is contained inside of a list, be it an unordered list or an ordered list is a bunch of list items. This too is a semantic element. It's simply li, then we would have our link. Now we're not going to have actual links yet, because we don't have any other documents, but we could have something like Home and then let's have another item here that would be Article. Which would be this document that we are looking at. So if we go back to the browser and refresh, we now have our list of soon to be links, and then our main content. And while the browser is rendering this all as just one big large chunk of text, our markup it is all separated. And that is very important because whenever we come in and add style, we will be adding that style based upon the markup that we have. So we want to divide our webpages into the different distinct sections. So that we can style them. Now there's one other generic element that I want to point out. We have div. The other is called span, and the two are somewhat similar. In that they are used to contain contents or a bunch of different content. But the big difference between a div element and a span element is that a div element is what we call a block level element, where as a span is what we call inline. And that is something too that's we are going to be working with more whenever we get into CSS. But I can demonstrate what these types of elements are. If you right click on anything within the browser, I'm going to do so on this h1 element. Let's go to Inspect element. And then this is going to pull up the developer tools for Chrome. Now we want to go over to elements. And this shows all of the HTML as it is rendered here in the page. This is not like viewing source. Viewing source is viewing the actual HTML, although we can see that two brackets is injecting some attributes into these elements. But what we have here in the developer tools, is as it is actually rendered within the page. So you can see here we have two div elements. And if you hover your mouse over these two elements, it highlights it within the page. So first we have that first div element for the sidebar. And you can see up at the top that it is just a block, and then the next div element is another block. But it is underneath the first div element. So whatever is inside of a div element by default, is basically on a new line. So, in that sense, it's a lot like a paragraph, but it's more for structural purposes as opposed to just content. And then if we drill down in this second div element and into the first p element, that's where we put that span. Here we see that span. And in this case, it's on ipsum. But the text is still on the same line. So this is what I mean that it is an inline element. It doesn't put the content on a different line. It just keeps it in line as it already is. And this is useful when you want to supply style to individual things within the text, that is some thing else we will be looking at in later. So in this lesson I introduced some very important concepts. The first is that we have semantic HTML, and then we have more generic HTML. We also talked about attributes, and more specifically the id attribute. An id attribute is a way that you can provide a unique identifier for a given element. And you can use an id attribute to unjust about any the element. We talked about div elements and span elements, how they are used to add structure to our document. And we briefly discussed the difference between a block level element and an inline element. We could spend a lot of time talking about HTML, the different elements that they have the different attributes, but we need to get moving on into style. So in the next lesson, I'm going to show you how you can add style to your document so that you can style your elements