Category Archives: HTML5

Raccomandazioni

Osserva

  • HTML5 semplifica molte cose del passato!
  • Alcune richieste di XHTML sono state abbandonate in HTML5
  • Ma XML incombe sugli standard futuri quindi…
  • E non tutte le novità sono implementate…

Pagina web conforme


Osserva

  1. Specificare il tipo di documento: <!doctype html>
  2. Specificare la codifica: <meta charset=”UTF-8″>
  3. Utilizzare i tag obbligatori del passato: html, head, body, title
  4. Utilizzare i nuovi tag per le sezioni: ARTICLE, ASIDE, FOOTER, …
  5. NON utilizzare la tecnica precedente per le sezioni: <div id=”…”>
  6. Chiudere i tag vuoti: <br/>, <img … />, …
  7. Delimitare con le doppie virgolette i valori degli attributi: “left”, …
  8. Scrivere tutto minuscolo (tag, attributi, valori, nomi dei file): <img align=”left” … />
  9. Non lasciare spazi prima e dopo del segno =: <img align=”left” … />
  10. Specificare l’attributo alt delle immagini: <img alt=”titolo” … />
  11. Specificare le dimensioni delle immagini: <img alt=”titolo” style=”height:…px;width=…px” … />
  12. Per indentare usare 2 spazi invece delle tabulazioni
  13. Non andare a capo, o lasciare righe vuote, senza motivo
  14. L’attributo type non è necessario:

Non utilizzare (sostituire con)

  • APPLET (EMBED, OBJECT), BIG (H1), CENTER, FONT, FRAME FRAMESET NOFRAMES (IFRAME, CSS), MARQUEE, STRIKE (DEL, S), TT (KBD)
  • BODY: alink, bgcolor, link, text, vlink, …
  • HR: align, color, noshade, size, width
  • IMG: align, border, hspace, lowsrc (.jpg), name (id), vspace
  • TABLE: align, bgcolor, border, cellpadding, cellspacing, width, …
  • UL: type
  • Continua…

INPUT > range

Prova a interagire con il campo di tipo range, cambiando anche browser.




Trascina il cursore e il valore corrispondente apparirà nella casella di testo sottostante

INPUT > placeholder

Prova a inserire un dato valido al posto del placeholder.

INPUT > number

Prova a interagire con il campo di tipo number, cambiando anche browser.



Modifica il numero e apparirà nella casella di testo sottostante

INPUT > color

Prova a interagire con il campo di tipo color, cambiando anche browser.



Modifica il colore e il codice corrispondente apparirà nella casella di testo sottostante

INPUT > date

Prova a interagire con il campo di tipo date, cambiando anche browser.



Modifica la data e apparirà nella casella di testo sottostante

DOCTYPE

Si semplifica notevolmente la sintassi precedente.

Le 3 scelte precedenti (HTML 4.01)

diventano un’unica possibilità

Pagina di esempio