20.04.2019

HTML is more important than CSS

Il web è in costante evoluzione. Di questo progresso non sono protagoniste solo le infrastrutture che ne permettono di fatto la diffusione, ma anche i linguaggi con cui vengono concretamente create le pagine che fanno parte di questo meraviglioso complesso chiamato World Wide Web. Ricordi il primo sito mai realizzato? Lo puoi ancora trovare al suo URL originale. È piuttosto diverso anche dai siti più banali che siamo abituati a vedere ora, no? Solo testo, nessun colore oltre al nero e al blu dei link, nessuna immagine, nessuna animazione. Niente.

Eppure, vedendo una pagina del genere rimango sempre, sempre affascinato. Solo testo, sì, ma il testo è tutto ciò che in quella pagina ha senso di esistere, anzi: questo esempio di pagina dovrebbe far riflettere bene qualsiasi web designer su cosa egli stia inserendo dentro le pagine che crea.

Less is more.

In un mio precedente articolo ho parlato dell'importanza che il contenuto ha rispetto a qualsiasi altra cosa, compresa l'usabilità. Il contenuto senza usabilità può esistere, non viceversa. Allo stesso modo, c'è una gerarchia di importanza anche per quanto concerne i linguaggi che plasmano una pagina. I linguaggi fondamentali del web sono HTML, CSS e JavaScript, ognuno dei quali svolge un ruolo ben preciso nel mondo della rete:

A voler essere realisti dovremmo dire che esistono molti altri linguaggi che governano il funzionamento di un sito, come il PHP, l'SQL, Python, Java. Questi però rientrano in una categoria differente rispetto a quella dei primi tre, essi infatti vengono definiti linguaggi di back-end, ossia agiscono lato server e non sul computer dell'utente. HTML, CSS e JavaScript sono linguaggi di front-end e agiscono, invece, lato browser. Concentriamo la nostra attenzione proprio su questi ultimi.

Supponiamo di voler creare una semplice pagina web per un articolo di un blog, una cosa simile a:

<!DOCTYPE html>
<head>
  ...
</head>
<body>
  <h1>Questo è un titolo</h1>
  <h2>Questo è un sottotitolo</h2>
  <h3>Questo è un sottotitolo ancora più piccolo</h3>
  <p>Questo  è un semplice paragrafo, seguito da:</p>
  <ul>
    <li>un elenco puntato;</li>
    <ol>
      <li>questo</li>
      <li>è</li>
      <li>un</li>
      <li>suo</li>
      <li>sotto elenco</li>
    </ol>
    <li>un elemento in grassetto;</li>
    <li>un elemento in corsivo;</li>
    <li>un elemento con caratteri a larghezza fissa.</li>
  </ul>
  <p><strong>Questo è in grassetto</strong></p>
  <p><em>Questo è in corsivo</em>
  <p><code>Questo è in monospace</code></p>
</body>
</html>

Prima di applicare qualsiasi stile a questa pagina è assolutamente necessario pensare alla struttura semantica che essa deve assumere. L'utilizzo di un appropriato tag <h1> per il titolo principale, di un tag <h2> per l'immediato sottotitolo e di un comunissimo tag <p> per delimitare il primo paragrafo. Una struttura semplice, chiara e significativa. Formattare il testo in modo consono al ruolo che una particolare frazione di testo svolge è di grande importanza non solo per il lettore comune, ma anche (e soprattutto) per coloro che utilizzano tecnologie assistive a causa di disabilità motorie.

In aggiunta a questo, senza fare ricorso ad alcun foglio di stile, il browser è già istruito su come renderrizare precisi elementi:

Insomma, il browser già da solo riesce a darci un feedback visivo sulla struttura che la nostra pagina assume. Tutto ciò è fantastico. Pensate se, invece, un browser mostrasse gli elementi tutti con con la stessa dimensione, ad esempio; non sarebbe per niente facile distinguere il titolo da un paragrafo. Il browser ci aiuta, basta che noi utilizziamo i tag appropriati.

Prima di applicare regole CSS a una pagina web e cominciare a cambiare le varie caratteristiche degli elementi è necessario stabilire una struttura semantica e sensata della pagina.

Il feedback visivo che il browser ci fornisce ci permette di capire come la pagina apparirà, almeno semanticamente, sullo schermo. Il consiglio che do a tutti quelli che si accingono a creare una pagina HTML è di resistere dall'applicare regole di stile prima di aver terminato la stesura del contenuto.

A titolo esemplificativo la pagina in output creata dal codice precedente viene rappresentata così:

L'output generato dal codice HTML precedente

Come puoi vedere, senza alcuna regola CSS il browser assembla la pagina dandole un aspetto strutturato, chiaro e intuitivo. Dopo puoi passare tutto il tempo che vuoi a smanettare con gli stili e cambiare l'estetica della pagina, ma prima di procedere in questa direzione, assicurati che il contenuto sia ben organizzato.

If you have any other question, idea, advice, suggestion or if you want to simply say me something or get in touch with me, please: do it! You can find me on Twitter or you can e-mail me.