HTML code on a computer

HTML Primer Part 2 – Tag Structure


In the next series of our html primer we are going to talk about tag structure. Once you master the basics of the way that HTML Tags are structured then writing HTML should be a simple affair. Lets get started?

The basics.

Lets start by showing you an example of a basic html tag and how its structured. Below is a simple example of a paragraph with html tags wrapped around the text.


This is an example of a paragraph with HTML tags wrapped around it. You will probably see that there is one tag at the beginning and one at the end.
Normally when a tag is used to wrap around an element there is an opening and closing tag. This is set to tell the browser when to begin and end the paragraph.

Do you notice a difference between the opening and closing tags? The backslash is inserted after the opening angle bracket. This tells the browser that this is a closing tag. This is very important addition as it tells the browser when to start and end the styling.

You can also swap out the text between the < and > to create different styles, so for example if you want to bold a piece of text you can do so as follows.


This is bold text 

or italicise a piece of text


This is a text in italics

You may be thinking when looking at the above example if I can use more that one tag at a time, yes you can.
If you go back to our previous paragraph example?



This is an example of a paragraph with HTML tags wrapped around it. You will probably see that there is one tag at the beginning and one at the end. Normally when a tag is used to wrap around an element there is an opening and closing tag. This is set to tell the browser when to begin and end the paragraph.


Do you see the bold text in the paragraph? This is called nesting which means that you have a set of tags in another. Just remember that it is important to get the sequence correct.

If you have a look at the following example.


This is a line of text that is bolded and italicised

Did you notice how the closing tags are in the wrong order compared to the opening tag? The correct structure is shown below.


This is a line of text that is bolded and italicised

Single Tags

As in many programming languages there are often a few exceptions to a rule and in HTML one exception is the single tag. Earlier in this tutorial we discussed opening and closing tags, but if you have an object that doesn’t need to be wrapped around text or an image it is often created using a single tag. A classic example of this is the horizontal rule as shown in the next example.



As you can see from the example this does not wrap and object but stands alone. This tag creates a solid line that can be used to break a piece of text into separate sections.

So to end this tutorial here is an example of all the tags we have used today and how their structure defines the makeup of the page


This is an example of a paragraph with HTML tags wrapped around it. You will probably see that there is one tag at the beginning and one at the end. Normally when a tag is used to wrap around an element there is an opening and closing tag. This is set to tell the browser when to begin and end the paragraph.


This is an second example of a paragraph with HTML tags wrapped around it. You will probably see that there is one tag at the beginning and one at the end. This includes a section that has a word that is Bold and italic This also has a section that is both bold and italicised.

I hope this gives you a little insight into how HTML tags are structured. Let me know your thoughts in the comments below.