HTML • Astro Theme OpenBlog

Qué es HTML

HTML(Lenguaje de Marcado de Hipertexto) es el componente más básico de la Web. Define el significado y la estructura del contenido, aunque generalmente se combina con otras tecnologías para describir la apariencia de una página web con CSS o la funcionalidad con JS\

HTML utiliza markups para etiquetar el contenido lo que le indicará al navegador cómo mostrar texto, imágenes y otras formas de medios como audio y video. Podríamos decir que es como el esqueleto del cuerpo, porque le da la estructura del sitio web, cada sitio que visitamos está construido usando una base en HTML que maneja la estructura y el contenido del sitio.

HTML incluye elementos o etiquetas. Las etiquetas son palabras clave rodeadas por corchetes angulares, como <html>. Algunas etiquetas HTML son: <body>, <header>, <head>, <title>, <footer>, <section>. <article>,<div>, <h1>,<aside>, <details>, <summary> etc.

En este enlace puedes descargar un CheatSheet de HTML HTML CheatSheet Alt text

Anatomía de una etiqueta HTML

En HMTL, la mayoría de los elementos se representan mediante una etiqueta de apertura y una de cierre, en el medio de ambas etiquetas se encuentra el contenido del elemento.

<etiqueta>Contenido</etiqueta>

Alt text

Etiqueta de apertura

Esta etiqueta indica el comienzo de un elemento HTML y su tipo; se escribe entre corchetes angulares.
La siguiente es una etiqueta de apertura de tipo párrafo.

<p></p>

Contenido

Es el texto o los elementos anidados que se encuentran entre las etiquetas de apertura y cierre. Es importante que se destaque que dentro del contenido de una etiqueta, se pueden anidar otras etiquetas.

<p>
	<span>Esto es una etiqueta `span` anidada dentro de un párrafo</span>
</p>

Etiqueta de cierre

Esta etiqueta indica el final de un elemento HTML y su tipo; se escribe entre corchetes angulares, pero también incluye una barra inclinada antes del nombre del elemento. La siguiente es una etiqueta de cierre de tipo párrafo.

</p>

Elementos vacíos

Algunos elementos HTML no tienen contenido y solo tienen una etiqueta de apertura. Estos se denominan elementos vacíos y no tienen una etiqueta de cierre. Por ejemplo, la etiqueta img que se utiliza para mostrar imágenes, podemos notar que no tiene una etiqueta de cierre; sin embargo, al final de la etiqueta de apertura se le agrega un slash / para indicar que es un elemento vacío. Este slash es opcional en HTML, pero es recomendable agregarlo porque en algunas librerías como React es obligatorio su uso y también nos ayuda a mantener un código limpio y legible.

<img src="ruta-de-la-imagen.jpg" alt="Texto alternativo" />

Atributos

Los atributos proporcionan información adicional sobre un elemento, se colocan en la etiqueta de apertura y generalmente constan de un nombre y un valor. Además, las etiquetas pueden tener uno o varios atributos, por ejemplo, la etiqueta img tiene dos atributos que podría decir que son obligatorios, src y alt, el primero para indicar la ruta de la imagen y el segundo para colocar un texto alternativo en caso de que la imagen no se pueda mostrar. El texto alternativo es importante para la Accesibilidad ya que las personas con discapacidad visual pueden usar un lector de pantalla o Screen Reader para navegar por la web y el texto alternativo les ayudará a comprender el contenido de la imagen.\

Existen muchos atributos en HTML, pero estos son algunos de los más comunes:

id: Este atributo proporciona un identificador único a un elemento HTML. Los identificadores son útiles para aplicar estilos específicos a un SOLO elemento. Cuando hablamos de identificadores únicos, nos referimos a que estos identificadores no se pueden repetir en el mismo documento como si lo pueden hacer las clases.
class: Este atributo se utiliza para especificar una o más clases para un elemento HTML, que luego puede ser referenciado por CSS o JS, para aplicar estilos o comportamientos específicos a un grupo de elementos.
style: Este atributo se utiliza para aplicar estilos en línea a un elemento HTML.
title: Este atributo proporciona información adicional sobre un elemento HTML cuando el usuario pasa el cursor sobre el elemento.
href: Este atributo se utiliza para especificar la URL de destino de un enlace, se utiliza en la etiqueta <a>.

Anatomía de un documento HTML

<!doctype html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
		/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>
	<body></body>
</html>

`<!DOCTYPE html>`

En este ejemplo, nuestro documento HTML comienza con la declaración <!DOCTYPE html>. Es una instrucción para el navegador sobre qué versión de HTML está utilizando la página.

HTML ha experimentado varias actualizaciones a lo largo de los años con cada nueva versión, introduciendo cambios y mejoras significativas.

Aquí te proporciono un resumen de las versiones anteriores de HTML:

HTML 2.0 (1995): Esta fue la primera versión estándar de HTML, que introdujo el soporte para formularios y tablas.
HTML 3.2 (1997): En esta versión se agregó soporte para más estilos y scripts.
HTML 4.01 (1999): Esta versión introdujo mejoras en la accesibilidad, así como la capacidad de incorporar hojas de estilo en cascada (CSS) y scripts en el lenguaje de programación JavaScript.
XHTML (2000): XHTML es una variante de HTML que se adhiere más estrictamente a las reglas de XML. No se considera una versión separada de HTML, sino más bien una versión diferente.
HTML5 (2014): Esta es la versión más reciente de HTML. Introdujo una serie de nuevos elementos y atributos que reflejan el uso común de los sitios web modernos. También introdujo el soporte para audio y vídeo sin necesidad de plugins adicionales.

Es importante mencionar que la declaración <!DOCTYPE html> en un archivo HTML indica que se está utilizando HTML5. Después de HTML5, la versión actual es lo que se define como Living Standard o Estándar Vivo, no se le asigna una versión específica, ya que se actualiza y mejora constantemente.

`<html>`

Después de la declaración <!DOCTYPE html>, el siguiente elemento es <html>. Este elemento envuelve todo el contenido de la página, es la raíz de un documento HTML. Todos los demás elementos deben ser descendientes de este elemento <html>. También tiene un atributo lang que se utiliza para especificar el idioma del contenido de la página.

<html lang="es"></html>

Head

<head>
	<meta charset="UTF-8" />
	<meta
		name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
	/>
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>

Es el primer hijo del elemento <html>, contiene los metadatos del documento, como el conjunto de caracteres que se está utilizando, el título de la página, enlaces a hojas de estilo, scripts, etc.

Dentro del elemento <head> podemos encontrar los siguientes elementos:

`<meta />`

<meta charset="UTF-8" />

Los metadatos son datos sobre los datos, es decir, proporcionan información sobre el documento, no se muestran en la página web, pero son importantes para los motores de búsqueda y para la Accesibilidad.

<meta>: Este elemento lo usamos para específicar metadatos.
UTF-8: Es un formato de codificación que incluye todos los caracteres posibles en todos los lenguajes humanos.

`<title>`

<title>Título del Documento</title>

El elemento <title> se utiliza para especificar el título del documento, que se muestra en la pestaña del navegador. También se utiliza para proporcionar un título a la página cuando se agrega a los marcadores o favoritos.

`<link>`

<link rel="stylesheet" href="ruta-del-archivo.css" />

El elemento <link> se utiliza para vincular un documento con una hoja de estilo externa al documento HTML, puede ser a una hoja de estilos en el mismo proyecto o a una hoja de estilos en un directorio diferente.

`<script>`

<script src="ruta-del-archivo.js"></script>

El elemento <script> se utiliza para vincular un documento con un script externo al documento HTML, puede ser a un archivo JS en el mismo proyecto o a un archivo JS en un directorio diferente.

Body

Después del elemento <head>, el segundo hijo del elemento html es <body>. Este elemento contiene todo el contenido que necesitamos mostrar a los usuarios cuando visitan la página web, como texto, imágenes, videos, enlaces, etc.

Todo lo que se coloca dentro del elemento body es lo que se muestra en el navegador. Aquí es donde se encuentra el mayor trabajo de codificación HTML.

Glosario

HTML: Hyper Text Markup Language
CSS: Cascading Style Sheets
JS: JavaScript
DOM: Document Object Model
WHATWG: Web Hypertext Application Technology Working Group
Living Standard: Estándar Vivo