I 9 migliori codici CSS e HTML che tutti i blogger dovrebbero conoscere

Grazie alla maggior parte di potenti editor di gestione contenuti, come WordPress, ormai chiunque è in grado di formattare i propri post sul blog, senza alcuna conoscenza del linguaggio CSS e HTML.

Tuttavia, un po’ di conoscenza può fare la differenza, per questo motivo, in questo articolo voglio elencarti i 9 codici CSS e HTML che un blogger dovrebbe conoscere.

1 Heading

Heading: Intestazione. Questo è un titolo.

Questo è un modo per formattare e suddividere un post sul blog in modo tale che le informazioni siano più facili da leggere, per poter seguire meglio il contenuto e rendere maggiormente fruibile la lettura.

Ogni Blogger dovrebbe dare la giusta struttura al proprio articolo, utilizzando correttamente i titoli e la loro gerarchia.

Ci sono sei impostazioni di dimensione Heading come segue:

Heading 1

Heading 2

Heading 3

Heading 4

HEADING 5

HEADING 6

Le intestazioni, oltre che per gli scopi di ottimizzazione SEO, vanno usati per ordine d’importanza. Il titolo H1 dovrebbe essere utilizzato una sola volta, per l’intestazione considerata più importante della pagina. Per intenderci, il titolo dell’articolo del Blog.

Sarebbe meglio utilizzare le Heding 1 e 2, mentre per le successive Heading del contenuto si dovrebbero utilizzare le Heading 3 -4-5-6, in ordine di importanza.

La codifica da conoscere sarebbe:

<h1>Heading1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

2 Aggiunta di TAG – NO Follow

Questi link influenzano il posizionamento SEO nei motori di ricerca, infatti, Google non esegue nemmeno il crawling su questo tipo di link. Nel 2005 Google introdusse i Tag No Follow per combattere lo spam nei commenti.

Ecco come aggiungere i tag No Follow ai tuoi link:

<a href=”YOURLINKHERE” rel=”nofollow”>Titolo del collegamento qui</a>

3 Inserimento manuale delle immagini

Anche inserire manualmente le immagini è importante per un blog, una pagina o un widjet, anche se usi WordPress

Hyperlink (collegamenti ipertestuali)

Ogni blogger dovrebbe imparare a scrivere un link da solo, specialmente se si collegano link esterni al sito.

<a href=”YOURLINKHERE”>Titolo del collegamento qui</a>

4 Collegamento di un’immagine

Trasformare le immagini in link è un modo migliore per convincere le persone a cliccarci su, specialmente sui contenuti più rilevanti.

5 Elenchi

Le liste sono facili da leggere e aiutano a non perdere il filo del discorso, sono perfette per la scrittura sul web, considerando anche il fatto che molte volte gli articoli vengono letti da utenti in movimento, all’aperto con uno smartphone.

Ci sono due tipi di elenchi: quelli ordinati da numeri e quelli costituiti da elenchi puntati.

1. Esempio1

2. Esempio2

3. Esempio3

Oppure:

· Elenco puntato esempio 1

· Elenco puntato esempio 2

· Elenco puntato esempio 3

Ordinato <ol> e puntato <ul>

<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	</ol>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	</ul>

6 Principali stili di testo

Mettere un’enfasi speciale sulle parole dei tuoi articoli può migliorarne la comprensione e rendere tutto più interessante.

BOLD

EMPHASIS

STRIKETHROUGH

	<strong>BOLD</strong>


	<em>EMPHASIS</em>


	<strike>STRIKETHROUGH</strike>

Stile di Testo

Cambiare il colore del Font:

<span style=”color: #ff8f8f”>changing the color of a few words</span>

Change the Font:

<span style=”font-family: Georgia, serif”><strong>changing the font family</strong></span>

Cambiare il formato (la taglia) delle parole:

<font size=”5″>size of your words</font>

7 Aggiungere un indirizzo email

<a href=”mailto:YOU@yourinbox.com”>Click Here to email Hello You Designs</a>

8 Tabelle con intestazioni

Sempre per migliorare l’esperienza utente, l’inserimento delle tabelle è utile

Titolo1	TITOLO2
RIGA 1, Cella 1	RIGA 1, Cella 2
RIGA 2, Cella 1	RIGA 2, Cella3

Possono risultare un po’ complicai da realizzare, perché devi prestare attenzione ai tag dell’intestazione tabella (th), quelli della riga (tr) e quelli dei dettagli tabella (td).

<table>
	<thead>
	<tr>
	<th><h5>Heading 1</h5></th>
	<th><h5>Heading 2</h5></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Row 1, Cell 1</td>
	<td>Row 1, Cell 2</td>
	</tr>
	<tr>
	<td>Row 2, Cell 1</td>
	<td>Row 2, Cell 3</td>
	</tr>
	</tbody>
	</table>

9 BOTTONI/PULSANTI

Creare bottoni può essere di grande aiuto per invitare le CTA.

<a href=”YOUR LINK HERE” class=”button”>Button Wording</a>

Le Risorse Gratuite del #MAgodelPC

Per te Gratis l’Ebook Facebook Marketing per tutti
Se ti può interessare puoi ottenere Gratis l’Ebook Digital Marketing
Per te Gratis l’Ebook Il CV Perfetto
Se ti può interessare puoi ottenere Gratis l’Ebook Content Marketing