Elementi ed attributi assenti (non inclusi) in HTML5 ed altre differenze con HTML4

Come indicato all’inizio di questa guida non esistono in HTML5 veri e propri elementi deprecati; esistono tuttavia tags obsoleti che gli autori non devono più utilizzare e che invece gli user agents sono ancora chiamati a supportare per retrocompatibilità , vediamo di quali elementi stiamo parlando.

Elementi considerati come visual-markup e i cui effetti sono più correttamente ottenibili con i CSS:

basefont
big
center
font
strike, utilizzare del se si tratta di evidenziare una modifica, altrimenti s.
tt

Elementi considerati dannosi per l’accessibilità e l’usabilità :

frame
frameset
noframes

In sostituzione degli elementi legati ai frames è consigliato ricorrere all’elemento iframe in combinazione con i CSS; in alternativa è suggerito il caricamento di contenuti (pagine complete) server-side.

Elementi non inclusi perchè poco utilizzati, generanti confusione o le cui funzionalità sono implementate da altri elementi:

acronym non è incluso perchè ha generato molta confusione. Agli autori è suggerito ricorrere ad abbr per le abbreviazioni.
applet è diventato obsoleto in favore di object.
isindex: le sue funzionalità possono essere ottenute attraverso l’utilizzo dei form controls.
dir è diventato obsoleto in favore di ul.

Discorso a parte per il tag noscript; conforme nella sintassi HTML di HTML5, non incluso nella sintassi XML perchè il suo impiego richiede un parser HTML.

Attributi assenti (non inclusi)

Alcuni attributi presenti in HTML4 non sono più permessi (limitatamente in relazione ad alcuni elementi, messi tra parentesi) nella nuova specifica, gli autori devono quindi evitare:

rev e charset (link ed a); utilizzare rel al posto di rev per il tag link.
shape e coords (tag a); si consiglia di utilizzare un HTTP Content-Type Header per la risorsa linkata.
longdesc attribute (img ed iframe); utilizzare un normale elemento a per linkare la descrizione nel caso di iframe, una imagemap per le immagini.
target (link); non necessario.
nohref (area); è sufficiente omettere href.
profile (head); non necessario.
version (html); non necessario.
name (img); utilizzare l’ attributo id.
scheme (meta); utilizzare un solo scheme per campo.
archive, classid, codebase, codetype, declare e standby (object); evitare standby facendo in modo che la risorsa si carichi velocemente (sic!).
valuetype e type (param); utilizzare name e value evitando la dichiarazione del tipo.
axis ed abbr (td e th); utilizzare al posto di abbr l’attributo title in modo da chiarificare il contenuto.
scope (td).
summary (table); descrivere la tabella in un paragrafo introduttivo o in un tag caption all’interno di table, magari avvalendosi dell’elemento details.

HTML5 inoltre esclude tutti gli attributi legati alla presentazione dell’informazione spingendo gli autori ad utilizzare i CSS per ottenere gli stessi risultati:

align riferito a caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
alink, link, text e vlink, background riferiti al tag body.
bgcolo riferito a table, tr, td, th and body.
border riferito ad object.
cellpadding e cellspacing riferiti a table.
char e charoff riferiti a col, colgroup, tbody, td, tfoot, th, thead e tr.
clear riferito a br.
compact riferito a dl, menu, ol e ul.
frame riferito a table.
frameborder riferito a iframe.
height riferito a td e th.
hspace e vspace riferito ad img e object.
marginheight e marginwidth riferiti ad iframe.
noshade riferito ad hr.
nowrap riferito a td e th.
rules riferito a table.
scrolling riferito ad iframe.
size riferito ad hr.
type riferito a li, ol e ul.
valign riferito a col, colgroup, tbody, td, tfoot, th, thead e tr.
width riferito a hr, table, td, th, col, colgroup e pre.

Altre differenze tra HTML5 ed HTML4

MathML (MathML Mathematical Markup Language) ed SVG (Scalable Vector Graphics)

La sintassi HTML di HTML5 permette di utilizzare gli elementi SVG e MathML all’interno di un documento, il draft propone un semplice esempio:

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

Una breve digressione su SVG, definizione (in)formale

Per Scalable Vector Graphics si intende la tecnologia derivata da XML che permette di renderizzare elementi grafici vettoriali (forme geometriche, testi, immagini); definisce quindi le immagini in termini di vettori e non di pixel, ciò preserva la qualità iniziale dell’elemento grafico anche in seguito a ridimensionamenti.

In ambito Web esistono molte librerie che permettono la creazione di grafica svg tramite javascript, una delle più apprezzate (e a proposito della quale troverete in questo sito alcuni articoli) è raphael.js.

SVG si contrappone per certi versi a canvas ed alle API ad esso correlate che generano bitmap. Quale dei due approcci utilizzare dipende dal tipo di task che si deve portare a termine.

Abbiamo ricordato SVG, spendiamo qualche parola anche per MathML.

MathML è un applicazione di XML creata per includere espressioni matematiche (con la loro particolare notazione) all’interno delle pagine Web.

Poichè l’approfondimento di queste particolari tecnologie (SVG e MathML) esula dallo scopo della guida vi rimando ai documenti di specifica del W3C che le trattano rispettivamente qui e qui

L’attributo contenteditable

Dedichiamo uno spazio particolare a contenteditable; si tratta di una enumerazione, può valere:

true: indica che l’elemento è editabile
false: indica che l’elemento non è editabile
stringa vuota (equivale a true)

Esiste uno stato inherit che indica all’elemento figlio di comportarsi come il contenitore più prossimo.

È possibile ricavare/impostare il valore di contenteditable attraverso il getter/setter:

element.contentEditable [ = value ]

è possibile accedere all’informazione anche tramite:

element.isContentEditable

È permesso rendere l’intero documento editabile attraverso document.designMode [ = value ] che assume i valori "on" od "off".

Esiste un getter/setter anche per attivare il controllo sintattico dei contenuti inseriti nell’elemento, si tratta di element.spellcheck [ = value ].

Vediamo un esempio:

<!doctype html>
<html>
<head>
  <title>ContentEditable</title>
  <style>
  body {
    font-size: 12px;
  }
  #diveditabile {
    width: 300px; 
    height: 50px; 
    border: 1px solid #999;
    color: #333;
    padding: 10px;
    text-align: center;
  }
  </style>
</head>
<body>
  <div contenteditable="true" id="diveditabile">
    <span spellcheck="false">Scrivi pure ciò che pensi!</span>
  </div>
</body>

La scrittura nell’area editabile in Firefox:

Varie (Miscellaneous)

HTML ora prevede il supporto nativo per IRIs (Internationalized Resource Identifiers), completamente sfruttabile solo se l’encoding del documento è UTF-8 o UTF-16.

L’attributo lang può essere valorizzato con la stringa vuota in aggiunta ad un valido identificatore di linguaggio così come xml:lamg in XML.