Beginner's Guide Series - Basic HTML, part 2

Posted At : May 7, 2009 5:40 PM | Posted By : Francois Levesque
Related Categories: Beginner's Guide, HTML

Yesterday, I talked about what HTML is and what an HTML document looks like. In part two of this section we'll cover general HTML tags, what they represent and how they are used. Remember, these can be placed anywhere between the document's <body> tags.

The paragraph: <p></p>

One of the most-used tags in HTML is the paragraph. This tag is used to separate text in blocks. Very easy to use, it comes with a built-in margin to space out the text.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat lorem vel arcu convallis pellentesque. Nullam nunc orci, ornare ut suscipit vitae, fermentum id tellus. Aliquam erat volutpat. Nullam nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus urna, bibendum quis eleifend quis, mattis ac velit. Aliquam ac tellus vel tortor mollis fermentum ac et orci. In sagittis.</p>

Here's how that looks like once output to the screen:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat lorem vel arcu convallis pellentesque. Nullam nunc orci, ornare ut suscipit vitae, fermentum id tellus. Aliquam erat volutpat. Nullam nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus urna, bibendum quis eleifend quis, mattis ac velit. Aliquam ac tellus vel tortor mollis fermentum ac et orci. In sagittis.

The line-break: <br />

When all you need is a line-break and a paragraph is simply too much, you can always turn to the <br /> tag. In HTML, all kinds of whitespace (spaces, tabs, line-feed, etc.) are displayed as a single space. What that means, amongst other things, is if you try writing something like this:

This is some
really cool text.

What you'll actually get will look like this:

This is some really cool text.

The easy way around this is to place a <br /> tag where we'd normally enter a normal line-break (the enter key):

This really cool text<br />
will actually work.

Using the appropriate tag to force a line-break we get the following result:

This really cool text
will actually work.

You might be wondering why I'm using the forward slash for this tag. Modern day standards for HTML require that every single tag be closed. Since the <br /> tag isn't put around anything else, we don't normally use the closing </br> tag. However, there's a shortcut. Placing a forward slash before the closing chevron allows to open and close the tag in one move. Practically speaking, however, <br> and <br /> are equivalent, although the example with the forward slash is more standards-compliant.

Headers: <h1> through <h6>

Headers are used to highlight new sections or particular elements. The difference between the six versions is the size of the text (<h1> is larger than <h6>)

<h1>h1 sample output</h1>
<h2>h2 sample output</h2>
<h3>h3 sample output</h3>
<h4>h4 sample output</h4>
<h5>h5 sample output</h5>
<h6>h6 sample output</h6>

And the result:

h1 sample output

h2 sample output

h3 sample output

h4 sample output

h5 sample output

h6 sample output

Lists: <ul> and <ol>

Lists are used to enumerate items. In HTML, there are two types of lists: ordered an unordered. The difference is that ordered lists will display numbers next to each item, while unordered lists will use bullets. The <ul> and <ol> tags and their corresponding closing tags define the start and end of the list. Each element will be enclosed within them, and be identified by <li> tags (list item).

The example first shows how to prepare an unordered list, and ends with an ordered list. See the difference below:

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

The nice thing is you can nest lists, too. This would allow for further indenting.

Item 1

Item 2

Sub-item 1

Sub-item 2

Links: <a>

Up until now, all the tags we've used have been pretty simple. The two next ones require a little more information. The first we'll look at is the link. Links play a really important role on the internet. They're what makes pages relate to each other. To create a link, we need two things: where the link will lead to and what text to display. The displayed text is enclosed between a start the end <a> tags. However, we also need to tell it where to go once it's clicked. We do this using an attribute.

Attributes are a series of extra information that we can add in a starting tag. You can have more than one attribute per tag (simply separate them with spaces). Here is the <a> tag with it's main attribute, href (hypertext reference):

<a href="http://blog.critical-web.com/blog/">Click me!</a>

Click me!

There are two different ways of linking to a page: absolute and relative. Absolute means that you provide the entire address for the page, including http://. This is useful when linking to an external site. A relative link only needs to provide the location of the page relative to the caller. Imagine a page in the root of the web server. That page (page-a.html) has a link to another page (page-b.html) in the folder sections:

Site root
- sections/
  - page-b.html
- page-a.html

Our link would only need to provide sections/page-b.html in the href attribute to link to page-b.html.

Images: <img>

The image tag allows to, well, show an image in the browser. It has three major attributes:

src: location of the image file (absolute or relative);
width: the width of the image, in pixels;
height: the height of the image, in pixels.

The src attribute is pretty self-explanatory (see the link section above for more information). The width and height tag, however, are important as they provide a way for the browser to create a placeholder for the image. In a situation where the image cannot be found (either because it was renamed, or the server providing it is down) or there's a delay in downloading them, the layout of the page will be exactly as it would if the image was loaded. Without specifying the width and height the browser will only reserve a small space for the image, and expand to the actual size when ready. Since we don't want our page layout to jump around during loading, we're better off specifying the width and height in the image's attributes.