• User

    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]


  • Admin

    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.


  • User

    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]


  • Admin

    Dipende se devi fare un sito responsive oppure no.


  • User

    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">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>[/HTML]

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