Siti HTML5 esempi. Struttura sito HTML5!

Siti HTML5 esempi: HTML5 cosa cambia

siti html5 esempiHTML5 è il nuovo linguaggio di markup per la realizazione delle pagine web che sta progressivamente sostituendo il vecchio standard HTML4.

HTML5, anche grazie al supporto della versione CSS3 (forgli si Stile), si differenzia dalle precedenti versioni HTML, perché valorizza la semantica: scopo di HTML5 è esaltare il contenuto, delegando ciò che concerne la definizione dello stile delle pagine web ai CSS.

HTML5, infatti,  elimina alcuni elementi di presentazione, ridefinendone altri: questi nuovi TAG hanno la funzione di attribuire  specifici “pesi” e “significati” alle sezioni di testo (sezione pag. HTML) che identificano.

 

Siti HTML5 esempi: HTML5 struttura pagina

La struttura base di una pagina web costruita in HTML5 è composta dalle seguenti sezioni:

  • HEADER: sezione contenenteil titolo della pagina (fondamentale per posizionamento siti web);
  • NAV: menù di navigazione (per link pagine sito);
  • ARTICLE: una o più sezioni che descrivono il contenuto;
  • SECTION: una parte (sotto-sezione) dell’articolo “Article”;
  • ASIDE: dedicata a news, banner e link
  • FOOTER: destianta a copyright, informazioni dell’Azienda ecc …

 

Siti HTML5 esempi: l’elemento DIV perde importanza

Prima di HTML5, l’elemento DIV era una scelta quasi forzata per poter racchiudere i contenuti della pagina web e per poterli formattare attraverso i CSS …

… Con l’intorduzione di header, article, section, footer, nav ed aside, invece, possiamo identificare comunque un “contenitore” della pagina, attribuendo un maggior peso semantico alle sezioni della pagina stessa!

 

Siti HTML5 esempi: HTML5 vantaggi per la SEO

Con HTML5 ci saranno miglioramenti anche in ambito SEO “search Engine Optimization”: con la realizzazione di un sito ottimizzato SEO, scritto in HTML5, c’è la possibilità di segmentare e di valorizzare semanticamente ogni sezione della pagina web!

Sarà più semplice per Google e per i MDR identificare quale sezione della pagina avrà i contenuti più importanti rispetto ad un’altra dove si sono contenuti meno rilevanti!

 

Siti HTML5 esempi: struttura sito HTML5

html5 struttura pagina web

<!doctype html>

<html lang=”it”>
<head>
<meta charset=”utf-8″>
<title>html5</title>
<link rel=”stylesheet”
href=”prova.css”/>
<meta name=”description” content=””/>
<meta name=”keywords” content=””/>
</head>

<body>
<header><p align=”Center”><img src=”consulenza_marketing_roma.jpg”></header>
<div align=”Center”><h1>SITI WEB ECONOMICI</h1></div>
<nav>
<a href=”https://11marketing.it”>Home</a>
<a href=”https://11marketing.it”>Chi siamo</a>
<a href=”https://11marketing.it”>Servizi</a>
<a href=”https://11marketing.it”>News</a>
<a href=”https://11marketing.it”>Contatti</a>
</nav>

<article>
<header><h2>SITI WEB ECONOMICI ROMA</h2></header>
Siti Web Economici Roma, ELEVEN MARKETING realizza siti internet a prezzi bassi, nelle prime posizioni di Google. Sei un Imprenditore? Sei un professionista che desidera avere un sito web economico, nelle prime posizioni dei mortori di ricerca? Sei “atterrato nel sito giusto!

<p>Siti Web Economici Roma, ELEVEN MARKETING realizza siti internet a prezzi bassi, nelle prime posizioni di Google. Sei un Imprenditore? Sei un professionista che desidera avere un sito web economico, nelle prime posizioni dei mortori di ricerca? Sei “atterrato nel sito giusto!</p>

<p>Siti Web Economici Roma, ELEVEN MARKETING realizza siti internet a prezzi bassi, nelle prime posizioni di Google. Sei un Imprenditore? Sei un professionista che desidera avere un sito web economico, nelle prime posizioni dei mortori di ricerca? Sei “atterrato nel sito giusto!</p>
</article>

<footer>
<small>&copy;ELEVEN MARKETING – Consulenza Marketing Roma</small>
</footer>

</body>
</html>

 

Siti HTML5 esempi: esempio sito HTML5 “Mobile Friendly”

Di seguito riportiamo i link a 2 semplici siti web “Mobile Friendly” costruiti in HTML5 e CSS3:

 

1) Sito web hobbystico: modellinirobotanni80.altervista.org

siti html5 css3 esempi

 

 

2) Sito web aziendale: webmarketingroma.altervista.org

siti-html5-esempi-struttura

 

 

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.