[HTML5] Introduzione ad HTML5 e una semplice pagina web

Html5 Web Applications

[HTML5] Introduzione ad HTML5 e una semplice pagina web

0

In questo articolo andremo a parlare di alcune novità introdotte da HTML5 e alla fine dell’ articolo troverete il markdown di una semplice pagina web in HTML5 subito pronta da utilizzare nei vostri progetti.

Di HTML4.1 già ho pubblicato una piccola serie di guide (che trovate per la consultazione quì), in questo articolo vedremo solamente alcune delle novità introdotte nella nuova versione del famoso linguaggio di markup giusto per capire cosa aspettarci.

Vorrei introdurvi HTML5 in modo più dettagliato, ma preferisco concentrarmi sul lato pratico e rimandarvi a wikipedia per i cenni storici ed altro.

Vediamo quindi, di fare questa breve overview su cosa è cambiato, aggiunto e rimosso con la nuova versione di HTML.

Doctype

Il doctype è un tag che permette di specificare al browser come interpretare la pagina. Visto che potremmo capitare su un documento HTML molto vecchio, al nostro browser fa piacere sapere che versione di HTML stà leggendo e quindi scegliere il modo migliore per interpretare i tags che successivamente incontrerà.

Per chi ha già scritto pagine in HTML probabilmente sarà a conoscenza che il Doctype è una stringa parecchio lunga e abbastanza difficile da memorizzare.

In HTML5, questo è il doctype:

<!DOCTYPE html>

E’ con questo che tutte le nostre pagine web dovranno cominciare.

Meta Charset

Questo tag suggerisce il tipo di encoding utilizzato per la stesura del nostro documento. Anche questo è stato per fortuna semplificato, e ridotto a questo:

 <meta charset="UTF-8">

Che và ovviamente incluso fra i tags

Nuovi elementi semantici in HTML5

html5 tags semantici

Un Tag semantico è un tag che autodescrive il proprio contenuto. Leggendo “div” non sappiamo cosa aspettare di trovarci al suo interno, diverso è il discorso per, ad esempio, form o table.Vediamo di analizzare nel dettaglio ogni elemento dell’ immagine cominciando dall’ alto:

<header>

Il tag Header definisce una testata (header, appunto) per un documento o una sezione. Questo tag dovrebbe essere usato come contenitore introduttivo al “vero” contenuto. E’ possibile utilizzare più tags header nello stesso documento, vediamo un esempio:

<article>
  <header>
    <h1>InformaticaLab.com</h1>
    <p><time pubdate datetime="2014-10-10"></time></p>
  </header>
  <p>Se visitate il sito di informaticalab potrete trovare una guida introduttiva ad HTML5.</p>
</article>

Vediamo un’altro esempio:

<!DOCTYPE html>
<html>
<head>
 <title>Semplice blog in HTML5 | InformaticaLab</title>
</head>
<body>
<header>
 <h1>Simple <span>HTML5</span> blog</h1>
</header> 
</body>
</html>

Dentro questo tag dovremmo quindi introdurre il contenuto o dare un supporto alla navigazione.

<nav>

L’ elemento nav definisce un insieme di links per la navigazione (un menù). E’ stato pensato per contenere una lunga lista di links per la navigazione.

Vediamo un esempio di questo tag in azione!

<!DOCTYPE html>
<html>
<body>
 <nav>
 <a href="index.html">Home</a> |
 <a href="servizi.html">Servizi</a> |
 <a href="about.html">About</a> |
 <a href="contattaci.html">Contattaci</a>
 </nav>
</body>
</html>
<section> e <article>

html5pagelayout

L’ elemento section definisce una sezione in un documento. Secondo la documentazione del W3C “Una sezione è un gruppo tematico di contenuti, tipicamente con una intestazione”.

L’ elemento article specifica un contenuto indipendente e autocontenuto. Alcuni esempi dove un tag

può essere utilizzato sono:

  • Post di un forum
  • Post di un blog
  • Una notizia
  • Un commento

Vediamo un esempio di utilizzo del tag section e article:

<article>
 <header>Il mio header</header>
 <section>
 <h1>Benvenuto in informaticalab</h1>
 <p>Benvenuto su questo sito web. </p>
 </section>
 </article>

Potete rivedere l’esempio di codice associato al tag header come alternativo di questo.

<aside>

L’ elemento aside definisce un contenuto affiancato al contenuto principale del documento, ovvero una sidebar.

Il contenuto dell’ aside dovrebbe essere collegato al contenuto che lo circonda (se per esempio è contenuto in una section).

<p>Uno dei miei siti preferiti dove leggere una guida su html è Informaticalab.</p>
<aside>
<h4>Informaticalab</h4>
<p>E' un sito web dove poter trovare diverse guide e snippets.</p>
</aside>
<footer>

L’ elemento footer definisce un piè di pagina per un documento o una sezione. Come l’aside, il footer dovrebbe contenere informazioni sull’ elemento che lo contiene.

  • Tipicamente in un footer possiamo trovare:
  • L’autore del documento
  • Informazioni sul copyright
  • Collegamento ai termini di utilizzo
  • Informazioni di contatto

Possiamo avere diversi elementi footer all’ interno di un documento.

<footer>
 <p>Posted by: Federico Ponzi</p>
 <p><time pubdate datetime="2014-10-10"></time></p>
</footer>
Una pagina completa in HTML5

html5-web-applications
Concludiamo l’ articolo con un esempio di pagina completa in HTML5 da poter utilizzare subito in un vostro progetto:

<!doctype html>
<html lang="en">
<head>
 <title>HTML5 Startup</title>
 <meta charset="utf-8">
 <meta name="description" content="HTML5 Startup">
 <meta name="author" content="InformaticaLab">
 <link rel="stylesheet" href="css/styles.css?v=1.0">
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

</head>
<body>
 <h1>HTML5 Startup</h1>
 <script src="js/scripts.js"></script>
</body>
</html>

 

About the Author

Federico PonziStudente, Webmaster ed appassionato di tutto ciò che è informatico con una spruzzata di scienza.View all posts by Federico Ponzi

Leave a Reply