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.

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

Test

Selecciona la abreviación de Emmet:

En la siguiente sección estudiaremos la estructura básica de HTML5 y los elementos semánticos.