Basic HTML

How To Add Text?

So far we have covered the essential tags, like the head and body tags, and each of the heading tags, h1 through to h6, to display titles and headings with different appearances. These elements are great for highlighting certain words or separating out sections of text but are not suitable for longer paragraphs of text; for that you need the p tag.

I know all about the p tag!

Oh good.

It’s when I’m outside and I spray pee on stuff so other cats know it’s mine. It's my pee tag.

Oh . . . Good.

The p tag is used to create a paragraph element which is best used for the majority of text on your website. It’s far more suited to spreading across multiple lines than heading elements are and so when writing longer sentences or paragraphs made from several lines of text, it’s best to use the p tag which is used just like the heading tags.

Here is an example of mine along with a title.

        <body>
          <h1>About Me!</h1>
          <p>I have a tabby cat named Aria who, when she’s awake, is almost always eating.</p>
        </body>
      

About Me!

I have a tabby cat named Aria who, when she’s awake, is almost always eating.

Eating All The Time Is Tiring

You can have several sentences in the same paragraph element or you can use separate elements to put more spacing between sentences so it looks more like separate paragraphs, which, because the words are in separate paragraph elements, they are.

Here is an example Aria made.

        <body>
          <h1>Aria The Cat's Website!</h1>
          <p>I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.</p>
          <p>Also, I have an owner who, in my opinion, could feed me more enthusiastically.</p>
        </body>
      

And here is what Aria's example looks like. Does it look how you expect it to?

Aria The Cat's Website!

I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.

Also, I have an owner who, in my opinion, could feed me more enthusiastically.

You may have expected the text in the second p tag to immediately follow on from the first, but, because the p tag creates paragraphs and not sentences, each new one is separated just like how paragraphs are.

Between the different headings and the paragraph element, you could create an informative webpage with paragraphs under different headings.

Try using the HTML elements we have covered so far to write about something you did everyday through the last week or your favourite food at each meal or a description of different animals.

Before writing your own code, try changing the code below to experiment with the different titles alongside the paragraph element.

        
        
        
      

Today I Did:

I woke up this morning just in time for my nap!

My nap was tiring, so I refuelled at breakfast.