Do you know how to change the browser tab title? Because we want to have the appropriate tab title that we want to have on each tab. But how will we do it?

Previous Lesson: Lesson 46: Beautifying the Blog’s NavBar

Do you know how to change the browser tab title? Because we want to have the appropriate tab title that we want to have on each tab. But how will we do it?

First things first, what is the browser tab title? Well, when you go to the localhost:8000:

That’s this here:

Yes, the Album example is the title of this tab. And we have this tab title all over our portfolio website. But we don’t want that, don’t we? We want to have the appropriate tab title that we want to have on each tab. But how do we change it?

How to Change the Browser Tab Title to ‘Home’

On our home.html, that’s this here on the title tag:

Yes, that’s the browser tab title. All we have to do is change it to Home since the page for this browser tab is our homepage:

So here on our homepage (localhost:8000):

This image has an empty alt attribute; its file name is Screen-Shot-2020-03-20-at-7.35.13-AM.png

Notice the change here after refreshing:

Cool! It’s that easy! Now, let’s do the same with all the other pages we’ve got.

How to Change the Browser Tab Title to ‘Projects’

Here on projects.html:

We’ll change this to Projects since this page’s browser tab is for our Projects page:

Nice. Let’s see here on the localhost:8000/projects:

This image has an empty alt attribute; its file name is Screen-Shot-2020-03-20-at-7.34.40-AM.png

Refresh:

Nice. One last browser tab title to take care of!

How to Change the Browser Tab Title to ‘Blog’

Here on our blogs.html:

We’ll change this to Blog:

And that’s because this page is for our Blog page. Now, go to localhost:8000/blog:

This image has an empty alt attribute; its file name is Screen-Shot-2020-03-20-at-7.35.01-AM.png

Refresh:

Nice! We’re done changing our browser tab title to the appropriate title that we want! We should probably commit this change to GitHub:

Nice. On the next lesson, we’ll clean up the blog template from Bootstrap that we now have for our Blog page.

Next Lesson: Lesson 48: Blog Template Cleaning

This article was written by Zeddrix Fabian

Zeddrix Fabian became one of Jehovah’s Witnesses on February 21, 2016, and started regular pioneering last March 2020. His goal is to be able to volunteer at Bethel. After going to both private and public school for 10 years (Grade 1 to 8 in private; Grade 9 and 10 in public school), their family tried out homeschooling when he leveled up to Grade 11 last 2019. (Continue reading on the ABOUT ZEDD menu.)

One thought on “Lesson 47: How to Change the Browser Tab Title”

Leave a Reply

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