HTML Tags Explained, Simply


When you want to learn how to code, HTML is a great place to start. Understanding basic HTML tags and how to wrap content in them is fairly straight forward. To give you some perspective, I assisted in teaching a group of middle school girls how to code with basic HTML and they where able to make it through the beginner course. I’m not saying it was a walk in the park for them, but I am saying that it’s simple enough that you don’t need a higher education or previous experience to understand the basics of HTML.

When you think about it, that’s pretty cool! That means YOU have the potential to create a website :D Exciting!

So how do we get started?

funny cat

Cat Tip!

Wait! Before you get started on your coding journey, I have some advice. Whenever you’re practicing or learning new HTML/CSS always manually type everything! Copy/pasting code won’t help you memorize that information. Manually typing out the code will help you memorize not only the HTML/CSS names, but also helps with memorizing the general process of writing code so you don’t make a simple mistake, like missing a < or > sign in your HTML.

Understanding What Makes Up HTML

HTML is comprised of ‘tags’. That’s our technical term for the content type of your text that is wrapped in greater than and less than signs (< and >). Your content type is sort of an abbreviation, describing what the content inside actually is. For example, let’s say you wanted to create a heading on your website. With HTML there are 6 types of headings. There is a “heading 1”, which is the most important heading on your site (usually your site name) and there’s a “heading 6”, which is the least important heading. When you translate “heading 1” to HTML, you get “h1”.

As you can see in the example below, the “h1” content type if wrapped in those greater than and less than signs. That’s very important!! So these ‘h1’ content types wrap around the actual text that we want to display on the website. In this case, our text is simply the word ‘Heading’. The final thing to remember is the closing content type. After our text ‘Heading’ I have another ‘h1’ wrapped in greater than and less than signs. I also added a slash ( / ) before the type name to signify that this is the closing of this section of HTML.


With that example you can create a lot of other HTML tags! Let’s try another example. Say you wanted to create a paragraph on your website. If you Googled “HTML tag for paragraph” you would find out that the correct content type for that is a very simple ‘p’. So the HTML for that would look like this:

As you can see above, I’ve enclosed my ‘p’ content type in  <  and  >  signs and my closing ‘p’ has a slash ( / ) before it. You can do this same thing for all types of content. Check out this list for more HTML types you can use in your website:

Are There Exceptions to the Above Example?

The above example is what we’ll call a ‘wrapping tag’ because it has a beginning ‘h1’ and a closing ‘h1’. However, there are a few HTML content types that DON’T have a closing HTML content type. This HTML is called a ‘self closing’ content type. There aren’t a lot of them and there are most likely only 2 that you’ll really need to know about.

The first self closing tag you’ll need to know is for adding images to your website. The HTML name for an image is abbreviated to ‘img’. The reason that these are ‘self closing’ is because an image tag doesn’t contain actual text so it doesn’t need to fit that kind of content inside of it. Instead, we define ‘attributes’ inside the HTML.  What on earth are ‘attributes’ you might ask? Think of ‘attributes’ like a way of defining information that our HTML tag needs to display stuff on the website. Similar to how HTML content types work with ‘image’ translating to ‘img’, attributes use shortened words to define content.

In the below example you can see that we have a ‘src’ attribute. Now ‘src’ is an abbreviation for ‘source’, which is the source of where our image will be coming from (the image’s url). So when we’re creating our image HTML, we start with our beginning ‘<img’ BUT then we add a space and type out our ‘src’. To define what is in our ‘src’ attribute, we add an equal sign and wrap our content in quotes. After our URL is wrapped in quotes, we add an additional space in there and end our HTML image with a closing slash ( / ) and greater than sign ( > ).


If you’re confused on whether or not to use ‘wrapping’ HTML or ‘self closing’ HTML, check this list: and click on an HTML tag to see an example of how it is used. The second self closing HTML that you may run into is the input HTML tag. Going into how that works is a bit beyond this tutorial, but you can see an example of how to create one here.

How to Start Your Website

Now that we understand how HTML tags are made, let’s start with the basics of building out a website from scratch. Before you get started with editing code, I’m going to recommend that you download Notepad++. There are other more fancy code editors out there, but I’ve always liked Notepad++. You can download it here: by clicking on the download tab on the left.

Once you have Notepad++ open, click on the File menu and choose from the dropdown “Save As…”. A “Save As” dialog box will open up. Navigate to where you want to save this file and name the file index.html . Make sure to double check the name so that you have the .html on the end of the file! We’re calling it “index” because that’s the name of the HTML file that should be used for the homepage of a website.

If you navigate to where you saved your file, you’ll see that the “index.html” file has an internet icon. Google Chrome is my default internet browser, so that’s the icon that shows for me. Your computer may show a different icon depending on your computer’s default browser. If you double click on that index.html file on your computer, your internet will open up a blank webpage. Why is it blank? Why, we haven’t put any HTML in there of course! ;)


Let’s Write HTML!

The first thing we need to add to our HTML file is our DOCTYPE. What’s that? It’s an instruction to your internet browser, telling it what version of HTML we’re going to use. It’s important that this line of code is at the very top of your HTML file. This DOCTYPE declares that we’ll be using HTML5. So in your index.html file, add this line of code:

Now when you write HTML, I want you to picture putting things in boxes. The very first box that your website will have is the <html> box. We start our box with an opening html ‘tag’ and end our box with the closing html ‘tag’.

Why are we picturing a box? Well, because with HTML, you will be putting HTML inside of more HTML, inside of more HTML, and so on.


So in other words, inside our <html> ‘box’ we’ll be putting other ‘boxes’ of HTML stuff inside of there. You can see in the below example that I added a <head> box and a <body> box to my <html> box. They’re ‘nested’ inside of the <html> box. The ‘head’ and ‘body’ boxes site INSIDE the ‘html’ box. Another way of thinking about it is that our ‘html’ box is wrapping around our ‘head’ and ‘body’ boxes.


What does that HTML even mean?

The first outer box (our ‘html’ box) is simply declaring the starting point of our HTML. Inside of there is our ‘head’ and ‘body’ HTML. The ‘head’ box is used for storing information about your website. It’s important to understand that NOTHING inside your ‘head’ box will show up on your website. The only content that goes in here are meta, script, title, and link HTML tags. They tell your website where your CSS file is, where your jQuery is, and other various information.

The second box below that is your ‘body’ HTML box. This is where all the content you want to show up on your website goes, such as h1, p, img, etc (headings, paragraphs, images).

IMPORTANT: Take notice that I didn’t leave space between the ‘head’ and ‘body’ boxes. That’s because no HTML should ever be written outside of those boxes (well besides the ‘html’ box). Any future HTML you write, must be inside either the ‘head’ or ‘body’ of your HTML!

Now that we understand all of that, we can type out the following HTML into our index.html file:

Notice how I indented the ‘head’ and ‘body’ boxes? I do that so it’s easier to read my code. As you write more and more code it can be difficult to read if it’s all aligned to the very left side of the screen. When should you indent? Every time you create a new box in your HTML. For example, let’s say I wanted to add a h1 (heading 1) to my index.html file. It would look like the following:

Adding a paragraph tag to your HTML? Looks like this:

To wrap this tutorial up, let’s add something to our ‘head’ box. Ever wonder how this text gets into the your internet browser’s tabs?


That information is actually defined with HTML in your ‘head’ box with the ‘title’ HTML. You can see an example of that below:

Notice in the above code how I wrapped the words ‘These Paper Sites’ in ‘title’ tags but didn’t put each of them on their own line. I put the h1 and p HTML on their own lines to show you how the HTML wraps around the text, however, when the text inside is short, it sometimes makes more sense to just keep everything on that one line rather than indenting everything.

Remember that index.html file we had open? If you double click on that index icon, your internet browser will open up your website!


Ready for some practice?

Now that you have the basics down, it’s time to add more HTML to your index.html file. Use Google if you get stuck!

  1. Add an image
  2. Add a numbered or bullet list
  3. Add multiple paragraphs
  4. Add a heading 2 to your site
  5. Add another image to your website

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

One thought on “HTML Tags Explained, Simply