Differenza tra DIV e SPAN

e sono tag HTML che definiscono gli elementi nel codice HTML.

HTML (Hypertext Markup Language) è un codice strutturato utilizzato per creare e visualizzare le pagine Web che visitiamo online, ogni giorno, su qualsiasi dispositivo.

Altre tecnologie e linguaggi di programmazione possono essere integrati con HTML per fornire funzionalità dinamiche e avanzate su un sito web.

Comprendere l'HTML

Hyper Text Markup Language (HTML) è un linguaggio di markup ampiamente utilizzato e fa riferimento alla struttura e al codice "dietro" una pagina Web, visualizzata in un browser Web.

HTML è un file di testo che utilizza un codice specifico (sintassi) per definire lo stile, il contenuto, il layout e il formato di una pagina. Il markup term indica che il testo / codice è in preparazione per l'elaborazione e la presentazione, ad esempio su una pagina Web, in un browser web.

Il World Wide Web Consortium (W3C) [i] riconosce l'HTML come linguaggio di markup formale nello sviluppo di pagine Web e, pertanto, l'HTML è supportato dalla maggior parte dei browser. Quindi, le pagine Web possono essere sviluppate in una lingua riconosciuta, facilmente interpretabile da diversi browser per rendere la pagina come previsto dal designer.

La versione attuale ancora utilizzata è HTML4, ma sta lentamente scomparendo quando HTML5 ottiene più supporto e adozione per pagine web dinamiche e reattive.

La reattività sta diventando una componente fondamentale nello sviluppo web per offrire un'esperienza utente più semplice e dinamica, che deve essere sistemata su più dispositivi come smartphone, tablet e laptop.

Cascading Style Sheets (CSS) sta diventando parte integrante della costruzione di pagine dinamiche e reattive. È un file separato che definisce gli attributi per ogni elemento come font, colore, allineamento - così lo sviluppatore non ha indicato lo stile dell'elemento ogni volta che viene usato nel codice HTML.

Struttura di base dell'HTML

Per ottenere il massimo da qualsiasi linguaggio di sviluppo, l'adesione alla struttura dei file standard e il miglior utilizzo della sintassi sono fondamentali per fornire contenuti Web stabili, mirati e visivamente accattivanti.

Una pagina HTML ha una struttura definita da elementi (chiamati anche tag). Quando si scrive il codice HTML, questi elementi sono mostrati in coppie - ciò significa che ogni tag ha bisogno di un'apertura e una chiusura. Un inizio e una fine.

Un elemento è aperto con la sintassi: e chiuso con.  Il / la linea obliqua indica la fine della definizione di quell'elemento.

Gli attributi e il contenuto dell'elemento sono definiti tra questi due punti.

Il elementi minimi richiesto per un file HTML sono la definizione, (solo HTML4) e i tag.

• Definizione DOCTYPE

La Definizione (DTD) deve prima essere dichiarata come il primo tag in un file HTML, quindi quando la pagina viene elaborata, il browser Web sa quale tipo di file è, e può quindi interpretare e visualizzare correttamente la pagina.

In HTML4, ci sono variazioni del DTD (a seconda degli attributi e degli elementi della pagina) ma le dichiarazioni più tipiche sarebbero incluse come:

o

Il DTD in HTML5 è molto più semplice:

· HTML, HEAD e BODY

• Il tag indica che si tratta di un file HTML e questa è la radice dell'elemento HTML che contiene tutti gli altri elementi successivi definiti al suo interno; e l'inclusione di un attributo di lingua è raccomandato come best practice; per esempio:

• È richiesto in HTML4, ma non è obbligatorio in HTML5. È un elemento che contiene altri elementi rilevanti per questa parte del documento, come il titolo, gli script di riferimento, la definizione di stili e metadati. Il tag chiuso deve essere usato prima di definire il 
• L'elemento contiene il contenuto principale per la pagina, tra cui tabelle, testo di immagini, elenchi, ecc. Dopo che il tag è stato chiuso, l'elemento può ora terminare. L'utilizzo del nuovo elemento HTML5 è facoltativo per la pagina o in un'altra parte del contenuto.

Elementi HTML

HTML5 ha prodotto nuovi elementi per la facilità di sviluppo e progettazione e ha anche rimosso elementi utilizzati in HTML4. L'elenco delle differenze tra HTML4 e HTML5 è pubblicato dal World Wide Web Consortium (W3C) [ii].

TAG DIV HTML

Insieme ai miglioramenti e ai nuovi elementi, combinati con i progressi dei CSS, alcuni elementi possono essere utilizzati in modi diversi e migliori rispetto a prima e le pagine Web stanno diventando più veloci, più ricche di funzionalità e belle da guardare! con CSS, usato con HTML5 può sostituire alcuni elementi che sono stati eccessivamente usati, come .

Il tag è popolare quando si segrega il contenuto in una pagina. Quando crea questo elemento, inserisce automaticamente un'interruzione
per mantenere il testo o il contenuto insieme, invece di passare il testo attraverso la pagina.

Con l'accessibilità del sito web e l'ottimizzazione dei motori di ricerca, le tecniche stanno diventando piuttosto una scienza e raccomandate dal WC3 di non tornare sempre all'utilizzo in HTML5.

Come esempio per un formato blog ben strutturato ma semplice, considera i nuovi elementi HTML5 con CSS invece di utilizzare l'elemento; utilizzare l'elemento per il contenuto principale, l'elemento per evidenziare o separare qualsiasi contenuto sulla pagina, intestazione o piè di pagina (ovunque!) e l'elemento può essere utilizzato per contenere un menu o collegamenti di gruppo per sfogliare dalla pagina.

Questi nuovi elementi identificano facilmente il tipo di contenuto tramite HTML5. Tuttavia, il tag viene anche utilizzato con i CSS per creare siti Web reattivi.

Creando ogni elemento (con il proprio 'id o classe'), il file CSS può essere definito per manipolare ciascun elemento.

L'esempio HTML seguente mostra un esempio di utilizzo di più elementi:

I miei esempi

Gli elementi possono avere attributi diversi, in particolare dimensioni diverse per l'interazione reattiva in base alle dimensioni dello schermo del dispositivo utilizzato.

Ecco un esempio di come ogni elemento può essere stilizzato nel corrispondente file CSS dell'HTML, facendo riferimento a ciascun tag.

#Intestazione

larghezza: 800px;

height: auto

margin-left: auto;

margin-left: auto;

#In primo piano

altezza: 150px;

Background-color: #ccc;

TAG HTML SPAN

L'elemento è un elemento in linea e non si rompe in linee a meno che la pausa
il tag viene utilizzato e il testo definito (contenuto) tra i tag aperto e chiuso viene visualizzato come una linea (per impostazione predefinita senza utilizzare altri elementi).

Gli elementi incorporati sono elementi di testo nel file HTML e possono essere definiti all'interno della linea di un altro elemento.

Come, l'elemento ha no senso per referenziamento ottimale. In pratica mostra il contenuto dell'elemento come è, ma tutte le istanze possono essere definite in CSS per lo styling se taggate correttamente e arricchite con altri attributi, o manipolate con JavaScript.

Nell'esempio seguente, il testo blu evidenzia come l'elemento span può essere nidificato come un elemento in linea con attributi diversi rispetto all'elemento padre: il paragrafo p>:

Per aprire l'esempio, fare clic sull'icona nella parte inferiore della pagina.

Se visualizzato in un browser Web, il testo nell'elemento sopra verrà visualizzato in un font diverso per il paragrafo per sottolineare dove l'utente deve fare clic per accedere all'esempio.

Nota che non ci sono differenze tra HTML4 e HTML5.