Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:48 minutes
  • Overview
  • Transcript

2.3 HTML Tags

In the last lesson you learned about HTML elements. In this lesson you’ll learn how elements are created using HTML tags, as well as the difference between opening, closing and void tags.

2.3 HTML Tags

Hi welcome back to start here, learn HTML basics. In this lesson you're gonna learn what HTML tags are you're gonna learn how to use them and you're gonna learn the difference between a couple of different types of tags. Now so far you've learned that HTML is a type of markup language that you use to give instructions to a web browser. And you've learned that websites are made up of multiple HTML elements. Now, the way that you create HTML elements is by using HTML tags. With the previous lessons you've mostly just been watching and getting a grasp on the theoretical foundation, but for this, I want you to follow along with what we're doing here. Now we mentioned earlier on that an HTML file is just a text file with a certain type of file extension, .htm or .html. So that means you can edit an HTML file in any text editor, so it can be Notepad or anything else. But it's gonna make your life a lot easier if you use a custom built card editor, like the one you see on the left side of your screen here. This one is called Sublime Text 3. And you can download it here if you want to use the same editor that I'm using. And one of the main reasons that it's gonna be easier for you if you use an editor like this is you can see that we've got multiple different colors in the text here. If you just use a plain text editor, everything is just gonna be black text on a white background. But with a dedicated coding editor you'll have highlighting and it will help your code to be more readable and easier to follow. Now as for the code that you see here this part here and this part here just ignore I don't want you to actually worry about trying to make your results show up in a browser here. I've just got this up here as a demonstration so you can see what we actually working on as you step through. But what I want you to really focus on is just getting the hang of working of working with tagged typing them out and seeing what the syntax is like that you gonna be working with. So just grab yourself a download of Sublime Text 3 and just go to File > New File and then just type into the empty space here. That's all you really need to do to follow along with what we're gonna be doing. All right, now, most HTML elements are made up of two tags. They're made up of an opening tag and a closing tag, and then you'll put some content in between. Those opening and closing tags. Now let's look at an example. Let's say we wanna make a paragraph of text, in order to do that the fist that you need to establish is what type of element we want to use. Now I'll give you a reference for where you can look up all the different types of HTML elements that are available, but in this case I'll just let you night that a paragraph element is created by using a p tag. Now all HTML tags are wrapped in less than signs and greater than signs. So to create our paragraph element, we're gonna start with an opening p tag. So insert a less than sign then we'll type in a p to create a p tag and then we'll rap that off with a greater than sign. Now that is our opening p tag. Now we need a closing p tag. Now, the only difference between an opening tag and a closing tag is a closing tag has a forward slash inside it. Now, this is gonna look a little weird, because Sublime Text has an auto complete function which just makes it quicker and easier to write your code. So we're gonna put in a less than sign. And this time we'll add our closing slash and then you'll see Sublime Text finish off the rest of the tag. So by the opening tag and the closing tag have the same thing in them, that the peak to create the paragraph element. And then the only difference between the two is this forward slash here that says this is where this element ends. And then you put some content in between the two tags to finish creating your element. And there's a paragraph element up here in our website. And once again, don't worry about trying to make your code show up in a browser just yet. We'll go through that in a later video. So let's try another one. This time let's create a large heading and we're gonna create an h1 element. So use less than sign and then we'll add in our h1 and then we use a greater than sign to finish that opening tag. Now let our closing h1 tag with a less than sign a forward slash and then we're just using the same thing again he had another h1 and then another greater than sign and then in between the two tags we add our content. Now whenever you have an opening and a closing tag you're going to have something in between those two tags. There are some exceptions, but don't worry too much about that right now. Generally speaking the rule is whenever you have the opening and closing tags, you need to have something in between them. However there is another type of tag called a void tag a void tag just sits by itself. It doesn't need to have a closing tag, and it doesn't need to have any content in between tags. An example of this is an image tag. Now in the same folder that I have my index HTML file that I'm working on, I also have an image, dog.JPG. I'm gonna create an image element using an image tag to load that image into this site. So just like before, I'm going to have a less than and greater than sign and inside that I'm gonna have the tag that you need to use for an image element which is IMG. And now I just need to tell the system where the image is that I want to load in and that is my completed tag. Now an image tag is different to text we just looked at because it doesn't need to have a closing tag. You don't actually ever need to do this. This closing tag does not exist in valid HTML, so get rid of that. Now, to save that so you can see the result in the web page. And there's our dog image. So now some of the other tags you see in this code might start to make more sense. So we've got opening and closing tag got a title element here, we've got opening and closing head tags, opening and closing body tags ppening and closing HTML tags, and we're going to go into more detail on what each one of those tags in those elements is responsible for in a later lesson. So when you know that you wanna create a certain HTML element, go and find out what its tags are Find out what the text is that you need to include in the tags. Find out if it has opening and closing tags or if it's a void tag that just sits by itself. Now you will have noticed that when we created our image tag, we did something a little bit differently. With that heading in paragraph tags, all we did was just include the basic characters that we needed to specify what type of element we were creating. But with our image tag, we also added this text here and that's because a lot of times just the default tag by itself is not gonna be enough to give you what you need. If this image tag didn't have this extra text here, the browser would have no way of knowing which image you wanted to show up. Now what this is is an attribute. So in the next lesson you're gonna learn about what HTML attributes are and what the effect of using them with different elements is. I'll see you in the next lesson.

Back to the top