Con il linguaggio HTML è possibile creare pagine di siti web impostando i caratteri, i corsivi e i grassetti, nonché i colori come quando si scrive un documento word, come saprai bene se hai scaricato il pacchetto Office online gratis. Ovviamente, i “comandi” del linguaggio HTML sono diversi e bisogna scriverli in “codice”.
Menu di navigazione dell'articolo
In questa guida, spieghiamo come applicare su una parola la regola del “grassetto” (o neretto), usando il linguaggio HTML. Inoltre, il grassetto HTML ha avuto un’evoluzione nel tempo e anche il suo utilizzo in ottica SEO è cambiato. Vediamo come!
Come fare il grassetto in HTML
Per evidenziare una parola o una frase in grassetto o neretto con il linguaggio HTML occorre usare i “tag”. Il tag per grassetto HTML è <b> (dove la lettera “b” sta per “Bold” (grassetto in inglese). Il tag deve essere di apertura e chiusura: <b> … </b>. Tutto quello che è compreso tra il Tag di apertura <b> e il tag di chiusura </b> sarà visualizzato online con il grassetto. Per esempio: <b>questa frase contenuta tra i tag è in grassetto</b> sarà visualizzata online così: questa frase contenuta tra i tag è in grassetto.
Il grassetto o neretto è un carattere tipografico ispessito rispetto a quello standard. È rinforzato. Questa caratteristica serve spesso per evidenziare le parole chiave o più importanti all’interno di un testo e agevola anche la ricerca delle informazioni da parte dell’utente. Il grassetto HTML, però, deve essere usato con moderazione e sapienza per permettere al lettore con un colpo d’occhio di individuare gli argomenti della pagina web. Un eccessivo uso del grassetto HTML crea una sorta di “rumore” grafico che potrebbe, al contrario, confondere e disincentivare la lettura. Per colpire l’attenzione e usare in modo efficace il grassetto bisogna usarlo poco e le parole in evidenza devono essere distanziate tra loro.
Si può usare il grassetto anche al posto dei titoli H (header) per mettere in evidenza titoli o sottotitoli.
Evoluzione del grassetto
Si è detto che fin dagli esordi del linguaggio HTML, per scrivere in codice il comando di grassetto basta inserire la parola o frase da evidenziare tra gli elementi tag <b> e </b>; la stessa cosa vale per il carattere tipografico del corsivo per il quale si usano i tag <i> e </i> (Italic).
Nelle versioni più recenti del linguaggio e in un’ottica più orientata alla semantica, si consiglia l’uso del “comando” <strong> per il grassetto e <em> per il corsivo, dove rispettivamente “strong” sta per strong emphasis = forte enfasi e “em” sta per emphasis. In questo caso i browser stessi assegnano i propri stili di corsivo e grassetto. Questa scelta è anche orientata sul principio della distinzione tra contenuto e grafica in quanto i tag non dovrebbero essere usati per definire l’aspetto del testo. Inoltre, questa separazione tra Bold e Strong per il comando di grassetto in HTML pone automaticamente un limite alla presenza dei grassetti in un testo circoscritto alle sole poche parole importanti in un testo. Si tratta, anche, di un vantaggio in ottica SEO. Tuttavia, se da una parte l’uso sapiente e alternato di Bold e Strong alleggerisce l’impatto visivo e conferisce una specie di ritmo tipografico, dall’altro si rischia di appiattire la stesura testuale.
Come usare i tag bold, strong, italic e emphasis nel linguaggio HTML5
Il linguaggio HTML 5 ha coniugato l’utilizzo dei vari comandi per trarne il meglio e valorizzare ogni singola sfumatura anche in senso semantico. Ecco, come usare i vari tag in HTML:
- <strong>: il suo utilizzo serve per attribuire al testo una forte importanza, urgenza o serietà e, infatti, si utilizza il tag <strong> per importance. Serve, quindi, a tematizzare una pagina web in ottica SEO e lo si può usare anche all’interno dei titoli (headings) per sottolineare una parte importante del titolo stesso. La scrittura in HTML di un heading con tag “strong” risulterebbe così: <h1Tech Tutorial <strong>Il grassetto HTML</strong></h1> (e visualizzato online come Tech tutorial Il grassetto HTML).:
- <b> (bold): si usa per dare una differenza stilistica rispetto al contenuto, ma senza attribuire particolare importanza. È solo un modo per mettere in evidenza un contenuto rispetto al resto.
- <em> emphasis: è simile al comando “strong” e diventa uno stress emphasis quando si vuole imprimere al testo o a una frase un’enfasi appunto e un accento diverso, una citazione o qualcosa che si “pronuncia” mentalmente in modo diverso.
- <i> italic: si usa per imprimere un tono o uno stato d’animo che si discosta dal resto del contenuto, ma senza che si aggiunga enfasi o importanza al contenuto.
In ultima analisi, l’uso delle varie sfumature dell’uso del grassetto e del corsivo si perfeziona nel momento che si svincolano dalla loro definizione di origine, come Bold e Italic, a maggior ragione che gli stili e i caratteri sono attualmente confinati ai CSS.
Editor
Quali sono i migliori editor di HTML online?
Esistono diversi editor HTML online che offrono una vasta gamma di funzionalità. Alcuni di essi sono progettati per principianti, mentre altri offrono funzionalità avanzate per sviluppatori esperti. Ecco una lista dei migliori editor HTML online:
- JSFiddle (https://jsfiddle.net/):
- Ideale per testare e condividere frammenti di codice HTML, CSS e JavaScript.
- Offre un'interfaccia pulita con diverse viste e supporta molte librerie esterne.
- Una piattaforma sociale per sviluppatori front-end dove si possono creare "pen" con HTML, CSS e JavaScript.
- Offre funzionalità di debug, integrazioni con librerie esterne e un sistema di sfide per mettere alla prova le tue abilità.
- Simile a JSFiddle, permette di testare e condividere frammenti di codice.
- Ha un'interfaccia semplice e intuitiva.
- Un altro ottimo strumento per scrivere e testare codice in tempo reale.
- Supporta JavaScript e molte delle sue librerie.
- Un editor per HTML5, CSS3 e JavaScript con anteprima in tempo reale.
- Include una funzione di "rulers and guides" utile per il design.
- Offre un'interfaccia semplice per la modifica e l'anteprima del codice HTML.
- Include anche alcuni strumenti di conversione e pulizia del codice.
- Si concentra su HTML e CSS.
- Salva gli esperimenti su GitHub Gist e offre anteprima in tempo reale.
- Utile per creare, testare e condividere HTML, CSS e JavaScript.
- Ha una community attiva e una raccolta di esempi e laboratori.
Ricorda che la scelta dell'editor ideale dipende dalle tue esigenze specifiche, dal tipo di progetto su cui stai lavorando e dalle tue preferenze personali. Se hai bisogno di funzionalità avanzate, potresti considerare di utilizzare un editor di codice o un ambiente di sviluppo integrato (IDE) installato sul tuo computer, come Visual Studio Code, Atom, Sublime Text o altri.
Quali sono i migliori software per Windows e Mac con i quali posso editare in HTML?
Esistono molti software disponibili per l'editing di HTML su Windows e Mac. Ecco alcuni dei migliori:
Per Windows:
- Visual Studio Code è un editor di codice open source e gratuito che offre un'ampia gamma di funzionalità, tra cui l'evidenziazione della sintassi, la correzione automatica e l'autocompletamento.
- Sublime Text è un altro editor di codice open source e gratuito che è noto per la sua velocità e la sua efficienza.
- Brackets è un editor di codice sviluppato da Adobe che è progettato per essere facile da usare e intuitivo.
- Notepad++ è un editor di testo gratuito e open source che può essere utilizzato anche per l'editing di HTML.
Per Mac:
- Visual Studio Code è disponibile anche per Mac.
- Atom è un editor di codice open source e gratuito che è simile a Sublime Text.
- Coda è un editor di codice a pagamento che offre una serie di funzionalità avanzate, tra cui l'anteprima live e il supporto per i framework CSS.
- TextWrangler è un editor di testo gratuito e open source che può essere utilizzato anche per l'editing di HTML.
La scelta del miglior software per l'editing di HTML dipende dalle tue esigenze e preferenze. Se stai appena iniziando, un editor di codice semplice e facile da usare come Notepad++ o TextWrangler è una buona opzione. Se hai bisogno di funzionalità più avanzate, puoi provare un editor di codice come Visual Studio Code, Atom o Coda.
Ecco alcuni fattori da considerare quando scegli un software per l'editing di HTML:
- Caratteristiche: Assicurati che il software che scegli offra le funzionalità necessarie per il tuo progetto. Ad esempio, se stai lavorando a un sito web complesso, avrai bisogno di un software che supporti i framework CSS e JavaScript.
- Interfaccia utente: L'interfaccia utente del software dovrebbe essere facile da usare e intuitiva.
- Prezzo: Alcuni software sono gratuiti, mentre altri sono a pagamento.
Spero che questo ti aiuti a scegliere il miglior software per l'editing di HTML.
FAQ
Come si cambia lo stile di scrittura?
Gli stili dei caratteri tipografici hanno generalmente tre attributi di “personalizzazione”: size (grandezza), color (colore) e face (aspetto: grassetto, corsivo, maiuscoletto …). Per modificare uno degli attributi del carattere all’interno di una pagina HTML si utilizza il tag <font>.
Come si toglie il grassetto?
L’utilizzo del tag “Font-wieght: normal” rimuove il grassetto e ripristina il carattere nella sua forma originale standard.
Come scrivere il colore di un paragrafo in HTML
Il tag di apertura del paragrafo è <p>. quando si vuole definire un colore diverso per il paragrafo, al tag di apertura segue l’attributo “style” e successivamente la specifica che si desidera cambiare colore del paragrafo e l’indicazione del colore.
Come si scrive in corsivo in HTML?
L’Italic Tag è il tag di formattazione del testo in linguaggio HTML che permette la scrittura di un testo in corsivo (italic, in inglese). Il tag del corsivo identificato dalla lettera “i” è <i> e </i>, per la chiusura.
Cosa significa la lettera B il linguaggio HTML?
“B” indica la parola inglese “Bold” che traduce il termine “grassetto” o neretto. Il tag <b> serve per formattare un testo in grassetto usando il linguaggio HTML.
Come si mette un testo in grassetto su iPhone?
Quando si scrive un testo su iPhone e si vuole usare il grassetto basta seguire i seguenti passaggi: Impostazioni >Accessibilità>Schermo e dimensioni testo> testo in grassetto > Applica. E il testo evidenziato viene formattato in grassetto.
