Hey this is Sasha. Welcome back to another training video on HTML.
Today what I want to look at is some basic HTML tags or very common tags that you’ll probably use throughout building your website or web page.
Basic Tags
If we take a look at our basic website right now, we don’t really have too much happening. In order to start building this out, you need to know how to write some basic tags because if we look at our current website — and here’s what I have. I’m just going to show you right here at the very top, you could see there is nothing happening. What I’ve done is just tweak the refresh timer to go every five seconds so I won’t even have to refresh it, but you’ll be able to take a quick pick on this periodically.
So in either case what we’ll do is I’ll just go ahead and hit tab a few times and I’ll just share with you a few tags. These are just some common tags that you’ll learn to use from time to time. I’m going to, at first manually write these out for you, so that way you’ll see how they work and how they operate and then eventually you can use short cuts to be able to write these things out. The first tag is the heading tag, or in other words known as the H1 tag. There’s also H2, H3, H5, and H6. They’re all in different levels or priorities.
The H1 tag is the biggest. It’s also one that search engines are looking for. It’s more important, or there is a higher priority. So if we say, ‘Welcome to my Cooking Website’ and then I’ll go ahead and close that with a slash H1, you can see how I went ahead and did that. So I’ll just go ahead and hit control S to save this. Now if we go ahead and take a look at this website, you can see nothing is happening right now, and boom once it refreshed it, there it is, “Welcome to my cooking website”.
I’ll go ahead and start adding in some more tags. Again, I can start with H2. I could say, ‘here is the menu’ and then I’ll close it with a slash H2 and you noticed right when I hit the slash, Sublime text automatically closes it for me. So it knows what I’m looking for. Again, I’ll go ahead and hit control S. Go ahead and go back at looking at my page right here. It’s going to refresh in one second and there it is. Here is the menu. You’ll see that right there, H1 is very big. H2 is smaller. So let’s just take a quick at the remaining ones, just so that way you can see it.
My Cooking Website Welcome to my cooking website
Here is the menu
Here is heading 3
Heading 4
Heading 5
Heading 6
If I go with h3 and you can see I can now do it a little bit quicker. Here is heading number three. I’ll go ahead and do the same thing with h4 — heading four. Then you can do H5 — heading five and H6 –heading six. I’ll go ahead and save that and as you take a look at the page, you can see here’s what it really looks like. They’re a lot of headings and you can see they go from largest to smallest. If I go back to my page, hit F5 to refresh you can see there is the HTML code that we wrote in the source file.
In either case, looking at this you can see how it really structures the heading pages. These are typically things you’ll use as headings. Maybe like titles, blog posts, this is what they are and if you’re doing a WordPress site, knowing this is still fairly important. Let’s go back to our code and just take a brief look at some of the next steps. So we’ll add some more lines here so that we’ll have some space. You can see I can continue to scroll further and further down.
P Tags
Now what you may want to do is add some spacing under the menu. In here you can say P. P is a paragraph tag and I can say, ‘This week on our menu, we have a great selection of fish. Here are the options:’
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.Here is heading 3
Heading 4
Heading 5
Heading 6
Then, I’ll go ahead and close it with a slash P tag, or a closing P tag. Notice these empty spaces. Remember this empty space will not count in our post simply because it’s just reading the HTML. I’ll go ahead and save this. If you’ll go ahead and review this, give it a second to refresh and there you go. You can see the P tag, which is the paragraph tag, went ahead and we added it right there. And there is part of our code.
So you can see I just inserted that little paragraph right there. You can, of course, make things — you know in a larger paragraph, just like I had the dummy text earlier — so let me go ahead and put that dummy text in there, and I’ll go ahead and save it. Now as we go back and review our results, you can see there’s our paragraph. If I wanted this in two paragraphs, I could go ahead and add a slash paragraph tag here and add another paragraph tag right there at the beginning and now we’re in two paragraphs to read the code. Let’s add a lot of extra space here. Control S to save, and then go ahead back up to test it, review it. And you can see that’s what it’s looking like.
You can see it’s coming together as far as our website goes. You can see these are just some basic tags to get you started. The other thing that you’ll probably want to do is go ahead and potentially learn how to add spacing. So, for example, no matter how many spaces I go ahead and add between these two paragraph tags and you’ll see that right here as I go back. And you’ll see it’ll refresh in a second. If I go here, even though there’s a lot of spaces here, there’s still only one space right there.
Line Breaks
They’re still just one space. So how do I continue to add more spaces? No matter how many I add, it won’t go there. Because remember, the code gets compressed that the reading — the browser is reading the code, so the way that you do this is called a BR tag, or a breaking tag. So here you have a break in the space. So, I’ll go ahead and show you that if I go ahead and add one of these, and hit save, you can go over here and you can see it’s added an extra space.
Just to make this example a little more clear, we’ll go ahead and add a few of these right here. I’ll just add about four of these and hit the save button, go back, and you can see there are about four tags right there. If I go here, refresh, there’re four spaces here and I can even go ahead and remove all these spaces and you’ll see that it does know a fact to my website. In fact, as a little bonus tip here, you’ll see there’s nothing that’s happened right there. And if I’ll go ahead, you’ll see this is compressed, but this is not.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.Here is heading 3
Heading 4
Heading 5
Heading 6
And in fact, some of the things that people do in order to really compress their website, so it loads a lot quicker is they’ll go ahead and compress all these codes in HTML into just a few lines so that way — because remember, the more lines that you have, the more space it takes up, and even though a website isn’t that big of a file loading time, but imagine you have millions or billions of people visiting your website like Facebook or something like that, it goes in to choose up a lot of resources.
So what they do is really compress the code and I can go ahead and compress it into something like this, and you’ll see what happens here that even though it’s a compressed code — and we’ll just leave it like this — I’ll go ahead and hit save. Bring me here at the top. Hit refresh. You see how it’s really compressed right? So it takes up a lot less space in terms of file size simply because of the compression. Then if I go and refresh, you can see the output that happens to this is no different. That is because it’s reading the code.
One other final thing you may want to do as you go ahead and work with some basic tags and some basic codes — I’ll just go ahead and undo some of these things — is if we get back to where we were, sometimes if you want to add some space here in between, let’s say, here is the menu, and let’s just say, I have kind of like an arrow pointed over in this way. I’ll go ahead and hit save then you refresh. There is my arrow, but I want this arrow to be a little bit to the right. How do I put that arrow to the right? I could add a bunch of spaces, but remember what we said about spaces. I’m going to go ahead and save that.
And as you take a look right here, you can see that by adding a lot of spaces, even though you may seal this space in the code, there is no space. It’s only going to read it as one space, right?
You can see right there, there’s only one space. That’s how the browser is interpreting things. So how do I do that? Well, there’s a tag called a non-breaking space. The way you write it as you type and   and then you add a semicolon to close things off, and you can see how it highlights things. Now if I go ahead and just add a few of those right there, hit save, and now we go ahead and do a quick preview, you can see how that shifts that over right there.
I can go back to my page and let’s just say I add a couple more. So now I’ve added a handful of more spaces. Again, file save, go ahead refresh right here, and as we do the refresh, you can see it added a few more spaces right there.
In either case, you could go ahead and do this indefinitely really, depending on how many spaces you need so I could go ahead and add a ton of spaces which it might just take it to the next line, but ultimately, when you look at this, you can see how it constantly shifts that over.
Now, remember, not everybody’s browsers are the same, your browser might be a little bit tighter, so that could shift it to the next line. In some cases, it might be on the same line. Do keep that in mind for the time being but knowing and understanding this little piece of code, non-breaking space is fairly important. So that’s kind of a baseline for basic tagging as far as the heading tags, paragraph tags, breaking space and the non-breaking space that you need to know in order to first get started.
Thanks for joining me in this training video. I hope you enjoyed this lesson.
Don’t forget to sign up to my newsletter list by clicking the button right up here. When you do, that way you’ll get notified as I release new training materials and get access to exclusive content as well as live classes that I host. Go ahead sign up to the newsletter.
