Uno scheletro buon HTML
-
30-09-2019 - |
Domanda
Voglio iniziare a creare di nuovo i siti web, ma sono stato fuori dalla scena HTML per un po 'di tempo. Mi stavo chiedendo se questa è una buona ossatura per un sito web. E se no, che cosa devo modificare, aggiungere e / o rimuovere?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<rel="stylesheet" type="text/css" href="css/main.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<title>Site Template - Welcome!</title>
</head>
<body>
<div class="Container">
<div class="Header">
</div>
<div class="Menu">
<ul id="nav">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="Body">
</div>
</div>
</body>
<footer>
<div class="Footer">
<b>Copyright - 2010</b>
</div>
</footer>
</html>
Soluzione
www.htmlshell.com , è possibile ottenere uno scheletro di base lì, con optional comprende per cose come jQuery o favicon, etc.
Altri suggerimenti
Sono stato cominciando con HTML5 Boilerplate .. . esso consente di assicurarsi che tutto sia il più coerente tra i vari browser e già tiene conto della maggior parte delle cose avrò bisogno più tardi.
tl; dr
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="/default.css">
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
<link rel="canonical" href="http://example.com/">
<meta name="description" content="…">
</head>
<body>
<header>
<!-- site-wide header -->
<h1>Example <!-- site name --></h1>
</header>
<main>
<!-- this page’s main content -->
</main>
<nav>
<!-- site-wide navigation -->
</nav>
<footer>
<!-- site-wide footer -->
</footer>
</body>
</html>
Un HTML5 scheletro potrebbe assomigliare a questo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CC</title>
</head>
<body>
</body>
</html>
(Si noti che questo non è il più minimale documento HTML5 , tante parti sono opzionali.)
Se si utilizza una codifica diversa da UTF-8, modificare il valore della meta
-charset
conseguenza.
Se si utilizza una lingua diversa da quella inglese di contenuti, modificare il valore dell'attributo lang
conseguenza
Se si desidera specificare esplicitamente la direzionalità del testo, utilizzare il dir
attributo sull'elemento html
, ad esempio: <html dir="ltr" lang="en">
link
comune / elementi meta
da aggiungere al head
-
Collegamento a una foglio di stile (
text/css
si presume per impostazione predefinita):<link rel="stylesheet" href="/default.css">
-
Collegamento a una favicon :
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
-
canonica URL del documento:
<link rel="canonical" href="http://example.com/">
-
descrizione del contenuto della pagina:
<meta name="description" content="…">
Elementi per la body
Come ogni pagina è diversa, questo non può essere risolta in generale, quindi potrebbe essere meglio lasciare il body
vuoto.
Tuttavia, la maggior parte delle pagine probabilmente fanno parte di un sito web, e la maggior parte siti web probabilmente un colpo di testa a livello di sito (? header
) con il nome del sito (? h1
), piè di pagina (? footer
) e menu di navigazione (? nav
). Questi dovrebbero appartenere alla radice body
sezionamento (cioè, non hanno altro elemento contenuto sezionamento come genitore). Il nav
può o non può essere parte del header
.
Il contenuto principale (? main
) può o non può essere costituito da un elemento di sezionamento (di solito article
o section
, o più di essi).
<header>
<!-- site-wide header -->
<h1>Example <!-- site name --></h1>
</header>
<main>
<!-- this page’s main content -->
</main>
<nav>
<!-- site-wide navigation -->
</nav>
<footer>
<!-- site-wide footer -->
</footer>
Non c'è niente come un elemento <footer>
in XHTML 1.0 Transitional. Si dovrebbe fare in questo modo:
<body>
...
<div class="footer">
...
</div>
</body>
Mi piace usare un DOCTYPE rigoroso nei miei progetti, ma la tua funziona, anche.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="main/css.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Site Template - Welcome!</title>
</head>
<body>
<div class="Container">
<div class="Header">
</div>
<div class="Menu">
<ul id="nav">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="Body">
</div>
<div class="Footer">
Copyright - 2010
</div>
</div>
</body>
</html>
Il W3C DOM Level 1 Nucleo è un buon posto per iniziare:
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
</body>
</html>
Il DOM del W3C Livello 1 consente di modificare l'albero contenuti qualsiasi modo si vogliono . E 'abbastanza potente per costruire qualsiasi documento HTML da zero.
Da lì si può aggiungere qualsiasi opzione (<html lang="en">
, <meta charset="utf-8">
, ecc), elemento (link
, main
, nav
, div
, footer
, etc.) o la dipendenza libreria (jQuery, Bootstrap, ecc), in base alle esigenze e le preferenze.