Hi, today we're gonna talk about some of the tags that you may find extremely useful as you go and try to add blocks of code and simple snippets of different things to your web page. I know that it can seem overwhelming how many tags there are in HTML5. So today, I'm going to try to break down some of the most useful ones. Now, I realize it may seem overwhelming as I said throwing all these elements at you. You're not supposed to memorize them all by the end of this lecture. Instead, I'm really just trying to give you a taste for what's out there so you can start playing with your own code. So, one of the first things you need to decide when you're coding is, which tags are you going to use? There are the generic kind of what we call block tags, paragraph and div, that break your code into nice sections. Paragraph is kind of self-explanatory, and div gives you a way to put groups of content together. But the problem with both div and paragraph is that they're very generic. So we want to move over to the idea of using these semantic tags, such as header and nav, footer and figure. And we talked about those in an earlier video. Some of the other block tags that you may not be familiar with are listed here. The first one are the containers. Containers are simple things where you can put like-minded code together. So you might have an article or an aside, a section made. Again, they almost seem generic in their names. But as you grow more comfortable, as you're designing your website, you can start to see oh, this isn't a generic section. This really is an aside. The next block tag is hr, or horizontal rule. And it's really an interesting idea because it doesn't contain any text at all. Just to remind you, block tags are tags that have the display block. It means it forces a new line above and below. There's never going to be anything next to it by default. So our hard rule will just put a single line across your page, simple yet very much used by many people. The next one is address. This will go ahead and be a block tag, and it doesn't format your address any differently than other text. But what it does is, it allows screen readers and other assisted devices to quickly and easily find if they're looking for your address. <blockquote> will be another block tag as well as details. Now the details tag is very interesting in this kind of quote you get into work. And what it does is elastic hand having drop down open and close idea with your text. Now, just to warn you it is not implemented in Firefox so if you're someone with Firefox who tries to run it its just gonna kinda default to this open idea. Alright, so there's <hr>, <address>, <blockquote> and <detail>s. I've told you what they were. My guess is, you still have no idea what they really do, so let's take a look at a quick example. So here would be an example of the hr element. It's just a simple line across the screen, nothing too fancy, but very recognizable. The next one, the address element. In this case, the browser does italicize what's inside the content. I had to put my own end line here, but otherwise it just looks kind of italicized. But you can't be sure that it'll be italicized on every browser. It's really specific to Chrome, Firefox, Safari et cetera. But the important thing to know is that there is semantic meaning here. Here we have a block quote, and what block quote does, is it lets, indents the code and kind of lets people know that there's a quote that you're look at. One of the things that I put inside my blockquote, was I put in a cite tag, so someone can know right away that I cited Napoleon Hill. So if someone's doing a search for Napoleon Hill, this is going to up the chances that a search engine will link back to your page. The last one, detail, is kind of combined with a summary tag. So I'm going to go ahead and click here and you can see that it opens and closes. So the default is to have it closed and then open up when someone clicks on the little arrow icon right here. Now one of the things I mentioned is that it's not supported on Firefox. So if you're looking at this page on Firefox, by default you're just going to see it in the open context. So let's go ahead and go back to some other tags that aren't block tags. We're gonna do some inline tags. Again remember, inline tags just means that you can put it into the page and go all in a line one after the other. You don't need to break things up. So span was the original inline tag for plain text. You would put span around some code, and then you could go ahead and style it any way you wanted to. Now, in addition, we have cite, abbreviation, time, code and then the subscript and the superscript. Now, if you're watching closely you may have noticed I left a little typo after abbreviation there. So make sure you go ahead and put in the less than or greater than sign. But let's look at examples of this code as well. Here I have my inline elements. The site basically makes it easier for people or bots to search your code, so I went ahead an put this code right inside a site tag. Now, again, this particular browser happened to style it differently, but that's not always going to be the case. Another new tag that has come along recently is the abbreviation tag. So if you notice, right along here, I've included abbreviation inside the box. Now, if you can, watch what happens when I put my mouse over the Sunday, Monday and Tuesday. As I hover over it, it's very small probably on your screen, but you can see that the expanded version of the abbreviation pops up, Sunday, Monday, Tuesday. Now, from an accessibility screen point, it can actually go ahead and read the expanded version. But even for people who aren't using screen meters, I actually find that you need to do something to let people know that hovering over is even an option. Most people wouldn't think about that. The time attribute is another one that is just inline and most of us won't even know it's there but it allows you to give extra semantic meaning. So the party starts at 9 PM. It makes perfect sense to us, but the party took place on New Year's Eve. Notice again, that's actually a time, even though it's not our typical numeric time, it is a time. By putting in different time tags, it's also much more likely that if someone is accessing your site on a mobile phone, it'll pop up as knowing that it's an eight. Sometimes you would like to be able to identify parts of your code as code fragments. This happens to me all the time because I'm a computer scientist. So the code elements tend to be displayed in different font but it's not always the case. But code is just a nice way to break it up and let people know what is this crazy stuff people are typing? Oh, it's code. It's not supposed to make sense. Finally, the last two are subscript and superscript, and these are used to create, a lot of times, mathematical formulas. So, you can see here, I've raised up the three, and I've lowered down the two. So, I've given you kind of the general block tags, the general in-line tags that people use. And there's other tags that people use quite often that you may see when you're looking at their pages. The issue with these tags is the thing when I say need more. It's really weird to use these tags unless you're also incorporating them with JavaScript or some other elements that you probably don't know a lot with yet. So these include the button, the <meter>, <progress>, <iframe>, <bdo>, which stands for bidirectional orientation, and then the <map> attribute along with <area>. Now, people really like these, but they tend to need JavaScript. So I'm gonna show you a quick example. But I'm not going to include the fancy addons you would need to use then. Cuz that's not what this course is about. Right now, we're just learning these tags. So let's take a look at them so you can see what they look like visually and understand that there not actually functioning yet. So, my special tags that need more, I called it. Little word that you might not even be able to see it because it's so light in screen but you can see I've included some open and close buttons. They don't do anything but they look really nice. So go ahead and put them in if you want but it may confuse people that there not actually operational. The next one is meter, and you've probably seen this before. Basically how this one works, let me actually bring up the code for this one. You can see for the meter one I've actually gone in here and put in meter minimum value of zero, maximum value of 100 and my current value is 50. So you can see it's colored in until about pretty much half way through all right? Same here with the next one, I've set it to 25% Here I just want to show you that it doesn't always have to be 0 to 100. You can start at 5 and go to 10, and I've set it to 8, which is 60%. So that's kind of how the meter works. Progress is very similar to meter in that it shows kind of a proportional value. Now, with progress, you're expecting that you're doing something where eventually you'll get to 100. So you've taken the surveys before where as you filled in, the progress bar fills in. Again both meter in progress tend to use JavaScript to update them. The next one I was going to show you is iframe. Iframe is used to nest content in each other. It is not equal well supported by all the browsers, so you really want to explore who can use it and the best way to use it. And you would definitely want look into options, such as height and width. So right here in my iframe, I've said hey, let's go ahead and link back to my page. And it puts my whole web page inside this little block of the page. Down here, I went ahead and said hey, let's do that iframe again, but this time let's go ahead and have it take up a much bigger width, all right? Now, one thing to notice is I can still click in here. I can do all the things. It's as if I have a webpage inside of a webpage. The last one. Let's go down here. I want to show you is a bidirectional orientation. And this one would be something you would use if your particular language tends to not just go from left to right and instead goes right to left. So bidirectional orientation take either rtl which stands for right to left or ltr which stands for left to right. And you can go ahead and put in the text. So here is my going from left to right and here's that same thing going right to left. I didn't really give examples of the map with the area. Because, again, this is one where you would really need to understand JavaScript to really embrace what it's doing. So I realize I went over a lot of tags with you just right now. And some of the code, you probably understood and some of it, you didn't. But all of the code is online, so you can go ahead, you can download it, you can play with it, you can change it. But as you code, you're not supposed to go in and be like, oh, I'm going to try to use every possible tag I can to show how much I know about HTML. No, use the most specific tag possible. Whenever you're not sure go and ask somebody else say what would happen if I'd trying to look at this page with my eyes closed, what I understand what's going on. The second thing you need to understand is that sometimes your tags just don't work. Now, there are two reasons that your tags may or may not work. The first one might just be that you have a syntax error. So, make sure you run your code through a validator, and that will help you find places where you haven't closed tags. This is especially important if you nest tags, meaning you put one inside the other. The other thing you really want to do, is you want to run your code in multiple browsers. So, even if your page looks great when you're running it in Chrome, make sure you check it out on Firefox. If it looks great on Safari, make sure you check it on Chrome. It's really important that you make sure that your pages can be reachable to the greatest number of people possible. And really, the only way you can do this is by keeping your code simple, succinct, and you're always validating. Thanks.
