Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1065 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Business and Website Management     Articles From The Experts :

Development School -- lesson 1: xhtml vs. html

Thread title: Development School -- lesson 1: xhtml vs. html
Closed Thread    
    Thread tools Search this thread Display Modes  
02-10-2005, 06:18 PM
#1
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old  Development School -- lesson 1: xhtml vs. html

Welcome Development School 101

As an anal-retentive web coder, I’ve gone through the loops: FrontPage, Dreamweaver, Notepad etc, image maps where they don’t belong, code that only worked in IE… I’ve seen and done it all.

In this five part series, I’ll take you through the steps to becoming a state of the art developer for this day and age and give you the know-how to make things happen on your own in the future.

Table of Contents:
  • Xhtml vs html
  • Tables vs tableless – clash of the titans
  • W3 web standards and validation
  • Semantic markup -- CSS is taking over!
  • Misconceptions

Lesson 1: xhtml vs. html

What is xhtml and what is it for?
  • EXtensible Hyper-Text Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application

To simply put it “XHTML is a combination of HTML and XML (eXtensible Markup Language): all the elements in HTML 4.01 combined with the syntax of XML.”

This is a snippet from w3schools’ explanation for why the move has been made to xhtml, and it does a very nice job of getting the point across:

“XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.

XML was designed to describe data and HTML was designed to display data.

Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.”

Very simple, xhtml makes documents easy to read on a range of devices, and because of it’s documentation, by writing a valid xhtml document, your chances of elements not performing decline, and the chances of your document working cross platform increase.

Now that we’ve taken a look into WHY we should take the dive into xhtml, let’s see what the differences really are.

The most important differences:
  • XHTML documents require a DOCTYPE definition
  • XHTML elements must be properly nested
  • xhtml documents must be well-formed
  • All tag names must be in lowercase
  • Attribute values must be quoted
  • All xhtml elements must be closed
  • Xhtml relies heavily on CSS

What is a DOCTYPE definition?
The DOCTYPE declaration defines the document type to the browser so it knows what type of code to expect and how to render it.
  • DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
  • An XHTML DTD describes in precise, computer-readable language the allowed syntax and grammar of XHTML markup.

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • For use when you can take advantage of strict coding rules -- the most effective DOCTYPE to use. The whole point to XHTML is to get rid of unwanted clutter and what better way than strict?

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • For use when you want to take a more presentational approach to your WebPages -- Transitional renders some things differently than strict will. As a result, people use xhtml transitional for its leeway on certain things, such as stacking divs vertically closely together.

XHTML 1.0 Frameset
<! <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • For use with Framesets

What do they mean by properly nested?
Xhtml works around the content of your document. Most of the elements in xhtml come in pairs: an opening tag and a closing tag <strong></strong> for example.

Properly nesting a document is to work from the “inside out” from the perspective of your content; s what is opened is closed in a mirror image like so:

<strong><em><span class=”capitals”>title number 3</span></em></strong>

in this case,<strong> on the furthest left and </strong> is the furthest right. <em> and </em> are the next step inwards and so one until you get to the actual text.

What do they mean, “well formed”?
A well-formed document is just one that is structured efficiently. There are amny ways to define a well-formed document, and many aren’t measurable through something like a validate, for instance:
  • Allowing large spacing for new lines to avoid clutter and maximize clarity. Using the tab button in successive increments each time a new element is introduced.
Code:
<table cellpadding=”0” cellspacing=”0”>
	<tr>
		<td>blah</td>
	</tr>
</table>
vs
Code:
<table cellpadding=”0” cellspacing=”0”><tr><td>blah</td></tr></table>
Why must tags be in lower case?
This is because xhtml documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags. Since xhtml is a step of bringing html towards XML, lower casing is used for all its tags to avoid confusion.

Why must attributes be quoted?
Once again, this is another step to bringing html closer to XML for future projects. The plan is to gradually make html more like XML where eventually, websites will be done through XML entirely. This allows people to get familiar with the simple (often annoying syntax) that often cause problems when first learning a new language.

Why must all the elements be closed?
Well, besides from another XML like syntax, by not closing an element, it will run amok on content that comes after it in the document.

For example, if you use <strong> to emphasize a certain word, or section of a sentence, if you don’t use </strong> the rest of the text that appears on the page will be affected until a </strong> appears in the document’s code. Imagine a side column with a bold title and now the main content is all bold because you didn’t turn off the <strong> tag.

The importance of this piece is the XML syntax similarities. What do you do in the case of tags that don’t have a closing equivalent, such as <br> or the <img> tag? Since the theory is every element that is opened must be closed, we simply add a closing / to the end of the tag. So <br> becomes <br /> <img> becomes <img />

How does it rely heavily on CSS?
Throughout this lesson so far, we haven’t made reference to any CSS syntax or markup.

With the progression towards XML there has also been an advance in CSS, and with this XML progression, the idea is to keep markup and presentation separate from each other. The idea is “the (x)html says ‘this’ goes here and the CSS defines how ‘this’ should look.”

Because of this, many tags became obsoltele, such as <font> or <center>. These types of tags were presentational tags, and therefore have become deprecated since their purpose is now handles through CSS.

Why does it rely heavily on CSS?
By doing this, we remove useless clutter from our document minimizing the chance for errors in our code and we still have complete control over how something looks.

Another bonus to CSS is it gets cached in the user’s browser, so it only downloads things once, saving you bandwidth and increasing the loading time. It also affects every xhtml document at once. If you have an element with a grey background colour and you’d like to change it to white, in standard html, you’d have to change every html page where this element occurred. With a separate file controlling all the presentational elements, all you have to do is edit this one file and the changes get applied everywhere the element is used, because the html references the style sheet, so when the change is made there, it’s done everywhere.

some other things to note are:
  • The alt tag is mandatory for all <img /> tags -- it was in html 4 but no one seemed to do it.
  • Id has replaced name -- <img src=”image” id=”header” />


Other than these differences, xhtml and html are still virtually the same. They’re still written the same way.

Once your satisfied with this, you can move on to lesson 2 – tables vs. tableless.

02-11-2005, 01:08 AM
#2
Fraggz is offline Fraggz
Status: Member
Join date: Jan 2005
Location: Long Island NY
Expertise:
Software:
 
Posts: 132
iTrader: 1 / 100%
 

Fraggz is on a distinguished road

  Old

Ill read over it again later, looks good though, thanks for sharing.

02-11-2005, 01:42 AM
#3
Michael is offline Michael
Michael's Avatar
Status: Senior Member
Join date: Dec 2004
Location:
Expertise:
Software:
 
Posts: 845
iTrader: 0 / 0%
 

Michael is on a distinguished road

  Old

looking good, good read !

02-11-2005, 01:30 PM
#4
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

Not to be rude but the notes on CSS just weren't needed for this article. You're writing about "xhtml vs. html"... the use of CSS is just one way of styling X(HT)ML documents and is not the be all and end all of document styling. Other than that, it looks like you covered the basics.

Your example of "well formed" markup was a little tenuous but again, that's a minor point. You could also do with mentioning XML when talking about closing tags such as <br />. Finally, the "some other things to note" is just tacked on to the end. Why?


- Salathe

P.S. The only minor, picky point which I have about your articles thus far is that they're not the most reader-friendly. Taking half an hour (or less) to thoroughly read, edit and re-read what you're saying is worth its weight in gold. Trust me.

02-11-2005, 05:32 PM
#5
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

yes, css is just one way of styling xhtml, but i ditn't cover it enough i guess. the point was to explain the differences, where when learning html, people learn to use <font> to style their content, where in xhtml it's been depricated because the <span> tag (since there's no need for a new division tag) should be styled and used in stead.

the stuff taged one really isn't xhtml speficic. i thought i had read in html 4 according to w3schools the alt tag was required anyways, but i may have mis read it. i always used it, so i havcen't section guessed it in a long time. it didn't seem like there was much to compare to, so it got tagged on the end.

and i understood it just fine,

02-12-2005, 06:47 PM
#6
DateinaDash is offline DateinaDash
Status: The BidMaster
Join date: Nov 2004
Location: England
Expertise:
Software:
 
Posts: 10,821
iTrader: 0 / 0%
 

DateinaDash is on a distinguished road

  Old

Great article! I enjoyed reading it. Keep up the good work.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed