Hello, in this HTML Crash Course video, we are going to cover basic tags, we're going to cover some of the most fundamental tags that you will use in any social website. The first one we are going to cover is the div tag. This is I would say, the one that you're going to use the most. This is the one that I was I I definitely use the most. So yeah, it's it's a very basic and important tag. So to do a div tag or do any tag, remember, less than the name of the tag greater than, than to close the tag, you do less than for slash name of the tag than greater than with Sublime Text, the editor that I'm using, it actually autocompletes it.

So what is a div tag, a div tag, essentially, actually, before I like explain what it is, I'm going to put some text in it I'm just going to say, div tag, save this, go to my web browser refresh. As you can see, we've got some more code or some more text. And it's a div tag. Yeah, it looks the same as the previous one you might be thinking, and you're right, it looks virtually looks the same. What happens if I were to put some text here, input text there? Save that refresh?

Why is that on the same line as this because on a separate line, technically, why is this neither different lines have clicked enter, you see me click enter now. So really, should this not be on a separate line, unlike something like Microsoft Word or any sort of word processing, that's not the way works for you to pour it on a separate line, you need to use a specific tag, that tag is called a great rule. So if you do br for slash greater than so you must thinking, Okay, this is a little different to the tags we've seen, because so far, all the tags, except for the doctype. Every tag we have seen has a starting tag and a closing tag, where as this BR tag, let me just save and show you what it does. As you can see, just put anything after that on a new line.

So why does this have a four slash and not have essentially a closing tag and a mean a starting tag and a closing tag? It's because it's, it doesn't have any content. Certain tags don't have any content within it inside like in between tags. So this is the way you wrote him. You should not write a tag that doesn't have any contents. Like as you can see it messed up because he couldn't understand why you would want to close it like this.

You should not do that. You should either do this or this. Both are valid. In html5, a lot of people you will see will do tags like this. I prefer to do it like this because when you use something like XML, they don't allow you to have tags there aren't close. This is just a good habit to get into.

So even one of these are valid for modern web development for this is just my personal preference. But let's get back to the div tag. Why did this put this text on its own line. The reason is, the div tag has some styling pre applied to it. So if I go to inspect, I go to div. And the div tag is displayed as a block element to the block element and then the inline elements block element on their own line.

So when you put a block element, you'll just start on a new line and anything thing that comes after that, whether it's block or inline will be on a new line as well. Any inline element or any inline code or any inline output, I should say, is on the same line as the previous code, assuming that inline and not block level. So let me show you. Essentially, the div tag with out block level display. So what you do if you put ban I'm going to call less than one. Copy and paste this to save that refresh, and as you can see, the span tags are on a separate line because the div tag with the div tag text is a block level element but these two tags were in line.

So if I were to inspect this, as you can see, there's no default display because by default, it's all in line. So let's show you some more beautiful tags. We've shown you the the break wall tag with the brake line. I want to do another one of these just to separate it up a bit, but we didn't want to separate this, we just use a br tag. The next tag I'm going to show you actually before I show you another one, let me just show you how this would work. So voted for a span tag here.

Save that refresh. And as you can see, this inline element is now on its own row. So let's go back to sublime. And the last tag I'm going to show you is the p tag. Pay. And in here, I'm just going to put power on Graph.

That's what the p tag actually stands for, generally used for paragraphs. You might be thinking, can you just have paragraphs in a span tag or a div tag or no tag? Yeah, you can use just p tags or designed with paragraphs in mind. Let me show you what they like. So if I refresh, as you can see, it's on its own line. And it's actually got a gap.

It was a block level element with its own extra storyline. So if I right click inspect, as you can see, if display block, hence why it's on a separate line. We've also got a margin, we'll cover margins in a, it's going to be in a separate series. This is the HTML crash course, we're going to have a crash course for C F, F as well. But margin essentially, is just the other face and padding. padding is its own thing, but what margin does if you have the content of the element, so you For example, it adds some extra space outside of those contents padding, add space within the content.

That's the best way of explaining it. So certain tags will have extra styling. That's it for this basic tags Crash Course. We will cover more tags in future videos. If you have any questions, feel free to post them on our education platform. So no learning.co.uk I hope you like this video.

And as usual, thanks for watching, and I hope you have a great day.