Qual è la differenza tra un elemento e un tag? Quando dovrei usare forte e quando dovrei usare grassetto? Che diamine è il DOM? Quando sei nuovo al web design, uno dei maggiori ostacoli da superare è sempre il gergo. Così tanti termini tecnici vengono lanciati in maniera irrispettosa e raramente spiegati apertamente che è facile perdersi.
Questa serie servirà come introduzione di base ad alcuni termini che ogni nuovo web designer dovrebbe essere sicuro di aggiungere al suo vocabolario. Questo non sarà un esauriente elenco di vocaboli, ma piuttosto un primer su alcuni termini che ho trovato difficile avvolgere la mia mente quando ero un principiante. Inizieremo oggi con HTML e passeremo ai CSS nel prossimo futuro.
HTML e HTML5
HTML
HTML sta per HyperText Markup Language. Per comprendere meglio questo termine, suddividiamolo pezzo per pezzo.
Ipertesto
L'ipertesto è semplicemente testo visualizzato su un dispositivo digitale che utilizza collegamenti attivi per facilitare la navigazione. Ad esempio, per accedere a questa pagina è probabile che tu abbia fatto clic su una parte di testo che reindirizza il tuo browser nella posizione corretta.
Linguaggio con marcatori
Un linguaggio di markup è un modo per annotare i documenti. Con un linguaggio di markup, possiamo trasformare il testo normale in documenti riccamente formattati attraverso l'uso di una sintassi speciale che dice al parser come visualizzare le informazioni e gli elementi passati ad esso.
Mettilo insieme?
Con questo in mente, HTML è un modo per annotare e successivamente formattare i documenti per la visualizzazione che dipende in gran parte da un sistema che consente collegamenti basati su testo. Questo è il fondamento di come funziona il web.
HTML5
HTML5 è esattamente ciò che sembra, la quinta iterazione dell'HTML. HTML5 funge da sostituto per HMTL 4.01 e XHTML 1.1, quindi ogni volta che vedi riferimenti a questi linguaggi sappi che HTML5 è la sintassi più recente.
HTML5 offre un sacco di nuove funzionalità, elementi e modifiche alla sintassi in HTML, troppi per elencare esaustivamente qui. Alcuni che potresti vedere menzionati regolarmente sono un elemento canvas per il rendering di grafica, un nuovo doctype semplificato, la possibilità di incorporare video senza plugin personalizzati come Flash e nuove API per gli sviluppatori di applicazioni web.
Per scoprire tutto su HTML5, sfoglia le seguenti risorse estese:
- Rocce HTML5
- Immergiti in HTML5
- HTML5 Dottore
Sulla semantica
HTML semantico
Quando ho iniziato per la prima volta nel web design, ho sentito questa frase ogni giorno e mi ha fatto impazzire. Tutti sembravano essere sempre in armi su ciò che era semantico e ciò che non lo era. Si scopre che la ragione di ciò è semplice: un web semantico è migliore.
Fondamentalmente, il concetto base qui è che il tuo markup dovrebbe trasmettere il maggior significato possibile. Per fare ciò, dovresti usare gli elementi così come sono stati intesi per essere usati e in un modo che comunichi chiaramente a chiunque o qualsiasi cosa stia guardando il tuo codice.
Ad esempio, era normale che gli sviluppatori strutturassero intere pagine web usando tabelle HTML. Il problema con questo è che l'elemento table ha uno scopo ben preciso: mostrare una tabella di informazioni (si pensi a una tabella dei prezzi oa una tabella di confronto delle caratteristiche). Quando vedi il
div
Mentre siamo sul tema del web design semantico, potremmo anche discutere l'argomento più discusso in quanto tabella: div. Se hai mai dato un'occhiata alla fonte di una pagina HTML, le probabilità sono che hai visto le div ovunque. Quindi cosa diavolo è un div?
Il termine? Div? è l'abbreviazione di? division.? Se pensi che sia un po 'vago, hai ragione. In effetti, l'intero scopo dell'elemento div deve essere vago. I div sono fondamentalmente un contenitore generico per blocchi di contenuto che non possono altrimenti essere descritti a livello semantico.
Ciò naturalmente porta all'idea che i div siano creature non semantiche, il che significa che un div in sé non trasmette realmente un significato. Di conseguenza, dati i principi che abbiamo delineato nelle precedenti definizioni, i div dovrebbero essere usati il meno possibile, almeno in teoria. In pratica, molti sviluppatori sono abbastanza generosi con loro.
Dal momento che sono così versatili e utili per creare strutture facilmente utilizzabili con i CSS, istintivamente utilizziamo tonnellate di div. Tuttavia, dove possibile, dovresti sempre cercare qualcosa di più semantico. Ad esempio, considera il seguente blocco di codice che era piuttosto popolare prima di HTML5.
Con l'ID, abbiamo in qualche modo infuso un significato ma il div stesso è ancora un articolo generico e indesiderabile. Con HTML5, possiamo abbandonare il div e utilizzare l'elemento di intestazione semantico molto più.
em vs italic e strong vs. bold
Questo può davvero diventare complicato, specialmente perché HTML5 offre un significato semantico leggermente modificato per questi termini. Iniziamo con em vs. italic.
Le specifiche per l'uso dell'elemento corsivo indicano che ora viene utilizzato per il testo che è "sfalsato dal contenuto circostante senza dare enfasi o importanza aggiuntiva e per il quale la presentazione tipografica convenzionale è il testo in corsivo".
La chiave qui è che l'elemento corsivo non conferisce alcuna enfasi in più, mentre ovviamente il tag em lo fa. Pensalo semplicemente come un diverso umore o voce.
Gli esempi includono una designazione tassonomica, un termine tecnico, una frase idiomatica di un'altra lingua, un pensiero o il nome di una nave.
Contrasta con l'elemento em, che viene utilizzato per lo stress enfatico. Qui stiamo effettivamente tentando di comunicare che parleresti diversamente del contenuto dell'elemento rispetto al resto della frase.
Andando avanti, l'elemento in grassetto è stato modificato per avere un significato quasi identico a quello dell'elemento italico: spostarsi dal contenuto circostante senza conferire ulteriore enfasi o importanza, e per il quale la presentazione tipografica convenzionale è in grassetto.
Ancora una volta, vediamo che la chiave qui è che non stiamo davvero aggiungendo enfasi, semplicemente seguendo le convenzioni tipografiche. Ad esempio, uno script potrebbe in grassetto i nomi dei personaggi.
In alternativa, dovresti usare la forza per trasmettere una forte importanza. Ad esempio, i messaggi di avvertimento utilizzano spesso questa convenzione.
Con la forza, puoi persino usare il nesting per trasmettere più livelli di importanza.
Per ulteriori informazioni su questi quattro elementi, consulta HTML5 Doctor, che contiene una spiegazione esaustiva delle modifiche implementate in HTML5 e come dovresti utilizzarle ciascuna.
attributi
Classe contro ID
Una delle differenze più importanti che è necessario comprendere come web designer di front end è la differenza tra un clasa e un ID. Considera i seguenti due frammenti, capisci come sono diversi?
Fortunatamente, la differenza è in realtà molto semplice da capire: gli ID sono unici e le classi sono resuable. Ad esempio, il seguente non è un uso valido dell'HTML perché ho usato lo stesso ID su due diversi elementi.
La correzione qui è di cambiare quegli ID in classi. La stessa classe può essere applicata a tutti gli elementi che vuoi. Targeting di una classe nel tuo CSS ti permetterà di disegnare un gruppo di elementi in un colpo solo.
Alcuni sono arrivati al punto di dire che non dovresti mai usare ID e invece guardare sempre alle classi perché sono più versatili. L'argomentazione ha senso, ma a dire il vero non ci compro davvero e continuo a trovare usi validi per gli ID tutto il tempo.
Altro gergo
Elementi contro tag
Da un lato, questa distinzione non sembra la cosa più critica del mondo. Dopo tutto, molti sviluppatori usano questi termini in modo intercambiabile. Tuttavia, una corretta comprensione della struttura di base dell'HTML è il fondamento di una solida educazione allo sviluppo web. Potrebbe sembrare nitpicky, ma questi due termini significano in realtà cose diverse.
Per illustrare, iniziamo dal livello più elementare. Quello che segue è un tag? Start? per un elemento della lista.
Allo stesso modo, ecco il tag? End? per un elemento della lista.
Ognuno di questi è un tag tutto da solo. Tuttavia, non sono elementi. Ecco come appare l'elemento dell'elemento della lista.
Per dirla in modo conciso, l'HTML è composto da elementi ed elementi che comprendono tag e contenuti. In generale, un elemento include un tag di inizio, un contenuto e un tag di chiusura, ma alcuni tag si chiudono automaticamente, quindi questa terminologia può risultare un po 'complicata.
Aggiornare!
Quando Paul Irish ti dice che hai torto, diciamocelo, probabilmente lo sei. Non posso fingere di conoscere un decimo delle cose che questo ragazzo può recitare sullo sviluppo del web nel sonno e apprezzo molto che si sia preso il tempo di indicarci la giusta direzione nei commenti.
Ho controllato un po 'di fonti di differenza per queste definizioni e alla fine ho messo insieme le mie idee in base a dove sembrava esserci un accordo. In questo video, tuttavia, Paul descrive cosa è veramente un elemento, che è molto più di quanto pensi. Alla fine, conclude che non è l'affare più grande del mondo, ma mentre siamo sull'argomento, potremmo anche assicurarci di farlo bene!
DOM
Questa è un'altra cosa che mi ha confuso molto quando ho iniziato a scrivere HTML. Ho sentito costantemente persone riferirsi al? DOM? ma pensavo che suonasse come qualcosa di eccessivamente tecnico che probabilmente non capirò. Sapevo che esisteva un DOM e forse le persone lo stavano attraversando, ma non avevo idea di cosa significasse. La risposta ovvia,? È il modello di oggetto del documento? non ho capito dove
Risulta, il DOM è in realtà abbastanza facile da capire. Al suo livello più elementare, si riferisce semplicemente alla struttura di una pagina Web e ci fornisce una convenzione chiara per la visualizzazione e il riferimento a ciascun pezzo.
Metti un altro modo, il DOM è l'albero genealogico di una pagina web. In alto c'è il documento, che si estende fino all'elemento root o html e successivamente agli elementi testa e corpo. Se guardiamo l'elemento del corpo sottostante, possiamo vedere che si dirama in altri elementi, ognuno dei quali può avere il proprio contenuto e sotto-elementi.
Ci riferiamo alle relazioni nell'albero DOM proprio come quelle in un albero genealogico. Se un elemento si trova all'interno di un altro, è figlio di un genitore. Se due elementi condividono direttamente un genitore, sono fratelli.
Questa struttura e verbosità ci fornisce un'interfaccia per interagire con elementi specifici attraverso una pagina web. Ad esempio, in JavaScript o anche in HTML, potresti utilizzare la tua conoscenza del DOM per indirizzare il primo figlio di un elenco non ordinato, ovvero il primo elemento li all'interno dell'elemento ul.
Going Deeper
La precedente definizione è in realtà una versione semplificata di ciò che è il DOM. Una volta che hai una chiara comprensione di come il DOM definisce la struttura dei documenti HTML, puoi passare alle definizioni più complicate, che, si spera, ora avranno un po 'più senso. Controlla la definizione del W3C per una discussione molto più approfondita.
Qui vedrai il DOM indicato come API di programmazione per i documenti che definisce una struttura di oggetti. Vedrai anche che questa API contiene vari moduli, come CSS e MouseEvents, che possono essere implementati in vari modi.
Block vs.Elementi in linea
Quando crei elementi in HTML e definisci il loro stile in CSS, vedrai che il browser interpreta diversi elementi in modi diversi da una prospettiva di layout.
Quando crei un elemento a livello di blocco, come un paragrafo o un div, appare su una nuova riga o riga nel flusso del documento. Quindi, se crei tre paragrafi, questi verranno visualizzati in pila verticalmente nell'anteprima dal vivo anziché orizzontalmente come colonne. Un'altra distinzione importante qui è che gli elementi a livello di blocco possono avere una larghezza e un'altezza specifica.
Un elemento inline d'altra parte è reso? In linea? con il contenuto prima e dopo di esso. Ad esempio, se inserisci un elemento forte all'interno di un paragrafo, non creerà una nuova riga ma manterrà invece il flusso del paragrafo. Gli elementi in linea hanno un'altezza e una larghezza impostate automaticamente in base al loro contenuto, questi valori non possono essere espressi in modo specifico.
Modifica del comportamento
Usando il display CSS? proprietà, possiamo modificare il comportamento di determinati elementi. Per esempio, qui prendo un'ancora, che è di default un elemento in linea, e dico al browser di renderlo come se fosse un elemento a livello di blocco. A questo punto verrà assegnata la propria linea impostata su altezza e larghezza specifiche.
In realtà, abbiamo appena esaminato questo argomento nel nostro articolo sull'uso del display: inline-block? come alternativa ai galleggianti. Dai un'occhiata qui.
Con quali condizioni lotti?
Spero che questo breve glossario dei termini HTML abbia gettato un po 'di luce su alcuni argomenti potenzialmente confusi. Ognuno di questi mi ha fatto inciampare in una volta o l'altra, quindi non sentirti male se c'è qualcosa che non hai mai capito prima d'ora.
Mentre siamo sull'argomento, ci sono altri termini HTML che attualmente ti confondono o ti hanno confuso in passato? Fateci sapere nei commenti e assicuratevi di controllare presto per il nostro aggiornamento del vocabolario CSS!