HTML

> Temas > HTML
Editar

Todo sobre HTML, Hypertext Markup Language o el lenguaje de marcas hipertexto, con el que se realiza la creación básica de páginas web. Aquí encontrarás manuales, artículos prácticos y muchos complementos para empezar a desarrollar sitios web.

HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.

HTML es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.

Aprender HTML es sencillo. En pocos días o semanas serás capaz de entender y usar las etiquetas más comunes y componer documentos HTML (páginas web) correctas. Aquí encontrarás muchas ayudas para poder dar esos primeros pasos y luego profundizar en cualquier área que necesites.

Más información:

Historia del HTML

El lenguaje HTML fue creado en 1991 por Tim Berners-Lee, conocido científico a quien se le considera padre de la World Wide Web. En su momento inicial en el lenguaje HTML se describen una pequeña cantidad de tags o etiquetas que servían para componer documentos. La mayor innovación en ellos era la posiblidad de crear enlaces entre documentos, de modo que se hacía posible la navegación entre páginas.

Para definir el lenguaje HTML se usó como base SGML, que es un meta-lenguaje de marcado (compuesto por etiquetas, como el propio HTML). SGML corresponde con las siglas de Standard Generalized Markup Language y permite especificar otros lenguajes de marcado, como es el caso de HTML. En 1993 se publicó el primer borrador de especificación del lenguaje HTML basado en SGML. Esta primera etapa de la estandarización del HTML fue creada en el marco de la IEFT (Internet Engineering Task Force). A ella le debemos el primer intento de estandarización del HTML que se conoció como HTML 2.0.

La creación de la organización que regula actualmente los estándares de la web, conocida por W3C (World Wide Web Consortium), no se produjo hasta el año 1996. Ya bajo la tutela del W3C se publicó la versión 3.2 de HTML en enero de 1997. Posteriormente se publicó HTML 4.0 en abril de 1998, que podemos considerar como la primera versión madura del HTML.

HTML 4.0 trajo como novedad la separación entre contenido y presentación. Manteniendo la definición de lo que es el contenido en el lenguaje HTML y la capa de presentación en el lenguaje CSS. Esta versión de HTML se mantuvo durante muchos años y no hubieron cambios en el estándar de HTML, sino más bien en los lenguajes colindantes, como el CSS.

De hecho, W3C decidió que la evolución de HTML sería XHTML y se centró en definir este nuevo estándar. XHTML partía de la base de HTML, pero usaba al lenguaje XML como base para su definición, por ello agregaba algunas reglas más estrictas en la creción de documentos HTML, como por ejemplo que todas las etiquetas tuvieran su correspondiente etiqueta de cierre. Lo cierto es que XHTML nunca fue un proyecto muy apoyado y los esfuerzos en crear este estándar nunca dieron grandes frutos.

Ante la falta de interés del W3C en el desarrollo de nuevas versiones de HTML, se creó un grupo paralelo centrado en desarrollar las tecnologías de la web llamado WHATWG (Web Hypertext Application Technology Working Group). A ellos les debemos el impulso que llegó a HTML y los estándares abiertos con la publicación de HTML 5. Tal fue la repercusión del movimiento de HTML 5 que la W3C decidió relegar sus esfuerzos de crear un nuevo lenguaje para sustituir al HTML y retomó las actividades de estandarización de HTML, creando los primeros documentos de estandarización de HTML 5 en 2007.

El movimiento HTML5 no solo afectó al propio HTML, sino que abarcó otra serie de lenguajes relacionados como CSS y también Javascript. En lo que respecta a CSS su aporte fundamental fue CSS3, que trajo múltiples mejoras que permitían separar con más facilidad todos los aspectos relacionados con la presentación. En lo que respecta a Javascript HTML 5 trajo la estandarización de las API de Javascript que los navegadores debían respetar, para trabajar de una manera única con los elementos de la página y acceder a funcionalidades modernas como la geolocalización o el trabajo a pantalla completa.

Editar

Con HTML se expresa el contenido

A la hora de aprender HTML es importante observar que sirve para expresar el contenido (el qué) y nunca la presentación (el cómo). Es decir, con HTML podemos colocar párrafos, listas, secciones, enlaces, imágenes, todo aquello que forma parte del contenido que va a tener una página web.

Para definir la presentación se usa un lenguaje complementario, llamado CSS. Además, para definir la funcionalidad en el ámbito de la web se usa el lenguaje Javascript.

Sin embargo, esto no siempre ha sido así. En el momento de crearse el lenguaje HTML sí que existían etiquetas que permitían cambiar el estilo o presentación de la página, tales como <font> que sirve para cambiar el color del texto o su tamaño. Todas estas etiquetas se han ido retirando del lenguaje a medida que se presentaban nuevas versiones, aunque por motivos de compatibilidad hacia atrás los navegadores siguen soportándolas.

También existen atributos pensados para cambiar la forma como la que esa etiqueta se representa, como el atributo "align", que permite cosas como centrar el texto del contenido de un párrafo, por ejemplo. Sin embargo, aunque existan etiquetas o atributos que sirvan para cambiar el formato o estilo de los elementos, no es una buena idea utilizarlos.

Gracias a la separación entre contenido y presentación, que conseguimos usando lenguajes separados para cada cosa, se obtienen múltiples beneficios. El más importante es que, para un mismo HTML podemos aplicar diversos tipos de presentación, solo cambiando el código CSS. De este modo, si en algún momento se decide cambiar el estilo de una página, se puede hacer simplemente alterando su código CSS y sin necesidad de cambiar el HTML.

Se deduce también de aquí que, para desarrollar una página web, no solo se trata de aprender HTML, sino que será necesario también aprender CSS, un lenguaje imprescindible para poder aplicar el formato deseado a nuestro contenido.

Editar

Etiquetas

La etiqueta es el elemento básico del código HTML. Es un bloque de contenido que puede tener naturaleza diversa, desde un párrafo a una imagen o un vídeo, por ejemplo.

Las etiquetas se engloban entre signos menor y mayor que y tienen un inicio y un cierre. Dentro de estos signos mayor y menor que se coloca el nombre de la etiqueta. Por ejemplo:

<p>Esto es un párrafo.</p>

La anterior etiqueta <p> sirve para indicar el inicio de un párrafo. Dentro figura su contenido y finalmente tenemos la etiqueta de cierre del párrafo </p>.

Muchas etiquetas tienen atributos para ajustar su comportamiento o definir alguna de sus propiedades. Por ejemplo, la etiqueta <a> para crear enlaces tiene el atributo href, donde se coloca la URL a la que va dirigido un enlace.

<a href="https://desarrolloweb.com">Enlace a DesarrolloWeb</a>

Editar

Esqueleto de un documento HTML

Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:

  • <head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
  • <body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.

Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Título del documento HTML</title>
</head>
<body>
  
</body>
</html>

La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.

Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.

Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:

  • charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
  • Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido.

Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.

Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.

Editar

¿Quieres añadir algo sobre HTML?

Crea artículos, recursos o comparte información sobre HTML

Crear un bloque

HTML

Manuales

Manual de HTML
Este manual de HTML es un completo texto para el aprendizaje del lenguaje HTML, con el que podrás aprender desde cero y conocer todas las etiquetas y buenas prácticas a la hora de crear páginas web.
Publicar en Internet
Este manual te explica cómo publicar en Internet. Ofrece información completa sobre los pasos más elementales para crear una página web y luego publicarla en un sitio web en su propio dominio.
Curso gratuito 5 días de HTML5
Grabaciones de las clases del Curso Gratuito de HTML5 impartidas por EscuelaIT en marzo de 2014. En este curso se...
Taller de HTML
Una serie de artículos prácticos para aprender a trabajar con HTML. Ofrece pequeños trucos de maquetación para que los más...
Taller de HTML5
Artículos prácticos sobre la creación de páginas web con el estándar HTML5. Aplicación práctica de las diversas tecnologías relacionadas con...
Manual de Canvas del HTML 5
Manual del elemento Canvas del HTML 5 en el que aprenderemos a dibujar sobre los lienzos, utilizando Javascript y el...
Botones con estilo
Informe sobre cómo crear botones de envío de formulario variados. Botones básicos, con estilos y con características dinámicas.
Envío de formularios avanzado
Manual que explica la manera de enviar formularios, utilizando el servidor y sin depender de la configuración del cliente. Se...
Videotutorial de HTML
Videotutorial de HTML, con una serie de vídeos en los que se explican las distintas etiquetas del lenguaje y cómo...
Manual de Aplicaciones Metro con HTML/JavaScript
Este manual describe cómo desarrollar una Aplicación Metro para Windows 8 con los lenguajes de la Web: HTML, CSS y...
HTML5 e Internet Explorer 9
Un detallado repaso a las características de la nueva versión de HTML visto desde el prisma del navegador Internet Explorer...
Manual del lenguaje de marcación de HTML5
Manual que trata sobre el lenguaje HTML5, pero específicamente con las novedades del lenguaje de marcación o etiquetado, dejando aparte...
HTML en desuso
En este manual vamos a localizar todos los artículos de HTML que han quedado con informaciones obsoletas o simplemente en...

Más manuales

Tenemos 2 manuales más sobre HTML

Manual de Responsive Web Design
El manual de Responsive Web Design te enseña las técnicas más importantes para realizar diseño web moderno, que requiere ser adaptable a las condiciones del navegador del usuario.
Ayudas técnicas
Las ayudas técnicas son pequeños reportajes de interés general muy útiles para conocer rápidamente diversos temas de mucho interés para...

Colecciones

Editores HTML WYSIWYG

Editores HTML del estilo WYSIWYG (What Y...

6 ítems

Temas relacionados

Preguntas y respuestas

Se han recibido 128 faqs en HTML

Hacer una pregunta