Adding Text to our HTML page

brackets iconIn this lesson we’ll learn about some HTML tags that help us structure text in our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, just like we did a couple of lessons ago.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14
img15
img16
img17
img18
img19
img20
img21
img22
img23
img24
img25
img26
img27
img28
img29
img30
img31
img32
img33
img34
img35
img36
img37
img38


It’s time to start making our page more interesting. Replace the text in your <body> tag with the following:

<body>

<section>

<h1>FOTC Website Tutorial</h1>

<div>

<h2>Making our first page</h2>

<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>

</div>

</section>

</body>

You will notice that I’ve indented the new tags. This means I’ve pressed the TAB key in notepad to leave a gap at the beginning of each tag. This makes it easy to tell which tags are nested (contained) within other tags. In this diagram I’ve marked the TAB indentations in green.

HTML 5 - 1

When our web pages get more complex it’s VERY important to keep the HTML as readable as possible. For example, if I didn’t indent the HTML, look how messy it could get:

<body><section><h1>FOTC Website Tutorial</h1><div><h2>Making our first page</h2><p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p></div></section></body>

This HTML is exactly the same as the previous example. See how much easier it is to read when we use indentation properly?

You should get into the habit of using indentation to make your HTML readable. When you come back to make changes to your website – or if another developer needs to – you will thank yourself for putting in the time to make your website as clean as possible. Clean HTML is much easier to work with.

Now it’s time to save our changes in Notepad and hit refresh (F5) in the browser. You should see this:

HTML 5 - 2

Let’s look in more detail at what we have added.

First we can see several new tags: <section>, <div>, <h1>, <h2> and <p>

The <section> and <div> tags

These tags are known as grouping elements, because they group related tags together inside them.

They are very similar tags, but <section> is used to group related items together. If you want to create a section of your page that contains similar information then you should use a <section> tag. For example, a list of blog article titles would be one <section>, while the part of the page that contains the actual blog articles would be another <section>.

Meanwhile, a <div> tag is used to group elements together that aren’t necessarily semantically related. Perhaps they are unrelated information that are kept in the same part of a page, or perhaps it’s a sub group of data that you want to group. The use of this tag will become more clear when we start styling our page using CSS.

The <h1> and <h2> tags

These are known as ‘title’ or ‘heading’ tags. They specify different levels of heading on the page. The lower the number the more important the heading is. For example, <h1> may specify the main heading on your page, while <h2> may be used to specify the subtitles of the different parts of your page.

As you can see, the headings are automatically displayed in bigger bolder text by the browser.

It is possible to have heading tags for up to 6 different levels of heading, from <h1> as the biggest to <h6> as the smallest.

The < p> tag

The <p> tag is short for a “paragraph” tag. As the name suggests, you use this tag when you have a paragraph of text.

Putting all this together

We can now add some more text to our page, now that we understand the new tags we have used. Replace your <body> text with the following. Don’t forget to check your indentation!

<body>

<section>

<h1>FOTC Website Tutorial</h1>

<div>

<h2>Making our first page</h2>

<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>

<p>For now we only have a simple page, but later we will make it more complex and interesting.

</div>

<div>

<h2>What have we learned so far?</h2>

<p>So far we have learned a few simple tags for placing text onto a page.</p>

</div>

</section>

</body>

Now we have some more text to play with. You can see how the headings are displayed as headings and how the paragraphs automatically separate.

Can I make this look better with just HTML?

Technically it is possible to style a page using pure HTML. You can add tags that make the text bold, or italic, or change the font or the colour. However, this is a very bad idea. As a result, I’m not even going to show you the tags that can do this as you should never style your page using just HTML.

Why can I not style a page using HTML?

It’s best not to style a page using HTML for several reasons:

  1. Styling a page using HTML is very limited. You can’t make it look very good, however you try.
  2. Styling a page using HTML is a lot of work. It takes way more effort to style using the HTML style tags.
  3. Styling a page using HTML is very difficult to change. Once you start changing the layout and the look of your page in HTML it is very hard to go back and edit, especially once you add multiple pages to a site.

As a result, we have to be patient. Currently our pages look ugly, but that’s ok – we’re just using them to learn the basic HTML. Later in the course once we’ve mastered the simple HTML we will start using the power of CSS to make our pages look pretty!