Build a website using XHTML and not HTML

XHTML is the engine which drives the content which is displayed on the screen in it’s rawest form. Basically XHTML describes the sections of a screen. For instance <p>some text</p> tells the browser that some text is a new paragraph. XHTML is very simple and follows strict rules which help you update your website in the future.

XHTML is better than HTML as it limits the tags to only describing what the elements of the nage are and not describing how they should look. CSS should be used to describe how things look. There is no font, b, i and center tags which will save a lot of headaches when you want to update your site or move to another media like the iPhone. The font and center tags are very 1990’s and makes it extremely hard to update a site. For instance you might want to change site wide your font Gill Sans, with XHTML this is 3 lines in CSS compared to 1000’s of changes in HTML. You can have an in-depth read of the differences at http://www.w3.org/TR/xhtml1/

Simple XHTML sample:
[cc lang=”XHTML”]

Create My New Site

I want to have Create My create my new website

[/cc]
The great thing about XHTML is once you have the hang of using it, it only takes minutes to setup a page with content, a bit dull looking but a web page none the less. The trick with XHTML is like sales, ALWAYS BE CLOSING, but it is closing of tags. So if you open a tag make sure you close it.

Another great thing about XHTML is for simple pages there is only a few tags you will really use in the body. Below is a list of the main tags I use (note there is more):

  • <p></p> for paragraphs
  • <span></span> to define a group of words
  • <div></div> to group a section
  • <h1></h1>…<h6></h6> for the heading levels
  • <ol></ol> for ordered lists
  • <ul></ul> for unordered lists
  • <li></li> for list items in ol and ul lists
  • <a href=”http://google.com”></a&gt; for links
  • <em></em> to empathise text i.e. italics
  • <br /> to start a new line
  • <strong></strong> for words with strong meaning i.e. bold
  • <img src=”image1.png” /> for images

While there is a lot more (especially if you have a form or tables) the above will be mostly all you need to make a simple webpage.

Advertisements

One comment

  1. Pingback: HTML 5 – Easier and Better Than XHTML | Create My - Dale Hurley - Web Developer and Designer


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s