GUÍA HTML

HTML

• Evolución de HTML

Programas recomendados 💽

• Editores Online

  • VS Code Online
  • w3schools Editor HTML Online
  • Codepen

• Editores recomendados 👈

• Navegadores recomendados

CONTENIDO

• De textos
• Citas
• Listas
• Tablas
• Lineas separadoras
• Abreviaturas
• Emojis

Historia de HTML - Resumen

Año 1989:

Tim Berners-lee invento la World Wide Web

La web se desarrolló entre marzo y diciembre de 1989 por el inglés Tim Berners-Lee con ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza y se publicó como una propuesta formal en el año 1991. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (como el lenguajes de marcado HTML)

Año 1991:

Tim Berners-lee invento HTML

El origen de HTML se remonta al año 1980, cuando Tim Berners-Lee, trabajador del CERN (Organización Europea para la investigación Nuclear) propuso un nuevo sistema de “hipertexto” permitía que la información relacionada con los documentos eléctronicos que estaban visualizando. El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre de HTML Tags y todavía hoy puede ser consultado online a modo de reliquia informática.

Año 1993:

Dave Raggett redacta HTML

Dave Ragget es un especialista en informática inglés que ha desempeñado un papel importante en la implementación de la World Wide Web desde 1992. Ha sido miembro W3C desde 1995. Despues de conocer a Tim Berners-Lee en 1992 ha sido paritcipe activo en el desarrollo de World Wide Web. La primera propuesta oficial para que HTML fuera un estándar se realizó en 1993 por parte del IETF. En esta época se definieron las etiquetas para imágenes, tablas y formularios.

Año 1995:

HTML 2.0 definido por HTML Working Group del IETF
( Internet Engineering Task Force )

El HTML Working Group fue un grupo de trabajo del IETF que estuvo desde 1994 y 1996, y un grupo de trabajo del W3C desde 1995 a 2015. El HTMLWG tenía miembros de una comunidad diversa, como proveedores de contenido, autores de contenido y cualquier persona interesada en el trabajo sobre HTML.

Año 1997:

Recomendaciones de W3C: HTML 3.2

Aparecieron nuevas etiquetas, como:

• center
• font
• script
• style
• div

Año 1999:

Recomendaciones de W3C: HTML 4.01

Editada por Dave Ragget y otros miembros. Se considera obsoleta desde marzo de 2018. Después de años de lucha entre los fabricantes de la W3C intentaba poner un poco de orden con las versiones de HTML 4 y HTML 4.01 en los años 1998 y 1999. En HTML 4.01 la W3C empieza con la separación de la estructura del documento con la de la representación visual. Así crea un lenguaje paralelo al HTML 4.01 llamado CSS

Año 2000:

Recomendaciones de W3C: XHTML 1.0

Debido a la falta de coherencia en la definición de los esquemas derivados del SGML, la W3C decide definir un nuevo subesquema de SGML denominado XML. Este esquema sería un esquema bien definido y cerrado, lo cual podría proporcionar documentos coherentes y sin posibilidad de dobles interpretaciones. XHTML 1.0 viene a ser lo mismo que HTML 4.01 pero con una definición basada sobre XML en vez de sobre SGML.

Año 2008:

Primer borrador público de HTML5 WHATWG

Una vez publicado XHTML 1.0 los esfuerzos de la W3C se dirigen a la creación de XHTML 2.0 como evolución del lenguaje.
Nuevamente la W3C se mete en un trabajo teórico, lo que hace que algunos “desidentes” (oportunistas para otros), monten un grupo paralelo conocido como WHATWG. La actividad del WHATWG se centra en el estándar HTML5, cuyo primer borrador oficial se publicó el 22 de enero del 2008.

Año 2012:

Estándar de vida HTML5 WHATWG

En enero de 2011, el WHATWG cambió el nombre de su estándar de vida “HTML5” a “HTML”. No obstante, el W3C continúa con su proyecto de lanzar HTML5. En Julio del 2012, el WHATWG y W3C decidieron un grado de separación. W3C continuará el trabajo de especificación HTML5, enfocándose en un único estándar definito y WHATWG continuará su trabajo con HTML5 como un “estándar de vida”.

2014:

Recomendaciones de W3C: HTML5

En diciembre de 2012, el W3C designó HTML5 como recomendación candidata. En septiembre de 2014, W3C trasladó HTML5 a recomendación propuesta. El criterio para avanzar a la recomendación del W3C es “dos implementaciones 100% completas y totalmente interoperables”. En 28 de octubre de 2014, HTML5 se publicó como una recomendación W3C estable, significa que el proceso de especificación está completo.

Año 2016:

Recomendaciones candidata de W3C: HTML5.1

Cosas nuevas que traen dentro de esta recomendación candidata:
×<picture>:
×<dialog>:
×<summary>: y <details>:
Entre otras que tienen una función sobre la semántica del documento.

Año 2017

Recomendaciones W3C: HTML5.1 2da edición

Esta edición llega con algunas revisiones sobre la anterior publicación.
Es posible leer el documento de HTML 5.1 (segunda edición) en el sitio web del W3C. Con posterioridad, el 3 de Octubre de 2017 se convierte en estándar https://www.w3.org/TR/html51/.

Año 2017

Recomendaciones W3C: HTML5.2

En diciembre del año 2017 se define como estándar la versión 5.2 de HTML se volvió la recomendación oficial de la W3C. Porsupuesto que se incorporarón nuevos aspectos, mejorando la seguridad en las etiquetas de link como determinar si el contenido de la etiqueta va a ser cargado y usado. También se actualizarón aspectos de accesibilidad de varios atributos como https://www.w3.org/TR/wai-aria-1.1/

Editores recomendados

Editor	Descarga	Linux	Windows	Mac	Licencia	Código fuente
	Visual Studio Code				MIT	microsoft/vscode
	SublimeText				Protected
	Atom				MIT	atom/atom
	Notepad++				GPLv3	notepad-plus-plus/notepad-plus-plus

Navegadores recomendados

Navegador	Descarga	Linux	Windows	Mac	Licencia	Código fuente
	Google Chrome				Protected
	Microsoft Edge				Protected
	Firefox Developer				MPLv2.0	mozilla-central
	Opera				Freeware
	Brave				MPLv2.0	brave/brave-browser

¿Qué es HTML?

Cuando accedemos a una página web, debemos tener en cuenta que lo que realmente está ocurriendo es que nuestro navegador web está pidiendo un documento de texto al sistema ( máquina ) donde está almacenada esa página web.

En cualquier navegador, existe una opción para ver el código fuente de la página web, la cúal nos mostrará exactamente el texto de dicho documento. El navegador normalmente no nos muestra esa información literalmente, sino que interpreta y va dibujando los elementos de una página web.

El documento que lee el navegador está escrito en un lenguaje de marcado llamado HTML, que son las siglas de HyperTextMarkup Language ( Lenguaje de marcado de hypertexto ), o lo que es lo mismo, un lenguaje de etiqueta que permite incluir o hacer referencia a todo tipo de información.

¿Qué es una etiqueta HTML?

En el navegador Chrome, puedes pulsar la combinación de teclas CTRL+U para ver el código fuente de la página en la que te encuentras. Dicho documento esta formado por etiquetas, que son la base del lenguaje HTML.

Existen muchas etiquetas y cada una se utiliza para contener información y darle un cierto significado a dicha información, dependiendo de la etiqueta que se trate. Las etiquetas HTML tienen la siguiente estructura:

En HTML no se puede utilizar cualquier palabra como etiqueta ( en el ejemplo anterior, es incorrecto utilizar la etiqueta <<etiqueta>> ). En su lugar, existen una serie de etiquetas concretas, cada una de ellas con su finalidad y características propias, que tendremos que utilizar según requiera la ocasión. Por norma general, las etiquetas deben cerrarse para indicar donde finaliza su contenido.

¿Qué es la semántica?

Uno de los principales objetivos de HTML5 es introducir información en un documento de forma que sea semántico y no visual. Esto quiere decir que todos los aspectos visuales deben dejarse para el apartado de presentación, que se gestiona desde el lenguaje CSS. En el documento HTML5 debe aparecer información correctamente individualizada, de modo que leer una página HTML comprendamos su significado, y si queremos cambiar la apariencia, lo hagamos desde CSS. Esto es lo que comúnmente se conoce como separación de la presentación del contenido.

Un ejemplo donde se ve claramente esto es con la etiqueta b de HTML4 y anteriores. Dicha etiqueta se utilizaba para poner en negrita ( bold ) un texto específico:

<p>Hola, quiero resaltar esta <b>palabra</b>.</p> 

En este caso, se está utilizando una propiedad de presentación ( visual ) en el HTML, algo que no se debe hacer en HTML5. La misión de HTML5 es mantener sólo contenido de información semántica. Por ello, la forma correcta de hacer lo mismo que en el ejemplo anterior para HTML5 es la siguiente:

<p>Hola, quiero resaltar esta <strong>palabra</strong>.</p> 

En este nuevo ejemplo, se remplaza la etiqueta b ( negrita, característica de presentación ) por strong, una etiqueta que indica información semántica ( importante, característica semántica ). De esta forma, en el documento de HTML5 sólo se está añadiendo información particular sobre fragmentos de texto, y si queremos dotar de presentación visual, lo haremos desde CSS:

strong {
  font-weight: bold;
  color: black;
}

De esta forma podríamos cambiar el estilo ( negrita, colores, tipo de letra, etc... ) independientemente de la información y contenido que existe en HTML. Incluso podríamos establecer el mismo estilo en el texto, para que visualmente se vea todo de forma uniforme, pero sin embargo, al leer la página HTML, el navegador sabrá siempre que fragmentos de texto son más importantes, aunque tenga el mismo estilo visual.

El objetivo de crear documentos HTML semánticos es que, aunque estamos acostumbrados a crear páginas para usuarios (o más concretamente para navegadores), cada vez tenemos una internet capaz de procesar información de forma autónoma. Muestra de ello son, por ejemplo, los robot o crawlers de buscadores como Googlebot ( el robot de búsqueda de Google ) que es capaz de acceder a páginas web para analizar la información de la misma, entenderla e indexarla en su buscador.

Estructura de una etiqueta HTML

Como habíamos mencionado, las páginas webs son realmente documentos de texto que contienen información y muchas etiquetas HTML que indican que tipo de contenido se va a mostrar en el navegador al cargar la página web.

La estructura de las etiquetas HTML tiene el siguiente formato:

Etiqueta HTML

La parte esencial de una etiqueta HTML es lo que se denomina etiqueta de apertura. Se trata de escribir el nombre de la etiqueta en cuestión, colocándola entre los caracteres < ... >. Aunque no es terminantemente obligatorio, se recomienda y considera una buena costumbre escribir las etiquetas siempre en minúsculas.

En HTML5 no se puede colocar cualquier palabra como etiqueta, sino que existe una serie específica de etiquetas, cada una con una misión y objetivo diferente. Por ejemplo, la etiqueta <strong>:

<strong>contenido</strong>

Como se puede ver, la mayoría de las etiquetas requieren que se especifique un cierre de etiqueta para saber donde termina de actuar. Se caracteriza en que se escribe igual que la etiqueta de apertura, pero con la barra diagonal inmediatamente después del símbolo menor que </...>.

Atributo

En algunas etiquetas HTML, existen algunos atributos específicos (que pueden ser opcionales u obligatorios). Los atributos determinan cierta información sobre la etiqueta (o su modo de actuar) y generalmente van asociados a un valor determinado. Este par atributo-valor se escribe después del nombre de la etiqueta, separándola por espacio y antes del carácter > de la etiqueta de apertura:

<strong id="dato">contenido</strong>

En este caso, la etiqueta sería strong, el atributo id, el valor de id sería dato, mientras que el contenido de la etiqueta es contenido. Por otro lado, y al igual que las etiquetas, cada atributo tiene una misión y comportamiento concreto. Aunque los valores pueden ir rodeados por comillas simples, se recomienda escribir el valor siempre entre comillas dobles.

Existen 3 tipos de atributos dependiendo de sus valores:

• Conjunto finito de valores: Son los atributos en los que puedes especificarle una serie de valores limitada. Cualquier otro valor que no sea uno de ellos, no será válido.
• Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto, y no existe una serie de valores específicos para escribir.
• Valores booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false). En HTML5 estos atributos se escriben sin valor (solo el atributo) si son verdaderos y se omiten para indicar que son falsos.

Contenido de la etiqueta

En el interior de la etiqueta HTML (después de la etiqueta de apertura y antes de la etiqueta de cierre) se debe colocar la información que queremos que sea afectada por dicha etiqueta. En el siguiente ejemplo se ve como contiene un fragmento de texto:

<strong id="dato" class="clase1" lang="es">Contenido de texto</strong>

Ten en cuenta que una etiqueta puede tener varios pares atributo-valor, como se ve en el ejemplo anterior, pero nunca se debe repetir el mismo atributo en una misma etiqueta varias veces, ya que sobreescribiría al anterior. El orden de los atributos no importa. Más adelante veremos que tipos de atributos existen y para que sirven.

Sin embargo, una etiqueta puede contener desde un fragmento de texto hasta un grupo de etiquetas. Esto depende mucho de la etiqueta a utilizar, y se verá más claro en los siguientes apartados sobre etiquetas. Un posible ejemplo sería el siguiente:

<div id="grupo-principal">
  <strong>Contenido importante</strong>
</div>

Podemos observar en el ejemplo anterior que dentro de la etiqueta div vemos que no sólo hay un fragmento de texto, sino que además incluye otra etiqueta, strong en este caso. Esto ocurre en las etiquetas de agrupación, que iremos viendo pronto.

Comentario HTML

Los comentarios son una práctica muy común y habitual en los desarrolladores o programadores. Se basa en introducir breves fragmentos de texto que el navegador ignorará y no tendrá en cuenta a la hora de crear la página visualmente, pero que a nosotros nos sirven de ayuda para documentar algún detalle, explicar algo importante o simplemente introducir algún comentario que consideremos relevante:

<!-- Esto es un comentario de ejemplo que el navegador ignorará --> 

Como se puede ver, para introducir comentarios en el código HTML, basta con escribir los fragmentos de texto entre <!-- --> para que sea ignorado.

Atributos comunes en HTML

Como hemos visto, HTML está formado por etiquetas. Muchas etiquetas. Cada etiqueta tiene una misión y tarea y contendrá cierto contenido relacionado con su misión. Y además tenemos los atributos, que son palabras clave de texto que modifican ligeramente el comportamiento de la etiqueta que lo contiene.

A continuación, vemos una lista de atributos comunes que pueden ser utilizados en cualquier etiqueta HTML.

Atributo id (identificador)

En HTML, podemos darle un identificador a una etiqueta HTML y de esta forma darle un nombre. Simplemente, añadimos el atributo id y colocamos el nombre como valor de ese atributo. Ese nombre de identificador no debe empezar nunca por un número y puede contener letras mayúsculas, minúsculas, signos especiales (guión, guión bajo...) o números:

<div id="pagina">
  <div>Aquí irá anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div>Aquí irá anuncio</div>
<div>

Los id se suelen indicar cuando queremos localizar zonas específicas que sabemos que no se van a repetir en esa misma página.

Uno de los detalles importantes de los id, es que no pueden haber dos con el mismo nombre en una página. Ejemplos correctos de id podrían ser <<pagina>> (para contener toda la página completa), <<comentarios>> (para contener toda la zona de comentarios de la página) o <<header>> (para contener la parte con el logo y la cabecera de la página). Lo que debe quedar claro de los ids, es que no se puede tener el mismo id en más de una etiqueta HTML por página.

Más adelante en el apartado de enlaces o hipervínculos, veremos que también podemos utilizarlo para acceder rápidamente, desde un enlace, a esa sección concreta de la página.

Atributo de class (clases)

Las clases funcionan de forma muy similar a los id, pero son mucho más flexibles. En primero lugar, no tienen la limitación de los ids, por lo que su nombre se puede repetir y no es necesario que aparezca sólo una vez por página.

De hecho, la idea de las clases es establecer géneros o tipos de etiquetas, a los que les asociemos características comunes. Sigamos con el ejemplo anterior y añadiendole clases (atributo class) a las etiquetas:

<div id="pagina">
  <div class="anuncio">Aquí irá anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div class="anuncio">Aquí irá anuncio</div>
<div>

Como podemos ver, al tener la misma clase <<anuncio>>, podemos realizar acciones para todas las etiquetas de ese tipo y no tener que hacerlo para cada una de ellas por separado. Un ejemplo de eso donde se puede ver bien su utilidad, es respecto a utilizar ids y clases para dar estilos CSS, donde aplicaremos unos estilos concretos a todas las etiquetas HTML que tengan la clase <<anuncio>>.

Además, una etiqueta puede tener múltiples clases, no una sola. Esto nos da más flexibilidad a la hora de crear clases específicas:

<div id="pagina">
  <div class="anuncio primero">Aquí irá anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div class="anuncio ultimo">Aquí irá anuncio</div>
<div> 

Como se puede observar, en la primera etiqueta del anuncio hemos aplicado las clases anuncio y primero, mientras que en el último anuncio hemos aplicado las clases anuncio y último. Esto nos permitiría asignar atributos comunes al anuncio en la clase anuncio, y atributos que sólo dependan de la posición donde esta colocado en primero y/o ultimo.

Recordar siempre que para indicar múltiples clases se debe separar las clases por espacio dentro de un mismo atributo class. No se debe nunca indicar varios atributos class en una misma etiqueta, ya que el navegador lo que haría es sobreescribir el valor del último atributo class con los de los primeros.

Atributo lang (idioma)

Mediante el atributo lang podemos indicar el idioma del contenido de la etiqueta. El valor de dicho atributo tendrá que ser el código código ISO 639-1 del idioma al que queremos hacer referencia. Aunque en principio podemos hacer esto en cualquier etiqueta HTML, es obligatorio hacerlo en la etiqueta html ya que es la etiqueta que engloba todo el documento.

De esta forma, estaremos estableciendo el idioma en el que se encuentra el documento:

<html lang="es">
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

El atributo translate (traducción)

También podemos utilizar el atributo translate, el cuál acepta los valores yes y no (yes, es su valor predeterminado) en las etiquetas HTML para indicar si el contenido de un texto es o no <<traducible

Si por ejemplo, tenemos un texto que no queremos que sea posible traducirlo, sino que queremos que conserve el texto original, podemos hacer lo siguiente:

<p>
  Hace algunos días fuí a ver la nueva película de 
  <span translate="no">StarWars</span>.
</p>

De esta forma, le indicamos al navegador o a herramientas como Google translator, que esa frase específica no se debe traducir porque es el título que queremos que aparezca siempre. Por defecto, si no se indica el atributo translate en una etiqueta, es como si tuviera el valor yes por defecto.

El atributo title (títulos o tooltips)

En la mayoría de las etiquetas HTML podemos indicar el atributo title para especificar un mensaje de texto que aparezca cuando el usuario detenga el mouse sobre el elemento un instante. Al usuario le aparece un pequeño aviso emergente, generalmente con fondo amarillo y letras negras, que muestra el texto en cuestión.

De esta forma, podemos usar este atributo sobre cualquier tipo de etiqueta HTML, aunque se suele usar sobre todo en las etiquetas de imágenes img, de abreviaturas abbr entre otras:

<div>
  <img 
    src="//robohash.org/1"
    alt="robot aleatorio."
    title="¡Este es un robot generado al azar!" />
<div>
<p>El lenguaje de etiquetas <abbr title="HyperText Markup Language">HTML</abbr></p>

Es importante no confundir el atributo title con el atributo alt de las imágenes, que generalmente se tiende a confundir porque puede tener objetivos idénticos, pero no siempre es así. El atributo alt debe ser un texto alternativo que describa la imagen en el caso de que no se pueda ver por alguna razón (por ejemplo cuando no es accesible en un servidor web), mientras que el atributo title puede describir la imagen, pero no tiene porque ser una descripción alternativa.

De la misma forma, podemos utilizar el atributo title para otros elementos, como por ejemplo, etiquetas <a> (enlaces) u otras.

EL atributo data- (metadatos)

En HTML, veremos que la mayoría de los metadatos (información adicional) se incluyen en la etiqueta head del documento HTML. Sin embargo, también se puede incluir metadatos en la propia etiqueta a través de un atributo con prefijo data-.

De esta forma, podemos inventarnos cualquier atributo que contenga información, habitualmente orientada a utilizarse desde javascript:

<article
  id="auto"
  data-marca="ford"
  data-modelo="fiesta"
  data-color="azul"
  data-asientos="4">
</article> 

En este ejemplo guardamos información sobre un vehiculo en la etiqueta <article>, a la que podremos acceder a través de javascript mediante la propiedad .dataset y a su vez a la propiedad con el nombre que se indicó seguido del prefijo data-:

const article = document.getElementById("auto");

article.dataset.marca; // ford
article.dataset.modelo; // fiesta
article.dataset.color; // azul
article.dataset.asientos; // 4 

Atajo de teclado (accesskey)

En HTML es posible añadir el atributo accesskey para indicar un atajo de teclado que puede pulsar el usuario para activar ese elemento. En el siguiente ejemplo, tenemos 4 elementos: dos campos de texto, un enlace y un botón. Cada uno de ellos tiene su atributo accesskey para cuando el usuario pulse ALT + tecla, se active ese elemento:

<form>
  <!-- Campo de texto -->
  <input accesskey="N" placeholder="Campo 1 (ALT+N)" />
  <!-- Campo de texto -->
  <input accesskey="A" placeholder="Campo 2 (ALT+A)" />
  <!-- Enlace HTML -->
  <a accesskey="L" href="#">Enlace (ALT+L)</a>
  <!-- Botón HTML -->
  <button accesskey="B">Botón (ALT+B)</button>
</form>

De esta forma, si pulsamos ALT+N, se colocará el foco en el primer campo de texto, si pulsamos ALT+L será como si hubieramos pulsado el enlace con el ratón y si pulsamos ALT+B se pulsará el botón.

Sin embargo, una de las desventajas de este sistema, es que no está demasiado unificado entre navegadores y sistemas. Por ejemplo, si establecemos un atajo con la tecla A, es decir, con el atributo accesskey, tendríamos que pulsar las siguientes combinaciones de teclas:

Esto hace que la combinación de teclas para un usuario poco familiarizado con este proceso, además de la incertidumbre de no saber que navegador va a utilizar, hagan que este proceso sea poco práctico.

Estructura del documento HTML

Observa que tenemos una zona superior que es el tipo de documento. Luego, abrimos la etiqueta html que contendrá dos partes principales: la cabecera del documento y el cuerpo del documento:

El DOCTYPE (tipo de documento)

El !DOCTYPE o tipo de documento es una etiqueta especial que se escribe en la primera línea del documento HTML. Debe ir especificado siempre para que el navegador sepa que tipo de documento HTML se trata.

Antes de comenzar un documento HTML, en su primera línea, es siempre conveniente indicar el tipo de documento a utilizar. Para indicar que se trata de un documento HTML5 colocaremos la siguiente linea:

<!DOCTYPE html> 

En versiones anteriores, como HTML4 o XHTML, el tipo de documento se especificaba en la primera línea de una forma más compleja. Hoy en día estos DOCTYPE no tiene sentido indicarlos:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Los navegadores, antes de comenzar a dibujar una página web, lo primero que hacen es leer la línea donde se indica el tipo de documento del que se trata. De esta forma, el navegador ya está preparado para actuar adaptándose perfectamente a cada tipo de documento.

En el caso de no indicar el tipo de documento en una página HTML, el navegador entra en el modo Quirk mode (modo peculiar o modo no estándar), donde se activa un modo de retrocompatibilidad con páginas antiguas, que procesará de forma diferente muchas etiquetas HTML o propiedades CSS.

La etiqueta head (metadatos)

Cuando hablamos de la etiqueta head de un documento HTML, muchas veces se suele decir cabeceera HTML. Sin embargo, esta cabecera del documento HTML no es una parte visual de la página web, sino una parte de nuestro código HTML donde se incluyen ciertas etiquetas de metadatos, es decir, unas etiquetas que establecen ciertos datos que no tienen que verse necesariamente de forma visual.

Algunos ejemplos de metadatos de un documento HTML podrían ser los siguientes:

• Título de la página web (aparece en la pestaña del navegador). Esta etiqueta es obligatoria.
• Descripción de la página (aparece en los resultados de los buscadores)
• Miniatura/preview de la página (aparece al poner el enlace redes sociales)
• Icono de la página (aparece en la pestaña del navegador)

También es el lugar indicado para incluir etiquetas que relacionen el documento actual con otros documentos externos (por ejemplo, para cargar estilos definidos en archivos .css o cargar funcionalidades definidos en archivos javascript .js)

La etiqueta body (cuerpo)

La otra parte principal de un documento HTML es la etiqueta body. Todos los elementos visuales de una página se encuentran en el interior de la etiqueta body, por lo que es una de las partes más importantes de una página web. Esta sección va inmediatamente después del cierre de la etiqueta /head.

En definitiva, la estructura de un documento HTML debe tener, como mínimo algo similar a lo siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Título del documento</title>
  <meta charset="utf8">
</head>
<body>
 ...
</body>
</html>

En muchos editores, disponen de una extensión llamada EMMET, basta con guardar el archivo con extensión .html y escribir el símbolo ! y pulsar TAB para que se nos autocomplete este fragmento de código base. Más adelante veremos más a detalle algunas de las etiquetas anteriores que aún no se han mencionado.

Validación de errores HTML

Cuando estás empezando con tu primer documento HTML y quieres comprobar si hay errores o existe algún error en el código HTML, vamos a ver las herramientas que nos pueden ayudar a validar cada documento HTML, a diferencia de los programadores que están acostumbrados a los lenguajes de programación, donde si tienes un error en el código, se debe corregir antes de continuar, ya que en caso contrario no podremos utilizar ese programa.

En los lenguajes de marcas como HTML, los navegadores son más permisivos, ya que en el caso de encontrar un error, intentan deducir lo que realmente se quería indicar y continuan con la carga del documento. De esta forma tenemos un método más flexible a errores, pero también es un arma de doble filo donde podemos experimentar problemas derivados.

Tipos de problemas

En nuestro documento con código HTML podemos tener varios tipos de problemas. Vamos a desglosarlos en una tabla de categorías:

Validar error de sintaxis HTML

Para asegurarnos que nuestro código está correctamente escrito, podemos utilizar un Validador HTML, que no es más que un sistema que analiza nuestro código y nos dice el número de errores que tenemos, junto a una breve descripción del mismo para facilitar su correción.

Este proceso de validación se puede realizar mediante la herramienta oficial HTML Validator de W3C, un validador de código HTML5, donde podemos validar nuestra página de tres forma diferentes:

• by URI: Indicando la URL de la página que se quiere validar.
• By File upload: Seleccionando el archivo .html a analizar y subiéndolo al validador.
• By Direct Input: Pegando directamente el código HTML que se quiere analizar en la casilla de texto.

Además, si nos fijamos en la parte superior de la herramienta oficial de W3C, veremos que hay 3 casillas disponibles para marcar, con las que podemos agregar nuevas características que se mostrarán tras la validación. Dicha características son las siguientes:

• Source: Nos muestra el código fuente, numerado por líneas. Útil para corregir problemas sobre la marcha o comprobar los errores en las líneas especificadas.
• Outline: Nos muestra una especie de árbol o esquema de la página.
• Image report: Genera un informe de las imágenes del sitio web, con una miniatura y sus características asociadas.

Otras vías de validación

Existen otros mecanismos de validación al margen de esta herramienta de W3C. Podemos encontrar formas alternativas para validar documentos HTML desde el editor Visual Studio Code, desde una terminal de texto o desde scripts de NodeJS:

Cabecera de un documento (HEAD)

Como sabemos la estructura de un documento HTML debía contener siempre dos etiquetas HTML principales: la cabecera de la página head y el cuerpo de la página o body. El primero de ellos, se encarga de contener etiquetas de metadatos ( información sobre el documento ) así como establecer relaciones con otros documentos. El segundo de ellos, se encarga de la parte visual que se mostrará al usuario en su navegador.

Existen varias etiquetas que se suelen utilizar en esta sección de cabecera (head) del documento:

Existen dos etiquetas que tradicionalmente solían incluirse en la cabecera de un documento HTML. Sin embargo, actualmemte también pueden utilizarse en el cuerpo de la página. Hablamos de las etiquetas style y script.

La etiqueta title

En el interior de la etiqueta head es aconsejable, como mínimo, indicar siempre las siguientes dos etiquetas:

<head>
  <title>Título del documento</title>
  <meta charset="utf-8">
<head>

La etiqueta title sirve para indicar un título para el documento actual. Es una etiqueta que debe aparecer de forma obligatoria en todo documento HTML, ya que siempre debería tener un título. El título puede servir para varias cosas:

• Determinará el título de la ventana o p pestaña del navegador
• Si la página se indexa en Google, es muy posible que use ese título para el resultado en el buscador.
• Es un título identificativo que pueden usarlo bots o sistemas automáticos que lean la página.

En este ejemplo, incluimos también la etiqueta meta indica que el navegador utilice la codificación UTF-8 para mostrar el texto. Es muy importante utilizar siempre de forma coherente una misma codificación en todos nuestros documentos, de esta forma evitaremos problemas con vocales acentuadas, o caracteres como ñ, ¿, ¡ u otros.

Para evitar ese tipo de problemas, se recomienda siempre realizar los siguientes pasos:

1. Utilizar siempre la etiqueta meta charset="utf-8" en la cabecera del documento.
2. Guardar el archivo HTML con codificación UTF-8 en las opciones del editor a utilizar.
3. Si aún tenemos problemas de codificación, revisar la configuración del servidor web.

La etiqueta base

La etiqueta base se puede utilizar en el documento HTML para establecer una ruta base de los enlaces relativos utilizados en nuestro documento HTML.

Para entender mejor como funciona la etiqueta base, veamos el siguiente ejemplo:

<head>
  <title>Documento HTML sin usar etiqueta base</title>
</head>
<body>
  <a href="index.html">Página de inicio</a>
  <a href=" productos">Página de productos</a>
</body>

En este caso, sucede lo siguiente:

• El primer enlace nos lleva a https://latienda.com/index.html
• El segundo enlace nos lleva a la página https://latienda.com/productos/

Veamos ahora un ejemplo donde utilizamos la etiqueta base:

<head>
  <title>Documento HTML usando la etiqueta base</title>
  <base href="https://latienda.com/productos/" target="_blank">
</head>
<body>
  <a href="index.html">Página de inicio</a>
  <a href="categorias">Página de categorías de productos</a>
</body>

Ahora, aunque nos encontremos en la página https://latienda.com/, hemos establecido la URL base en https://latienda.com/productos/ para los productos, por lo que el sucederá lo siguiente:

• El primer enlace nos lleva a https://latienda.com/productos/index.html
• El segundo enlace nos lleva a https://latienda.com/productos/categorias

La etiqueta link (relación)

La etiqueta link permite establecer relaciones con otros documentos. De esta forma, el navegador o cualquier sistema capaz de leer código HTML puede saber que un documento está relacionado con otro documento (independientemente del formato que sea) y así relacionarse entre ellos.

Veamos algunos ejemplos de código para establecer relaciones con otros recursos:

<head>
  <link rel="stylesheet" href="index.css">
  <link rel="icon" href="favicon.png">
</head>

Como se puede ver, el atributo rel generalmente establece el tipo de relación que estamos determinando. Por otro lado, mediante el atributo href establecemos la dirección hacia el documento o recurso externo.

Existen muchos tipos de relaciones, veamos algunos tipos:

Versiones alternativas

Con el valor alternate en el atributo rel de la etiqueta link podemos indicar que el documento actual tiene versiones alternativas en otros formatos o idiomas. El siguiente ejemplo indica que el documento HTML que estamos leyendo tiene una versión en PDF, y además, una versión HTML en inglés:

<head>
  <link rel="alternate" href="document.pdf" type="application/pdf" />
  <link rel="alternate" href="document-en.html" hreflang="en" />
</head>

Referencia de datos

El atributo rel también nos permite indicar el tipo de relación que tiene el documento referenciado. Por ejemplo, a continuación indicamos una referencia al autor del documento, a la zona de ayuda, la zona de búsqueda y la licencia que cubre el contenido de la página:

<head>
  <link rel="author" href="http://twitter.com/EniDev911" />
  <link rel="help" href="http://sitioweb.com/ayuda/" />
  <link rel="search" href="http://sitioweb.com/busqueda/" />
  <link rel="license" href="http://sitioweb.com/licencia/" />
</head>

Favicon (icono de pestañas)

Cuando tenemos varias pestañas en nuestro navegador, para una búsqueda más fácil e intuitiva entre pestañas, el navegador suele colocar unos iconos a la izquierda del título de las pestañas. Estos iconos son conocidos como favicons ( iconos de favoritos ) ya que fue invento de Internet Explorer para colocar icono cuando el usuario añadia una página a favoritos.

<head>
  <!-- HTML4 -->
  <link rel="shorcut icon" href="/favicon.ico" />
  <!-- HTML5 -->
  <link rel="icon" sizes="64x64" href="/favicon.png" />
  <!-- iPhone/iPad -->
  <link rel="apple-touch-icon" sizes="180x180" 
        href="/apple-touch-icon-180x180.png" />
</head>

El problema principal con los favicons, es que esta característica no está definida en la especificación, por lo que cada navegador y cada sistema operativo la implementa como quiere. Hay navegadores que sólo soportan favicon en formato PNG, otros que solo soportan resoluciones específicas, etc.

Para generar los favicons de una forma más cómoda, podemos utilizar la herramienta Real Favicon Generator, a la cúal le pasamos un logo de alta resolución y nos genera un paquete .zip con los archivos y el código necesario para las diferentes versiones y resoluciones de los iconos.

Posicionamiento (Google)

La etiqueta link también nos permite indicar algunos datos interesantes para el buscador y evitar ser marcado como contenido duplicado o indicarle al buscador exactamente las URLsque deben tener en cuenta Para ello, podemos utilizar los siguientes atributos y valores:

Estilo CSS de documento

Por último, otra de las funciones más utilizadas de la etiqueta link es la de establecer una relación con un archivo CSS para aplicar estilos a la página HTML actual ( y a todas las etiquetas establezcan una relación a ella ).

Para ello, no hay más que utilizar el valor stylesheet en el atributo rel de la siguiente forma:

<head>
  <link rel="stylesheet" href="index.css" type="text/css" />
</head>

Con esto, el documento HTML estará relacionado con el documento CSS index.css, y aplicará todos los estilos CSS que se encuentren en él. El atributo type es opcional y no se suele indicar, puesto que el tipo por defecto de las hojas de estilos ya es text/css.

Etiquetas HTML de metadatos

Quizás, la etiqueta con mayor números de posibilidades en la cabecera de un documento HTML es la etiqueta meta. En ella, ya través de los atributos name y content podemos indicar una gran cantidad de metadatos al documento. Veamos lo más conocidos:

La etiqueta meta name="description" sirve para indicar unas breves frases donde se explique el contenido de la página actual. Entre otras cosas, sirve para descripciones que salen bajo los enlaces de los resultados de búsqueda en Google, cuando la página es indexada. En general, suele ser un texto entre 50-160 carácteres

Por su parte, la etiqueta meta name="keywords" solicita una lista de palabras claves separadas por comas que tengan relación con el sitio web. Actualmente, Google no las considera (se abusaba de ellas para hacer spam), sin embargo, otros buscadores o sistemas sí que lo hacen.

Veamos ahora un ejemplo con dichas etiquetas aplicadas:

<head>
  <meta name="description" content="En esta página tratamos diferentes temas sobre desarrollo web">
  <meta name="keywords" content="html, lenguaje de marcado, código html, etiquetas">
  <meta name="generator" content="Sublime Text, Build 4143">
</head> 

Tema de color del navegador

En los navegadores que lo soporten, tenemos una etiqueta meta muy curiosa es la que proporciona la posibilidad de establecer un tema de color para personalizar los colores de la interfaz del navegador que estemos utilizando. Para ello, tenemos que utilizar el atributo name="theme-color" y asociarle un color en hexadecimal.

Al establecer este atributo en una etiqueta meta, el navegador coloreará la barra de direcciones con color hexadecimal indicado en el atributo content de nuestro fragmento de código:

<head>
  <meta name="theme-color" content="#212121" 
</head>

Sin embargo, actualmente el soporte para esta característica es muy irregular, y muchos navegadores aún no lo soportan. Por ejemplo, en Google chrome, sólo funciona en dispositivos móviles donde el sistema tenga el modo claro activado.

Metadatos SEO para Google

Algunas de las etiquetas meta son bien conocidas como etiquetas que pueden mejorar el SEO (posicionamiento) de una página en buscadores como Google. Al margen de etiquetas meta como description o title, que son principales en temas de posicionamiento, Google es capaz de leer otros metadatos que indicarán como realizar ciertas acciones:

Un ejemplo de etiquetas con los atributos mencionados:

<head>
  <meta name="google"
  

Enlaces

Una de las etiquetas más importantes de HTML que nos permiten crear hipervínculos es la etiqueta a. Los enlaces nos sirven para poder direccionar a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL que haga referencia un recurso alojado en internet.

Esta etiqueta debe tener, como mínimo, el atributo href, ya que es el atributo con el que se especifica la dirección URL al documento que se quiere enlazar. Aún así, la etiqueta a también tiene varios atributos opcionales, veamos un resumen de todos ellos:

El soporte del atributo download podría no funcionar en navegadores en versiones muy antiguas

Esquema de una URL

Al indicarse una URL, tenemos formas de escribirlas. Conviene conocer bien la estructura de una URL, para diferenciar cada una de sus partes. Este sería el esquema completo de un enlace:

Protocolo

Existen varios protocolos diferentes y es la parte inicial de la URL. Probablemente, el más utilizado sea http://, aunque https:// también es frecuentemente muy utilizado, ya que se utiliza para cifrar información y que la transmisión sea más segura. Algunos protocolos de ejemplo:

Un detalle importante sobre la última opción de la tabla anterior. Al indicar // al inicio de un enlace, le decimos al navegador que establezca http:// o https:// dependiendo de como se cargará el documento actual. Si el documento actual se cargó como http:// remplazará // por http://, pero si el documento actual se cargó como https:// remplazará // por https://. Esto nos permite más flexibilidad a la hora de cargar documentos o recursos.

Dominio

La siguiente parte de la URL es el dominio del sitio web al que queremos enlazar. El dominio generalmente se compone de un subdominio ( opcional ), el nombre de dominio y el dominio de nivel superior o TLD ( top-level domain ). Por ejemplo, las famosas www no son más que un subdominio utilizado tradicionalmente para páginas webs. Por otra parte, hay muchisimos TLD para sitios web:

Partes de la URL

• Rutas: La parte de la ruta de una página web es equivalente a las carpetas o directorios donde almacenamos nuestros archivos. En el caso que una dirección termine en esta parte y no indique nada más, generalmete, el servidor que aloja la página web dirige al usuario a una página llamada index.html o index.htm por defecto. Esto es configurable en la parte del servidor, y depende totalmente de la configuración del servidor web utilizado.

• Página o documento: La última parte de la URL suele ser el documento HTML. En algunos casos, la extensión .html es abreviada como .htm. Dependiendo del servidor web y los componentes instalados, es posible que utilicen otro tipo de documentos con lenguajes de programación del lado del servidor, como podría ser por ejemplo principal.php. Si se trata de otro documento, como un archivo PDF o un video, el navegador intentará abrirlo directamente, y si no puede, lo descargará para que el usuario lo pueda abrir con alguna aplicación predeterminada del sistema.

• Query strings: Una parte no mencionada anteriormente son las cadenas de consulta del usuario, más frecuentemente utilizadas en lenguajes como javascript o lenguajes de programación del lado del servidor. Básicamente, son variables que contienen información y se envían en la URL, como por ejemplo, en la búsqueda de Google:

• Ancla: Por último tenemos el ancla, que no es más que un fragmento de texto precedido por un carácter #. Al encontrarse con esto, el navegador busca una etiqueta HTML que tenga un atributo id con ese texto, y posiciona al usuario en esa parte de la página. Se utiliza para acceder directamente o permalinks o secciones concretas de una página. Obviamente, esta parte es opcional.

Estado de un enlace

Por defecto, los enlaces tienen 3 estados diferentes:

• Enlaces sin visitas: Un enlace que no ha sido visitado aún ( pseudoclase:link en CSS ) es representado por los navegadores como un enlace de color azul y subrayado. Se suele aconsejar no realizar cambios bruscos en los estilos de los enlaces, ya que los usuarios que no están acostumbrados al sitio web no reconocerán instantáneamente un enlace si no es de color azul y/o está subrayado.

• Enlaces visitados: Un enlace que ha sido visitado previamente ( pseudoclase:visited en CSS ) es representado por los navegadores como un enlace de color lila y subrayado.

• Enlaces activos: Un enlace está en estado activo ( pseudoclase:active en CSS ) cuando el usuario está pulsando sobre el enlace con el ratón y a la misma vez no ha dejado de pulsar en él. Se suele utilizar para destacar el clic visualmente.

Rutas relativas o absolutas

A la hora indicar una URL, generalmente se puede hacer de varias formas:

Etiquetas HTML de sección

Antes de la llegada de HTML5, al momento de crear la estructura de una página, normalmente se utilizaban las etiquetas div para agrupar secciones de la página. Luego se le iban añadiendo atributos como id o clases dependiendo de la organización de los grupos y su representación dentro de la página. Una estructura como la que menciono podría ser la siguiente:

<div>
  <h1>Título del artículo</h1>
  <p class="intro">Breve introducción.</p>
  <p class="contenido">Aquí va todo el contenido del artículo.</p>
  <p class="pie">Escrito por John Doe.</p>
</div>

Vemos que en la estructura tenemos una agrupación que contiene todos los elementos de un artículo, donde el primer elemento es un encabezado <h1>, luego un párrafo. En HTML5 se introducen una serie de etiquetas de agrupación que funcionan exactamente igual que una etiqueta <div>, pero que además tiene un significado semántico porque indican el contenido que agruparán.

Recreemos el ejemplo anterior, utilizando etiquetas semánticas:

<article>
  <header>
    <h1>Título del artículo</h1>
    <p class="intro">Breve introducción.</p>
  </header>
  <p class="contenido">Aquí va todo el contenido del artículo.</p>
  <footer>
    <p class="pie">Escrito por John Doe.</p>
  </header>
</div>

De esta forma, el documento HTML podrá ser conocido por los navegadores, robot buscadores o aplicación y cualquier sistema informático que sea capaz de leer el documento HTML e identificar dicha sección.

Etiquetas semánticas

Veamos las etiquetas semánticas que se introducen en HTML5 ( los encabezados ya existían )

Podemos utilizar las etiquetas article pueden contener otras etiquetas article, como por ejemplo comentarios dentro de un artículos:

<article class="post">
  <p>Esto sería el texto del artículo.</p>
  <article class="comentario">
    <p>Estos sería el texto del comentario</p>
  </article>
</article>

Tablas

Las tablas están incluidas en HTML desde sus primeras versiones y son una forma común de mostrar datos claramente. Además, si las construimos de forma semántica y correctamente, es muy sencillo darle estilos desde CSS y cambiar su diseño con algunas propiedades, puesto que mediante las etiquetas que la componen se puede hacer referencia a cada parte de la misma.

Una tabla puede ser sencilla o compleja, dependiendo de nuestro objetivo y la cantidad de etiquetas o atributos a utilizar. Así pues, veamos primero las etiquetas básicas para crear una tabla de la forma más sencilla posible:

Crear tablas con HTML es algo más largo en cuanto al uso de etiquetas pero sumamente sencillo, simplemente debemos indicar dentro de la etiqueta table cuales son los elementos de la cabecera usando las etiqueta thead, y todo lo que es el contenido de las respectivas filas con la etiqueta tbody dentro tbody indicamos cada fila con la etiqueta tr y separamos los campos con la etiqueta td. Ejemplo:

Párrafos ⚓

Para crear párrafos usa la etiqueta <p> se puede usar junto a la etiqueta <br> para hacer saltos de líneas dentro del contenido.

En el siguiente ejemplo, tenemos la etiqueta <p>, que se utiliza para la ( agrupación), mientras que la etiqueta <strong> es para darle un significado diferente a ese fragmento de texto:

<p>Hola, esto es un pequeño <strong>ejemplo</strong></p>

En primer lugar, existe una serie de etiquetas HTML simples para seleccionar un fragmento de texto y dotarlo de un significado especial. A continuación podemos observar algunas de ellas:

La etiqueta <span> es una versión en línea de la etiqueta <div>, ya que su misión es agrupar contenido de texto, mientras que la misión de un <div> es agrupar otras etiquetas HTML que a su vez pueden agrupar otras y otras etiquetas HTML.

Modificación de significado

Con las siguientes etiquetas HTML también podemos modificar el significado de la información que contienen:

Por su parte, la etiqueta <q> nos permite hacer referencia a una cita o frase extraída de otro contexto. En esta etiqueta disponemos de un atributo opcional cite, mediante el cuál podemos hacer referencia a una URL.

También tenemos las etiquetas <dnf> y <abbr> que nos permiten indicar definiciones y abreviaturas, y que ambas permiten el uso del atributo title para indicar el significado de dicho término o abreviatura. Un ejemplo de ambas etiquetas combinadas:

<p>El término <dnf><abbr title="Kilómetro">Km</abbr></dnf> es una unidad de longitud.

Los saltos de línea son etiquetas especiales de HTML para comenzar en una línea nueva. Al contrario que todas las etiquetas que hemos visto, las etiquetas <br> son etiquetas que no necesitan una etiqueta de cierre, por lo que sólo se escribe la etiqueta de apertura.

Líneas separadoras

Para crear líneas horizontales que se pueden utilizar para separar secciones de diferentes temas, o representar un cambio de tema entre párrafos de un documento HTML es sencillamente con la etiqueta <hr> esta etiqueta al día de hoy tiene más un significado semántico que representativo, por lo que dibujar una línea horizontal se debería usar el CSS apropiado.

Listas ⚓

HTML permite crear dos tipos de listas, ordenadas con la etiqueta <ul> y desordenadas con la etiqueta <ol>, es decir numeradas o listas de puntos. Para cada item de la lista se define con la etiqueta <li>, los tipos y como se crean, nada mejor que verlo con ejemplos en la siguiente tabla.

See the Pen listas by EniDev911 (@EniDev911) on CodePen.

Imágenes

Para incluir imágenes en el contenido de una página utilizaremos la etiqueta img, que es una etiqueta muy sencilla, que dispone de varios atributos para modificar como se verá la imagen ( los atributos src y alt son obligatorios ):

Formatos de imágenes

En el ámbito informático existen múltiples formatos de imágenes, pero no todos son aptos para utilizar en el web. Vamos a ver algunos de los formatos y ver cuáles son los más apropiados:

Nuevas etiquetas de imágenes

HTML5.1 incorpora un nuevo sistema para utilizar imágenes en nuestros documentos HTML de forma mucho más flexible que la tradicional etiqueta img que nos permiirá mostrar imágenes dependiendo de nuestras necesidades. Para ello, podemos utilizar las siguientes etiquetas:

Como podemos ver, lo interesante está en la etiqueta source, que tiene una serie de atributos disponibles para utilizar. Vamos a ver para que sirve cada uno:

Imágenes alternativas

Una de las primeras ventajas que nos ofrece estas etiquetas es la de utilizar formatos diferentes, dependiendo del soporte del navegador. Podríamos hacer algo como lo siguiente:

<picture>
  <source srcset="logo.webp" />
  <source srcset="logo.jxr" />
  <!-- Fallback -->
  <img src="logo.jpg" alt="Descripción de la imagen" />
</picture>

En este caso, indicamos que el navegador utilice la imagen con el formato WebP.

Contenido externo

Cuando tenemos una página web y queremos colocar contenido en ella, lo conveniente es utilizar formatos libres para garantizar que sean accesibles desde cualquier tipo de dispositivos.

¿Pero que ocurre si lo que quiero colocar no son formatos de video, de audio o de imagen? Por ejemplo, servicios como Youtube, Vimeo, SoundCloud, Google Maps, SlideShare u otros similares. Se trata de servicios que ofrecen contenido externo para incrustar en nuestra página, pero no nos proporcionan directamente imágenes, video o audio en formatos que reconozca el navegador, sino que nos ofrecen un enlace o contenidos que requiren un plugin externo instalado en el navegador. En esas situaciones, lo más probable es que necesitemos una de las siguientes etiquetas.

Etiquetas de contenido externo

Las siguientes etiquetas sirven para incrustar contenido externo:

Marcos en línea (iframes)

Antiguamente, en versiones anteriores de HTML, se utilizaban una etoquetas llamadas frame, mediante las cuales se permitía dividir la pantalla en varias secciones. Actualmente, ese modo de desarrollo ya no se utiliza ya que acarreaba múltiples problemas de accesibilidad, posicionamiento, etc.

Sin embargo, de toda la familia de etiquetas de frames, han sobrevivido iframe, que siguen siendo útiles para incrustar contenido externo. Veamos un ejemplo extraído de servicios como YouTube o SoundCloud.

Reproducir un video de YouTube dentro de una página HTML:

<!-- Reproducción de un video de Youtube -->
<iframe
  width="500"
  height="400"
  src="https://www.youtube.com/embed/n2MGNWrfkTk">
</iframe>
<!-- Reproducción automática y Silenciado -->
<iframe 
  width="500" 
  height="400"
  src="https://www.youtube.com/embed/n2MGNWrfkTk?autoplay=1&mute=1">
</iframe>
<!-- Lista de reproducción en bucle -->
<iframe 
  width="500" 
  height="400"
  src="https://www.youtube.com/embed/n2MGNWrfkTk?playlist=LG3T2rzlR9Q,SLBKRZszn4k&loop=1">
</iframe>

Resultado de un ejemplo con reproducción automática y silenciado

Reproducir contenido de audio de SoundCloud dentro de una página HTML:

<a href="http://www.bing.com/" target="marco">Abrir buscador bing</a>
<iframe 
  name="marco"
  width="100%"
  height="450"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/38289724&visual=true">
</iframe>

Resultado de un ejemplo de SoundCloud y un hipervínculo que se abre en el mismo iframe:

Esta etiqueta permite incrustar contenido externo anidado en nuestro propio documento. Es decir, podemos crear un recuadro que en su interior va a tener otra dirección URL de otra página web, documento o recurso que queramos cargar en él. Generalmente, es la etiqueta más utilizada para todo tipo de contenido externo.

También podemos utilizar el atributo name para darle un nombre al marco y cargar direcciones URL diferentes a través de una etiqueta a, haciendo referencia al marco a través del atributo target. Por su parte, el atributo srcdoc nos permite indicar directamente el código fuente del iframe en su valor:

<iframe
  src="http://pagina.com/"
  srcdoc="<p>¡Hola! ¡Soy el <strong>texto del iframe</strong>!</p>">
</iframe> 

Como se puede ver, se puede indicar el atributo srcdoc y el atributo src a la misma vez, dando prioridad el atributo srcdoc y manteniendo el atributo src como fallback, para navegadores que no soportan srcdoc.

Contenido incrustado

La etiqueta embed se ideó antiguamente como una etiqueta no estándar para incluir contenido que requería el uso de un plugin externo para funcionar, ya que se trataba de tecnologías propietarias y los navegadores no las soportan. La etiqueta fue retirada en HTML4, pero en HTML5 fue incluída de nuevo. Se puede utilizar, por ejemplo, para incrustar contenido flash en una página web:

<embed src="game.swf" width="400" height="350" />

Tradicionalmente, también se empezó a utilizar la etiqueta object para incrustar contenido flash, puediendo especificar parámetros en su interior. El siguiente fragmento de código es equivalente al anterior:

<object data="game.swf">
  <param name="quality" value="high" />
</object>

Así la etiqueta object se ofrecía como una alternativa más apropiada para cargar todo tipo de contenido. Y no sólo eso, sino que ofrece la posibilidad de especificar el tipo de formato del que se trata, así como añadir múltiples parámetros o la opción de añadir en su interior etiquetas HTML o texto que funcionen a modo de fallback ( plan B ), o lo que es lo mismo, en el caso de que el navegador no pueda cargar ese formato, cargará la imagen, video, texto o la etiqueta que se incluya en su interior. Algunos ejemplos:

<object data="clock.html"></object>

Formularios

Uno de los aspectos más importante en un documento HTML es el uso de formularios, por lo que al día de hoy HTML con HTML5 a evolucionado bastante, por lo que han añadido etiquetas nuevas para crear nuevos controles en los formularios y nuevos atributos para validar información de algún tipo en específico. Vamos ir viendo los diferentes controles en la tabla a continuación.

Creación de un formulario

Los objetivos que debemos contemplar al crear un formulario en HTML5 deben ser los siguiente:

• Que sea lo más simple posible para el usuario cuando se encuentre en el proceso de inserción de datos.
• Intentar que los datos introducidos estén en un formato predecible y esperado.
• Comunicar claramente si ocurren errores al introducir datos.

Contenedor de formulario

Para comenzar con la creación de un formulario, el primer paso es indicar una etiqueta contenedora <form>, que incluirá toda la información que se quiere recoger en ese formulario:

<form>
<!-- Campos a a utilizar, por ejemplo: -->
<!-- * Campos de texto -->
<!-- * Campos de selección o selección múltiple -->
<!-- * Casillas de verificación -->
</form> 

De esta forma, se puede incluso crear varias etiquetas <form> por página, pudiendo así crear varios formularios diferentes, como por ejemplo, uno para realizar una búsqueda en la página, otro para dejar un comentario y otro para enviar un email.

La etiqueta <form> dispone de varios atributos para utilizar:

Así un formulario base de ejemplo (aún vacío, sin campos de entrada de datos, sólo con la etiqueta contenedora) podría ser el que vemos a continuación:

<form name="formulario" method="post" action="/send.php">...</form> 

Aquí se definen 3 atributos en base a la etiqueta form:

• En action se indica la dirección donde se enviarán los datos cuando el usuario haga clic en el botón enviar. En caso de omitirse esta información, se enviarían los datos a la propia página actual, volviéndola a cargar.
• En method se define el tipo de método HTTP a utilizar. Utilizaremos el método GET cuando nos interese que los datos se envíen en la propia URL. En caso contrario, POST.
• En name el nombre del formulario para cuando necesitemos hacer referencia a él ( generalmente desde javascript o desde un backend ).

Tipos de datos

Para que un usuario pueda introducir información en un formulario, requiere que se le indiquen una serie de campos que le permitan introducir la información de la forma más cómoda y rápida posible. Para ello, debemos saber a priori que tipo de dato le vamos a pedir a un usuario ( texto, numérico, fecha, etc... ), y así saber que tipo de campo de entrada de datos es más conveniente utilizar. Veamos algunos tipos de controles para diferentes tipos de datos:

En HTML5, de forma nativa, el navegador proporciona estos campos de entrada en los que el usuario puede introducir información específica. Cada uno de ellos tiene sus propias particularidades y características, además de que hay que tener cuidado con algunos controles de formulario, ya que pueden no estar soportados por completo en todos los navegadores.

Campos de entrada

Una de las etiquetas que más utilizaremos para obtener información a modo de campo de entrada de datos en un formulario es la etiqueta input. Su funcionalidad más utilizada es la de servir como campo de texto:

<form name="formulario" method="post" action="/send.php">
   <input type="text" name="nombre"/>
   <input type="submit" value="Enviar"/>
</form>

En este ejemplo tenemos un pequeño formulario donde se le pide al usuario su nombre con la etiqueta input type="text" y, posteriormente, se coloca un botón para enviar el formulario con la etiqueta input type="submit". Aunque vemos que se trata de la misma etiqueta input, dependiendo del valor indicado en el atributo type realizará una tarea u otra.

La etiqueta "input"

La etiqueta input tiene una gran cantidad de atributos (algunos dependiendo del valor del type, que mostraremos más adelante). Estos son los atributos que podemos utilizar de forma general para prácticamente cualquier campo de entrada de datos con la etiqueta input.

El atributo type nos permitirá indicar que tipo de campo de dato mostrará en el navegador (text, number, date..., los veremos luego). Mediante el atributo name le daremos un nombre al campo de texto, así cuando enviemos la información, podremos manejarla desde javascript o desde el back-end haciendo referencia a dicho nombre.

La etiqueta HTML <input> puede tomar diferentes valores en su atrobuto type para permitir al usuario introducir información, además de otra etiqueta denominada <textarea> para introducir cantidades más grande de texto.

Texto alfanúmerico corto

En primer lugar, si lo que queremos es guardar información de texto libremente, la opción más habitual es optar por utilizar el campo de entrada de datos input type="text". Este es el atributo que se utiliza en las etiquetas input por defecto si no indicamos ningún atributo type. Es un campo de texto ideal para fragmentos cortos de información: nombres, apellidos, etc...

<form name="formulario" method="post" action=

Videos

En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De hecho, si arrastramos un video a la ventana del navegador o con el clic derecho seleccionamos la opción abrir con y buscamos el navegador, veremos que comienza a reproducirse en él. Para poder insertar videos en nuestras páginas HTML tenemos que utilizar la etiqueta <video>, que junto a la etiqueta <source> podremos utilizar estas capacidades multimedia de HTML5.

La etiqueta <source> especifica recursos de medios múltiples para las etiquetas <picture>, <audio>, <video>.

OJO : Si lo que queremos es insertar videos desde Youtube, Vimeo u otro servicio alternativo, debemos utilizar la etiqueta HTML iframe en lugar de la etiqueta <video>.

Video (modo básico)

La etiqueta <video> tiene varios atributos a nuestra disposición:

Un primer ejemplo muy básico para colocar un video en nuestra página web:

<video src="video.mp4" width="640" height="460"></video>

Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x460, pero se verá como una imagen, ya que no muestra los controles del video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos controls y autoplay.

Otro ejemplos básicos para colocar videos en nuestra página:

<-- Ejemplo 1 -->
<video src="video.webm" poster="presentacion.jpg" controls></video>
<-- Ejemplo 2 -->
<video src="video.mp4" autoplay muted loop></video>

Obtendriamos los siguientes resultados:

En este caso cargamos un video, pero no se mostrará porque se ha indicado que se utilice una imagen de presentación que se mostrará hasta que el usuario pulse el botón de reproducir de los controles. En el segundo ejemplo, tenemos un video que se reproduce automáticamente al cargar la página, en silencio y en bucle, iniciándose una y otra vez.

Desde 2017, Chrome, Firefox y otros navegadores establecieron un cambio de políticas con el atributo de reproducción automática autoplay, por lo que no funcionará salvo que el usuario haya interactuado antes en la página.

Formatos de video

Antes de continuar con el modo avanzado de etiquetas de video, debemos conocer una serie de conceptos básicos y los diferentes formatos de video que existen actualmente. En primer lugar, debemos saber que un archivo de video tiene dos partes principales: el formato contenedor, que es el formato del video en sí, mientras que en su interior puede tener múltiples componentes codificados con diferentes codecs.

De hecho, un video básico suele tener, como mínimo, un componente de video y otro de audio, pero puede tener muchos más (subtítulos, imágenes, etc...). Estos detalles son muy importantes, ya que dependiendo del formato y/o codec de un video, puede que sea factible utilizarlo para la web o no, así que hay que conocer un poco sobre estos conceptos.

A continuación tenemos un listado de los formatos/codecs más conocidos y utilizados:

Video (modo avanzado)

Sin embargo, aún con lo que hemos visto todavía falta ver todas las posibilidades multimedia que tenemos con HTML5. La etiqueta <video> también puede actuar como etiqueta contenedora e incluir varias etiquetas HTML para dotar de mayor compatibilidad, o capacidades adicionales.

Videos alternativos

Si utilizamos la etiqueta <video> como etiqueta contenedora, podemos incluir etiquetas <source> en su interior para proporcionar formatos alternativos y tener mayor compatibilidad con otros navegadores y navegadores antiguos que no soporten HTML5:

<-- Ejemplo 1 -->
<video width="600" height="400">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Su navegador no soporta contenido multimedia.
</video>

Emojis⚓

En la siguiente tabla veremos los dibujos (emoji) incluidos en unicode, junto con sus respectivas entidades y juego de caracteres, con el código unicode hexadecimal para representar los emojis dentro de un documento HTML. Ten en cuenta que las entidades pueden variar su visualización entre diferentes aplicaciones como los navegadores.

Listado:

• Emoticones
• Manos
• Personas
• Flechas
• Formas
• Símbolos
• Multimedia
• Instrumentos
• Comidas
• Animales
• Objetos

Emoticones

Manos

Personas

Flechas

Figuras y formas

Símbolos

Multimedia

Instrumentos 🎸

Comida y bebidas 🍵

Animales 🦖

Ropa y accesorios

Transportes y Mapas

Objetos

Extras