Datos para niños HTML
Desarrollador
World Wide Web Consortium, Grupo de Trabajo de Ingeniería de Internet y Web Hypertext Application Technology Working Group
https://www.w3.org/html/ y https://html.spec.whatwg.org/multipage/
Información general
Extensión de archivo	htm y html
Tipo de MIME	text/html
Type code	TEXT
Lanzamiento inicial	1993 (info)
Última versión	Living Standard
Tipo de formato	Lenguaje de marcado
Extendido de	SGML
Extendido a	XHTML
Estándar(es)
Formato abierto

HTML significa HyperText Markup Language, que en español se traduce como "lenguaje de marcado de hipertexto". Es el lenguaje principal que se usa para crear las páginas web que ves en internet.

HTML ayuda a organizar el contenido de una página web, como el texto, las imágenes, los videos y los juegos. Es como el esqueleto de una página web. Los navegadores web, como Chrome o Firefox, leen el código HTML y lo convierten en la página que ves en tu pantalla.

Este lenguaje es muy importante para la World Wide Web (WWW), que es como llamamos a la red mundial de información. El HTML es un estándar, lo que significa que todos los navegadores lo entienden de la misma manera.

¿Cómo funciona HTML?

HTML funciona de una manera especial. Cuando quieres añadir algo a una página web, como una foto o un video, no lo pones directamente en el código. En su lugar, usas una referencia que le dice al navegador dónde encontrar ese elemento.

Así, el código HTML de la página solo contiene texto. El navegador es el encargado de juntar todo: el texto, las imágenes y los videos, para mostrarte la página completa. Como es un estándar, una página web escrita en HTML debería verse igual en cualquier navegador actualizado.

HTML es un lenguaje de marcado porque usa "etiquetas" para organizar la información. Estas etiquetas le dicen al navegador qué tipo de contenido es cada parte. Es un lenguaje flexible y fácil de entender.

Evolución de HTML

A lo largo del tiempo, HTML ha cambiado y mejorado. Se han añadido y quitado características para que las páginas web funcionen mejor en diferentes dispositivos, como computadoras, laptops, teléfonos inteligentes y tabletas.

Para que un navegador pueda mostrar una página web hecha con una versión nueva de HTML, necesita actualizarse. Esto suele pasar automáticamente. Si un navegador está muy viejo, puede que no muestre bien las páginas web más recientes.

Por eso, los creadores de páginas web a veces tienen que hacer ajustes para que sus sitios se vean bien en navegadores antiguos. También, las páginas web viejas a veces necesitan ser actualizadas para funcionar con los navegadores modernos.

Historia de HTML: ¿Quién lo creó?

Tim Berners-Lee fue quien creó HTML en 1991. Él describió 18 elementos básicos para diseñar páginas web. Trece de esos elementos todavía se usan hoy en día.

Berners-Lee trabajaba en el CERN, un centro de investigación en Europa. Su idea era crear un sistema para compartir información entre científicos de diferentes universidades. Así nació la World Wide Web y el HTML como su lenguaje principal.

En 1990, Tim Berners-Lee definió HTML y creó el primer navegador web, llamado WorldWideWeb (luego renombrado a Nexus). Después, surgieron otros navegadores como Line Mode Browser y ViolaWWW.

Primeras versiones de HTML

A finales de 1993, se empezó a trabajar en una versión mejorada llamada HTML+. Aunque se intentó que fuera un estándar, nunca lo logró.

En 1995, el World Wide Web Consortium (W3C), una organización que ayuda a crear los estándares de la web, propuso HTML 3.0. Esta versión incluía nuevas funciones como tablas y elementos matemáticos. Sin embargo, era demasiado complicada para la tecnología de ese momento y no tuvo éxito.

Luego, en 1997, se lanzó HTML 4.0. Esta versión empezó a organizar mejor el lenguaje, marcando algunos elementos como "desaprobados" (que ya no se recomendaba usar). En 2004, se empezó a pensar en HTML5, la versión que usamos hoy en día.

Marcado HTML: Etiquetas y atributos

HTML se escribe usando "etiquetas". Estas etiquetas son como instrucciones que se encierran entre los signos `<` y `>`. Por ejemplo, `

` es la etiqueta para un párrafo. Además de organizar el documento, HTML puede, hasta cierto punto, definir cómo se ve y puede usar programas especiales llamados scripts para hacer que la página se comporte de cierta manera. El HTML está hecho de varios componentes importantes:

• Elementos: Son las partes básicas de HTML.
• Atributos: Son propiedades que dan más información a los elementos.
• Tipos de datos: Definen el tipo de información.
• Declaración de tipo de documento: Indica qué versión de HTML se está usando.

Elementos HTML

HTML element content categories

Los elementos son la base de HTML. La mayoría de los elementos tienen una etiqueta de apertura (como `

`) y una etiqueta de cierre (como `

`). El contenido va entre estas dos etiquetas. Por ejemplo: `

Mi título

`. Algunos elementos, como `
` (para un salto de línea), no necesitan etiqueta de cierre.

Hay diferentes tipos de marcado en HTML:

• Marcado estructural: Describe el propósito del texto. Por ejemplo, `

  Mi subtítulo

  ` le dice al navegador que "Mi subtítulo" es un encabezado de segundo nivel. No dice cómo se verá, pero los navegadores suelen darle un formato estándar. Puedes cambiar su apariencia con hojas de estilo en cascada (CSS).
• Marcado presentacional: Se encarga de cómo se ve el texto. Por ejemplo, `negrita` hace que el texto se vea en negrita. Sin embargo, es mejor usar etiquetas con un significado más claro, como `énfasis fuerte`, que le dice al navegador que el texto es importante, no solo que debe verse en negrita. La mayoría de estas etiquetas presentacionales ya no se usan mucho, se prefiere CSS para el diseño.
• Marcado hipertextual: Se usa para crear enlaces a otras partes del documento o a otras páginas web. Para hacer un enlace, usas la etiqueta `<a>` y el atributo `href` para indicar la dirección. Por ejemplo: `<a href="https://www.wikipedia.org">Wikipedia</a>`.

Atributos HTML

Los atributos son como características adicionales que le das a un elemento. Se escriben dentro de la etiqueta de apertura. Por ejemplo, en `<img src="foto.jpg" alt="Mi foto">`, `src` y `alt` son atributos.

Los atributos suelen tener un nombre y un valor, separados por un signo de igual (`=`). El valor se pone entre comillas dobles o simples. Por ejemplo: `src="foto.jpg"`.

Etiquetas HTML básicas que debes conocer

Un ejemplo de código HTML con coloreado de sintaxis.

Las etiquetas HTML son las instrucciones que le dicen al navegador cómo mostrar cada parte de tu página web. Aquí te mostramos algunas de las más importantes:

• `<html>`: Es la etiqueta principal que le dice al navegador que el documento es HTML.
• `<head>`: Contiene información sobre la página que no se ve directamente, como el título de la ventana del navegador.
  • `<title>`: Define el título de la página, que aparece en la pestaña del navegador.
  • `<link>`: Sirve para conectar tu página con hojas de estilo (CSS) externas.
  • `<style>`: Para escribir estilos CSS directamente en la página.
  • `<meta>`: Para añadir información extra sobre la página, como el autor o la descripción.
• `<body>`: Aquí va todo el contenido visible de tu página web.
  • `<article>`: Para un contenido completo e independiente, como una noticia o un blog.
  • `

    ` a `

    `: Son encabezados o títulos, donde `

    ` es el más importante y `

    ` el menos.

  • ``: Para crear tablas.
    • `
    `: Para una fila de la tabla.``<footer>`: Representa el pie de página, donde suele ir información como el autor o derechos de autor.`<a>`: Para crear enlacesa otras páginas o secciones.`
    `: Una división o sección de la página, útil para organizar el contenido.
    `<img>`: Para insertar imágenes. Necesita el atributo `src` para indicar dónde está la imagen.`
    1. `: Para listas ordenadas (con números).
    2. `
       • `: Para listas desordenadas (con puntos).
       • `
       • `: Para cada elemento dentro de una lista.
       • ``: Para texto en negrita (se recomienda usar `` en su lugar).
       • ``: Para texto en cursiva (se recomienda usar `` en su lugar).
       • ``: Para texto tachado (se recomienda usar `` en su lugar).
       • ``: Para texto subrayado (en HTML5, indica texto diferente o destacado).
       • `<main>`: Contiene el contenido principal y único de la página.
       • ``: Para aplicar estilos a una pequeña parte de texto.
       • `
         `: Para hacer un salto de línea. No necesita etiqueta de cierre.
       • `

         ---

         `: Para dibujar una línea horizontal, indicando un cambio de tema. No necesita etiqueta de cierre.
       • `<details>`: Para crear una sección que se puede desplegar u ocultar.
       • `<summary>`: Para el título de la sección desplegable.
    La mayoría de las etiquetas se abren y se cierran. La etiqueta de cierre lleva una barra (`/`) antes del nombre, por ejemplo: `

    `: Para una celda dentro de una fila de la tabla.

    Contenido

    `.

    Herramientas para crear y aprender HTML

    Puedes crear y editar código HTML con cualquier editor de texto simple, como el Bloc de notas en Windows o Gedit en GNU/Linux. También hay editores más avanzados como Notepad++, Atom o Visual Studio Code.

    Existen otros programas llamados editores WYSIWYG (What You See Is What You Get, que significa "lo que ves es lo que obtienes"). Estos te permiten ver cómo quedará tu página web mientras la estás creando, sin necesidad de escribir todo el código a mano. Algunos ejemplos son KompoZer o Adobe Dreamweaver.

    Combinar estos dos tipos de editores es muy útil. Puedes escribir el código HTML directamente y luego usar un editor WYSIWYG para ver el resultado o hacer ajustes visuales.

    Aprende HTML viendo páginas reales

    Una forma genial de aprender HTML es viendo el "código fuente" de las páginas web que visitas. Esto te permite ver el HTML que el navegador está leyendo.

    Para hacerlo, en la mayoría de los navegadores (como Chrome o Firefox), puedes presionar las teclas `Ctrl` + `U`. También puedes hacer clic derecho en cualquier parte de la página y elegir "Ver código fuente de la página". Se abrirá una nueva pestaña con el código HTML.

    Además, los navegadores tienen herramientas llamadas "inspectores de página" (puedes activarlas con la tecla `F12`). Con estas herramientas, puedes seleccionar un elemento específico en la página con el ratón y ver el código HTML y los estilos CSS que lo forman. ¡Es una forma muy práctica de aprender!

    Accesibilidad web

    Cuando se diseña una página web con HTML, es importante que sea accesible para todos. Esto significa que personas con diferentes capacidades puedan usarla sin problemas. Hay pautas y normas, como las del W3C, que ayudan a los desarrolladores a crear páginas web que sean fáciles de usar para todos.

    Entidades HTML

    En HTML, algunos caracteres especiales, como letras con tilde o símbolos, se pueden escribir directamente o usando una "referencia a entidad". Esto es útil si tu teclado no tiene esos caracteres o si quieres asegurarte de que se vean bien en cualquier lugar.

    Véase también

    En inglés: HTML Facts for Kids

    • Anexo:Elementos HTML
    • Colores HTML
    • Hojas de estilo en cascada o CSS
    • JavaScript