Introduction to HTML: Part #3: How To Write HTML

By Ben on April 2nd, 2008

When I left off on the previous article (Introduction To HTML: Part #2: The Basic Document Structure) you learned the basics of creating the basic document structure for (X)HTML documents. Now, we’re going to learn just how to write the HTML codes and what everything means, and exactly how to do it efficiently.

Back to tags we go!
For the most part, each tag is written in the form:

<tag>Effected text here…</tag>

Whatever is in between the opening tag (<tag>) and the closing tag (</tag>) is effected by the tag. For example; if you had the following HTML code:

This will print bold.

it will print this onto the page:

This will print bold.

To print text in italics:

This will print in italic.

…will print:

This will print in italic.

Let me know if I lost ya.
Now, most tags are written in the form of <tag> … </tag> but you’ll come across some very peculiar tags which are used extensively. (I’ll try my best at teaching you everything, but please, feel free to leave some feedback in the comments below if I leave anything out that you know of.)

Anyways, these peculiar tags are known as unclosed tags because they are left without a closing tag (</tag>). One perfect example is the IMG tag.

<img src=”http://www.mysite.com/images/image.gif” />

Notice, to “force” an ending of the tag (to ensure web standards are in place) I have made a closed-ended tag. (I forced the tag to stop/close with a space and the / character.) The IMG tag is one such tag which needs to be left with a closed-ended tag. Another such tag is the break tag: ( ) which does exactly what it means, it creates a line-feed or “line break” wherever you place it.

The best way to learn anything, specially how to read/write code of any sort, is by trial and error, so let’s now begin to do just that! The following code:

This will print bold, this on a new line, and this in italic and on a new line.

…will print this to the page:

This will print bold,
this on a new line,
and this in italic and on a new line.

Now, before we get further into the tags I’ll go ahead and now mention that these tags will all eventually be removed from the XHTML language all-together in the near future. It’s true. HTML-related formatting elements will actually no longer be needed for formatting documents, as the perfect mixture of technologies to get that specific job done is CSS (Cascading Style Sheets) and XHTML (DIV and SPAN tags/elements); therefore I will continue to teach you the XHTML language, but I will focus exclusively on the usage of the DIV and SPAN elements when dealing with formatting in (X)HTML.

I will continue this tutorial here. Please stay tuned.

Spread The Word: These icons link to social bookmarking sites where readers can share and discover new web pages.