Welcome to the new Web Development series on the BlueFur Blog. I’m Matt Freedman and I’ll be writing the new Web Development, Everything PHP, WordPress Development and Moving Beyond SSH series’. During the Web Development series, we’ll cover everything from AJAX to XML and will have content for beginners and techies alike. So, let’s get started.

(X)HTML is an essential part of the Internet; it is the structural markup for webpages. If you’ve ever viewed the “source” of a webpage, that is (mostly) HTML or XHTML. During the next couple of weeks, we will have a multi-part mini-series on XHTML. During this week’s tutorial, we’ll be going over the basics of XHTML.

Basics

The basic rules of this markup language are simple:

• An XHTML document must start with an XHTML declaration, and contain a head, title and body.
• XHTML is made up of tags which are surrounded by angle brackets (< and >).
• All tags in XHTML must be in lower case and be closed.

Let’s start out with that first point. The simplest of XHTML documents will look like this:

[code='xml']

Hello world!

[/code]

In the above code, the first two tags are the XHTML declaration. You’re telling the browser that this is an XHTML document using the Transitional rendering mode. There are a couple different XHTML rendering modes, but Transitional is the most forgiving. The third tag () is the head section. This is where you will define various page properties and tell the browser to import external stylesheets and scripts. The next tag is the title tag, this is where you will specify the title of the page that will appear in the titlebar of the browser. After that is the body section and that’s the end of the document.

Something very important to note in the above example document is the closing tags. The XHTML declaration states that all tags must be closed. This is generally done by copying the starting tag, but prepending a forward-slash to the tag name (so a tag). There are a few exceptions to this rule. Some tags have to be “self-closed”, where a space and forward-slash are appended to the starting tag name. So, for example, the br tag (which adds in a line break) is formatted like
. Notice how there is no closing tag, but the tag in itself is self-closed. These are referred to as “singleton” tags. The tags that require to be self-closed are link, meta, img, br and hr.

Basic Tags

In addition to the standard “building blocks” tags, you’ll also need to know some basic formatting tags. To separate text into paragraphs, you should wrap each paragraph in

tags. To produce a line break, you should use the singleton tag
. To make text bold or emphasized (italicized) wrap it in <strong> or <em> tags, respectively.

Next time on the Web Development Series

Next Monday we will be going over more advanced tags and tag attributes. If you have any questions so far, please feel free to ask them in the comments section of this post.