attribute - Un buen esqueleto de HTML
title html (6)
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 esqueleto HTML5 podría verse así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CC</title>
</head>
<body>
</body>
</html>
(Tenga en cuenta que este no es el documento HTML5 más mínimo , por lo que muchas partes son opcionales).
Si está utilizando una codificación diferente que UTF-8, cambie el valor del meta-charset consecuencia.
Si usa un idioma de contenido diferente al inglés, cambie el valor del atributo lang según corresponda.
Si desea especificar explícitamente la direccionalidad del texto, use el atributo dir en el elemento html , por ejemplo: <html dir="ltr" lang="en">
Elementos comunes de link / meta para agregar a la head
Vinculación a una stylesheet (
text/cssse asume por defecto):<link rel="stylesheet" href="/default.css">Enlazando a un favicon :
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">Especificando la URL canónica del documento:
<link rel="canonical" href="http://example.com/">Proporcionando una description del contenido de la página:
<meta name="description" content="…">
Elementos para el body
Como cada página es diferente, no se puede responder en general, por lo que es mejor dejar el body vacío.
Sin embargo, la mayoría de las páginas son parte de un sitio web, y la mayoría de los sitios web probablemente tengan un encabezado de todo el sitio (→ header ) con el nombre del sitio (→ h1 ), pie de página (→ footer ) y menú de navegación (→ nav ). Estos deberían pertenecer a la raíz de seccionamiento del body (es decir, no tener otro elemento de contenido de seccionamiento como principal). El nav puede o no ser parte del header .
El contenido principal (→ main ) puede o no consistir en un elemento de sección (generalmente article o section , o varios de ellos).
<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>
Quiero comenzar a crear sitios web de nuevo, pero he estado fuera de la escena HTML desde hace un tiempo. Me preguntaba si este es un buen esqueleto para un sitio web. Y si no, ¿qué debería cambiar, agregar y / o eliminar?
<!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>
El W3C DOM Level 1 Core es un buen lugar para comenzar:
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
</body>
</html>
El W3C DOM Level 1 le permite cambiar el árbol de contenido de la forma que desee . Es lo suficientemente potente como para construir cualquier documento HTML desde cero.
Desde allí puede agregar cualquier opción ( <html lang="en"> , <meta charset="utf-8"> , etc.), elemento ( link , main , nav , div , footer , etc.) o dependencia de la biblioteca (jQuery, Bootstrap, etc.), según sus necesidades y preferencias.
Empecé con HTML5 Boilerplate ... me ayuda a asegurarme de que todo sea más uniforme en todos los navegadores y ya tenga en cuenta la mayoría de las cosas que necesitaré más adelante.
No hay nada como un elemento <footer> en XHTML 1.0 Transitional. Deberías hacerlo así:
<body>
...
<div class="footer">
...
</div>
</body>
Me gusta usar un tipo de documento estricto en mis proyectos, pero el tuyo también funciona.
Pruebe www.htmlshell.com , puede obtener un esqueleto básico allí, con opciones opcionales para cosas como jQuery o favicons, etc.
<!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>