Siti HTML5 esempi: Struttura sito HTML5!

Esempio sito responsive in HTML5, Siti HTML5 esempi

Siti HTML5 esempi: HTML5 cosa cambia

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.

Siti HTML5 esempi: HTML5 struttura pagina “tipo”

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 …

Ovviamente, esistono numerosi altri tag, tra i quali alcuni non più supportati, che puoi scaricare in questo file “Elenco TAG HTML5”.

Siti HTML5 esempi: il ruolo del TAG “DIV”

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.

Siti HTML5 esempi: HTML5 vantaggi per la SEO

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!

Siti HTML5 esempi: struttura sito HTML5

Siti HTML5 esempi

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>&copy;ELEVEN MARKETING – Consulenza Marketing Roma</small>
</footer>

</body>
</html>

Siti HTML5 esempi: esempi siti HTML5 “Mobile Friendly”

Di seguito riportiamo i link a due siti “one page”, realizzati in HTML5 e CSS3 con funzionalità “responsive” (ottimizzati con le principali “media queries”).

Sito HTML5 CSS3 Esempio 1

esempio sito responsive html5 con media queries

Sito HTML5 CSS3 Esempio 2

Queste pagine web sono un esempio di sito “one page”, con dei link “ancora” sul menù principale.

Le principali caratteristiche delle pagine sono:

  1. Realizzazione in HTML5 con file “index.html”.
  2. Realizzazione in CSS3 con foglio di stile “style.css”.
  3. Utilizzo delle principali “media queries” (“max-width” e “min-width”) per ottimizzare la pagina sui principali device: Desktop, Laptop, Tablet e Smartphone.
  4. Link a menù responsive realizzato da W3Schools.
  5. Link a Google font.

#1 Scarica il file.zip del sito d’informatica

#2 Scarica il file.zip del sito della panetteria

Vuoi imparare a creare siti in HTML/CSS – responsive?

Frequenta i nostri corsi in Web Development!

Contattaci come preferisci

Oppure compila il Form

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.

Apri la Chat
Ciao! Come possiamo aiutarti?
Ciao!
Come possiamo aiutarti?