Η XHTML δεν διαφέρει πολύ από την HTML 4.01. Όταν κάποιος γράφει τις ιστοσελίδες του σύμφωνα με το πρότυπο της HTML 4.01, τότε είναι πολύ κοντά να τις μετατρέψει στο πρότυπο της XHTML 1.0.

Οι πιο σημαντικές διαφορές στον τρόπο σύνταξης μεταξύ της XHTML και της HTML είναι ότι στην XHTML όλες οι ετικέτες, οι ιδιότητες και οι τιμές τους, γράφονται με μικρά (πεζά). Επίσης όλες οι ετικέτες έχουν ετικέτα τέλους. Παρακάτω αναλύεται ο τρόπος σύνταξης σύμφωνα με το πρότυπο της XHTML καθώς και οι διαφορές που υπάρχουν με το πρότυπο της HTML.

Ετικέτες, ιδιότητες και τιμές γράφονται με πεζούς χαρακτήρες

Στην HTML έχουμε την δυνατότητα να γράφουμε κώδικα είτε με πεζούς είτε με κεφαλαίους χαρακτήρες. Ιδιαίτερα οι πρώτοι web designers που έγραφαν σε HTML, χρησιμοποιούσαν και παρότρυναν στα βιβλία τους να χρησιμοποιούμε κεφαλαίους χαρακτήρες για τις ετικέτες και πεζούς για τις ιδιότητες και τις τιμές, ώστε οι ετικέτες να ξεχωρίζουν από τον υπόλοιπο κώδικα για να είναι πιο ευανάγνωστος.

Στην XHTML δεν ισχύει αυτό. Οι ετικέτες καθώς και οι ιδιότητες με τις τιμές τους πρέπει να γράφονται με πεζούς χαρακτήρες.

Στην HTML μπορούμε να γράψουμε:
<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 ο παρακάτω κώδικας είναι σωστός:
<p align=right width=560>Κείμενο... κείμενο...</p>
Στην XHTML οι τιμές των ιδιοτήτων των ετικετών πρέπει απαραίτητα να βρίσκονται μέσα σε διπλά εισαγωγικά, όπως παρακάτω:
<p align="right" width="560">Κείμενο... κείμενο...</p>

Όλες οι XHTML ετικέτες πρέπει να κλείνουν

Ενώ στην HTML ο παρακάτω κώδικας δεν είναι λάθος:
<p>Αυτή είναι μια παράγραφος
<p>Αυτή είναι μια άλλη παράγραφος
στην XHTML είναι λάθος. Όλες μα όλες οι ετικέτες απαραίτητα πρέπει να έχουν ετικέτα τέλους. Έτσι ο παραπάνω κώδικας στην XHTML γράφεται έτσι:
<p>Αυτή είναι μια παράγραφος</p>
<p>Αυτή είναι μια άλλη παράγραφος</p>
Μερικές ετικέτες όπως η <br>, η <img>, και η <input> δεν έχουν ετικέτα τέλους. Στην περίπτωση αυτή, βάζουμε / πριν την δεξιά αγκύλη, όπως παρακάτω:
<img src="/logo.png" border="0" />
<input type="text" name="address" />

Οι XHTML ετικέτες πρέπει να είναι σωστά φωλιασμένες

Η HTML επιτρέπει σε μερικές ετικέτες να μη κλείνουν με τον σωστό τρόπο, όπως το παρακάτω παράδειγμα:
<b><i>Μαθαίνω XHTML</b><i>
Όπως παρατηρείτε, πρώτα ανοίγει η ετικέτα <b> και έπειτα η <i>, άρα πρέπει να κλείσει πρώτα η εσωτερική ετικέτα, η <i>, και έπειτα η εξωτερική. Η σωστή σύνταξη στην XHTML είναι η παρακάτω:
<b><i>Μαθαίνω XHTML</i></b>
Ένα άλλο συνηθισμένο λάθος που κάνουμε όταν γράφουμε HTML κώδικα, είναι να μην κλείνουμε μια επιλογή μιας λίστας η οποία με την σειρά της περιέχει άλλη λίστα:
<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>

Ο κώδικας XHTML πρέπει να εσωκλείεται από μια ετικέτα-ρίζα

Οτιδήποτε γράφουμε μέσα στον κώδικα πρέπει να υπάρχει μέσα στις ετικέτες <html> και </html>. Αυτό ισχύει και στην HTML.
<html>
<head>
<title>Web site</title>
</head>
<body>
<p align="center">Κείμενο... κείμενο...</p>
</body>
</html>

Η σύντμηση δεν επιτρέπεται στην XHTML

Σε ορισμένες περιπτώσεις στην HTML μπορούμε να παραλείψουμε την τιμή μιας ιδιότητας όταν αυτή είναι ίδια με την ιδιότητα. Δηλαδή αντί για :
<input checked="checked">
στην HTML για λόγους συντομίας μπορούμε να γράψουμε :
<input checked />
Ένα άλλο παράδειγμα είναι το παρακάτω. Αντί για:
<option selected="selected">κείμενο</option>
στην HTML μπορούμε να γράψουμε :
<option selected>κείμενο</option>
Η σύντμηση δεν επιτρέπετε στην XHTML όπου πρέπει απαραίτητα σε κάθε περίπτωση να γράφεται η ιδιότητα και να ακολουθεί η τιμή της μέσα σε διπλά εισαγωγικά
Παρακάτω υπάρχει μια λίστα με τις συντμήσεις των ιδιοτήτων που υπάρχουν στην 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 γράφουμε:
<em lang="es">Vamos</em>
Όποτε χρησιμοποιούμε την ιδιότητα αυτή, στην XHTML, πρέπει να την γράφουμε με τον παρακάτω τρόπο:
<em lang="es" xml:lang="es">Vamos</em>

Τα απαραίτητα στοιχεία ενός XHTML αρχείου

Κάθε αρχείο γραμμένο σε XHTML, πρέπει να αρχίζει με την ετικέτα <!DOCTYPE>, με τις ετικέτες <html>, <head> και <body> να ακολουθούν.

Αυτό είναι ένα αρχείο XHTML με τα ελάχιστα απαραίτητα στοιχεία:
<!DOCTYPE ...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Τίτλος ιστοσελίδας</title>
</head>
<body>
</body>
</html>
Η ετικέτα <!DOCTYPE> δεν είναι ετικέτα της XHTML. Για την ετικέτα αυτή θα μάθουμε στο αμέσως επόμενο κεφάλαιο.

Η ιδιότητα xmlns της ετικέτας <html>, καθορίζει τον χώρο των ονομάτων της xml (xml namespace) για το έγγραφο και είναι απαραίτητη σε κάθε XHTML έγγραφο, αν και η μη ύπαρξη της ιδιότητας αυτής δεν θα δημιουργήσει πρόβλημα καθώς θεωρείται εξ ορισμού ιδιότητα της ετικέτας <html>. Έτσι αν δεν την συμπεριλάβουμε στο XHTML έγγραφο μας, θα θεωρείται από τον browser ότι υπάρχει.
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.