Documento básico HTML5

16 de junio de 2014
HTML

Pedazo de código (snippet) para el documento básico HTML5, que debes usar en un archivo con extensión .html, tanto para archivos con juegos de caracteres UTF-8 (lo recomendado) como para otros charset.

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.

Este código es bien simple: 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>

Nota: 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>

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

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