• Lun - Ven 9:00 - 18:00

LVStudio header

 
Blog di informazione sul mondo della comunicazione e del digital marketing, con un occhio attento al web...

LVStudio header Mobile

 

Blog di informazione sul mondo della comunicazione e del digital marketing, con un occhio attento al web...

HTML5: Ecco cosa c’è da sapere

HTML5 è un linguaggio per la progettazione di pagine web attualmente in fase di definizione, che si propone come evoluzione dell’attuale HTML 4.

html-5

Attualmente HTML5 è supportato in basse percentuali da Chrome, Firefox, Opera e Safari, questo non ci deve impedire di conoscere il suo uso per tempi più maturi, in modo da essere un passo avanti agli altri e aumentare le nostre conoscenze.

Andiamo a vedere insieme la nuova struttura che caratterizza l’HTML5, articoli e guide di approfondimento.

Struttura HTML5

In HTML4 siamo stati abituati a scrivere una pagina web utilizzando la seguente sintassi di codice.

html4

In HTML5 sono stati introdotti nuovi elementi, che hanno l’obiettivo di rendere più semantico e significativo la struttura della pagina web.

Il primo colpo d’occhio vi porterà a pensare che i famosi <div> siano stati sostituiti con questi nuovi tag, invece capirete mettendo le mani sul codice di riuscire ad ottimizzare la struttura in modo semplice e molto più chiaro.

html5

Come vediamo dalla struttura qui in alto sono stati sostituiti i tag di HTML4 in altri più semantici e validi.

E’ stato sostituito da HTML4 a HTML5:

  • <div id=”header”> in <header>
  • <div id=”sidebar”> in <aside>
  • <div id=”main_content”> in <section>
  • <div id=”footer”> in <footer>

Ovviamente ricordiamoci che anche questi tag si chiudo in </> quindi ad esempio <header> …. </header> oppure <aside> …. </aside>

La struttura lato codice della bozza qui in alto sarà simile a:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<header>
<h1>USIAMO HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<li><a href="#">NAV3</a></li>
<li><a href="#">NAV4</a></li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

html5-yourinspirationweb

I Principali Elementi HTML5

Elemento <!doctype html>

Rappresenta la dichiarazione della pagina molto semplificata rispetto all’HTML4 che precede qualsiasi elemento del documento.

Elemento <header>

Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo o un motto.

Elemento <nav>

Rappresenta una parte della pagina che contiene i link di navigazione del sito, quindi qui inseriremo i menu di navigazione.

Elemento <section>

Rappresenta un’area in cui inserire del contenuto generico.

Elemento <article>

Rappresenta una sezione della pagine indipendente, quindi riferita ad articoli

Elemento <aside>

Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. In questa sezione possiamo riconoscere le famose sidebar di un blog.

Elemento <footer>

Rappresenta la sezione conclusiva del sito in cui inserire alcune informazioni del sito.

html5-iphone

 

fonte: www.juliusdesign.net

Abbiamo 61 visitatori online

Arts & Design Weblinks

Arts Blog
Un weblog dove trovare informazioni e curiosità legate all’universo dell’arte.
Designer Blog
Informazioni aggiornate, con la semplicità e la freschezza che solo una piattaforma blog può garantire.

Graphics Weblinks

AIAP
Sito ufficiale dell'Associazione italiana progettazione della comunicazione visiva.
Draft
Il Sito italiano per l'orientamento alla Grafica Pubblicitaria.
facebook_page_plugin

Questo sito usa i Cookie

Se navighi in questo sito web accetti l'uso dei Cookie. Per saperne di piu'

Approvo