Lenguaje de marcas HTML

Inicio  HTML  HTML  Lenguaje de marcas HTML

Como hemos visto en el punto anterior, el lenguaje de marcas HTML (HyperText

Curso HTML5 Markup Language) es el lenguaje de marcado estándar utilizado para crear
páginas web. Este lenguaje proporciona la estructura y el contenido de una página
web.
0. Lenguajes de marcado

1. Lenguaje de marcas
Contenidos del artículo
1. Lenguaje de marcas HTML
HTML
1.1. Breve historia HTML
1.2. Versiones HTML
- 1.1 Reglas y normas
1.3. ¿Qué versión de HTML debo aprender?
1.4. Documentación oficial y páginas de referencia de HTML
- 1.2. Cierre de etiquetas
2. Etiquetas HTML
3. Etiquetas vacías o de autocierre en HTML
2. Estructura y elementos
4. Elementos estructurales
semánticos
5. Etiquetas y atributos en HTML
6. Comentarios
3. Etiquetas de contenido
7. Ejemplo práctico
y texto
8. Editores HTML
9. Ejercicios propuestos
4. Formularios HTML
9.1. Estructura básica de un documento HTML
9.2. Instala Visual Studio Code y explora sus extensiones y funcionalidades (para hacer
5. Tablas de contenido
esto puedes seguir el tutorial de Visual Studio Code)
9.3. Explora y crea en CodePen
6. Contenido incrustado
9.4. Test básico HTML
9.5. Optimiza tu flujo de trabajo con abreviaciones Emmet
7. Elementos de
ordenación
HTML utiliza etiquetas para marcar diferentes partes del contenido, como

8. Marcadores HTML encabezados, párrafos, enlaces, imágenes, tablas, formularios, entre otros. Estas
etiquetas permiten a los navegadores web interpretar y renderizar correctamente
9. Factores HTML clave el contenido de la página.
para el SEO

1. Lenguaje de marcas HTML

10. Test de verificación
HTML y herramientas
útiles

11. Metainformación en El lenguaje de marcas HTML es un estándar reconocido en todo el mundo y sus
HTML normas están definidas en la página web del organismo W3C (World Wide Web
Consortium) y en la página oficial del grupo de trabajo WHATWG (Web Hypertext
12. Metaetiqueta Application Technology Working Group).
viewport
13. Resumen de
etiquetas HTML
1.1. Breve historia HTML
14. Ejercicios resueltos
HTML
HTML fue desarrollado por Tim Berners-Lee en 1991 como parte del proyecto
World Wide Web en el CERN (Consejo Europeo para la Investigación Nuclear). A lo
largo de los años, HTML ha evolucionado con nuevas versiones y características
Ver más cursos
para adaptarse a las necesidades cambiantes de la web.

La última versión estable es HTML5, que ofrece mejoras en multimedia,

interactividad y accesibilidad. HTML ha sido fundamental en el crecimiento y la
expansión de Internet, permitiendo la creación de contenido digital accesible a
nivel mundial.

¿Sabías que…? El origen de HTML se remonta a 1980, cuando el físico

Tim Berners-Lee, trabajador del CERN (Organización Europea para la
Investigación Nuclear) comenzó su desarrollo. Sin embargo, no se
publicó ningún documento HTML formal hasta el año 1991. Hoy en día,
este documento puede ser consultado online:
w3.org/History/19921103hypertext/hypertext/WWW/MarkUp/Tags.html

En el este vídeo puedes conocer de forma breve la historia de HTML: ver vídeo

1.2. Versiones HTML

HTML (HyperText Markup Language) ha pasado por varias versiones desde su
creación en 1991, cada una mejorando y ampliando las capacidades de la
anterior:

1. HTML 1.0 (1991): Básica, creada por Tim Berners-Lee.

2. HTML 2.0 (1995): Estándar oficial, añadió soporte para formularios.

3. HTML 3.2 (1997): Introdujo tablas, scripts y mayor control de estilo.

4. HTML 4.0 (1997): Separación de estructura y presentación, introducción de

CSS.

5. HTML 4.01 (1999): Corrección de errores y mejoras.

6. XHTML 1.0 (2000): Reformulación como aplicación XML con reglas estrictas.

7. HTML5 (2014): Soporte nativo para multimedia, nuevos elementos

semánticos, mejoras en formularios y APIs.

8. HTML 5.1 (2016) y 5.2 (2017): Actualizaciones menores con nuevas

características y mejoras.
 9. HTML Living Standard: HTML se actualiza continuamente bajo la supervisión
de WHATWG y W3C, sin versiones numeradas específicas, adaptándose a
nuevas tecnologías y necesidades.

1.3. ¿Qué versión de HTML debo

aprender?
Estudiar HTML5 y sus mejoras es esencial, ya que representan el estado actual y
el futuro del desarrollo web. HTML5 introduce soporte nativo para multimedia,
nuevos elementos semánticos, mejoras en formularios y una serie de APIs (del
inglés, application programming interface) que amplían las capacidades
interactivas del navegador.

Además, conocer XHTML 1.0 proporciona una base histórica y ayuda a entender
la evolución de las tecnologías web. Por su parte, XHTML 1.0, con sus reglas
estrictas basadas en XML, fomenta una escritura de código limpio y bien
estructurado.

Por ello, en este tutorial, nos centramos en HTML5 pero destacamos algunas
diferencias clave entre HTML5 y XHTML 1.0 para proporcionar una comprensión
contextualizada de la evolución del HTML.

1.4. Documentación oficial y

páginas de referencia de HTML
La documentación oficial y las páginas de referencia más importantes para HTML
son mantenidas principalmente por el W3C (World Wide Web Consortium) y
WHATWG (Web Hypertext Application Technology Working Group). Veamos las
principales fuentes:

Fuente Enlace Descripción

WHATWG (Web
Esta es la versión continuamente
Hypertext Application HTML Living
actualizada del estándar HTML
Technology Working Standard
mantenida por WHATWG.
Group)

Incluye versiones históricas y

W3C (World Wide Web W3C HTML
documentos sobre el desarrollo
Consortium) Specifications
de HTML.
 Fuente Enlace Descripción

Una referencia muy utilizada por

MDN Web Docs
desarrolladores, con
(Mozilla Developer MDN HTML
documentación, tutoriales y
Network)
ejemplos prácticos.

Información sobre la
Can I use Can I use compatibilidad de características
HTML en diferentes navegadores.

Ofrece artículos y recursos sobre

las características de HTML5, con
HTML5 Doctor HTML5 Doctor
ejemplos prácticos y
explicaciones.

Tutoriales interactivos y
W3Schools
W3Schools referencias fáciles de seguir para
HTML
aprender y practicar HTML.

Tabla 1.1. Páginas de referencia de HTML

2. Etiquetas HTML
Todas las etiquetas HTML disponen de los símbolos mayor que y menor que ( < >
), y normalmente se utilizan en parejas. Una al principio (etiqueta de apertura) y
otra al final del texto al que afectan (etiqueta de cierre).

En el siguiente ejemplo se define un párrafo mediante la etiqueta <p> . Observa

que la etiqueta de cierre del final incluye una barra inclinada.

1. <p>Párrafo</p>

3. Etiquetas vacías o de
autocierre en HTML
Las etiquetas vacías o de autocierre en HTML son aquellas que no contienen
contenido entre una etiqueta de apertura y una de cierre. Estas etiquetas se
cierran automáticamente dentro de la etiqueta de apertura. Algunos ejemplos de
etiquetas vacías o de autocierre son:

<br> : Salto de línea o línea de quiebre.

<hr> : Línea horizontal.

 <img> : Imagen.

<input> : Campo de entrada de datos.

<meta> : Metadatos del documento.

<link> : Enlace a un recurso externo.

<wbr> : Salto de línea sugerido.

4. Elementos estructurales
La estructura básica de un documento HTML consta de varios elementos que
definen la estructura y el contenido de una página web.

Elemento Descripción

Indica que el documento está bajo el estándar de

<!DOCTYPE html>
HTML5.

Representa la raíz de un documento HTML y sirve como

contenedor para los demás elementos HTML, como
<html> <head> y <body> . El atributo lang especifica el
idioma del documento, lo que ayuda con la accesibilidad
y el SEO.

En su interior se incluye la colección de metadatos sobre

<head>
el documento, los enlaces a scripts y hojas de estilo.

Representa el título del documento. Se muestra en la

<title> barra superior del navegador o en las pestañas de
página.

<link> Enlaza documentos externos, por ejemplo CSS.

Define los metadatos que no pueden ser definidos

<meta>
usando otro elemento HTML.

<style> Usada para escribir CSS interno.

Define un script interno o un enlace hacia un script

<script>
externo de JavaScript.

Recoge todo el contenido que puede ver un usuario de

<body> un documento HTML. Sólo puede existir un
elemento <body> en el documento.

Tabla 1.2. Elementos estructurales

5. Etiquetas y atributos en
HTML
Como se ha explicado en puntos anteriores, una etiqueta es un elemento que
define la estructura y el contenido de una página web. Las etiquetas se utilizan
para marcar o envolver diferentes partes del contenido, como textos, imágenes,
enlaces, listas, entre otros elementos. Por ejemplo, <p> define un párrafo y
<img> define una imagen.

Por otro lado, un atributo proporciona información adicional sobre una etiqueta y
suele especificarse dentro de la etiqueta de apertura. Los atributos modifican el
comportamiento o la apariencia de las etiquetas y pueden ser obligatorios u
opcionales dependiendo del contexto. Por ejemplo, en la etiqueta <html> , el
atributo lang especifica el idioma del documento HTML, lo cual es crucial para
la accesibilidad y el SEO:

1. <html lang="es">

6. Comentarios
Los comentarios se escriben entre los caracteres que se muestran en el siguiente
ejemplo:

1. <!-- Esto es un comentario dentro de un documento HTML -->

2. <!--
3. /$$ /$$ /$$$$$$$$ /$$ /$$ /$$
4. | $$ | $$|__ $$__/| $$$ /$$$| $$
5. | $$ | $$ | $$ | $$$$ /$$$$| $$
6. | $$$$$$$$ | $$ | $$ $$/$$ $$| $$
7. | $$__ $$ | $$ | $$ $$$| $$| $$
8. | $$ | $$ | $$ | $$\ $ | $$| $$
9. | $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$
10. |__/ |__/ |__/ |__/ |__/|________/
11. -->
12. <!--¿Te están entrando ganas de hacer ASCII Art? Puedes hacerlo
en: http://patorjk.com/software/taag/#p=display&f=Big%20Money-
ne&t=ENIUN -->

7.  Ejemplo práctico
A continuación se muestra un ejemplo práctico que contiene todas las etiquetas
vistas hasta el momento. Si visualizas el siguiente documento html en un
navegador obtendrás el texto ¡Hola Mundo!.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Título de la WEB</title>
5. <meta charset="UTF-8">
6. <meta name="title" content="Título de la WEB">
7. <meta name="description" content="Descripción de la WEB">
8. <link href="estilos.css" rel="stylesheet">
9. <style>
10. header{background-color:yellow;} /* Código CSS */
11. </style>
12. <script src="script.js"></script>
13. <script type="text/javascript">
14. /* Código JS */
15. </script>
16. </head>
17. <body>
18. ¡Hola Mundo!
19. <!-- Añade tu código HTML aquí -->
20. </body>
21. </html>

Explicación del código:

<!DOCTYPE html> : Declara que el documento está escrito en HTML5.

<html lang="es"> : Indica el inicio del documento HTML y establece el

idioma del contenido como español, lo que ayuda con la accesibilidad y el
SEO.

<head> : Contiene metadatos sobre el documento.

<title>Título de la WEB</title> : Define el título de la página web, que

aparece en la pestaña del navegador.

<meta charset="UTF-8"> : Especifica la codificación de caracteres como

UTF-8.

<meta name="title" content="Título de la WEB"> : Proporciona

información sobre el título del documento.

<meta name="description" content="Descripción de la WEB"> :

Proporciona una descripción del contenido de la página.

<link href="estilos.css" rel="stylesheet"> : Enlaza un archivo CSS

externo para dar estilo a la página.

<style> header {background-color: yellow;} </style> : Incluye un

bloque de estilo CSS que establece el color de fondo del elemento header
como amarillo.

<script src="script.js"></script> : Enlaza un archivo JavaScript

externo.

<script type="text/javascript"> /* Código JS */ </script> :

Incluye un bloque de código JavaScript interno.

<body> : Contiene el contenido visible de la página web.

 ¡Hola Mundo! : Texto que se mostrará en la página web.

<!-- Añade tu código HTML aquí --> : Un comentario HTML que no se

mostrará en la página web.

8. Editores HTML
Crear un archivo HTML es el primer paso para desarrollar una página web básica.
Para hacerlo, no es necesario un software especializado, aunque es altamente
recomendable utilizar un editor de código para facilitar el proceso de escritura y
evitar errores. Algunas de las ventajas de los editores de código son las
siguientes:

Resaltado de sintaxis: Facilita la identificación de etiquetas, atributos y texto.

Completado automático: Ayuda a escribir código más rápido y con menos

errores.

Gestión de proyectos: Permite organizar archivos y carpetas relacionadas con

el desarrollo web.

Extensiones y plugins: Amplían la funcionalidad con herramientas útiles como

previsualización en vivo, depuración de código y control de versiones.

Algunos de los editores de código HTML más destacados son los siguientes:

Atom.

Notepad++.

SublimeText.

Visual Studio Code.

En este curso usaremos Visual Studio Code (ver tutorial completo de

Visual Studio Code). Es muy importante utilizar Emmet para multiplicar
la velocidad en el formateo de documentos HTML.

9.  Ejercicios propuestos

9.1. Estructura básica de un

documento HTML
Rellena con las palabras que faltan para crear un documento HTML básico:

<!DOCTYPE html>

<html  ="es">


<head>

<meta  ="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

< 

 href="style.css" rel="stylesheet">

<  >Document</

 >


</head>

< >


Hello World!

</ >


</ >


 Comprobar

9.2. Instala Visual Studio Code

y explora sus extensiones y
funcionalidades (para hacer esto
puedes seguir el tutorial de
Visual Studio Code)
Crea un nuevo archivo HTML en Visual Studio Code. Para ello escribe
html:5 (abreviación) y presiona la tecla Enter. Visual Studio Code
automáticamente escribirá la estructura básica de un documento HTML.

Usa la abreviación de Emmet y genera texto «lorem ipsum». Para ello

simplemente escribe lorem en el editor.
 Practica otras abreviaciones de Emmet para conseguir escribir código lo más
rápido posible.

Instala la extensión Live Server. Live server en Visual Studio Code es una
herramienta que nos permite lanzar un servidor de desarrollo local para
previsualizar en el navegador lo que estamos escribiendo en nuestro editor de
código.

¿Qué es Lorem ipsum? Es el texto usado en el borrador de diseño de un

sitio web para comprobar el diseño visualmente antes de insertar el
texto definitivo. En Visual Studio Code al teclear el texto «Lorem» en el
editor aparece un tooltip que te permite agregar un párrafo de
tipo Lorem ipsum de forma automática.

9.3. Explora y crea en CodePen

Explora CodePen, una plataforma online que te permite escribir, experimentar y
compartir código HTML, CSS y JavaScript de forma interactiva. CodePen es ideal
para desarrollar proyectos pequeños, prototipos rápidos y aprender nuevas
técnicas de codificación.

1. Crea tu cuenta: Regístrate en CodePen para empezar a crear y guardar tus

proyectos.

2. Experimenta con ejemplos: Explora los diferentes «pens» (proyectos)

disponibles en CodePen. Encuentra inspiración y observa cómo otros
desarrolladores implementan soluciones creativas utilizando diversas
tecnologías web.

3. Crea tu propio pen: Usa el editor de CodePen para escribir tu código HTML,
CSS y JavaScript. Observa los resultados en tiempo real mientras escribes.

4. Comparte y colabora: Comparte tus pens con otros desarrolladores y recibe

retroalimentación. También puedes colaborar en proyectos compartidos o
participar en desafíos y concursos.

Ver tutorial completo de CodePen

9.4.  Test básico HTML

¿Qué significa HTML?

 HyperText Markup Language

 High Text Modeling Language

 eXtensible Hyper Text Modeling Language

 Comprobar 

9.5. Optimiza tu flujo de

trabajo con abreviaciones Emmet
Las abreviaciones Emmet son una herramienta para aumentar la productividad y
eficiencia en el desarrollo web. Emmet, anteriormente conocido como Zen Coding,
nos permite escribir menos y lograr más al expandir abreviaciones en código
HTML y CSS completos. Después de familiarizarte con las abreviaciones Emmet,
te invitamos a realizar nuestro test de habilidades Emmet para evaluar tu
comprensión y capacidad para aplicar esta técnica en tus proyectos de desarrollo
web.

 Comprueba tu apendizaje
Selecciona la abreviación de Emmet:

<link rel="stylesheet" href="style.css" />

 link<css>

 link:css

 link>css

 link[css]

 Check 

En la siguiente sección estudiaremos la estructura básica de HTML5 y los

elementos semánticos.
← Introducción a los lenguajes de marcado o de Reglas y normas HTML5
marcas →