img

"FONDAMENTI: 5).Organizzazione degli Elementi"
Tag HtmL

Elenco dei <tag> "HtmL4 e HtmL5" secondo la funzione:

Elementi strutturali
body, head, html, meta, title

Elementi semantici di testo
abbr, acronym, address, article(5), aside(5), blockquote, cite, code, del, dfn, div, em, figure(5), footer(5), hi—h6, header(5), hgroup(5)
ins, kbd, mark(5), nay(5), p, pre, q, same, section(5), small(5), span, strong, sub, sup, var

Elementi presentazionali di testo
b, basefont, big, font, i, s, small, strike, tt, u

Altri elementi di formattazione del testo
bdo, br, center, hr

Elenchi
dd, dir, dl, dt, li, menu, ol, ul

Tabelle
caption. col. colgroup, table, tbody, td, tfoot, th, thead, tr

Collegamenti
a, base, link

Contenuti incorporati
applet, area, audio(5), embed(5), iframe, img, map, object, para., source(5), video(5)

Moduli
button, datalist(5), fieldset, form, input, isindex, keygen(5), label, legend, optgroup, option, output(5), select, textarea

Stile
style

Script
script, noscript

Tempo e misurazione
meter(5), progress(5), time(5)

Annotazione ruby
rp(5), rt(5), ruby (5)

Interattività
canvas(5), details(5), command(5)

FONDAMENTI: 6).Rapporto tra gli elementi

Rapporto genitore figlio

Se un elemento ne contiene un altro viene considerato il genitore di quello contenuto; e quello contenuto viene considerato il figlio dell'elemento contenitore.

Questo rapporto parenterale è molto importante per più di un motivo:

  • Partendo dall'elemento radice si può ricostruire l'albero di interdipendenza degli elementi.
  • Permette al Browser di ricostruire la pagina web attraverso il rapporto parentelare degli elementi.
  • Permette di raggiungere un elemento partendo da un'altro elemento.
  • Permette di risalire o ridiscendere l'albero degli elementi nella pagina web.
  • ed altro...

Un esempio illustrerà meglio il concetto:
Grafica della pagina web


FONDAMENTI: 7).Attributi Globali più usati

Attributi globali

applicabili a tutti gli elementi "HtmL4" e "HtmL5"

Attributo valori dell'attributo descrizione
accesskey carattere Per aggiungere una scorciatoia da tastiera ad un elemento
class nome personalizzato Per identificare una serie di elementi al fine di applicare loro degli stili
contenteditable true | false Per rendere il contenuto di un elemento modificabile
contextmenu "id" elemento menù Per identificare un elemento di un menù contestuale
dir ltr | rtl Per specificare la direzione del testo dell'elemento
draggable true | false Per fare un elemento trascinabile
dropzone copy | move | link Per identificare un elemento come un luogo in cui gli elementi (copiati, trascinati, o collegati) possono essere rilasciati
event # Per associare un elemento con uno script ( 'event' è un segnaposto per il nome dell'evento reale)
hidden # Per indicare che un elemento non è visibile
id nome personalizzato Per identificare un particolare elemento in modo che possa essere collegato a uno stile, o uno script
lang codice lingua Per specificare la lingua in cui viene scritto il contenuto di un elemento
spellcheck true | false Per indicare se il contenuto di un elemento deve avere il controllo ortografico e grammaticale
style proprietà css Per aggiungere informazioni di stile in linea (da usare non ordinariamente)
tabindex numero Per definire l'ordine in cui il tasto Tab conduce il visitatore attraverso elementi
title informazione suggerita Per suggerire informazioni quando l'utente pone il mouse sull'elemento
translate true | false utilizzato per specificare se i testi dei nodi figli e i valori degli attributi di un elemento devono essere tradotti o lasciati invariati.

FONDAMENTI: 8).Elementi e attributi obsoleti

Elementi obsoleti

I seguenti elementi non sono più presenti nell'ultima specifica HtmL5, perché il loro effetto è puramente di presentazione e la loro funzione è meglio gestita da CSS:

 basefont
 big
 center
 font
 strike
 tt

Questi elementi sono obsoleti perché il loro utilizzo danneggia l'usabilità e l'accessibilità:

 frame
 frameset
 noframes

E questi elementi perchè la loro funzione può essere gestita meglio da altri elementi:

acronym non è incluso perché ha creato un sacco di confusione si deve utilizzare abbr per le abbreviazioni. applet è stato reso obsoleto in favore di object.
isindex il suo utilizzo può essere sostituito da un modulo di controllo input.
dir è stato reso obsoleto in favore di ul.

Attributi obsoleti

Questi attributi HtmL4 non sono più presenti (consentiti) in HtmL5.

rev e charset (attributo in: link e a)
shape e Coords (attributo in: a)
longdesc (attributo in: img e iframe)
target (attributo in: link
) nohref (attributo in: area)
profile (attributo in: head)
version (attributo in: html)
name (attributo img (utilizzare id invece))
scheme (attributo in: meta)
rchive, classid, codebase, codetype, declare, standby (attributo in: object)
valuetype e type (attributo in: param)
axis e abbr (attributo in: td e th)
scope (attributo in: td)
summary (attributo in: table)

Altri attributi che non sono più presenti in HtmL5 perchè di presentazione e la loro funzione è meglio gestita da CSS:

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