Ranking in HTML

Transcript

So far, you know the H1 and P tags. This is a great start, but it takes more than that to complete a web page.

Let me show you mine. 

I'm really into helping animals find loving homes so I have built a pet adoption website. It is called Christy’s Pet Post. Pretty cool huh? 

Let’s go through it. 

I have the title of my page, and a small paragraph that describes what my webpage is about. Next, there's a table of contents with links that my users can click to send them to specific sections of the page. 

These sections feature different pets that need homes. Each section includes a picture of the animal, and a short description at the bottom, there's a list of people you can contact to help you get more information.  Finally, there are some details about when the web page was last updated.  

You don't have to make a webpage about pet adoption. You will have a couple of options to choose from as practice exercises and in later lessons, you'll be able to make whatever you want. 

However, I'm going to show you how I ended up with my page, step by step, so you can learn more tags and apply the techniques to your own project. 

Lets go back to an earlier stage in my project. 

You can see that I have two headings

 Christy's Pet Post, and Our Pets. 

I also have two paragraphs, one below each heading.  You might have noticed that the first heading is slightly bigger than the second. This makes sense. The main heading, what my whole page is about should stand out a little more than the other headings.

Our pets is just one part of the whole web page, but it's a little smaller.  To make this happen. I put Christy's Pet Post in heading one tags. And I put our pets in heading rank two tags or H2. 

This is how I begin to divide the page into sections. Dividing a web page into smaller sections helps users find the information they need quickly. 

I've added another H2 Our People that describes the people who volunteer to work at Christie's. 

There's actually more than just H1 and H2. Headings go all the way down to rank six. 

As you learn more HTML tags, you'll be able to structure the information on your page better.

Structuring your HTML helps other coders easily understand your code. It helps you organize the information on your web page, and it makes it very clear why you added any piece of text to your page. 

So there, it's easy to identify the title of my page, which should give my users a very general idea of what my page is about. And my users can also see where to find more information about our pets and our people. My sections are looking good. 

We'll talk more about tags in the next lesson. See you soon!