In the lesson right before this, we finally jumped into coding by building the structure of our HTML file with some HTML elements. Now we will be adding our site’s content into this structure.

Remember: The finished files for this lesson can be downloaded here. And if you get stuck with anything, ask questions in the comments area at the very bottom of this page!

Containers, Containers, Containers

We will talk about containers a lot when building a website, so it’s important to understand what they do.

All of our content will need to be placed inside the right kind of HTML containers. The containers are organized with HTML elements. Each element means something special for the browser, helping it understand all the stuff on the page.

To think of it another way, in the illustration above the building is containing everything: windows, a door, and a clock. One of the windows is then acting as another container with a Tuts+ Town designer inside.

Adding Content

Now that we have our structure in place we can fill these containers up with content. All the elements we added to our file in the previous lesson helped us get organized–they’ve given us a place to insert our text and images.

Let’s start from the top!

Header

As we talked about, the header is the very top part of a website and has its own element, <header>, which is the first one nested in our body.

<body>
<header> </header>
</body>

The header generally contains an introduction and a navigation (a way to find other places in the website) of some kind. Our website has a welcoming heading and a neat image, so let’s add them!

Heading

We need to get “Welcome to Tuts+ Town” on the page, which is the website’s main heading.

There are six different levels of headings for a site; h1 is the most important, h6 is the least important. In HTML the text for headings is written within heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.

“Welcome To Tuts+ Town” is our main heading (it’s very important), so we will type this within the opening and closing tags of an <h1> element.

<header>
<h1>Welcome To Tuts+ Town</h1>
</header>

The browser will now recognize this bit of text as our introductory heading.

Town Image

Also in the header we have a lovely image of our town.

Within our main “tutstown” folder you need to create another folder, “images”, and save all the images in there.

Images are added with an <img> element. Inside this tag we need to give the image location, or source, like this:

<img src="images/townheader.svg"

See that / after src="images? There we’ve said “look in the images folder / for a file called townheader.svg”.

Then, before we finish the <img> tag we’ll include a description with an alt attribute.

Attributes are things we can add to elements which help further explain them, or tell them how to work. Only certain attributes work within certain elements. An <img> element will always have a src and an alt attribute.

Important! An <img> element is self-closing. This just means that the opening tag is also the closing tag:

Let’s Take A Peek!

At this point we can open our website in the browser to see what we have done so far! Find the “tutstown” folder and double-click on “index.html”. This should open the page in your browser.

There’s our website! There’s not much there now, but we are about the change that. From now on, whenever you want to see your changes in the browser, you can save the HTML file and then refresh (using that little circle with an arrow icon at the top) the browser window.

Also, you’ll notice that we can’t see our clouds just yet, because we haven’t added the yellow background. We’ll be looking at things like background colors, positioning, and sizing in our next lesson when we dive into CSS.

Main Section

The main section of our website includes the bulk of the information. We’ll contain all the super useful content about our town within this <main> element.

Heading

We can see that each section has a small heading: Sleep, Food, and Shop. These tell us about the small lists right below each one. We already used an <h1> for our introduction at the top of the page, so for these we will use <h2>, like this:

Lists

There are two types of HTML lists, ordered (with numbers) and unordered (with bullet points instead of numbers). They are both really handy ways to list related information and each section of our site contains a short unordered list (<ul>) with two items.

Nested within every list are list items. These are the items that make up our list and they are written within <li> tags.

<ul>
<li></li>
<li></li>
</ul>

Links

The lists we just put together are meant to be links to the different shop websites, so our visitors can click on them to get more information. To turn a word (or words) into a clickable link we need to wrap that word within anchor tags. An anchor element looks like this: <a>.

Similar to how our <img> element has special attributes, the opening <a> tag will need to contain an attribute that includes the web address of the website we want the user to be sent to, the href attribute.

The following bit of code would give us a link connected to the word “here” that would take the user to http://tutsplus.com/

For more tutorials click <a href="http://tutsplus.com/">here</a>.

This is exactly how we will be adding the links to our list, by wrapping each shop name in an anchor. Both the opening and closing anchor tags will be within the list item, the <li>. The only difference is that because these are not real shops, with real websites, we will be be putting a # for the href value and clicking it will not take us to another website.

Here's a look at the very first shop listed:

<ul>
<li><a href="#">The Snooze Inn</a></li>
</ul>

We created an unordered list, nest a list item inside of that list, and then wrapped the shop name in an anchor tag. Keep in mind though that we haven't done any styling yet so for now our preview will show links in a default blue instead of orange.

Section Wrap Up

Once we have one full section complete we will need to repeat these same exact steps for the last two sections. Each time we need to make sure the content changes; the HTML structure will be the same for all three sections, but the text and images will be different.