> Manuales > Manual del lenguaje de marcación de HTML5

Veamos el documento básico HTML5, con la estructura esencial de etiquetas. Este archivos debe tener extensión .html y de preferencia usar siempre el juego de caracteres UTF-8. Te explicamos todos los detalles.

Documento básico HTML5

En este artículo te ofrecemos un segmento de código que no tiene más utilidad específica que servirte como un copia/pega para crear un documento básico HTML5. Esto es lo que se llama "snippet" en la jerga de los editores de código, un trozo de código que puedes pegar en cualquier sitio y que tiene una utilidad determinada.

Además, a lo largo del artículo vamos a abordar un tema de suma importancia para evitar posibles problemas al construir páginas web, como es la elección de UTF-8 como juego de caracteres para los documentos HTML. Explicaremos por qué este punto es importante y cómo asegurarte de trabajar siempre con UTF-8 en tus desarrollos.

El snippet que veremos aquí es esencial: te sirve para crear el documento básico del HTML5; pero te creará un documento vacío, sin contenido alguno. Para usar este pedazo de código crearás un archivo nuevo en tu editor favorito y lo pegarás tal cual. Luego simplemente es ponerse a escribir el código de tu página. Al final debes guardar tu trabajo con extensión "html" o sea, "ejemplo.html" o como lo desees nombrar.

Lo cierto es que varios editores tienen plantillas que te permiten crear ese documento básico desde los menús del propio editor de código, pero por si acaso no es el tuyo o no lo sabes usar, copia y pega los siguientes snippets:

Snippet para el documento básico sin el charset UTF-8

En este extracto de código no declaras el "charset". Esto quiere decir que no especificas el juego de caracteres de tu archivo. No es la recomendación, pero si no sabes qué es eso del juego de caracteres, quizás para no complicarte la vida puedas usar este código de preferencia.

<!DOCTYPE html>

<html>
    <head>
        <title>titulo de la página</title>
    </head>
    <body>
    
    </body>
</html>

Los sistemas Linux y Mac usan siempre un juego de caracteres UTF-8, o al menos de manera predeterminada, por lo que no usarás este snippet, sino el que hay un poco más abajo. En Windows, al menos el configurado en español, generalmente se crean los archivos con un juego de caracteres Latin1 / ISO 8859-1. Por tanto, si estás en Windows, a no ser que hayas configurado tu editor para trabajar con otro juego de caracteres, te vendrá bien este snippet en el que no especificas el charset.

Snippet para el documento básico especificando el charset UTF-8

La recomendación es trabajar siempre en UTF-8, un juego de caracteres extendido que recoge toda una serie de letras y símbolos de varios idiomas internacionales, así tu página no tendrá problemas con los acentos y otros caracteres "especiales", eñe, ce cedilla, etc. También en el desarrollo web hay una serie de operaciones que se realizan siempre, entendiendo que el juego de caracteres que se está usando es UTF-8 (como por ejemplo las conexiones AJAX), por lo que es doblemente recomendado, para quitarte problemas, y usar siempre UTF-8.

Este snippet lo usarán los usuarios de Linux y Mac, que siempre trabajan con UTF-8 y aquellos desarrolladores en Windows que sepan configurar su editor de código para especificar que el juego de caracteres sea realmente UTF-8.

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8">
        <title>titulo de la página</title>
    </head>
    
    <body>
    
    </body>
</html>
El charset en HTML5 se escribe con una etiqueta META, pero ten en cuenta que esto es desde HTML5, porque antes se especificaba de una manera distinta, bastante más compleja. No viene al caso porque ya nadie escribe, o no debería un documento básico versiones de HTML 4 o anteriores.

Cómo modificar el juego de caracteres de tu editor

Cada editor tiene su propia mecánica para configurar el juego de caracteres del archivo, incluso hay editores que en las preferencias puedes indicar el tipo de charset que prefieres usar, para no tener que cambiarlo en cada archivo que vas creando.

Insistimos que este paso generalmente lo tendrán que hacer solo los usuarios de Windows para usar la recomendación UTF-8. Los usuarios de los demás sistemas, afortunadamente, trabajan siempre con UTF-8.

A continuación tienes algunos editores típicos y las instrucciones para pasar la codificación del archivo a UTF-8:

Sublime Text: Para guardar el archivo con otra codificación de caracteres vas a "File / Save with Encoding / UTF-8 with BOM".

Komodo Edit: Tienes la opción de configurar el juego de caracteres para cualquier charset. Esto lo haces desde el menú "Edit / Current File Setings…". En la ventana que te aparece deberás configurar el UTF-8 en el campo etiquetado como "Encoding" y además marcarás la opción "Use Byte Order Mark (BOM) signature". Aceptas esa ventana y guardas el fichero para que el cambio del charset esté operativo.

Notepad++: En este popular editor lo consigues cambiar el juego de caracteres desde el menú "Codificación" y escoges "Codificar en UTF8".

En general, en tu editor debe de ser de alguna manera similar, sólo sería investigar un poco. Si no la encuentras tendrías que consultar en la ayuda de tu editor por algo como "charset" para ver cuál es el menú que te lo permite.

Si puedes investigar un poco siempre es recomendable configurar tu editor para trabajar en UTF-8, si es que permite cambiar el juego de caracteres predeterminado. Por ejemplo, Komodo Edit te permite cambiar el juego de charset del archivo de manera específica para cada tipo de archivo o lenguaje que estés trabajando. Te ahorrará problemas en el futuro, ya que es una experiencia desagradable tener en un proyecto archivos con distintos juegos de caracteres, principalmente porque es un poco lío y fuente de posibles problemas.

Conclusión

Hemos conocido el documento básico del HTML 5, que difiere del documento básico que se usaba en versiones anteriores del lenguaje. Además, hemso señalado lo importante que es trabajar con UTF-8 y hemos dado algunas notas para que puedas configurar tu editor preferido.

Afortunadamente para los que trabajan con MacOS o Linux, todos los archivos se guardan siempre con UTF-8. Además, alugunos editores como VSCode ya trabajan de forma predeterminada con UTF-8 en todos los sistemas, lo que facilita las cosas. Incluso hay editores como Brackets que solamente guardan los archivos con UTF-8, por lo que si tus ficheros usasen otra codificación de caracteres no los podrías abrir con ese editor.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual