# 3.1: Introduction HTML

## Add a new section

In `index.html` we need to add a section for this first portion of the webpage - the portion of the webpage that will appear at the top. We need to give the section an ID attribute of "top" so the link in our header will work.

```markup
<section id="top">

</section>
```

While we're at it, let's add in a header with our name, and a descriptive paragraph.

```markup
<section id="top">
  <h1>Hi, my name is John Smith.</h1>
  <p>I am a student attending an intro to coding class at <a href="http://elevenfifty.org" target="_blank">Eleven Fifty Academy</a>.</p>
</section>
```

![Section HTML](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8nz3Df0aJ5Kza-cE%2F3.1-section-html.png?generation=1524162327847242\&alt=media)

If we refresh the page, we'll notice that we can only see the paragraph tag... the `<h1>` is being hidden underneath the dark blue header! We will have to adjust that with CSS...

![Section HTML Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o-1EkDH460-unMw%2F3.1-section-html-result.png?generation=1524162329372688\&alt=media)

## Next Section

In the next section we will fix the overlap display issue. Go to [3.2: Introduction CSS](https://eleven-fifty-academy.gitbook.io/intro-to-coding/part-3-introduction/3.2-introduction-css).