Introducción a HTML

Acceder a una página web: ¿qué sucede realmente?
Cuando visitamos un sitio web, lo que en realidad ocurre es que nuestro navegador solicita un archivo de texto al servidor donde se encuentra alojada esa página. Ese archivo contiene las instrucciones que el navegador interpreta para mostrar el contenido visualmente.

Visualizar el código fuente
Todos los navegadores ofrecen la posibilidad de ver el código fuente de una página. Esta función permite observar el archivo tal y como el navegador lo recibe, aunque normalmente el navegador interpreta ese código para presentarlo con una estructura visual ordenada.

¿Qué es HTML?
HTML, cuyas siglas significan HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje utilizado para estructurar el contenido de una página web. Se basa en el uso de etiquetas que permiten definir y organizar diferentes tipos de información que el navegador debe mostrar.

Funcionamiento del HTML en los navegadores
El navegador interpreta documentos escritos en HTML y los convierte en elementos visibles para el usuario. Para acceder al código HTML de una página puedes:

  • Usar atajos de teclado como Ctrl + U para abrir el código fuente directamente.
  • Usar Ctrl + Shift + I o hacer clic derecho y seleccionar “Inspeccionar”, para abrir herramientas de desarrollo más avanzadas y visuales.

¿Qué son las etiquetas HTML?
El núcleo del lenguaje HTML son sus etiquetas, que permiten definir la función o el significado de cada parte del contenido. Estas etiquetas tienen una estructura específica:

htmlCopiarEditar<nombre-etiqueta>contenido</nombre-etiqueta>

No se puede usar cualquier palabra como etiqueta, ya que HTML tiene un conjunto definido de etiquetas válidas, cada una con un propósito particular. Es fundamental cerrar adecuadamente las etiquetas para que el navegador sepa dónde finaliza cada elemento.

Ejemplo de uso de etiquetas HTML
A continuación se muestra un ejemplo simple usando la etiqueta <strong> que resalta la importancia de una palabra:

htmlCopiarEditar<p>Dentro de este texto, esta <strong>palabra</strong> es más importante que el resto.</p>

En este caso, se utilizan dos etiquetas: <p>, que indica un párrafo, y <strong>, que marca una palabra como destacada. También se observa cómo las etiquetas pueden anidarse, es decir, incluir unas dentro de otras, algo común en HTML.

¿Qué significa semántica en HTML5?
Con HTML5 se busca una mejor estructura semántica del contenido. Esto significa que el código HTML debe centrarse en describir el significado del contenido, mientras que los aspectos visuales deben ser definidos por el CSS.

Separar el contenido de la presentación permite que la información esté mejor organizada, sea más comprensible para los usuarios y también para las máquinas, como los motores de búsqueda.

Ejemplo de mejora semántica
Antes, para resaltar una palabra se usaba la etiqueta <b>:

htmlCopiarEditarHola, quiero resaltar esta <b>palabra</b>.

Sin embargo, esto solo indicaba un cambio visual (negrita). En HTML5, se recomienda usar <strong> para marcar semánticamente la importancia del texto:

htmlCopiarEditarHola, quiero resaltar esta <strong>palabra</strong>.

Esto permite aplicar estilos visuales desde CSS sin comprometer la estructura semántica del contenido.

Importancia de la semántica en la web moderna
Crear documentos HTML bien estructurados y semánticos es crucial, ya que hoy en día no solo los usuarios navegan por las páginas web. También lo hacen programas automatizados, como los bots de los motores de búsqueda (por ejemplo, Googlebot), que analizan el contenido para indexarlo de forma eficiente. Una buena semántica mejora la accesibilidad, el SEO y la interoperabilidad del contenido web.