2.1: Header HTML

Add <header> tags

• In index.html remove the existing paragraph, and add opening and closing <header> tags.

• Add some text with your name. We want this to be larger-then-normal text, so let's use <h2> tags.

<header>
  <h2>John Smith</h2>
</header>

Header Tags

Refresh your webpage and you should see your name in the top left corner.

Shortcuts to different parts of page

Only having your name at the top is kind of lame, let's add more content. Since our webpage will be broken down into different sections, let's add a few shortcuts to allow visitors to easily navigate to each section. Remember, the way we create links is with <a> tags, and we enter the destination using the href attribute.

<a href="#favorites">Favorites</a>
<a href="#lorem">Lorem</a>
<a href="#facts">Facts</a>
<a href="#top">Top</a>

Section Links

Finished Product

Next Section

This looks awefully plain, let's style it a little. Go to 2.2: Style The Header.