Η XHTML δεν διαφέρει πολύ από την HTML 4.01. Όταν κάποιος γράφει τις ιστοσελίδες του σύμφωνα με το πρότυπο της HTML 4.01, τότε είναι πολύ κοντά να τις μετατρέψει στο πρότυπο της XHTML 1.0.
Οι πιο σημαντικές διαφορές στον τρόπο σύνταξης μεταξύ της XHTML και της HTML είναι ότι στην XHTML όλες οι ετικέτες, οι ιδιότητες και οι τιμές τους, γράφονται με μικρά (πεζά). Επίσης όλες οι ετικέτες έχουν ετικέτα τέλους. Παρακάτω αναλύεται ο τρόπος σύνταξης σύμφωνα με το πρότυπο της XHTML καθώς και οι διαφορές που υπάρχουν με το πρότυπο της HTML.
Οι πιο σημαντικές διαφορές στον τρόπο σύνταξης μεταξύ της XHTML και της HTML είναι ότι στην XHTML όλες οι ετικέτες, οι ιδιότητες και οι τιμές τους, γράφονται με μικρά (πεζά). Επίσης όλες οι ετικέτες έχουν ετικέτα τέλους. Παρακάτω αναλύεται ο τρόπος σύνταξης σύμφωνα με το πρότυπο της XHTML καθώς και οι διαφορές που υπάρχουν με το πρότυπο της HTML.
Ετικέτες, ιδιότητες και τιμές γράφονται με πεζούς χαρακτήρες
Στην HTML έχουμε την δυνατότητα να γράφουμε κώδικα είτε με πεζούς είτε με κεφαλαίους χαρακτήρες. Ιδιαίτερα οι πρώτοι web designers που έγραφαν σε HTML, χρησιμοποιούσαν και παρότρυναν στα βιβλία τους να χρησιμοποιούμε κεφαλαίους χαρακτήρες για τις ετικέτες και πεζούς για τις ιδιότητες και τις τιμές, ώστε οι ετικέτες να ξεχωρίζουν από τον υπόλοιπο κώδικα για να είναι πιο ευανάγνωστος.
Στην XHTML δεν ισχύει αυτό. Οι ετικέτες καθώς και οι ιδιότητες με τις τιμές τους πρέπει να γράφονται με πεζούς χαρακτήρες.
Στην HTML μπορούμε να γράψουμε:
Η σωστή σύνταξη του παραπάνω κώδικα σύμφωνα με το πρότυπο της XHTML είναι η παρακάτω:
<head>
<title>Web site</title>
</head>
<body>
<p align="center">Κείμενο... κείμενο...</p>
</body>
</html>
Στην XHTML δεν ισχύει αυτό. Οι ετικέτες καθώς και οι ιδιότητες με τις τιμές τους πρέπει να γράφονται με πεζούς χαρακτήρες.
Στην HTML μπορούμε να γράψουμε:
<HTML>
<HEAD>
<TITLE>Web site</TITLE>
</HEAD>
<BODY>
<P align="center">Κείμενο... κείμενο...</P>
</BODY>
</HTML>
<HEAD>
<TITLE>Web site</TITLE>
</HEAD>
<BODY>
<P align="center">Κείμενο... κείμενο...</P>
</BODY>
</HTML>
Η σωστή σύνταξη του παραπάνω κώδικα σύμφωνα με το πρότυπο της XHTML είναι η παρακάτω:
<head>
<title>Web site</title>
</head>
<body>
<p align="center">Κείμενο... κείμενο...</p>
</body>
</html>
Οι τιμές των ιδιοτήτων θα πρέπει να εσωκλείονται σε διπλά εισαγωγικά
Στην HTML ο παρακάτω κώδικας είναι σωστός:
Στην XHTML οι τιμές των ιδιοτήτων των ετικετών πρέπει απαραίτητα να βρίσκονται μέσα σε διπλά εισαγωγικά, όπως παρακάτω:
<p align=right width=560>Κείμενο... κείμενο...</p>
<p align="right" width="560">Κείμενο... κείμενο...</p>
Όλες οι XHTML ετικέτες πρέπει να κλείνουν
Ενώ στην HTML ο παρακάτω κώδικας δεν είναι λάθος:
στην XHTML είναι λάθος. Όλες μα όλες οι ετικέτες απαραίτητα πρέπει να έχουν ετικέτα τέλους. Έτσι ο παραπάνω κώδικας στην XHTML γράφεται έτσι:
Μερικές ετικέτες όπως η <br>, η <img>, και η <input> δεν έχουν ετικέτα τέλους. Στην περίπτωση αυτή, βάζουμε / πριν την δεξιά αγκύλη, όπως παρακάτω:
<p>Αυτή είναι μια παράγραφος
<p>Αυτή είναι μια άλλη παράγραφος
<p>Αυτή είναι μια άλλη παράγραφος
<p>Αυτή είναι μια παράγραφος</p>
<p>Αυτή είναι μια άλλη παράγραφος</p>
<p>Αυτή είναι μια άλλη παράγραφος</p>
<img src="/logo.png" border="0" />
<input type="text" name="address" />
<input type="text" name="address" />
Οι XHTML ετικέτες πρέπει να είναι σωστά φωλιασμένες
Η HTML επιτρέπει σε μερικές ετικέτες να μη κλείνουν με τον σωστό τρόπο, όπως το παρακάτω παράδειγμα:
Όπως παρατηρείτε, πρώτα ανοίγει η ετικέτα <b> και έπειτα η <i>, άρα πρέπει να κλείσει πρώτα η εσωτερική ετικέτα, η <i>, και έπειτα η εξωτερική. Η σωστή σύνταξη στην XHTML είναι η παρακάτω:
Ένα άλλο συνηθισμένο λάθος που κάνουμε όταν γράφουμε HTML κώδικα, είναι να μην κλείνουμε μια επιλογή μιας λίστας η οποία με την σειρά της περιέχει άλλη λίστα:
Η σωστή σύνταξή είναι η παρακάτω:
<b><i>Μαθαίνω XHTML</b><i>
<b><i>Μαθαίνω XHTML</i></b>
<ul>
<li>Opel</li>
<li>Ford
<ul>
<li>Fiesta</li>
<li>Focus</li>
</ul>
<li>Hyundai</li>
</ul>
<li>Opel</li>
<li>Ford
<ul>
<li>Fiesta</li>
<li>Focus</li>
</ul>
<li>Hyundai</li>
</ul>
Η σωστή σύνταξή είναι η παρακάτω:
<li>Opel</li>
<li>Ford
<ul>
<li>Fiesta</li>
<li>Focus</li>
</ul>
</li>
<li>Hyundai</li>
</ul>
<li>Ford
<ul>
<li>Fiesta</li>
<li>Focus</li>
</ul>
</li>
<li>Hyundai</li>
</ul>
Ο κώδικας XHTML πρέπει να εσωκλείεται από μια ετικέτα-ρίζα
Οτιδήποτε γράφουμε μέσα στον κώδικα πρέπει να υπάρχει μέσα στις ετικέτες <html> και </html>. Αυτό ισχύει και στην HTML.
<html>
<head>
<title>Web site</title>
</head>
<body>
<p align="center">Κείμενο... κείμενο...</p>
</body>
</html>
<head>
<title>Web site</title>
</head>
<body>
<p align="center">Κείμενο... κείμενο...</p>
</body>
</html>
Η σύντμηση δεν επιτρέπεται στην XHTML
Σε ορισμένες περιπτώσεις στην HTML μπορούμε να παραλείψουμε την τιμή μιας ιδιότητας όταν αυτή είναι ίδια με την ιδιότητα. Δηλαδή αντί για :
στην HTML για λόγους συντομίας μπορούμε να γράψουμε :
Ένα άλλο παράδειγμα είναι το παρακάτω. Αντί για:
στην HTML μπορούμε να γράψουμε :
Η σύντμηση δεν επιτρέπετε στην XHTML όπου πρέπει απαραίτητα σε κάθε περίπτωση να γράφεται η ιδιότητα και να ακολουθεί η τιμή της μέσα σε διπλά εισαγωγικά
Παρακάτω υπάρχει μια λίστα με τις συντμήσεις των ιδιοτήτων που υπάρχουν στην HTML και πως αυτές πρέπει να γράφονται στην XHTML:
<input checked="checked">
<input checked />
<option selected="selected">κείμενο</option>
<option selected>κείμενο</option>
Παρακάτω υπάρχει μια λίστα με τις συντμήσεις των ιδιοτήτων που υπάρχουν στην HTML και πως αυτές πρέπει να γράφονται στην XHTML:
| HTML | XHTML |
|---|---|
| compact | compact="compact" |
| checked | checked="checked" |
| declare | declare="declare" |
| readonly | readonly="readonly" |
| disabled | disabled="disabled" |
| selected | selected="selected" |
| defer | defer="defer" |
| ismap | ismap="ismap" |
| nohref | nohref="nohref" |
| noshade | noshade="noshade" |
| nowrap | nowrap="nowrap" |
| multiple | multiple="multiple" |
| noresize | noresize="noresize" |
Η ιδιότητα lang
Η ιδιότητα lang μπορεί να εφαρμοστεί σχεδόν σε όλες τις ετικέτες της HTML και προσδιορίζει την γλώσσα που είναι γραμμένο το κείμενο. Στην HTML γράφουμε:
Όποτε χρησιμοποιούμε την ιδιότητα αυτή, στην XHTML, πρέπει να την γράφουμε με τον παρακάτω τρόπο:
<em lang="es">Vamos</em>
<em lang="es" xml:lang="es">Vamos</em>
Τα απαραίτητα στοιχεία ενός XHTML αρχείου
Κάθε αρχείο γραμμένο σε XHTML, πρέπει να αρχίζει με την ετικέτα <!DOCTYPE>, με τις ετικέτες <html>, <head> και <body> να ακολουθούν.
Αυτό είναι ένα αρχείο XHTML με τα ελάχιστα απαραίτητα στοιχεία:
Η ετικέτα <!DOCTYPE> δεν είναι ετικέτα της XHTML. Για την ετικέτα αυτή θα μάθουμε στο αμέσως επόμενο κεφάλαιο.
Η ιδιότητα xmlns της ετικέτας <html>, καθορίζει τον χώρο των ονομάτων της xml (xml namespace) για το έγγραφο και είναι απαραίτητη σε κάθε XHTML έγγραφο, αν και η μη ύπαρξη της ιδιότητας αυτής δεν θα δημιουργήσει πρόβλημα καθώς θεωρείται εξ ορισμού ιδιότητα της ετικέτας <html>. Έτσι αν δεν την συμπεριλάβουμε στο XHTML έγγραφο μας, θα θεωρείται από τον browser ότι υπάρχει.
Αυτό είναι ένα αρχείο XHTML με τα ελάχιστα απαραίτητα στοιχεία:
<!DOCTYPE ...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Τίτλος ιστοσελίδας</title>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Τίτλος ιστοσελίδας</title>
</head>
<body>
</body>
</html>
Η ιδιότητα xmlns της ετικέτας <html>, καθορίζει τον χώρο των ονομάτων της xml (xml namespace) για το έγγραφο και είναι απαραίτητη σε κάθε XHTML έγγραφο, αν και η μη ύπαρξη της ιδιότητας αυτής δεν θα δημιουργήσει πρόβλημα καθώς θεωρείται εξ ορισμού ιδιότητα της ετικέτας <html>. Έτσι αν δεν την συμπεριλάβουμε στο XHTML έγγραφο μας, θα θεωρείται από τον browser ότι υπάρχει.
