Small introduction to XHTML

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

August 17th, 2010 Leave a comment Go to comments

Have you ever thought about creating your own homepage ? It may look very difficult, but in reality it isn’t. Well, it all depends on how complicated you want it to be. Also what kind of features you want to have on your page. Nowadays I see alot of people who create piczo sites, blogging sites or other free service hostings. This is all fine by me. Not everyone have the time to create their own page from scratch, or even bother to learn how to do it. But doesn’t that also make it alittle boring for you, the reader if alot of the pages you visit look all the same ?

Anyways, if you’re interested in taking a small step into how to start out, continue reading. I will explain some simple things you need to know before you start.  As the title says, I will explain some basics with XHTML.

What is XHTML ?

  • XHTML is a combination of the HTML standard and XML standard. (EXtensive Markup Language)
  • XHTML is almost identical to HTML 4.01. XHTML consists of all elements within HTML 4.01, but it also has the strict syntax of XML.
  • As mentioned above, it’s much stricter, but in addition it’s much cleaner compared to HTML.
  • XHTML is defined as a XML application.
  • XHTML is a W3C recommendation. (World Wide Web Consortium)
  • All browser support HTML 4.01, therefore all browsers also support XHTML.

Why XHTML ?

If you browse around on the internet and look at the sourcecode, you’ll see alot of pages which contains “bad” HTML. The page may display as it should to you, but it may make another browser cry. An example of HTML which works fine in your browser, but doesn’t validate with the XHTML standard may look something like this.

<html>
<head>
<title>This is bad HTML</title>
<body>
<p>Bad HTML. This will not validate well.
</body>

XML is a markup language where everything must be marked up correctly, which will give you  ”well-formed” documents. XML was originally designed to describe data, and HTML was designed to display data. You wonder why some people bothered to create a completely new language, when HTML does the “job” by itself. Well if you take a look around you. Today we have computers with browsers, PDA’s, cellphones and other small devices which can all surf the web, but not all of them can display the data. That’s why XHTML was made.

Where to start ?

The first thing you should remember, is that you never use UPPERCASE to write your code. In addition, never forget to close tags. (example: </p>)

The main differences between HTML and XHTML

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

Nesting
This is not how you nest correctly.

<b><i>this text is bold and italic</b></i>

this is how you nest correctly.

<b><i>this text is bold and italic</i></b>

Closing elements
These elements aren’t closed correctly.

A break: <br />
A horizontal rule: <hr />
An image: <img src="image.jpg" alt="image">

These elements are closed correctly.

A break: <br />
A horizontal rule: <hr />
An image: <img src="image.jpg" alt="image" />

Lower Case
This is wrong.

<BODY>
<P>This is a paragraph.</P>
</BODY>

This is correct.

<body>
<p>This is a paragraph.</p>
</body>

All XHTML documents must have one root element
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.

The basic document structure is:

<html>
<head> ... </head>
<body> ... </body>
</html>

I hope this was helpful in some way. There are alot more to remember when it comes to creating webpages, but this should get you started. In addition I advice you to go to http://www.w3schools.com/ if you want to learn more. If you have any questions, post a comment or contact me by email.

  1. July 13th, 2010 at 01:41 | #1

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  1. No trackbacks yet.