Elemento HTML: differenze tra le versioni

Versione delle 01:16, 30 dic 2020

Versione delle 17:14, 29 gen 2021

Riga 439:

== Frame ==

{{Vedi anche|Iframe}}

I frame, in italiano "cornici", permettono di strutturare il documento HTML in sottodocumenti che il browser gestisce come finestre separate.

Ad esempio è possibile tenere sempre fisso e visibile un menu di navigazione in una prima cornice posizionata nel bordo sinistro della pagina, affiancata ad una seconda cornice che racchiude il contenuto principale scorrevole.

I frame, in italiano "cornici", permettono di strutturare il documento HTML in sottodocumenti che il browser gestisce come finestre separate. Ad esempio è possibile tenere sempre fisso e visibile un menu di navigazione in una prima cornice posizionata nel bordo sinistro della pagina, affiancata ad una seconda cornice che racchiude il contenuto principale scorrevole.

Gli elementi <code>frame</code> devono essere inclusi dentro un elemento <code>frameset</code> che sostituisce il <code>body</code> e lo stesso documento HTML deve essere dichiarato come Frameset. In altre parole, un elemento <code>html</code> può contenere un <code>head</code> ed un <code>body</code> (nel caso di documenti Strict o Transitional) o, in alternativa, un <code>head</code> e un <code>frameset</code>.<ref>{{cita web

|url=https://www.w3.org/TR/html4/present/frames.html#h-16.1

Riga 472 ⟶ 473:

;<code>&lt;iframe>...&lt;/iframe></code>

:Un frame speciale ''inline'', inseribile all'interno di un normale elemento <code>body</code>. Ha molti attributi comuni all'elemento <code>img</code>, ma incorpora, invece di un'immagine, un altro documento HTML.

== HTML5 ==

{{Vedi anche|HTML5}}

{| class="wikitable"

|'''TAG'''<ref>{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it|lingua=it-IT|accesso=2021-01-29}}</ref>

|'''SCOPO'''

|-

| colspan="2" |'''Nuovi elementi strutturali e semantici'''

|-

|Header

| rowspan="6" |[[File:Html4-vs-html5-struttura.png|alt=Confronto tra pagina di base HTML4 e 5|centro|miniatura|Confronto tra pagina di base HTML4 e 5]]

|-

|Footer

|-

|Section

|-

|Nav

|-

|Article ''(nel caso di articoli in homepage)''

|-

|Aside ''(contenuti correlati al principale)''

|-

|Hgroup

|Raggruppa i tag Heading

|-

|<figure> e <figcaption>

|Didascalie per contenuti

|-

|Embed

|Inserirsce contenuti interattivi o multimediali

|-

|Ruby

|Specifica le annotazioni Ruby

|-

|Wbr

|Il browser può inserire un a capo

|-

|<command> e <menu>

|Definiscono barre degli strumenti o menu di scelta rapida

|-

|<details> e <summary>

|Widget informativi per gli utenti

|-

|mark

|Parte di un testo segnato o evidenziato all'utente

|-

|<nowiki><time> e attributi </nowiki>''pubdate'' e ''datetime''

|Tempo su 24 ore o una data nel calendario Gregoriano

|-

|Meter

|Misura scalare di un intervallo noto o un valore frazionario

|-

|Progress

|Stato di completamento di un compito

|-

|Picture

|Contenitore per immagini

|-

|Microdati

|Per ogni tag HTML si possono specificare degli attributi semantici

|-

| colspan="2" |'''Nuovi attributi e tipi di input per i form'''

|-

|autofocus, placeholder e form

| rowspan="8" |[[File:Form-errori.png|alt=form|centro|miniatura|L'autofocus in questo caso è in rosso. Gli input type equivalgono agli spazi da riempire (in questo caso c'è "email"). Il placeholder è il testo di esempio di ogni spazio]]

|-

|Input type: tel

|-

|Input type: search

|-

|Input type: url

|-

|Input type: email

|-

|Input type: number

|-

|Input type: range

|-

|Input type: color

|-

|Datalist

|Completamento automatico ad un elemento del form

|-

|Autocomplete

|Permette o no al browser di riempire i campi

del form in maniera automatica

|-

|Min, max

|Definiscono il valore minimo e massimo consentito

|-

|Multiple

|Permette all’utente possa inserire più valori per lo stesso input

|-

|Pattern

|Verifica che il valore inserito rispetti determinate regole

|-

|Required

|Rende obbligatoria la compilazione di uno spazio del form

|-

|Step

|Definisce la distanza che intercorre tra un valore e il successivo

|-

|keygen

|Generatore di chiavi numeriche all’interno di un form

|-

|output

|Restituisce il risultato di un calcolo

|-

| colspan="2" |'''API per Web Applications'''

|-

|Applicazioni web offline (file ".manifest")

|Dopo la prima sessione di navigazione online,

resteranno accessibili alcuni oggetti anche

in assenza di una connessione di rete.

|-

|Indexed Database API

|Creare e manipolare un database all’interno del browser

|-

|WebStorage API

|Si possono ad esempio tenere aperti contemporaneamente

due account social o mail sullo stesso browser e ogni navigazione

sul primo comporterà il logout del secondo e viceversa

|-

|Web Workers API

|Consentono l’esecuzione di pezzi di codice Javascript

senza intaccare le performance della pagina web

|-

|WebSocket API

|Stabiliscono e mantengono una connessione dati tra browser

e server remoto sulla quale far transitare messaggi

in entrambe le direzioni

|-

|Drag and Drop

|Trascinamento e rilascio di oggetti

|-

|Geolocation API

|Geolocalizzazione

|-

| colspan="2" |'''Multimedia'''

|-

|[[.svg|SVG]] e [[MathML]]

|Immagini vettoriali e formule matematiche

|-

|[[Canvas (elemento HTML)|Canvas]]

|API adatte a tracciare linee, cerchi, rettangoli, immagini e oggetti 3D

|-

|Video

|Inserisce file video (prima fattibile solo con [[Adobe Flash]])

|-

|Audio

|Inserisce file audio

|}

== SEO ==

{{Vedi anche|Ottimizzazione per i motori di ricerca}}I principali fattori di [[SEO]] per HTML sono:

* Parola chiave principale nel primo paragrafo

* Aggiungere lo stato Nofollow ai link di affiliazione

* Anchor Link nei contenuti più lunghi

* Uso di Google My Business e Bing Places

* Entrare nel Knowledge Graph di Google

* Parole chiave nei tag H1

* Tag TITLE nei link

* Tag ALT, TITLE, LONGDESC, CAPTION nelle immagini

* Applicare il ''social markup''. Esempio:

<syntaxhighlight lang="html">

<meta name=”twitter:card” content=”Film”>

<meta name=”twitter:site” content=”@Titanic”>

<meta name=”twitter:creator” content=”@John Smith”>

<meta name=”twitter:title” content=”Uscito il nuovo film di Cameron”>

<meta name=”twitter:description” content=”Descrizione del contenuto”>

<meta name=”twitter:image” content=”Url dell’immagine del contenuto”>

</syntaxhighlight>

* Applicare lo ''schema markup''. Esempio:

<syntaxhighlight lang="html">

<div itemscope itemtype ="https://www.titanic.com/">

<h1 itemprop="name">Titanic</h1>

<span>Direttore: <span itemprop="director">James Cameron</span> (nato il 16 agosto 1954)</span>

<span itemprop="genre">Fantascienza</span>

<a href="../film/titanic-trailer.html" itemprop="trailer">Trailer</a>

</div>

</syntaxhighlight>

== Note ==