HTML5: Construyendo la Base de la Web Moderna

¿Qué es HTML5?

HTML5 es el lenguaje estándar utilizado para estructurar y presentar el contenido en la web. Con la evolución constante de la tecnología, HTML5 ha surgido como una versión más potente y versátil que ofrece nuevas etiquetas, elementos y características para desarrollar sitios web modernos y dinámicos.

En este tutorial, aprenderás los fundamentos de HTML5 y te mostraré cómo puedes utilizarlo para estructurar tus páginas web de manera efectiva.

Descargando un Editor de Código

Entorno de Visual Studio Code

Si estás interesado en aprender HTML5 y quieres empezar a escribir y probar tu propio código, necesitarás descargar un editor de código. Un editor de código es una herramienta que te permite escribir y editar texto en formato de código, brindándote un entorno de trabajo amigable para la programación.

Existen varios editores de código disponibles en el mercado, pero aquí mencionaremos dos opciones populares: Visual Studio Code y Sublime Text. Ambos son gratuitos, multiplataforma y ampliamente utilizados por desarrolladores de todo el mundo.

Visual Studio Code

Para descargar Visual Studio Code, dirígete al sitio web oficial de Visual Studio Code en https://code.visualstudio.com.
Haz clic en el botón de descarga para obtener el instalador correspondiente a tu sistema operativo (Windows, macOS o Linux).
Ejecuta el archivo descargado y sigue las instrucciones del instalador para completar la instalación de Visual Studio Code en tu computadora.

Sublime Text

Para descargar Sublime Text, visita el sitio web oficial de Sublime Text en https://www.sublimetext.com.
Busca el enlace de descarga y selecciona la versión adecuada para tu sistema operativo (Windows, macOS o Linux).
Una vez que se complete la descarga, ejecuta el archivo de instalación y sigue las instrucciones para instalar Sublime Text en tu sistema.

Utilizando tu Editor de Código

Una vez que hayas descargado e instalado tu editor de código preferido, estás listo para comenzar a escribir y ejecutar código HTML5. A continuación, te explicaré cómo usar Visual Studio Code o Sublime Text para este propósito.

Visual Studio Code y/o Sublime Text

Abre Visual Studio Code o Sublime Text haciendo doble clic en el icono de la aplicación.
En la parte superior izquierdo del editor, selecciona «Archivo» en la barra de menú y elige «Nuevo archivo» para crear un nuevo archivo en blanco.
Escribe o copia tu código HTML5 en el archivo.
Para guardar el archivo, selecciona «Archivo» en la barra de menú y elige «Guardar» o utiliza el atajo de teclado Ctrl + S (Windows/Linux) o Cmd + S (macOS), la extensión de im archivo HTML5 termina en .html, por ejemplo: miarchivo.html
Para ver el resultado de tu código HTML5, abre un navegador web aparte y arrastra el archivo HTML5 guardado en el editor de Visual Studio Code a la ventana del navegador o ve a la carpeta donde se aloja el archivo creado, dar doble click izquierda y elegir el navegador de preferencia. El navegador mostrará la página web generada a partir del código.

Recuerda que tanto Visual Studio Code como Sublime Text ofrecen muchas funciones adicionales y personalizaciones que puedes explorar para mejorar tu experiencia de codificación. Estos editores también admiten otros lenguajes de programación, lo que te permitirá expandir tus habilidades más allá de HTML5 en el futuro.

Ahora que has descargado un editor de código y conoces los pasos básicos para escribir y ejecutar código HTML5, estás preparado para sumergirte en el fascinante mundo de la creación de páginas web. ¡Diviértete explorando y aprendiendo!

La estructura básica de un documento HTML5

Cada página HTML5 comienza con una estructura básica similar. Aquí tienes un ejemplo de cómo se ve la estructura básica de un documento HTML5:

<!DOCTYPE html>
<html>
<head>
  <title>Título de la página</title>
</head>
<body>
  <!-- Entre las etiqueta Body (cuerpo) va el contenido de la página -->
</body>
</html>

La línea <!DOCTYPE html> define la versión de HTML que se está utilizando.
El elemento <html> es el contenedor principal de todo el contenido de la página.
El elemento <head> contiene información sobre la página, como el título que se muestra en la pestaña del navegador.
El elemento <title> define el título de la página.
El elemento <body> contiene todo el contenido visible de la página.

Etiquetas de encabezado y párrafo

HTML5 proporciona etiquetas específicas para organizar y estructurar el contenido de una página web de manera significativa. Algunas de las etiquetas más utilizadas son los encabezados y los párrafos.

Los encabezados se representan mediante las etiquetas <h1> a <h6>, donde <h1> es el encabezado más importante y <h6> es el menos importante. Por ejemplo:

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>

Nota: ¡Probá modificando el titulo de la pagina y ejecuta los resultados!

Los párrafos se representan utilizando la etiqueta <p>. Por ejemplo:

<p>Este es un párrafo de ejemplo.</p>

Etiquetas de sección y navegación

HTML5 introduce nuevas etiquetas que ayudan a estructurar el contenido de una manera más semántica. Algunas de estas etiquetas son <header>, <nav>, <main> y <footer>.

La etiqueta <header> se utiliza para definir la cabecera o el encabezado de una página o sección. Puede contener elementos como logotipos, menús de navegación y títulos principales.
La etiqueta <nav> se utiliza para definir una sección de navegación que contiene enlaces a otras páginas o secciones de la misma página.
La etiqueta <main> se utiliza para encapsular el contenido principal de una página.
La etiqueta <footer> se utiliza para definir el pie de página de una página o sección.

Aquí tienes un ejemplo de cómo se pueden utilizar estas etiquetas en conjunto:

<!DOCTYPE html>
<html>
<head>
  <title>Título de la página</title>
</head>
<body>
  <header>
    <h1>Nombre del sitio web</h1>
    <nav>
      <a href="#">Inicio</a>
      <a href="#">Acerca</a>
      <a href="#">Contacto</a>
    </nav>
  </header>
  
  <main>
    <h2>Bienvenido a nuestro sitio web</h2>
    <p>Este es el contenido principal de la página.</p>
  </main>
  
  <footer>
    <p>Derechos de autor © 2023. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Etiquetas de lista y enlaces

HTML5 proporciona etiquetas específicas para crear listas ordenadas y no ordenadas, así como enlaces a otras páginas o recursos.

La etiqueta <ul> se utiliza para crear una lista no ordenada (puntos) y la etiqueta <li> se utiliza para cada elemento de la lista. Por ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

La etiqueta <ol> se utiliza para crear una lista ordenada (números) y la etiqueta <li> se utiliza también para cada elemento de la lista. Por ejemplo:

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Para crear enlaces, se utiliza la etiqueta <a>. El atributo href define la URL a la que se debe dirigir el enlace. Por ejemplo:

<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>

Nota: sustituye la URL anterior por una que exista, como por ejemplo https://www.youtube.com/. Pruébalo por ti mismo.

Estos son solo algunos de los fundamentos básicos de HTML5. Con estos conocimientos, podrás empezar a estructurar y organizar tu contenido de manera efectiva en la web.

Recuerda que HTML5 ofrece muchas más etiquetas y características que pueden ayudarte a crear sitios web altamente interactivos. En futuros artículos, profundizaremos en estas características y exploraremos cómo utilizarlas para mejorar la experiencia del usuario.

Espero que este artículo introductorio te haya dado una idea clara de los fundamentos de la estructura web con HTML5. ¡No dudes en practicar y experimentar con el código proporcionado para obtener una mejor comprensión de los conceptos presentados!

¡Continúa aprendiendo y disfrutando de este apasionante mundo!