# 4.1: Facts HTML

## Add a new section

In `index.html` we need to add another section for this "Facts" portion of the webpage - again, we need to give the section an ID attribute so the link in our header will work.

```markup
<section id="facts">
  <h3>Facts</h3>

</section>
```

![Facts HTML](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8hF9jF1yl1l8jaCn%2F4.1-facts-html.png?generation=1524162318527226\&alt=media)

We want this section to have a light gray background color. We could do this in the CSS file - sure - but for the sake of learning multiple solutions... let's use in-line styling.

```markup
<section id="facts" style="background-color: lightgray;">
  <h3>Facts</h3>

</section>
```

## Add centered content

We want an image and a list to appear in this section - but we'll want this content centered in the middle of the page. To accomplish this we will wrap the image and list in a `<div>` with an ID attribute, and reference that ID in the CSS file.

```markup
<section id="facts" style="background-color: lightgray;">
  <h3>Facts</h3>
  <div id="centerThis">

    </div>
</section>
```

Inside of this `<div>` we want our image... (*Right click on this image and hit "Save image as..." and then save it in your project folder or use your own photo*)

```markup
<img src="./portrait-face-outline.jpg" alt="My Portrait">
```

...and our list...

```markup
<ul>
  <li>My favorite color is dark blue.</li>
  <li>Cats are my favorite animals.</li>
  <li>My least favorite subject in school was english.</li>
  <li>My favorite subject was math.</li>
  <li>I am excited to learn to code!</li>
  <li>My favorite Wikipedia page is the one about <a href="https://en.wikipedia.org/wiki/Glacier_National_Park_(U.S.)" target="_blank">Glacier National Park</a>.</li>
</ul>
```

![Facts HTML Final](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8hI0xrr_8VTiLMtE%2F4.1-facts-html-final.png?generation=1524162318708046\&alt=media)

When you refresh the page, the photo is gigantic! We'll resize it in the next section...

![Facts HTML Final Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8hJB7Nt60N7ydUPx%2F4.1-facts-html-final-result.png?generation=1524162317907338\&alt=media)

## Next Section

Time to fix the size of that image. Go to [4.2: Facts CSS](https://eleven-fifty-academy.gitbook.io/intro-to-coding/part-4-facts/4.2-facts-css).