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.
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>
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>
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.
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...