Dreamweaver tutorial 04: How to add

&

tag selectors.

Hi, Welcome,
My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: HTML Tag Selectors.

A Tag Selector sounds like code language but it’s very important for building a website. The over all term used is a Selector and as part of this tutorial we are going to look at various types of selectors. The first one is a Tag Selector. A Tag Selector is a very simple way of telling browsers and Google what the information on your page is. It will become clearer as we move along.

Our First Tag Selector

The first one we are going to look at is a Tag Selector called an H1. This is just short for ‘Heading 1’. This is telling people like Google (search engines) what the most important part of your page is. We are going to make this word here ‘Welcome’ our H1.

If I highlight it, by default its called a ‘P tag’ . A P tag is your body copy. Everything that is just normal text is called your P tag. And that is short for ‘paragraph’. So everything that you copy and paste in to Dreamweaver gets wrapped up in this tag called ‘paragraph’. What Id like to do is to change it from Paragraph to Heading 1.

You will notice down here that my tag here has changed from a P tag to an H1. You will also notice that some of the default has changed. It has gone to this big black new Roman size here. This is the default and we are going to look at changing that in a later course. For the moment, this is telling someone like Google what the most important piece of information on your page is, your heading, ‘Welcome’. We don’t want the word ‘Welcome’ because its not telling us anything about our website. In this tutorial we are going to look at creating a retro camper website. So for people hiring camper vans, the VW combo style. Instead of ‘Welcome’ we are going to put in ‘Vintage Camper Rentals’.

I've made sure that I’m really clear in my heading what this website does. Google comes along and says ‘ok, your H1, the most important piece of information on this page is the words 'Vintage Camper Rentals’. This will help you to rank well for this particular word. Having words like ‘Welcome’, ‘Welcome to our site’, will tell Google that the most important thing about this page is ‘welcome to our site’ and obviously it’s not really what you want to rank for. You want your site to be ranking for the correct key words. So we are going to change this one to say ‘Vintage Camper rentals’.

Now down here, I’ve got this one ‘Booking your camper rental today’. Now ideally you should have just one H1 per page. Let’s say you have another one that is still important, it’s more than just body copy. Instead of a P tag, its going to be ‘Heading 2’. So now you can see down here that it’s the Heading 2 tag. Now we have a H1 tag and H2 tag. And lots of P tags applied.

Code view VS design view

So we have been working in Design view. That’s a nice easy way to get started but you are going to have to work in code view as well. So we are going to work in split view. So it’s part Design view and part full code view as well. So what you will notice in the code view is this is the code that is being created for your website and design view is what the users see.

So I see this highlighted at the top here and what the code view sees is this

tag. Tags have an open and a close. You can see over here is my

. So in between these two, that these words are my Heading 1 and these words are my H2 (my second most important heading). You can see lots of

tags. Here’s my

Tag, it opens and closes here. P tag opens and P tag closes.

As we go through this course we will get better and better at looking at Tags and better and better at looking at code view.
Code view can look a bit daunting when you are new. You can continue to work in your Design view for now but you need to get comfortable working in your Code view too. Because what we can do is do things like this: Let’s say I want to change my H2 to a H4. I can highlight here and change it down here. And that would be nice and easy. But you need to be aware that you can change it on this side as well. Here’s my H2 my open and my close. Here I can change my H2 to an H4. But I need to remember to change my beginnings and ends as well. So my beginning’s an H4 and my end’s an H4. I can do one of two things I can click over here or hit the refresh button. They both do the same thing. But if I click over here, you can see that this is now updated to an H4. You can see down the bottom here in my tag selector. It tells me that it’s an H4. So I’m telling google that it’s the most important heading. There is no H2, no H3 and this is the fourth most important heading. So before we finish, let’s change this one back to an H2. So I’ve highlighted it all here, and I’ve changed it back to an H2. You will see over here in code view that it changes to an H2 as well.

Conclusion

So for your website, every page needs at least one H1 and this tells Google and the way it ranks that this is the most important information on my page. This helps to describe to google what your page is about. And this should be unique for every single page. So every page should have an H1 and this should be different from every other page. H2s can be important as well. If you’ve got a lot of text and you really need to clarify what the difference is between headings. There is not a lot of text on this page but this H1 is definitely required. H2 can be if you have a lot of text. When you get down to H4s, 5s, and 6s, there is not a lot of value in Google knowing what the extra headings are. Definitely an H1, maybe an H2 if you have enough text to warrant it. I wouldn’t worry too much about H4s, 5s, and 6s, they don’t help you in your rankings. They lack a bit of strength at those heading sizes.