googleseowebweb designweb developweb marketing

Le parti e le sezioni principali di un sito web efficace (HTML 5)

Tempo di lettura: 4 minuti

Le parti e le sezioni principali di un sito web efficace (HTML 5)

 

Per creare un sito web c’è bisogno di tanta pazienza, tante idee e tanta conoscenza del codice.

Ma se dovessimo tirar fuori 2 parti essenziali e delle sezioni principali per creare un sito web efficace, queste sarebbero le titolari:

Parte 1

Doc tipe

E’ l’intestazione HTML della pagina, ovvero la parte in cui viene dichiarata la precisa versione del codice HTML utilizzato per la pagina web.

Questa parte permette al browser di renderizzare correttamente il codice che verrà inserito.

<!DOCTYPE html>
<html lang="en">

</html>

 

Parte 2

Head (che non è l’header!!!)

L’head è la primissima parte di un sito web: contiene tutti gli elementi utili per la SEO nonché le indicazioni dell’autore del sito, l’argomento, alcuni link, la favicon e le istruzioni per la lettura del sito da parte del motore di ricerca ovvero tutti i meta elementi.

Attenzione: tutto quello che c’è nell’head è invisibile all’utente, non verrà visualizzato nella pagina del sito web ma solo nel foglio del codice.

Esso infatti non contiene mai testi, immagini o contenuti che dovranno essere visualizzati.

E’ comunque strettamente indispensabile compilare bene – anzi benissimo – questa parte poiché essendo la ‘testa’ del sito sarà quella che dà le istruzioni per la corretta lettura.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Matteo Di Federico | Moai Design">
  <meta name="description" content="Descrizione della pagina">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link rel="stylesheet" href="/css/style.css">
  <title>Titolo della pagina</title>
</head>

 

Parte 3

Body

Ovvero il ‘corpo’ della pagina web, tutto quello che verrà visualizzato nel sito.

In questa zona della pagina verranno inserite tutte le sezioni principali per costruire un sito web efficace, e cioè:

sito web efficace in html5

Sezione 1

Header

Cosa cambia tra l’head e l’header? Mentre tutti i dati contenuti nell’head non vengono visualizzati, quelli inseriti nell’header saranno stampati a video.

In questa sezione verranno inseriti :

  • Titolo
  • Navbar
  • Logo
  • Cover

…e tutti gli elementi che desideriamo che compaiano nella primissima parte del nostro sito, tutti quegli elementi che devono essere caricati velocemente per iniziare a navigare sul sito stesso.

Attenzione: I link inseriti nel menu’ principale di navigazione, a sua volta inserito nel tag <nav>, hanno particolare rilevanza in quanto vengono utilizzate dai crawler dei motori di ricerca per verificare la struttura del sito web.

Sezione 2

Section

In questa zona del sito si dovranno inserire le varie section ovvero le sezioni generiche che racchiude un determinato argomento del sito stesso.

Sezione 3

Footer

Il footer è la parte finale del sito, contiene in genere uno o più dei seguenti elementi:

  • intestazione del sito
  • copyright
  • crediti e autore del sito
  • secondo menu’ di navigazione
  • link e pulsanti per i canali social
  • link e informazioni varie (numero di telefono, email, ecc)
  • ecc

Tutti i link del footer non avranno la stessa importanza a livello di SEO rispetto a tutto ciò che è incluso nelle altre parti e sezioni della pagina.

Vuoi saperne di più sulla SEO e avere un supporto per far crescere il tuo sito web? Contattaci subito per una consulenza gratuita e inizia oggi a migliorare la tua visibilità online!

 

Ci sono altre due sezioni molto importanti anche se non indispensabili che sono:

  1. Article: la sezione che contiene gli articoli del blog
  2. Aside: ovvero la sidebar, la famosa barra laterale in cui possiamo inserire link, pulsanti, e tutti i contenuti che non parteciperanno al flusso principale della pagina.

…e per citare Linus Torvalds: “Talk is cheap, show me the code!”, di seguito alcuni esempi delle sezioni e delle parti principali di un sito web efficace in HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Matteo Di Federico | Moai Design">
    <meta name="description" content="Descrizione della pagina">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <link rel="stylesheet" href="/css/style.css">
    <title>Titolo della pagina</title>
  </head>
  <body>
    <!-- header -->
    <header>
      <img src="#" alt="logo della pagina web">
      <nav>
        <ul>
          <li>home</li>
          <li>contatti</li>
          <li>chi siamo</li>
          <li>servizi</li>
        </ul>
      </nav>
    </header>
    <!-- sezione 1 -->
    <section>
      <h1>Titolo della sezione</h1>
      <img src="#" alt="immagine della sezione">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#">C.T.A.</a>
    </section>
    <!-- sezione 2 -->
    <section>
      <h1>Titolo della sezione</h1>
      <img src="#" alt="immagine della sezione">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#">C.T.A.</a>
    </section>
    <!-- articolo -->
    <article>
      <h1>Titolo dell'articolo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <img src="#" alt="immagine dell'articolo">
      <a href="#">C.T.A.</a>
    </article>
    <!-- sidebar -->
    <aside>
      <h1>Titolo della sidebar</h1>
      <img src="#" alt="immagine della sidebar">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#">C.T.A.</a>
      <a href="#">C.T.A.2</a>
    </aside>
    <!-- footer -->
    <footer>
      <div>
        <ul>
          <li>Cookie policy</li>
          <li>Privacy Policy</li>
          <li>Contatti</li>
        </ul>
      </div>
      <p>Tutti i diritti riservati</p>
      <a href="#">Sito web realizzato da Matteo Di Federico | Moai Design</a>
    </footer>
    <script src="#" type="text/javascript"></script>
  </body>
</html>

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *