Crear un documento HTML5 desde cero es la tarea esencial que explico cuando comienzo a dictar una capacitación de este tema. Lo mejor es que este proceso es independiente de la plataforma o del editor que utilicemos. En este artículo, te mostraré cómo crear un documento HTML5 básico utilizando cualquier editor de texto, ya sea Dreamweaver 6, Brackets, o Visual Studio Code.
Paso 1: Abrir el editor de código
Antes de empezar, abre tu editor de código preferido. Todos los editores que mencionamos — Dreamweaver, Brackets o Visual Studio Code — son compatibles con HTML5, pero también podrías utilizar cualquier otro editor que soporte archivos de texto, como Notepad++ o Sublime Text.
En mi carrera como desarrollador he usado todos los mencionados programas como editores de código. Actualmente estoy trabajando con Visual Studio Code.
A continuación describo las variantes de como comenzar un archivo HTML con cada uno de ellos:
- Dreamweaver 6: Si estás usando Dreamweaver, selecciona la opción «Archivo nuevo», elige «HTML» como tipo de archivo y asegúrate de que esté configurado para HTML5.
- Brackets: Abre un nuevo archivo y guarda el archivo con la extensión .html.
- Visual Studio Code: Crea un archivo nuevo y guárdalo como index.html o cualquier nombre que desees con la extensión .html.
Paso 2: Crear el esqueleto básico de un documento HTML5
Cada página web necesita una estructura básica para ser válida y funcionar correctamente en los navegadores. Vamos a comenzar con el código básico para un archivo HTML5. Aquí está el esqueleto mínimo que necesitas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El título del Mundo</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Este es mi primer documento HTML5 creado desde cero.</p>
</body>
</html>Explicación del código
1. <!DOCTYPE html>
Esta es la declaración del tipo de documento. Le dice al navegador que el documento está escrito en HTML5. Es obligatorio y siempre debe estar en la primera línea de tu archivo HTML.
2. <html lang="es">
Esta etiqueta abre el elemento principal de la página, donde todo el contenido HTML estará contenido. El atributo lang="es" indica que el idioma principal del documento es español, lo que puede ayudar a los motores de búsqueda y a los lectores de pantalla.
3. <head>
Dentro del elemento <head>, colocamos metadatos sobre la página, como el título y la codificación de caracteres. Estos no se muestran directamente en la página, pero son esenciales para la funcionalidad y la accesibilidad.
4. <meta charset="UTF-8">
Esta etiqueta especifica la codificación de caracteres utilizada en el documento, y UTF-8 es la codificación más común y recomendada para los documentos HTML. Permite que los caracteres especiales (como las tildes o los símbolos) se representen correctamente.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta etiqueta es especialmente importante para el diseño web responsive. Le indica al navegador cómo escalar el contenido para adaptarse al ancho del dispositivo. Con width=device-width, el ancho de la página coincidirá con el ancho de la pantalla del dispositivo. initial-scale=1.0 asegura que la página no esté ampliada por defecto.
6. <title>Mi primer documento HTML5</title>
El título de la página, que aparecerá en la pestaña del navegador. Este título es importante para SEO y accesibilidad.
7. <body>
El contenido visible de tu página web irá dentro del elemento <body>. Es donde colocarás textos, imágenes, botones, formularios y cualquier otro elemento HTML que los usuarios puedan ver e interactuar.
8. <h1>¡Hola, mundo!</h1>
El encabezado principal (h1) es ideal para títulos y es esencial para la jerarquía de contenido. En este ejemplo, estamos usando un clásico «¡Hola, mundo!» para demostrar cómo funciona.
9. <p>Este es mi primer documento HTML5 creado desde cero.</p>
Un párrafo de texto (<p>) es donde puedes escribir contenido estándar. Este es uno de los elementos más utilizados en el cuerpo de cualquier página web.
Estructura general
La estructura de un documento HTML5 siempre seguirá un patrón similar al siguiente:
- DOCTYPE: Para especificar el estándar HTML5.
- HTML: El contenedor principal del documento.
- HEAD: Información y metadatos.
- BODY: Contenido visible en la página.
Paso 3: Guardar y visualizar el documento
Una vez que hayas escrito tu código HTML básico, guarda el archivo con la extensión .html. Por ejemplo, guárdalo como index.html.
Para visualizar el archivo, abre el archivo HTML en cualquier navegador (Chrome, Firefox, Safari, etc.) y deberías ver tu página con el título en la pestaña y el texto «¡Hola, mundo!» en el cuerpo de la página.
Conclusión
Crear un documento HTML5 desde cero es el primer paso en cualquier proyecto web. Al comprender la estructura básica de HTML5 y cómo funciona cada parte, podrás construir desde simples páginas web hasta sitios más complejos. Lo mejor de HTML5 es su simplicidad y compatibilidad con todos los navegadores modernos, lo que lo convierte en la opción estándar para el desarrollo web.
Ya sea que estés utilizando Dreamweaver 6, Brackets, o Visual Studio Code, puedes seguir estos mismos pasos para crear tu propio documento HTML5 y empezar a desarrollar sitios web de manera efectiva.