How to Add Header in HTML

Hi! So, my blog for today is about "how to add header in HTML".
These are the Steps:

1. Start by adding the text content to your HTML in between your <header></header> tags:

    <header>
        <p>Hi, I'm</p>
        <h1>Tati!</h1>
    </header>
   

   You should be able to see this in your browser if you refresh the page.
2. Let's center your header text. To get the elements in your header positioned correctly, you're going to need to use CSS. To target specific parts of the CSS you're going to use the "class" attribute in your HTML file.
   Add the following code to index.html file:

    <header class="masthead">
        <p class="masthead-intro">Hi,I'm</p>
        <h1 class="masthead-heading">Tati!</h1>
    </header>
   

The header tag now has a "class" attribute equal to "masthead". The word "masthead" is nothing special. You could have chosen any word to be our class attribute. "Masthead" is commonly used for headers with big background images like this.

1. Create a new file called "style.css" in your folder and add the following code to it.

    body {
    background-color:blue;
    }
   

   We are temporarily making your background blue so that in the next step you can tell if you've linked your css file correctly!
2. Next we'll link your CSS file to your html file. Add the following line of code to your index.html file in between the <head></head> tags.

        <head>
            <title>
                My Website
            </title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
   

Save your files and refresh your browser. Your page should have a colored background! If not go over the steps one more time. One common mistake is placing your css file (style.css) in a different folder than your html file. Make sure they are in the same folder.

SAMPLE OUTPUT:

Thanks for Visiting!