Introducción a HTML

Descubra HTML a partir de su historia y los bloques de construcción básicos

HTML es un estándar definido por elWHATWG, acrónimo de Web Hypertext Application Technology Working Group, una organización formada por personas que trabajan en el navegador web más popular. Esto significa que está básicamente controlado por Google, Mozilla, Apple y Microsoft.

En el pasado elW3C(World Wide Web Consortium) fue el organismo encargado de crear el estándar HTML.

El control pasó informalmente del W3C al WHATWG cuando quedó claro que el impulso del W3C hacia XHTML no era una buena idea.

Si nunca ha oído hablar de XHTML, aquí tiene una breve historia. A principios del 2000, todos creíamos que el futuro de la Web era XML (en serio). Entonces HTML pasó de ser un lenguaje de creación basado en SGML a un lenguaje de marcado XML.

Fue un gran cambio. Teníamos que conocer y respetar más reglas. Reglas más estrictas.

Finalmente, los proveedores de navegadores se dieron cuenta de que este no era el camino correcto para la Web y lo rechazaron, creando lo que ahora se conoce como HTML5.

W3C realmente no estuvo de acuerdo en dejar el control de HTML y durante años obtuvimos 2 estándares en competencia, cada uno con el objetivo de ser el oficial. Finalmente, el 28 de mayo de 2019, el W3C hizo oficial que la versión HTML "verdadera" era la publicada por WHATWG.

Mencioné HTML5. Déjame explicarte esta pequeña historia. Lo sé, es un poco confuso hasta ahora, como sucede con muchas cosas en la vida cuando hay muchos actores involucrados, también es fascinante.

Teníamos la versión 1 de HTML en 1993. [Aquí está el RFC original].

HTML 2 siguió en 1995.

TenemosHTML 3en enero de 1997, yHTML 4 in December 1997.

Tiempos ocupados!

Pasaron más de 20 años, teníamos todo esto de XHTML y, finalmente, ahora estamos en esta "cosa" de HTML5, que en realidad no essolo HTMLnunca más.

HTML5 es un término que ahora define un conjunto completo de tecnologías, que incluye HTML pero agrega muchas API y estándares como WebGL, SVG y más.

La clave que hay que entender aquí es la siguiente: ahora no existe (ya no) una versión HTML. Es un estándar de vida. Al igual que CSS, lo llamamos 3, pero en realidad es un montón de módulos independientes desarrollados por separado. Al igual que JavaScript, tenemos una nueva edición cada año, pero no importa mucho más que las características individuales que implementa el motor.

Sí, lo llamamos HTML5, pero HTML4 es de 1997. Es mucho tiempo para cualquier cosa, imagínense para la web.

Aquí es donde "vive" el estándar: [https://html.spec.whatwg.org/multipage].

Los conceptos básicos de HTML

HTML es el lenguaje de marcado que usamos para estructurar el contenido que consumimos en la Web.

El HTML se sirve al navegador de diferentes formas.

Puede ser generado por una aplicación del lado del servidor que lo construya dependiendo de la solicitud o los datos de la sesión, por ejemplo, una aplicación Rails o Laravel o Django.

O puede ser generado por una aplicación del lado del cliente de JavaScript que genera HTML sobre la marcha.

O, en el caso más simple, puede almacenarse en un archivo y ser servido al navegador por un servidor web.

Vamos a sumergirnos en este caso, aunque en la práctica es probablemente la forma menos popular de generar HTML, sigue siendo esencial conocer los bloques de construcción básicos.

Por convención, un archivo HTML se guarda con un.htmlo.htmextensión.

Dentro de este archivo, organizamos el contenido usandoetiquetas.

Las etiquetas envuelven el contenido y cada etiqueta le da un significado especial al texto que envuelve.

Hagamos algunos ejemplos.

Este fragmento de HTML crea un párrafo usando elpetiqueta:

<p>A paragraph of text</p>

Este fragmento de HTML crea una lista de elementos utilizando lauletiqueta, lo que significalista desordenada, y ellietiquetas, lo que significaelemento de lista:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Cuando el navegador sirve una página HTML, las etiquetas se interpretan y el navegador representa los elementos de acuerdo con las reglas que definen su apariencia visual.

Algunas de esas reglas están integradas. Como cómo se representa una lista, por ejemplo. O cómo se representa un enlace en azul, subrayado.

Algunas otras reglas las establece usted con CSS.

HTML no es una presentación. No se preocupa por cómo las cosasMira. En cambio, se preocupa por las cosassignificar.

Depende del navegador determinar cómo se ven las cosas, con las directivas definidas por quién crea la página, con el lenguaje CSS.

Ahora, esos 2 ejemplos que hice son fragmentos de HTML tomados fuera del contexto de una página.

Una estructura de página HTML

Hagamos un ejemplo de una página HTML adecuada.

Todo comienza con la Declaración de tipo de documento (también conocida comodoctype), una forma de decirle al navegador que se trata de una página HTML y qué versión de HTML estamos usando.

El HTML moderno usa este tipo de documento:

<!DOCTYPE html>

Entonces tenemos elhtmlelemento, que tiene una etiqueta de apertura y cierre:

<!DOCTYPE html>
<html>
...
</html>

Todas las etiquetas tienen una etiqueta de apertura y cierre. Excepto algunas etiquetas de cierre automático que no necesitan cierre porque no contienen nadaen ellos.

La etiqueta de cierre es la misma que la de apertura, pero con un/.

loshtmlLa etiqueta de inicio se utiliza al principio del documento, justo después de la declaración del tipo de documento.

loshtmlLa etiqueta final es lo último que está presente en un documento HTML.

Dentro dehtmlelemento tenemos 2 elementos:headybody:

<!DOCTYPE html>
<html>
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>

Dentroheadtendremos etiquetas que son esenciales para la creación de una página web, como el título, los metadatos y CSS y JavaScript internos o externos. En su mayoría, cosas que no aparecen directamente en la página, pero solo ayudan al navegador (o bots como el bot de búsqueda de Google) a mostrarlo correctamente.

Dentrobodytendremos el contenido de la página. loscosas visibles.

Etiquetas vs elementos

Mencioné etiquetas y elementos. ¿Cual es la diferencia?

Los elementos tienen una etiqueta de inicio y una etiqueta de cierre.

En este caso, usamos elpetiquetas de inicio y cierre para crear unapelemento.

<p>A paragraph of text</p>

Entonces, un elemento constituye el todopaquete:

  • etiqueta de inicio
  • contenido de texto (y posiblemente otros elementos)
  • etiqueta de cierre

Si un elemento no tiene etiqueta de cierre, solo se escribe con la etiqueta de inicio y no puede contener ningún contenido de texto.

Dicho esto, podría usar la etiqueta o el término de elemento en el libro que signifique lo mismo, excepto que menciono explícitamente la etiqueta inicial o la etiqueta final.

Atributos

La etiqueta de inicio de un elemento puede tener fragmentos especiales de información que podemos adjuntar, llamadosatributos.

Los atributos tienen elkey="value"sintaxis:

<p class="a-class">A paragraph of text</p>

También puede usar comillas simples, pero usar comillas dobles en HTML es una buena convención.

Podemos tener varios de ellos:

<p class="a-class" id="an-id">A paragraph of text</p>

y algunos atributos son booleanos, lo que significa que solo necesita la clave:

<script defer src="file.js"></script>

losclassyidLos atributos son dos de los más comunes que encontrará utilizados.

Tienen un significado especial y son útiles tanto en CSS como en JavaScript.

La diferencia entre los dos es que unides único en el contexto de una página web, no se puede duplicar.

Las clases, por otro lado, pueden aparecer varias veces en varios elementos.

Además, unides solo un valor.classpuede contener varios valores, separados por un espacio:

<p class="a-class another-class">A paragraph of text</p>

Es común usar el tablero-para separar palabras en un valor de clase, pero es solo una convención.

Esos son solo 2 de los posibles atributos que puede tener. Algunos atributos solo se utilizan para una etiqueta. Son altamente especializados.

Se pueden utilizar otros atributos de forma más general. Acabas de veridyclass, pero también tenemos otros, comostyleque se puede utilizar para insertar reglas CSS en línea en un elemento.

No distingue entre mayúsculas y minúsculas

HTML no distingue entre mayúsculas y minúsculas. Las etiquetas se pueden escribir en mayúsculas o en minúsculas. En los primeros días, las gorras eran la norma. Hoy las minúsculas son la norma. Es una convención.

Suele escribir así:

<p>A paragraph of text</p>

así no:

<P>A paragraph of text</P>

Espacio en blanco

Bastante importante. En HTML, incluso si agrega varios espacios en blanco en una línea, el motor CSS del navegador la contrae.

Por ejemplo, la interpretación de este párrafo

<p>A paragraph of text</p>

es lo mismo que esto:

<p>        A paragraph of text</p>

y lo mismo que esto:

<p>A paragraph

of
text          </p>

Utilizando lawhite-spacePropiedad CSSpuedes cambiar cómo se comportan las cosas. Puede encontrar más información sobre cómo CSS procesa los espacios en blanco en laEspecificación CSS

Yo diría que use la sintaxis que hace que las cosas estén más organizadas visualmente y sean más fáciles de leer, pero puede usar la sintaxis que desee.

Normalmente hago ruta para

<p>A paragraph of text</p>

o

<p>
	A paragraph of text
</p>

Las etiquetas anidadas deben tener una sangría de 2 o 4 caracteres, según su preferencia:

<body>
	<p>
		A paragraph of text
	</p>
	<ul>
		<li>A list item</li>
	</ul>
</body>

Nota: esto significa que si desea agregar un espacio adicional, puede enojarlo bastante. Sugiero usar CSS para hacer más espacio cuando sea necesario.

Nota: en casos especiales, puede utilizar el&nbsp;Entidad HTML (un acrónimo que significaespacio irrompible) - más sobre entidades HTML más adelante. Creo que no se debe abusar de esto. Siempre se prefiere CSS para alterar la presentación visual.

El encabezado del documento

losheadLa etiqueta contiene etiquetas especiales que definen las propiedades del documento.

Siempre está escrito antes delbodyetiqueta, justo después de la aperturahtmletiqueta:

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	...
</html>

Nunca usamos atributos en esta etiqueta. Y no escribimos contenido en él.

Es solo un contenedor para otras etiquetas. En su interior podemos tener una amplia variedad de etiquetas, dependiendo de lo que necesites hacer:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

lostitleetiqueta

lostitleLa etiqueta determina el título de la página. El título se muestra en el navegador y es especialmente importante ya que es uno de los factores clave para la optimización de motores de búsqueda.

losscriptetiqueta

Esta etiqueta se utiliza para agregar JavaScript a la página.

Puede incluirlo en línea, usando una etiqueta de apertura, el código JavaScript y luego la etiqueta de cierre:

<script>
..some JS
</script>

O puede cargar un archivo JavaScript externo usando elsrcatributo:

<script src="file.js"></script>

lostypeEl atributo por defecto está establecido entext/javascript, por lo que es completamente opcional.

Hay algo muy importante que saber sobre esta etiqueta.

A veces, esta etiqueta se utiliza en la parte inferior de la página. ¿Por qué? Por motivos de rendimiento.

La carga de scripts bloquea de forma predeterminada la representación de la página hasta que se analiza y carga el script.

Al hacerlo, el script se carga y ejecuta después de que toda la página ya esté analizada y cargada, lo que brinda una mejor experiencia al usuario que mantenerla en elheadetiqueta.

Mi opinión es que ahora esto es una mala práctica. Dejarscriptvivir en elheadetiqueta.

En JavaScript moderno tenemos una alternativa, más eficaz que mantener el script en la parte inferior de la página:deferatributo:

<script defer src="file.js"></script>

Este es el escenario que desencadena la ruta más rápida a una página cargada rápidamente y un JavaScript cargado rápidamente.

Nota laasyncatributo es similar, pero en mi opinión una peor opción quedefer. Describo por qué en detalles en la página.https://flaviocopes.com/javascript-async-defer/

losnoscriptetiqueta

Esta etiqueta se utiliza para detectar cuándo los scripts están deshabilitados en el navegador.

Nota: los usuarios pueden optar por desactivar los scripts JavaScript en la configuración del navegador. O es posible que el navegador no los admita de forma predeterminada.

Se usa de manera diferente si se coloca en el encabezado del documento o en el cuerpo del documento.

Ahora estamos hablando del encabezado del documento, así que primero introduzcamos este uso.

En este caso, elnoscriptLa etiqueta solo puede contener otras etiquetas:

  • linketiquetas
  • styleetiquetas
  • metaetiquetas

para alterar los recursos servidos por la página, o elmetainformación, si los scripts están deshabilitados.

En este ejemplo configuré un elemento con elno-script-alertclase para mostrar si los scripts están deshabilitados, como estabadisplay: nonepor defecto:

<!DOCTYPE html>
<html>
	<head>
		...
		<noscript>
			<style>
				.no-script-alert {
					display: block;
				}
			</style>
		</noscript>

	...
&lt;/<span style="color:#f92672">head</span>&gt;
...

</html>

Resolvamos el otro caso: si se coloca en el cuerpo, puede contener contenido, como párrafos y otras etiquetas, que se representan en la interfaz de usuario.

loslinkLa etiqueta se utiliza para establecer relaciones entre un documento y otros recursos.

Se utiliza principalmente para vincular un archivo CSS externo a cargar.

Este elemento no tiene etiqueta de cierre.

Uso:

<!DOCTYPE html>
<html>
	<head>
		...
		<link href="file.css" rel="stylesheet">
		...
	</head>
	...
</html>

losmediaEl atributo permite cargar diferentes hojas de estilo en función de las capacidades del dispositivo:

<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

Podemos vincularnos a diferentes recursos que las hojas de estilo.

Por ejemplo, podemos asociar un feed RSS usando

<link rel="alternate" type="application/rss+xml" href="/index.xml">

Podemos asociar un favicon usando:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel=“icon” type=“image/png” sizes=“32x32” href="/assets/favicon-32x32.png">


<link rel=“icon” type=“image/png” sizes=“16x16” href="/assets/favicon-16x16.png">

Esta etiquetaestabatambién se utiliza para contenido de varias páginas, para indicar la página anterior y siguiente utilizandorel="prev"yrel="next". Mostly for Google. In 2019 Google anunció que ya no usa esta etiquetaporque puede encontrar la estructura de página correcta sin él.

losstyleetiqueta

Esta etiqueta se puede utilizar para agregar estilos al documento, en lugar de cargar una hoja de estilo externa.

Uso:

<style>
.some-css {}
</style>

Como con ellinketiqueta, puede utilizar lamediaatributo para usar solo ese CSS en el medio especificado:

<style media="print">
.some-css {}
</style>

También puede agregar esta etiqueta en el cuerpo del documento. Hablando de esto, es interesante elscopedatributo para asignar solo ese CSS al subárbol del documento actual. En otras palabras, para evitar filtrar el CSS fuera del elemento principal.

losbaseetiqueta

Esta etiqueta se utiliza para establecer una URL base para todas las URL relativas contenidas en la página.

<!DOCTYPE html>
<html>
	<head>
		...
		<base href="https://flaviocopes.com/">
		...
	</head>
	...
</html>

losmetaetiqueta

Las metaetiquetas realizan una variedad de tareas y son muy, muy importantes.

Especialmente para SEO.

metalos elementos solo tienen la etiqueta de inicio.

El más básico es eldescriptionmetaetiqueta:

<meta name="description" content="A nice page">

Estapodríaser utilizado por Google para generar la descripción de la página en sus páginas de resultados, si encuentra que describe mejor la página que el contenido en la página (no me preguntes cómo).

loscharsetLa metaetiqueta se utiliza para establecer la codificación de caracteres de la página.utf-8en la mayoría de los casos:

<meta charset="utf-8">

losrobotsLa metaetiqueta indica a los robots de los motores de búsqueda si deben indexar una página o no:

<meta name="robots" content="noindex">

O si deben seguir enlaces o no:

<meta name="robots" content="nofollow">

También puede establecer nofollow en enlaces individuales. Así es como puedes configurarnofollowa nivel mundial.

Puedes combinarlos:

<meta name="robots" content="noindex, nofollow">

El comportamiento predeterminado esindex, follow.

Puede utilizar otras propiedades, incluidasnosnippet,noarchive,noimageindexy más.

También puede decirle a Google en lugar de segmentartodoslos motores de búsqueda:

<meta name="googlebot" content="noindex, nofollow">

y otros motores de búsqueda también pueden tener su propia metaetiqueta.

Hablando de eso, podemos decirle a Google que desactive algunas funciones. Esto evita la función de traducción en los resultados del motor de búsqueda:

<meta name="google" content="notranslate">

losviewportLa metaetiqueta se utiliza para decirle al navegador que establezca el ancho de la página en función del ancho del dispositivo.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ver más en esta etiqueta.

Otra metaetiqueta bastante popular es lahttp-equiv="refresh"uno. Esta línea le dice al navegador que espere 3 segundos, luego redirija a esa otra página:

<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/another-page">

El uso de 0 en lugar de 3 redirigirá lo antes posible.

Esta no es una referencia completa, existen otras metaetiquetas menos utilizadas.

Después de esta introducción del título del documento, podemos comenzar a sumergirnos en el cuerpo del documento.

El cuerpo del documento

Después de la etiqueta head de cierre, solo podemos tener una cosa en un documento HTML: elbodyelemento.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

Como elheadyhtmletiquetas, solo podemos tener unabodyetiqueta en una página.

Dentro debodyetiqueta tenemos todas las etiquetas que definen el contenido de la página.

Técnicamente, las etiquetas de inicio y finalización son opcionales. Pero considero una buena práctica agregarlos. Solo por claridad.

En los siguientes capítulos, definiremos la variedad de etiquetas que puede usar dentro del cuerpo de la página.

Pero antes, debemos introducir una diferencia entre elementos de bloque y elementos en línea.

Elementos de bloque vs elementos en línea

Los elementos visuales, los definidos en el cuerpo de la página, se pueden clasificar generalmente en 2 categorías:

  • elementos de bloquep,div, elementos de encabezado, listas y elementos de lista, ...)
  • elementos en líneaa,span,img,…)

¿Cuál es la diferencia?

Los elementos de bloque, cuando se colocan en la página, no permiten otros elementos junto a ellos. Hacia la izquierda o hacia la derecha.

En cambio, los elementos en línea pueden colocarse junto a otros elementos en línea.

La diferencia también radica en las propiedades visuales que podemos editar usando CSS. Podemos alterar el ancho / alto, el margen, el relleno y los elementos de borde o bloque. No podemos hacer eso con elementos en línea.

Tenga en cuenta que usando CSS podemos cambiar el valor predeterminado para cada elemento, estableciendo unpetiqueta para estar en línea, por ejemplo, o unspanpara ser un elemento de bloque.

Otra diferencia es que los elementos en línea pueden estar contenidos en elementos de bloque. Lo opuesto no es verdad.

Algunos elementos de bloque pueden contener otros elementos de bloque, pero depende. lospLa etiqueta, por ejemplo, no permite tal opción.

Descarga mi gratisManual HTML


Más tutoriales de HTML:


Tech Wiki en línea!