Una introducción a HTML

Descubra HTML desde su historia y sus componentes básicos

HTML es un estándar definido por WHATWG , 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á controlado básicamente por Google, Mozilla, Apple y Microsoft.

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

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

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

Fue un gran cambio. Tuvimos que conocer y respetar más reglas. Reglas más estrictas.

Con el tiempo, los proveedores de navegadores se dieron cuenta de que ese no era el camino correcto para la Web y contraatacaron, creando lo que hoy se conoce como HTML5.

El W3C no se puso de acuerdo sobre dejar el control del HTML y durante años tuvimos dos estándares en competencia, cada uno con el objetivo de ser el oficial. Finalmente, el 28 de mayo de 2019, el W3C oficializó que la versión “verdadera” del HTML era la publicada por WHATWG.

Mencioné HTML5. Permítanme explicarles esta pequeña historia. Sé que hasta ahora es un poco confusa, pero como sucede con muchas cosas en la vida cuando intervienen muchos actores, también es fascinante.

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

En 1995 llegó HTML 2.

Obtuvimos HTML 3 en enero de 1997 y HTML 4 en diciembre de 1997.

¡Tiempos ocupados!

Pasaron más de 20 años, teníamos todo ese asunto de XHTML y finalmente ahora estamos en este “asunto” HTML5, que en realidad ya no es solo HTML.

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

Lo más importante que hay que entender aquí es que ya no existe nada parecido a una versión HTML. Es un estándar de vida. Al igual que CSS, lo llamamos 3, pero en realidad es un conjunto de módulos independientes desarrollados por separado. Al igual que JavaScript, tenemos una nueva edición cada año, pero ya no importa tanto como 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 utilizamos para estructurar el contenido que consumimos en la Web.

El HTML se sirve al navegador de diferentes maneras.

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

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

O, en el caso más sencillo, puedes almacenarse en un archivo y enviarse al navegador mediante un servidor web.

Vamos a sumergirnos en este caso. Aunque en la práctica probablemente sea la forma menos popular de generar HTML, sigue siendo esencial conocer los componentes básicos.

Por convención, un archivo HTML se guarda con una extensión .htmlo .htm.

Dentro de este archivo, organizamos el contenido mediante etiquetas .

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

Pongamos algunos ejemplos.

Este fragmento de HTML crea un párrafo utilizando la petiqueta:

pA paragraph of text/p

Este fragmento de HTML crea una lista de elementos utilizando la uletiqueta, que significa lista desordenada, y las lietiquetas, que significan elemento de lista:

ul liFirst item/li liSecond item/li liThird item/li/ul

Cuando el navegador muestra una página HTML, se interpretan las etiquetas y el navegador representa los elementos según las reglas que definen su apariencia visual.

Algunas de esas reglas están incorporadas, como por ejemplo, cómo se representa una lista o cómo se representa un enlace en azul subrayado.

Algunas otras reglas las establece usted con CSS.

HTML no es una herramienta de presentación. No le interesa cómo se ven las cosas, sino lo que significan.

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 bien, esos dos 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 del tipo de documento (también conocida como doctype), una forma de decirle al navegador que esta es una página HTML y qué versión de HTML estamos usando.

El HTML moderno utiliza este tipo de documento:

!DOCTYPE html

Luego tenemos el htmlelemento, que tiene una etiqueta de apertura y cierre:

!DOCTYPE htmlhtml.../html

Todas las etiquetas tienen una etiqueta de apertura y otra de cierre, excepto algunas etiquetas de cierre automático que no necesitan una etiqueta de cierre porque no contienen nada.

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

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

La htmletiqueta final es lo último que está presente en un documento HTML.

Dentro del htmlelemento tenemos 2 elementos: heady body:

!DOCTYPE htmlhtmlhead.../headbody.../body/html

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

Dentro bodytendremos el contenido de la página. Lo visible .

Etiquetas vs elementos

Mencioné etiquetas y elementos. ¿Cuál es la diferencia?

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

En este caso, utilizamos las petiquetas de inicio y cierre para crear un pelemento.

pA paragraph of text/p

Entonces, un elemento constituye el paquete completo:

• etiqueta de inicio
• contenido del 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 el término etiqueta o elemento en el libro con el mismo significado, excepto que menciono explícitamente la etiqueta inicial o la etiqueta final.

Atributos

La etiqueta inicial de un elemento puede tener fragmentos especiales de información que podemos adjuntar, llamados atributos .

Los atributos tienen la key="value"sintaxis:

pA paragraph of text/p

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

Podemos tener varios de ellos:

pA paragraph of text/p

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

script defer src="file.js"/script

Los atributos classy idson 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 ambos es que un ides único en el contexto de una página web y no se puede duplicar.

Las clases, por otro lado, pueden aparecer varias veces en múltiples elementos.

Además, an ides solo un valor. classPuede contener múltiples valores, separados por un espacio:

pA paragraph of text/p

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

Estos son solo dos de los posibles atributos que puedes tener. Algunos atributos solo se usan para una etiqueta y son altamente especializados.

Se pueden utilizar otros atributos de forma más general. Acabas de ver idy class, pero también tenemos otros, como styleque se pueden utilizar para insertar reglas CSS en línea en un elemento.

Sin distinción entre mayúsculas y minúsculas

HTML no distingue entre mayúsculas y minúsculas. Las etiquetas se pueden escribir en mayúsculas o minúsculas. En el pasado, las mayúsculas eran la norma. Hoy, las minúsculas son la norma. Es una convención.

Generalmente escribes así:

pA paragraph of text/p

No así:

PA paragraph of text/P

Espacio en blanco

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

Por ejemplo la interpretación de este párrafo

pA paragraph of text/p

Es lo mismo que esto:

p A paragraph of text/p

y lo mismo que esto:

pA paragraphof text /p

Con la white-spacepropiedad CSS puedes cambiar el comportamiento de las cosas. Puedes encontrar más información sobre cómo CSS procesa los espacios en blanco en la especificación CSS

Yo diría que uses la sintaxis que haga que las cosas estén visualmente más organizadas y sean más fáciles de leer, pero puedes usar cualquier sintaxis que desees.

Normalmente hago rutas para

pA paragraph of text/p

o

pA paragraph of text/p

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

bodypA paragraph of text/pulliA list item/li/ul/body

Nota: esto significa que si quieres agregar un espacio adicional, puedes disfrutar bastante. Te sugerimos que uses CSS para crear más espacio cuando sea necesario.

Nota: en casos especiales, puedes usar la nbsp;entidad HTML (acrónimo que significa espacio indivisible). Más adelante hablaremos más sobre las entidades HTML. Creo que no se debe abusar de esto. Siempre es preferible usar CSS para modificar la presentación visual.Te recomendamos 🍌 Películas Porno en Español, Estrenos, Inglés, Parodias, Hentai XXX Online Gratis

El encabezado del documento

La headetiqueta contiene etiquetas especiales que definen las propiedades del documento.

Siempre se escribe antes de la bodyetiqueta, justo después de la htmletiqueta de apertura:

!DOCTYPE htmlhtmlhead.../head.../html

Nunca usemos atributos en esta etiqueta y no escribamos contenido en ella.

Es simplemente un contenedor para otras etiquetas. Dentro de él podemos tener una gran variedad de etiquetas, dependiendo de lo que necesites hacer:

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

La titleetiqueta

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

La scriptetiqueta

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

Puedes 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 utilizando el srcatributo:

script src="file.js"/script

El typeatributo está establecido de forma predeterminada en text/javascript, por lo que es completamente opcional.

Hay algo bastante 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 de forma predeterminada bloquea la representación de la página hasta que se analiza y carga el script.

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

En mi opinión, esto ya es una mala práctica. Dejemos que scriptsiga existiendo en la headetiqueta.

En JavaScript moderno tenemos una alternativa más eficiente para mantener el script en la parte inferior de la página: deferel atributo:

script defer src="file.js"/script

Este es el escenario que activa la ruta más rápida hacia una página de carga rápida y un JavaScript de carga rápida.

Nota: el asyncatributo es similar, pero en mi opinión es una opción peor que defer. Describo el porqué en detalle en la página https://flaviocopes.com/javascript-async-defer/

La noscriptetiqueta

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 de JavaScript en la configuración del navegador. De lo contrario, es posible que el navegador no admita una forma predeterminada.

Se utiliza de forma diferente según se coloque en el encabezado o en el cuerpo del documento.

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

En este caso, la noscriptetiqueta solo puede contener otras etiquetas:

• linketiquetas
• styleetiquetas
• metaetiquetas

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

En este ejemplo, configuro un elemento con la no-script-alertclase para mostrar si los scripts están deshabilitados, como estaba display: nonede manera predeterminada:

!DOCTYPE htmlhtmlhead...noscriptstyle.no-script-alert {display: block;}/style/noscript.../head.../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.

La linketiqueta

La linketiqueta se utiliza para establecer relaciones entre un documento y otros recursos.

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

Este elemento no tiene etiqueta de cierre.

Uso:

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

El mediaatributo permite cargar diferentes hojas de estilo dependiendo de las capacidades del dispositivo:

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

Podemos vincularnos a recursos diferentes a las hojas de estilo.

Por ejemplo, podemos asociar un canal RSS usando

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

Podemos asociar un favicon usando:

link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"link rel="icon" type="image/png" href="/assets/favicon-32x32.png"link rel="icon" type="image/png" href="/assets/favicon-16x16.png"

Esta etiqueta también se utilizaba para contenido de varias páginas, para indicar la página anterior y la siguiente mediante rel="prev"y rel="next". Principalmente para Google. En 2019, Google anunció que ya no utiliza esta etiqueta porque puede encontrar la estructura de página correcta sin ella.

La styleetiqueta

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

Uso:

style.some-css {}/style

Al igual que con la linketiqueta, puedes usar el mediaatributo para usar ese CSS solo en el medio especificado:

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

También puedes agregar esta etiqueta en el cuerpo del documento. Hablando de esto, es interesante el scopedatributo para asignar únicamente ese CSS al subárbol del documento actual. En otras palabras, para evitar filtrar el CSS fuera del elemento padre.

La baseetiqueta

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

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

La metaetiqueta

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

Especialmente para SEO.

metaLos elementos solo tienen la etiqueta de inicio.

La más básica es la descriptionmetaetiqueta:

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

Google podría usar esto para generar la descripción de la página en sus páginas de resultados, si considera que describe mejor la página que el contenido de la página (no me preguntes cómo).

La charsetetiqueta meta 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"

La robotsmetaetiqueta indica a los robots del motor de búsqueda si deben indexar una página o no:

meta name="robots" content="noindex"

O si deben seguir los enlaces o no:

meta name="robots" content="nofollow"

También puedes configurar el nofollow en enlaces individuales. Así es como puedes configurarlo nofollowglobalmente.

Puedes combinarlos:

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

El comportamiento predeterminado es index, follow.

Puede utilizar otras propiedades, incluidas nosnippet, noarchive, noimageindexy más.

También puedes simplemente decirle a Google en lugar de apuntar a todos los motores de búsqueda:

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

y otros motores de búsqueda también podrían tener su propia metaetiqueta.

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

meta name="google" content="notranslate"

La viewportmetaetiqueta se utiliza para indicar al navegador que establece el ancho de la página según el ancho del dispositivo.

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

Ver más sobre esta etiqueta.

Otra metaetiqueta bastante popular es la http-equiv="refresh"siguiente: esta línea le indica al navegador que espere 3 segundos y luego redirija a esa otra página:

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

Usar 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 encabezado del documento, podemos comenzar a sumergirnos en el cuerpo del documento.

El cuerpo del documento

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

!DOCTYPE htmlhtmlhead.../headbody.../body/html

Al igual que las etiquetas heady html, solo podemos tener una bodyetiqueta en una página.

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

Técnicamente, las etiquetas de inicio y fin son opcionales, pero considera que es una buena práctica agregarlas, solo para mayor claridad.

En los próximos capítulos definiremos la variedad de etiquetas que puedes 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, aquellos definidos en el cuerpo de la página, se pueden clasificar generalmente en 2 categorías:

• elementos de bloque ( p,, divelementos de encabezado, listas y elementos de lista, …)
• elementos en línea ( a, span, img, …)

¿Cuál es la diferencia?

Los elementos de bloque, al ubicarse en la página, no permiten que otros elementos se ubiquen junto a ellos, ni a la izquierda ni a la derecha.

Los elementos en línea, en cambio, pueden ubicarse junto a otros elementos en línea.

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

Tenga en cuenta que al usar CSS podemos cambiar el valor predeterminado para cada elemento, estableciendo una petiqueta para que esté en línea, por ejemplo, o spanpara que sea un elemento de bloque.

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

Algunos elementos de bloque pueden contener otros elementos de bloque, pero dependen. La petiqueta, por ejemplo, no permite esa opción.

Tips de HTML

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro

Una introducción a HTML

Una estructura de página HTMLEtiquetas vs elementosAtributosSin distinción entre mayúsculas y minúsculasEspacio en blancoLa titleetiquetaLa scriptetiquetaL

programar

es

2025-01-21

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente