Lenguaje de marcas HTML

En la unidad de diseño de interfaces podemos ver los componentes y elementos principales necesarios en la planificación de interfaces web. En este punto, veremos el lenguaje de marcado que emplearemos para la creación o inserción de todos esos elementos.
1. HTML
HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Proporciona la estructura y el contenido de una página web, definiendo los elementos y su diseño. HTML utiliza etiquetas para marcar diferentes partes del contenido, como encabezados, párrafos, enlaces, imágenes, tablas, formularios, entre otros.
Estas etiquetas permiten a los navegadores web interpretar y renderizar correctamente el contenido de la página. HTML es fundamental en el desarrollo web y es la base para la creación de sitios web interactivos y accesibles.
1.1 ¿Qué es un lenguaje de marcas?
El lenguaje de marcas o lenguaje de marcado es un tipo de lenguaje que no permite la implementación de algoritmos y no dispone de funciones aritméticas ni de variables. En este lenguaje se combina el texto con etiquetas que contienen información sobre la estructura o presentación del texto. Algunos ejemplos de este lenguaje son HTML, XML o RDF.
HTML: HyperText Markup Language
XML: eXtensible Markup Language
RDF: Resource Description Framework
Concretamente HTML es el lenguaje de marcado utilizado para la creación de la estructura de las páginas web. Básicamente, se trata de un conjunto de etiquetas que especifican los textos, las líneas, las imágenes, los enlaces o hipervínculos y otros elementos que pueda contener un sitio web.
El lenguaje HTML es un estándar reconocido en todo el mundo y sus normas están definidas en la página web del organismo W3C (World Wide Web Consortium) y, desde el año 2004, en la página oficial del grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group).
1.2. Breve historia HTML
HTML fue desarrollado por Tim Berners-Lee en 1990 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 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 siguiente vídeo puedes conocer de forma breve la historia de HTML.
1.3. Editores HTML
A continuación se muestran los editores de texto más utilizados actualmente
- Atom.
- Notepad++.
- SublimeText.
- Visual Studio Code.
En este curso usaremos Visual Studio Code. Es muy importante utilizar Emmet para multiplicar la velocidad en el formateo de documentos HTML.
Ejercicio propuesto
Instala Visual Studio Code y haz los siguientes ejercicios.
- Crea un nuevo archivo HTML en Visual Studio Code. Para ello escribe
html:5
(abreviación de Emmet) 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.
- Aprende a usar Codepen (te permite construir proyectos de desarrollo web en línea y ver muchos ejemplos).
1.4. 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.
<p>Párrafo</p>
1.5. 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.<area>
: Área de un mapa de imagen.<base>
: URL base para enlaces relativos.
Estas etiquetas se utilizan para insertar elementos específicos en el documento HTML y no requieren una etiqueta de cierre separada.
1.6. 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 |
<!DOCTYPE html> | Indica que el documento está bajo el estándar de HTML5. |
<html> | Representa la raíz de un documento HTML y sirve como contenedor para los demás elementos HTML, como <head> y <body> . El atributo lang especifica el idioma del documento, lo que ayuda con la accesibilidad y el SEO. |
<head> | En su interior se incluye la colección de metadatos sobre el documento, los enlaces a scripts y hojas de estilo. |
<title> | Representa el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página. |
<link> | Enlaza documentos externos, por ejemplo CSS. |
<meta> | Define los metadatos que no pueden ser definidos usando otro elemento HTML. |
<style> | Usada para escribir CSS interno. |
<script> | Define un script interno o un enlace hacia un script externo de JavaScript. |
<body> | Recoge todo el contenido que puede ver un usuario de un documento HTML. Sólo puede existir un elemento <body> en el documento. |
1.7. Comentarios
Los comentarios se escriben entre los caracteres que se muestran en el siguiente ejemplo:
<!-- Esto es un comentario dentro de un documento HTML --> <!-- /$$ /$$ /$$$$$$$$ /$$ /$$ /$$ | $$ | $$|__ $$__/| $$$ /$$$| $$ | $$ | $$ | $$ | $$$$ /$$$$| $$ | $$$$$$$$ | $$ | $$ $$/$$ $$| $$ | $$__ $$ | $$ | $$ $$$| $$| $$ | $$ | $$ | $$ | $$\ $ | $$| $$ | $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$ |__/ |__/ |__/ |__/ |__/|________/ --> <!--¿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 -->
Ejemplo
Ejemplo de código:
<!DOCTYPE html> <html lang="es"> <head> <title>Título de la WEB</title> <meta charset="UTF-8"> <meta name="title" content="Título de la WEB"> <meta name="description" content="Descripción de la WEB"> <link href="estilos.css" rel="stylesheet"> <style> header{background-color:yellow;} /* Código CSS */ </style> <script src="script.js"></script> <script type="text/javascript"> /* Código JS */ </script> </head> <body> ¡Hola Mundo! <!-- Añade tu código HTML aquí --> </body> </html>
Test
¿Qué significa HTML?
Selecciona los lenguajes de marcas o lenguajes de marcado:
Selecciona 2 respuestas
¿Qué es el W3C?
Test
Selecciona la abreviación de Emmet:
En la siguiente sección estudiaremos la estructura básica de HTML5 y los elementos semánticos.