Consiglio Snippet HTML5 Base

rbnz

Consiglio Snippet HTML5 Base

Ciao a Tutti!

Vorrei da voi un consiglio riguardo alla creazione di uno "Snippet" per una pagina HTML5 base.
Secondo voi c'è tutto o devo modificare, togliere, aggiungere qualcosa?
In un secondo momento dovrò poi integrarlo con Bootstrap.

[HTML]
<!DOCTYPE html><html lang="it">
<head>
<meta charset="utf-8">
<meta name="robots" content="all | none | index | noindex | follow |nofollow">
<meta name="revisit-after" content="30 days">
<meta name="author" content="Autore del Sito [email protected]">
<meta name="owner" content="Nome Proprietario">
<meta name="language" content="it">
<title>Nome Sito - Il miglior Sito che esista</title>
<meta name="description" content="La descrizione del sito o della pagina">
<script type="text/javascript">
</script>
<link rel="stylesheet" href="foglio.css" type="text/css">
<style>header, footer, article {display: block;}</style>
</head>
<body>
<header><h1>Intestazione sezione del documento</h1></header>
<article><p>Testo dell'articolo</p></article>
<footer>Terminazione sezione del documento</footer>
</body>
</html>
[/HTML]

juanin

Per quanto riguarda l'inclusione del CSS posso dirti che in HTML5 il type="text/css" non è necessario.

Il robot a meno di dover mettere direttive come noindex o nofollow può essere omesso.

Il revisit-after a meno di esigenze particolare non serve.

Per quanto riguarda il body invece dipende da come vuoi organizzare la pagina. Nel tuo caso ad esempio suppongo che sia un articolo quindi l'header+h1 sarebbe più corretto includerlo dentro l'article.

Potresti avere ad esempio una situazione come la seguente

[HTML]<header>
<h1>informazioni header</h1>
<p>altre informazioni header</p>....
</header>
<article>
<header>
<h1></h1>
</header>
<p>testo</p>
<footer>Informazioni di chiusura articolo</footer>
</article>
<footer>
<h1>informazioni header</h1>
<p>altre informazioni header</p>
....
</footer>[/HTML]

Ma in ogni caso non c'è una struttura giusta o sbagliata, ma dipende solamente da come logicamente vuoi strutturare le pagine.

rbnz

Grazie Juanin per aver risposto.
Ho letto in giro che è consigliato inserire anche il meta tag viewport.

[TABLE="width: 566"]
[TR="bgcolor: #F4F4F4"]
[TD="class: code"]<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

[/TD]
[/TR]
[/TABLE]

juanin

Dipende se devi fare un sito responsive oppure no.

rbnz

Si, dev'essere responsivo. Comunque ho notato che sul sito di Bootstrap c'è questo:

[HTML]
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>[/HTML]

che dovrebbe già andare bene.
Grazie a tutti per le risposte!