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-PE'>
<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-PE'>
<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

Especifique una URL y un destino predeterminado para todos los enlaces en una página. 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-PE'>
<Head>
   <Title>Apuntes HTML</Title>
   <Base href='https://apuntes.perut.org' target=_blank>
</Head>

Solo puede haber un único <base>elemento en un documento, y debe estar dentro del elemento <head>.

También admite los atributos globales.

3. META

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

Atributos de Meta
NombreDescripción
CharSetEspecifica la codificación del archivo HTML.
NameEspecifica algún meta dato
http-equivProvee al encabezado de información y valores
content
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 serán usados por los motores de búsqueda 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.
generatorDefine el programa usado para generar la pagina.
robotsParámetros para los robots. content="index/noindex, follow/nofollow, archive/noarchive"
revisit_afterDefine el tiempo de una nueva revisión de la pagina.
viewportDefine el tamaño inicial de visualizacion.
<!DOCTYPE html>
<HTML lang='es-PE'>
<Head>
   <Title>Manual HTML</Title>
   <Meta CharSet='UFT-8' />
   <Meta name=description content="Bienvenido a los apuntes HTML de Enrique Garrido-Lecca (Kike_GL)." />
   <Meta name=keywords content='HTML,CSS,JavaScript' />
   <Meta name=author content='Enrique Garrido-Lecca (Kike_GL)' />
   <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 búsqueda 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.
snippet/nosnippetSirve 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.

También es una buena idea usar el archivo robots.txt

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 mínimo zoom.
maximun-scaleDefine el máximo 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

Define la relación entre el ducmento actual y el recurso externo referido. Debe tener los atributo REL y HREF. Usado para enlazar CSS, JavaScript y Favicon.

<!DOCTYPE html>
<HTML LANG='es-PE'>
<HEAD>
	<Title>Apuntes HTML</Title>
	<Link rel=StyleSheet href=hoja.css>
</HEAD>

No usa etiqueta de cierre.

Atributo en etiqueta LINK
AtributoDescripción
RELalternate|author|dns-prefetch|help|icon|license|next|pingback|preconnect|prefetch|preload|prerender|prev|search|stylesheet
HREFURL del recurso
TYPEDetermina el tipo de medio.
TITLEDefine una hoja de estilo preferida o alternativa
SIZESEspecifica el tamaño del recurso vinculado. Solo para rel=icon
MEDIAEspecifica en qué dispositivo se mostrará el documento vinculado.
CROSSORIGINEspecifica cómo maneja el elemento las solicitudes de origen cruzado.
HREFLANGEspecifica el lenguaje en el documento referenciado.
REFERRERPOLICYno-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url

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

<!DOCTYPE html>
<HTML LANG='es-PE'>
<HEAD>
	<TITLE>Apuntes HTML</TITLE>
	<Link rel=StyleSheet href=hoja.css>
	<Link rel=Profile href=meta.txt>
</HEAD>
Valores de atributo REL en etiqueta LINK
ValorDescripción
AlternateProporciona un enlace a una versión alternativa.
AuthorProporciona un enlace al autor del documento.
dns-prefetchEspecifica que el navegador debe realizar preventivamente una resolución DNS para el origen del recurso de destino
HelpDefine el documento de ayuda
IconDefine el favicon de la pagina
LicenseProporciona un enlace al siguiente documento de la serie.
NextIndica que el documento es parte de una serie y define el siguiente de la serie.
PingBackProporciona la dirección del servidor pingback que maneja pingbacks al documento actual.
preConnectEspecifica que el navegador debe conectarse de forma preventiva al origen del recurso de destino.
preFetchEspecifica que el navegador debe buscar y almacenar de forma preventiva el recurso de destino, ya que es probable que sea necesario para una navegación de seguimiento
preLoadEspecifica que el agente de navegador debe buscar y almacenar de forma preventiva el recurso de destino para la navegación actual de acuerdo con el destino dado por el atributo "como" (y la prioridad asociada con ese destino).
PrerenderEspecifica que el navegador debe pre-renderizar (cargar) la página web especificada en segundo plano. Entonces, si el usuario navega a esta página, acelera la carga de la página (porque la página ya está cargada). Advertencia! esto desperdicia el ancho de banda del usuario ! Solo use prerender si es absolutamente seguro que la página web es necesaria en algún momento del viaje del usuario.
PrevIndica que el documento es parte de una serie y define el anterior de la serie.
SearchProporciona un enlace a un recurso que se puede utilizar para buscar en el documento actual y sus páginas relacionadas.
StylesheetImporta una hoja de estilo CSS.

El valor más común de tipo de type="text/css". Si omite el atributo de tipo, el navegador mirará el atributo rel para adivinar el tipo correcto,pero si rel=stylesheet, el navegador asumirá que el tipo es type="text/css".

Valores de atributo TYPE en etiqueta LINK
ValorDescripción
text/cssArchivo CSS
text/javascriptArchivo JavaScript
text/htmlTexto HTML
image/pngImagen PNG

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-PE'>
<HEAD>
   <TITLE>Apuntes 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 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, así que lo lógico es poner primero el global con LINK y luego el local con STYLE.

También acepta atributo globales.

6. SCRIPT

Usado para definir código del lado del cliente en JavaScript. Puede contener sentencias de script o apuntar la URL de un archivo de script externo a través del atributo SRC.

Atributo de etiqueta SCRIPT
AtributoDescripción
AsyncEspecifica que el script se ejecuta de forma asincrónica (solo para scripts externos)
CharSetEspecifica la codificación de caracteres usada en un archivo de script externo
DeferEspecifica que el script se ejecuta cuando la página ha finalizado el análisis (solo para scripts externos)
SRCURL del script
TYPEDetermina el tipo de medio del script

Vea también la etiqueta noscript para los usuarios que han deshabilitado los scripts en su navegador o que tienen un navegador que no admite scripts del lado del cliente.

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

O desde un archivo externo

<!DOCTYPE html>
<HTML lang='es-PE'>
<Head>
   <Title>Aputes 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.

También acepta atributo globales.

7. NOSCRIPT

Detecta si el navegador tiene deshabilitados 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 botón.

<script>
document.write("Hola mundo")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

También acepta atributo globales.

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.

La etiqueta 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. Esta etiqueta se usa como un contenedor para mantener una porcion de HTML oculto al usuario cuando se carga la página.

<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>

Rellene la página web con un nuevo elemento div para cada elemento de una matriz. El código HTML de cada elemento div está dentro del elemento de plantilla.

<template>
  <div class="myClass">I like: </div>
</template>

<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  var temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  for (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

Crear el objeto DocumentiFragment usando node

<Script>
if (document.createElement('template').content) {
  document.write('Tu navegador soporta template');
} else {
  document.write('Tu navegador NO SOPORTA template');
}
</Script>

También acepta atributo globales.