le tavole di comparazione fra quello che è accettato nelle pagine Html e di come deve diventare nel linguaggio di codice Xhtml 1.1
elementi vuoti
Gli elementi "vuoti" cosa sono?
Gli elementi "vuoti" nel linguaggio Html sono quelli che non chiedono di essere chiusi.
Per capirci meglio: è chiaro che se voglio una certa parola in grassetto (bold in inglese) dovrò scrivere il tag <b> ma è anche chiaro che dovrò anche mettere subito dopo la parola il comando di chiusura </b> altrimenti da quella parola in poi il mio testo sarà tutto in grassetto (oltre ad avere una pagina non valida).
Se invece voglio andare a capo di una riga scrivo <br /> (prime due lettere da line break = interrompi la linea) e basta perché è chiaro - logico - che non devo chiuderlo.
Quindi mentre il tag
b è un elemento "non vuoto", il tag br è un elemento vuoto.Gli elementi vuoti (in inglese "empty elements") sono dunque quegli elementi al cui interno non c'è del testo come invece c'è in <p> (paragrafo).
Gli elementi vuoti, come vedete qui sotto, devono terminare con /> che serve a far capire ai browsers che l'elemento è vuoto (ed è meglio farlo con quello spazio bianco e non così <br/> perché non sempre viene capito dai vecchi browsers che potrebbero creare non uno ma due spazi).
| in html | descrizione | in xhtml |
|---|---|---|
| si può scrivere | si deve scrivere | |
| <base> | document base URI | <base /> |
| <br> | line break (soft line break) = inline level | <br /> |
| <col> | table column (this is also a subtype of table) | <col /> |
| <frame> | frame (results in displayed window) | <frame /> |
| <hr> | horizontal rule (ie line) | <hr /> |
| <img> | image in document body | <img /> |
| <input> | form control | <input /> |
| <link> | a media-independent link | <link /> |
| <meta> | meta information about the document | <meta /> |
| <param> | sets the values of object that are required at runtime | <param /> |
tag di chiusura
Ecco gli elementi che nell'Xhtml devono avere il loro corrispettivo tag di chiusura mentre, per alcuni di loro, non è necessario nell'Html:
| inizio con | descrizione | finisco con |
|---|---|---|
| <body> | document body | </body> |
| <dd> | definition description/data | </dd> |
| <dt> | definition term | </dt> |
| <head> | document head | </head> |
| <html> | document type is html | </html> |
| <li> | list item | </li> |
| <option> | selectable choice on form menu | </option> |
| <p> | paragraph | </p> |
| <tbody> | table body | </tbody> |
| <td> | table data (cell) | </td> |
| <tfoot> | table footer | </tfoot> |
| <th> | table row/column header | </th> |
| <thead> | table header | </thead> |
| <tr> | table row | </tr> |
caratteri minuscoli
Poiché l'xhtml è una applicazione xml e quest'ultimo fa differenza fra caretteri maiuscoli e minuscoli, dovremo scrivere gli elementi e i loro attributi in minuscolo come è stato deciso dal W3C, quindi, per esempio:
<P>
diventa
<p>
<FORM METHOD="POST" ACTION="faiquesto.pl">
diventa
<form method="post" action="faiquesto.pl">
<IMG SRC="logo.gif" WIDTH="22" HEIGHT="22" ALT="Il nostro Logo">
diventa
<img src="logo.gif" width="22" height="22" alt="Il nostro Logo" />
annidare gli elementi correttamente
Molti non sanno che i browsers "correggono" molti e/orrori scritti dal webmaster di turno (e spesso questo lo si paga con un caricamento meno veloce della pagina se molto pesante), ma il linguaggio xhtml non perdona; quindi gli elementi di una pagina devono essere "nestled" (dall'inglese = annidati) in maniera corretta quindi, per esempio:
<p>Voglio questo <b>grassetto!</p></b>
diventa giustamente
<p>Voglio questo <b>grassetto!</b></p>
molto logico, come al solito, se decidiamo che fare le cose in ordine ha un senso...
i valori degli attributi devono essere virgolettati
Per una maggiore precisione nel linguaggio in Xhtml i valori degli attributi devono essere messi fra virgolette quindi, per esempio:
<img src=logo.gif>
diventa
<img src="logo.gif" width="22" height="22" alt="Il nostro Logo" />
e, approfittando di aver usato come esempio il caricamento di una immagine, vi faccio notare due altre cose: in Xhtml si deve mettere l'attributo
alt quando si carica una immagine dove scriveremo in maniera concisa cosa sia quella immagine e questo per farlo leggere ai non vedenti e se l'immagine non ha particolare importanza metteremo ugualmente l'attributo in questo modo alt="".L'altra cosa che vi voglio far notare non ha a che fare con l'xhtml ma con i browsers: mettendo la grandezza (width) e l'altezza (height) dell'immagine diamo noi al browser che ci legge le misure della stessa e guadagneremo tempo nel caricamento.
varie altre
Ed inoltre ci si deve ricordare che:
quando abbiamo finito di scrivere una pagina controlliamola con il validatore del W3C (trovi il link nel menu principale alla voce "links che ci interessano")
verificare di aver messo il tag <noscript> dove abbiamo messo uno script javascript
il tag deve essere scritto in xhtml, pena la non validazione della pagina, in questo modo:
<script type="text/javascript" src="nomedeljava.js"></script><noscript>><p>testo di spiegazione per coloro che non hanno java abilitato tipo: attenzione l'ora corrente non verrà mostrata se non avete java abilitato</p></noscript>
dove avremo incapsulato un tag <p> dentro alla apertura e chiusura di <noscrispt> e senza l'inutile definizione di script="language" ma solo quella necessaria di type="text/javascript"
