11. HTML Content

So our general structure is pretty much complete. We have place holders for our content and those place holders have been styled to sit in our page nicely. Now it’s time to add some content.

Inside our “index.html” file we can now replace all those simple place holding words/phrases with some kind of content:

Yours doesn’t have to be exactly like mine but I do suggest in your “article” tag you just put “gap filler“. I’ve used some generic Latin which you can have generated from this site. If you’d like to have multiple paragraphs of gap filler then I suggest using the paragraph tag.

The “<p>” tag
The “p” tag is used to create paragraphs. It works very much like other tags we’ve seen and just breaks sections into paragraphs. You simply wrap the content you wish to be in a paragraph with an opening and closing “p” tag:

<p>
   Here is some content for my first
   paragraph.
</p>
<p>
   Lorem ipsum dolor sit amet, consectetur
   adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua.
</p>

You might have also noticed I have a list as my menu, this is a very neat way to group items together and in a menu it makes sense to do that. This leads us to two new tags.

The “<ul>” and “<li>” tags
These two tags work together to create an unordered list. You’ve probably now worked out what the “ul” stands for too!┬áThis may also have clued you in on how you might make an ordered list that has numbers instead of bullets.

In order to have items within your list you will need to define a “list item” which is, naturally, an “li” tag (isn’t HTML easy?) So here’s how I made my list:

<ul>
   <li>Home</li>
   <li>Products</li>
   <li>About</li>
   <li>Contact</li>
</ul>

Righty-O, let’s go back to the style sheet now to fix up some of the visuals of our page.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>