Siti HTML5 esempi: HTML5 è il nuovo linguaggio di markup per la realizazione delle pagine web che ha ormai sostituito 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.
In questo articolo puoi visualizzare e scaricare 2 template di sito "one page" (template sito "IT" e template sito "Panetteria"), realizzati con HTML5, CSS3 e Media Queries, senza utilizzare alcun CMS.
La struttura base di una pagina web costruita in HTML5 è composta dalle seguenti sezioni:
Ovviamente, esistono numerosi altri tag, tra i quali alcuni non più supportati, che puoi scaricare in questo file "Elenco TAG HTML5".
Uno degli aspetti più importanti legati allo sviluppo dell'HTML5 è il ruolo l'elemento "DIV".
Prima di HTML5, il "DIV" (tag che rappresenta un "contenitore verticale") era una scelta quasi forzata per poter racchiudere i contenuti della pagina web e per poterli formattare attraverso i CSS ...
...Invece, con l'intorduzione di "header" "article", "section", "footer", "nav" ed "aside", HTML5 ci permette (oltre che che ad identificare dei "contenitori" nella pagina web) anche di identificare dei "significati" precisi alle varie sezioni della pagina alle quali questi TAG si riferiscono.
Con HTML5 ci sono stati miglioramenti anche in ambito SEO "search Engine Optimization": con la realizzazione di un sito ottimizzato SEO, scritto in HTML5, è stato possibile segmentare e valorizzare semanticamente ogni sezione della pagina web!
Grazie alla potenza di HTML5, è stato più semplice per Google e per gli motori di ricerca, identificare quale sezione della pagina ha i contenuti più importanti rispetto ad un'altra dove ci sono contenuti meno rilevanti!
Nell'esempio di seguito, puoi leggere il codice sorgente di una piccola pagina web con in, "grassetto" principali TAG HTML5 descritti:
<!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>©ELEVEN MARKETING - Consulenza Marketing Roma</small>
</footer>
</body>
</html>
Di seguito riportiamo i link a due siti "one page", realizzati in HTML5 e CSS3 con funzionalità "responsive" (ottimizzati con le principali "media queries").
Queste pagine web sono un esempio di sito "one page", con dei link "ancora" sul menù principale.
Le principali caratteristiche delle pagine sono:
