Encabezado HEAD

Es una colección de etiquetas de información sin orden particular, que no afectan directamente la forma de mostrar el documento, pero sí son usados; dan importante información al navegador cliente (el browser que intenta interpretar la página). Son llamados metadatos, es decir datos sobre los datos.

<!DOCTYPE html>
<HTML lang='es'>
<Head>
   <Title>Manual HTML</Title>
</Head>

Estas etiquetas son:

1. TITLE

Cada documento HTML debe tener un título <TITLE> que identifique su contenido y este NO debe contener elementos de control como centrado, negritas, subrayado etc

La etiqueta título es obligatoria y requiere etiqueta de cierre.

<!DOCTYPE html>
<HTML lang='es'>
<Head>
   <Title>Manual HTML</Title>
   <Link TYPE="text/css" REL=stylesheet HREF="ruta_del_CSS" media=all />
   <Link REL="shortcut icon" HREF="ruta_del_FAVICON.ICO" />
   <Style TYPE="text/css">
       ... codigo CSS
   </Style>
   <Script TYPE="text/javascript" LANGUAGE=javascript SRC="ruta_del_JS"></Script>
   <Script TYPE="text/javascript">
       ... codigo JavaScript;
   </Script>
</Head>

La longitud del título no tiene límite, pero los títulos largos son cortados en ciertas aplicaciones. Para minimizar este problema te recomiendo que el título no pase de 64 caracteres.

También ten en cuenta de que en Internet los títulos son jalados a listas de búsqueda (como Google y Yahoo) y títulos como "Introducción" mandarán a muchos al desvío. En lugar de eso te sugiero:

2. BASE

Proporciona una dirección básica específica para la web. Debe tener obligatoriamente los atributos HREF y TARGET. No requiere etiqueta de cierre.

Valores para TARGET
ValorDescripción
_blankEn una nueva pagina sin nombre.
_parentCargar el resultado en el contexto de navegación padre del actual. Si no hay padre, esta opción se comporta de la misma manera que _self.
_selfCarga el resultado en el mismo contexto de navegación que el actual. Este valor es el valor por defecto si no se especifica el atributo.
_topCarga el resultado en el contexto de nivel superior de navegación (es decir, el contexto de navegación que es un ancestro de la actual, y no tiene padre). Si no hay padre, esta opción se comporta de la misma manera que _self.
nombre de frameEn el frame mencionado
<!DOCTYPE html>
<HTML lang='es'>
<Head>
   <Title>Manual HTML</Title>
   <Base href='http://wiki.peru.org' target=_blank>
</Head>

3. META

Especifica la información usable por el cliente/servidor en documentos dinámicos.

Atributos de Meta
NombreDescripción
CharSetEspecifica la codificacion dle archivo HTML.
NameEspecifica algun meta dato
http-equivProvee al encabezado de infomacion y valores
schemeEspecifica el esquema usado. No soportado en HTML5.

3.1 Atributos CharSet

Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El atributo que usaremos es este:

<Meta CharSet='utf-8'>
<Meta CharSet='iso-8859-1'>

3.2 Atributos name

Especifica los metadatos que seran usados por los motores de busqueda para clasificar la pagina web.

Parámetros de Name=
NameDescripción
=descriptionDefine la descripción de la pagina. Usar content=
=keywordsDefine las palabras claves asociadas.
=authorDefine el autor de la pagina.
=CopyrightDefine los derechos de autor de la pagina.
=GeneratorDefine el programa usado para generar la pagina.
=Revisit_afterDefine el tiempo de una nueva revisión de la pagina.
=robotsParámetros para los robots. content="index/noindex, follow/nofollow, archive/noarchive"
=viewportDefine el tamaño inicial de visualizacion.
<!DOCTYPE html>
<HTML lang='es'>
<Head>
   <Title>Manual HTML</Title>
   <Meta CharSet='UFT-8'>
   <Meta name=description content="Bienvenido al manual de HTML de Enrique Garrido-Lecca (Kike_GL).">
   <Meta name=keywords content="HTML,CSS,JavaScript">
   <Meta name=author content="Enrique Garrido-Lecca">
   <Meta name=robots content="index/noindex, follow/nofollow">
   <Meta name=viewport content="width=device-width; initial-scale=1.0">
</Head>

3.2.1 META name=robots

Instruye a los robots de busqueda que hacer con el contenido de esta pagina web.

Content de name=robots
ContetDescripción
index/noindexIndica al robot si se desea o no permitir la indexación de la página.
follow/nofollowIndica al robot si se debe o no permitir seguir recorriendo la web a través de los enlaces que encuentre en el cuerpo del documento.
archive/noarchiveIndica al robot si deseamos o no que guarde el contenido del sitio web en su caché interna. Buscadores como Google tienen una caché y podemos ver las páginas web tal como las tiene cacheadas el buscador. Para ello, en los resultados de las búsquedas aparece un enlace que pone caché. Según Google, esto no evitara que se guarde en caché la página, pero no se mostrara a los usuarios del buscador y por lo tanto no muestra el enlace respectivo.
Sirve para que el motor de búsqueda no muestre ninguna descripción de un sitio, sólo su título. Si utilizas NOSNIPPET automáticamente defines un NOARCHIVE, por lo que la página tampoco se mostrará en caché.
odp/noodpSirve para indicar al buscador si debe, o no, mostrar el título y descripción de la página.
ydir/noydirIgual a anterior para buscador Yahoo.

3.2.2 META name=viewport

El punto de vista varia con la resolución de pantalla y en dispositivos móviles este valor es critico. HTML5 introdujo este parámetro para facilitar a todas las web a adaptarse a los móviles, así que debe incluir esta etiqueta en todas sus paginas.

<META name=viewport CONTENT="width=device-width, initial-scale=1.0">

3.3 Atributos http-equiv

El atributo http-equiv pueden contener información equivalente a las indicaciones en el encabezado HTTP, la cual puede ser leída, por ejemplo, si el servidor no está configurado como corresponde. Los encabezados HTTP con el mismo nombre tienen prioridad frente a los meta de HTML. Los más importantes son:

Valores de http-equiv
http-equiv =Descripción
RefreshRefresca la pagina cada n segundos y redireccionar. Usar: <meta content="n; URL=ruta"
Content-TypeDefine contenido. Usar: <meta content="text/html; charset=UTF-8"
cache-controlDefine forma de control de cache. Usar: <meta http-equiv="cache-control" content="no-cache">
expiresDefine fecha de expiracion del cache. Usar: <meta http-equiv=expires content=43200
<!DOCTYPE html>
<HTML LANG='es'>
<Head>
   <META charset='UTF-8'>
   <TITLE>Manual HTML</TITLE>
   <META http-equiv=Refresh CONTENT=120; URL=h21.htm>
</Head>

Donde device-width establece que el ancho de la pagina debe coincidir con el ancho de la pantalla del dispositivo del cliente. y initial-scale=1.0 fija el nivel de zoom al cargar por primera vez.

No obligues a los usuarios a desplazarse horizontalmente, solo verticalmente si no quieres que tu pagina sea calificada con una pobre experiencia gráfica.

Valores de content
ValorDescripción
widthdevice-width, define el ancho visual
device-widthDefine ancho físico
heightdevice-height, define el anto visual
device-heightDefine alto físico
initial-scale1.0, define la zoom inicial (sin zoom)
minimun-scaleDefine el minimo zoom.
maximun-scaleDefine el maximo zoom.
user-scalableYes|No, permite al usuario cambiar el zoom.
  1. No uses nunca elementos grandes de ancho fijo.
  2. Nunca fijes tu contenido para anchos particulares.
  3. Usa CSS para aplicar un estilo diferente para pantallas grandes y pequeñas.

4. LINK

Indica la relación entre doc. Debe tener los atributo TYPE, REL y HREF. Usado para enlazar CSS, JavaScript y Favicon.

<!DOCTYPE html>
<HTML LANG='es'>
<HEAD>
	<Title>Manual HTML</Title>
	<Link type="text/css" rel="StyleSheet" href="https://fonts.googleapis.com/css?family=Fira+Sans" />
</HEAD>

No usa etiqueta de cierre.

Otra cosa que es posible cargar mediante esta etiqueta es una fuentes google.

<!DOCTYPE html>
<HTML LANG='es'>
<HEAD>
	<TITLE>Manual HTML</TITLE>
	<Link type="text/css" rel="StyleSheet" href="hoja.css" />
	<Link type="text/css" rel="Profile" href="meta.txt" />
</HEAD>
Valores de atributo TYPE en etiqueta LINK
ValorDescripción
text/cssArchivo CSS
text/javascriptARchivo JavaScript
text/htmlTexto HTML
image/pngImagen PNG
Valores de atributo REL en etiqueta LINK
ValorDescripción
StyleSheetImporta una hoja CSS
ProfileDefine URL de un archivo externo con Metadatos
NextIndica que el documento es parte de una serie y define el siguiente de la serie.
PrevIndica que el documento es parte de una serie y define el anterior de la serie.
HelpDefine el documento de ayuda
IconDefine el favicon de la pagina
Alternate
Author
License
PingBack
preConnect
preFetch
preLoad
dns-prefetch
Search
Stylesheet

La etiqueta LINK puede contener un único atributo PROFILE que define la URL de un documento externo que contiene el perfil de la cabecera.

5. STYLE

Declara el estilo CSS que se usara esta pagina. Requiere etiqueta de cierre.

<!DOCTYPE html>
<HTML lang='es'>
<HEAD>
   <TITLE>Manual HTML</TITLE>
   <STYLE>
		body {background-color: powderblue;}
		h1 {color: red;}
   </STYLE>
</HEAD>

Es lógico que este CSS solo afecta al documento actual de forma aislada, pro lo que se acostumbra en su lugar preferir las definiciones globales que se referencias asi:

<Link type="text/css" rel="StyleSheet" href="hoja.css">

Es muy importante el orden de aplicación de los CSS, recuerde que es el cascada de forma que se chancan unos a otros, asi que lo logico es poner primero el global con LINK y luego el local con STYLE.

6. SCRIPT

Usado para definir código del lado de cliente JavaScript

<!DOCTYPE html>
<HTML lang="es">
<Head>
   <Title>Manual HTML</Title>
   <Script>
	   function miFuncion {
	      document.getElementById('manual').innerHTML = "Esto es JavaScript";
	   }	
   </Script>
</Head>

O desde un archivo externo

<!DOCTYPE html>
<HTML lang="es">
<Head>
   <Title>Manual HTML</Title>
   <Script src='jquery.min.js'></Script>
</Head>

Es muy importante el orden de aplicación de los JavaScript, recuerde que el segundo invocado podría chancar al primero.

7. NOSCRIPT

Detecta si el navegador tiene desabilitados el motor JavaScript y muestra el código encerrado.

<FORM ACTION=calculadora.php>
  <P><LABEL FOR=x>Number</LABEL>: <INPUT TYPE=number NAME=x ID=x></P>
  <SCRIPT>
     var x = document.getElementById('x');
     var output = document.createElement('p');
     output.textContent = 'Type a number; it will be squared right then!';
     x.form.appendChild(output);
     x.form.onsubmit = function (){return false;}
     x.oninput = function (){
        var v = x.valueAsNumber;
        output.textContent = v + ' squared is ' + v * v;
     };
  </SCRIPT>
  <NOSCRIPT>
  <INPUT TYPE=submit VALUE="Calculadora de cuadrados">
  </NOSCRIPT>
</FORM>

Si el navegador tiene activado la secuencia de comandos, el valor se calcula sobre la marcha en su lugar. Cuando los SCRIPTs estén deshabilitados, aparece un botón para hacer que el cálculo pueda ser hecho del lado del servidor via calculadora.php al pulsar el boton.

8. TEMPLATE

Usado para declarar fragmentos de HTML que pueden ser clonados e insertados en el documento via SCRIPT. Proporcionar un método para declarar subárboles DOM inertes y manipularlos para instanciar fragmentos de documentos con idénticos contenidos. Cuando las páginas web alteran dinámicamente el contenido de sus documentos (por ejemplo, en respuesta a la interacción del usuario o los nuevos datos que llegan de un servidor), es común que requieran fragmentos de HTML que pueden requerir modificaciones adicionales antes del uso, como la inserción de valores apropiado para el contexto de uso.

El elemento TEMPLATE permite la declaración de fragmentos de documento que no se usan en el documento al momento de cargarse, pero se analizan como HTML y están disponibles en tiempo de ejecución para su uso por la página web.

<SCRIPT>
  //Esta data podría venir de un servidor
  var data = [
    { name: 'Pilar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
    { name: 'Mateo', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
  ];
</SCRIPT>
<TABLE>
  <THEAD>
  <TR>
    <TH>Name<TH>Color<TH>Sex<TH>Legs
  <TBODY>
  <TEMPLATE id="row">
    <TR><TD><TD><TD><TD>
  </TEMPLATE>
</TABLE>
<SCRIPT>
   var template = document.querySelector('#row');
   for (var i = 0; i < data.length; i += 1) {
      var cat = data[i];
      var clone = template.content.cloneNode(true);
      var cells = clone.querySelectorAll('td');
      cells[0].textContent = cat.name;
      cells[1].textContent = cat.color;
      cells[2].textContent = cat.sex;
      cells[3].textContent = cat.legs;
      template.parentNode.appendChild(clone);
   }
</SCRIPT>

Crear el objeto DocumentiFragment usando node