« Piebald Calls It Quits
Shouldn’t Concert Promoters Promote Concerts? »

A Beginners Guide To XHTML

Posted By:
Matt
Posted On:
August 21st, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
8 Responses, Join The Conversation.

XHTML stands for eXtensible HyperText Markup Language and it’s the first thing you should learn if you’d like to make a website. Don’t let the long weird name full of words you’d never normally use scare you off. XHTML is super easy to master if you think of it the right way.

XHTML is used to describe content, it’s as simple as that. If you have a paragraph, mark it up as a paragraph. A list? Mark it up as a list. Let’s use a simple blog as an example.

The best program to use to write XHTML is Notepad or Text Edit. Open a new file and copy and paste the XHTML code as we go along. Save it as YourSite.html and if you right click on the file you should be able to open it in a web browser and see what you have so far.

The first thing to do in your XHTML file is to add some tags that tell the web browser that this is an HTML file. These tags will be the first and lat things in your file. Here’s what they look like:

<html></html>

Inside the HTML tags you need tags to let the web browser know that this is the body of the document. Here’s what they look like:

<body></body>

A blog website has a name and that name is the most important header on the page. This website’s name is Idiot Banter so we’ll mark it up as a header: <h1>Idiot Banter</h1>. The “h” stands for “header” and the 1 signifies it’s importance. There are 6 levels of headers <h1> through <h6>. Some believe you should only ever have one h1 on a page but that discussion is a little advanced for right now.

So the title of the website is an h1 and if the site has a tag line we’ll make that an h2. It’s also a title but it’s less important than the main title. Here’s how you mark it up: <h2>A blog about Stuff and Things</h2>. So far so good, but here’s where it gets a little complicated.

After the title and the tag line your site probably has a menu. No sweat, a menu is just a list of links. Don’t worry about what it’s eventually going to look like, just concentrate on getting everything marked up properly first. Let’s mark up a link.

You mark up a link with an <a> tag. The “a” stands for “anchor”. I would assume this is because you’re anchoring your ship to that other website/graphic/media file etc…. A link to this site would look like this: <a href="http://www.idiotbanter.com">Idiot Banter</a>. That looks a little confusing so let’s break it down. You have whatever you’d like to link surrounded by <a> tags: <a>Idiot Banter</a>. The <a> tags need parameters because parameters tell it what to do. The most important parameter is “href”. “href” stands for Hypertext Reference and it tells the link where to go. If you’re linking to a website outside of yours you need http:// in front of the address. If you’re linking to a page within your website you don’t need the http://, you’d just write /about.html. There are a few other parameters which can be useful but we’ll cover those later.

We know a menu is a list of links so let’s mark up a list. There are three types of lists, ordered lists, unordered lists and definition lists. An ordered list <ol> has numbers and an unordered list <ul> has bullets. Definition lists <dl> are a slightly different story and we’ll get to them shortly. Use an ordered list when your list has a specific order, like a track listing on an album, and use an unordered list when there is no specific order, like a menu on a website. We’ll use an unordered list. To start marking up a list we’ll use the appropriate list tag: <ul> </ul>. Inside a list are list items <li> </li> and inside those list items are our links for the menu. Here’s what our menu looks like when you put it all together:


<ul>
  <li><a href="http://www.idiotbanter.com">Idiot Banter</a></li>
  <li><a href="http://www.google.com">Google</a></li>
</ul>

And here’s what we have for the entire site so far:


<html>
  <body>
    <h1>Idiot Banter</h1>
    <h2>A blog about Stuff and Things</h2>
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>

Two headings and a list of links (our menu). Now we’ll need some blog posts.

Start by thinking about what makes up a blog post. Blog posts have a heading and the post which is made up of paragraphs. Blog posts also usually have a date they were posted and who they were posted by. Let’s get started.

We’ve done headings before and we’ll make these one’s <h3>s since they aren’t as important as the site name and tag line. Here’s the markup for the blog title:

<h3>The Blog Post Title</h3>.

Paragraphs are easy, they just need <p> tags around them. Here’s the markup for a paragraph:

<p>This is our blog paragraph and I think it's pretty great.</p>.

All we have left are the date the blog was posted and the name of the person who posted it. Let’s mark this up as a definition list <dl>. Inside a definition list you have a definition title <dt> which is what you are defining, and you have a definition description <dd> that defines the definition title. We’ll have 2 titles and 2 descriptions for this example. The first title is “Posted By:” and it’s description is “Matt”. The second title is “Posted On:” and the description is “Tuesday, August 14th, 2007″. Here’s how it looks when it’s marked up:


<dl>
  <dt>Posted By:</dt>
  <dd>Matt</dd>
  <dt>Posted On:</dt>
  <dd>Tuesday, August 14th, 2007</dd>
</dl>

Here’s the full blog post:


<h3>The Blog Post Title</h3>
<p>This is our blog paragraph and I think it's pretty great.</p>
<dl>
  <dt>Posted By:</dt>
  <dd>Matt</dd>
  <dt>Posted On:</dt>
  <dd>Tuesday, August 14th, 2007</dd>
</dl>

And the full website with the Headings, the menu and the blog post:


<html>
  <body>
    <h1>Idiot Banter</h1>
    <h2>A blog about Stuff and Things</h2>
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
    <h3>The Blog Post Title</h3>
    <p>This is our blog paragraph and I think it's pretty great.</p>
    <dl>
      <dt>Posted By:</dt>
      <dd>Matt</dd>
      <dt>Posted On:</dt>
      <dd>Tuesday, August 14th, 2007</dd>
    </dl>
  <body>
<html>

Here’s what it looks like in a web browser: XHTML Example.

If you right click on that web page and select “View Page Source” or “View Source” you’ll see a bunch of other HTML at the top of the page. We’ll get to that next time, don’t worry about it for now.

That’s all there is to basic XHTML. You now know how to code XHTML for a simple blog. You know about:

  • headings <h1></h1>
  • lists <ul><li></li></ul>
  • links <a href="http://www.google.com">Google</a>
  • paragraphs <p></p>
  • and definition lists <dl><dt></dt><dd></dd></dl>

That’s a pretty good start! We’ll look at some of the more awesome parts of XHTML next time. Just remember that every tag you open needs to be closed. You’re just marking up content so that the computer understands what it is. It has nothing to do with how it looks in the end.

Similar Posts:

Comments

  1. Mitchua Says:
    August 21st, 2007 at 10:34 pm

    I don’t believe in XHTML. I know how it works but I think it’s b/s. Your ideas are wrong and scary :)

  2. fuzzz Says:
    August 21st, 2007 at 10:40 pm

    Damn you and your page that validates… i sooo thought i might have been able to catch you on a technicality. The real question is what about HTML5 :P

  3. tim Says:
    August 22nd, 2007 at 9:04 am

    Xhtml is for outsourced Philipinos..it is childs play thing. Grown ups have moved on to SilverPlight and other web 3.0 goodies.

  4. davenull Says:
    August 22nd, 2007 at 9:04 am

    I personally think you should design for Quirks Mode. You know 99% of the world uses IE. :)

  5. neil Says:
    August 22nd, 2007 at 1:12 pm

    i agree with davenull.

  6. bmattb Says:
    August 22nd, 2007 at 1:32 pm

    XHTML is just elitist HTML. When will you learn that by putting an ‘X’ in front of anything DOESN’T make it any cooler. And yes, I prefer ML over XML as well. Nice writing style, very personable. I bet this guy is a ginger.

  7. A Beginners Guide To XHTML at bmattb.com Says:
    August 22nd, 2007 at 1:36 pm

    [...] read it though, he’s kind of creepy and his constant staring makes me uncomfortable.read more | digg [...]

  8. Patrick Burt Says:
    August 22nd, 2007 at 3:08 pm

    Great beginner’s article, I’ll forward it to some mates of mine.

Leave a Comment

Show Background