Basic HTML5 Document

Let’s look at the basic HTML5 document, with the essential tag structure. These files must have an .html extension and preferably always use the UTF-8 character set. We explain all the details.

In this article we offer you a code segment that has no specific use other than serving as a copy/paste to create a basic HTML5 document. This is what is called a “snippet” in the jargon of code editors, a piece of code that you can paste anywhere and that has a specific utility.

In addition, throughout the article we are going to address a very important issue to avoid possible problems when building web pages, such as the choice of UTF-8 as the character set for HTML documents. We’ll explain why this point is important and how to make sure you always work with UTF-8 in your builds.

The snippet that we will see here is essential: it helps you to create the basic HTML5 document; but it will create an empty document, without any content. To use this piece of code you will create a new file in your favorite editor and paste it as is. Then it is simply to start writing the code of your page. At the end you must save your work with the extension “html” that is, “example.html” or whatever you want to name it.

The truth is that several editors have templates that allow you to create that basic document from the menus of the code editor itself, but just in case it’s not yours or you don’t know how to use it, copy and paste the following snippets:

Snippet for basic document without UTF-8 charset

In this code snippet you don’t declare the “charset”. This means that you do not specify the charset of your file. It’s not the recommendation, but if you don’t know what the character set is, maybe to keep your life simple you can use this preference code.

Linux and Mac systems always use a UTF-8 character set, or at least by default, so you won’t use this snippet, but the one a bit further down. In Windows, at least the one configured in Spanish, the files are generally created with a Latin1 / ISO 8859-1 character set. So if you’re on Windows, unless you’ve configured your editor to work with another charset, this snippet where you don’t specify the charset will do you good.

Snippet for the basic document specifying the UTF-8 charset

The recommendation is to always work in UTF-8, an extended character set that includes a whole series of letters and symbols from various international languages, so your page will not have problems with accents and other “special” characters, eñe, ce cedilla, etc. Also in web development there are a series of operations that are always performed, understanding that the character set being used is UTF-8 (such as AJAX connections), so it is doubly recommended, to get rid of problems, and always use UTF-8.

This snippet will be used by Linux and Mac users, who always work with UTF-8, and by developers on Windows who know how to configure their code editor to specify that the character set is actually UTF-8.

The charset in HTML5 is written with a META tag, but note that this is from HTML5, because before it was specified in a different, much more complex way. It’s beside the point because nobody writes anymore, or shouldn’t, a basic document versions of HTML 4 or earlier.

How to modify the character set of your editor

Each editor has its own mechanics to configure the file’s character set, there are even editors that in the preferences you can indicate the type of charset you prefer to use, so you don’t have to change it in each file you create.

We stress that this step will generally only need to be done by Windows users to use the UTF-8 recommendation. Users of other systems, fortunately, always work with UTF-8.

Here are some typical editors and instructions for converting the file encoding to UTF-8:

Sublime Text: To save the file with another character encoding, go to “File / Save with Encoding / UTF-8 with BOM”.

Komodo Edit: You have the option to set the charset to any charset. You do this from the “Edit / Current File Settings…” menu. In the window that appears you must configure the UTF-8 in the field labeled “Encoding” and you will also check the option “Use Byte Order Mark (BOM) signature”. You accept that window and save the file so that the change of the charset is operative.

Notepad++: In this popular editor you can change the character set from the “Encoding” menu and choose “Encode in UTF8”.

In general, in your editor it should be somewhat similar, it would just be a bit of research. If you can’t find it, you should consult your editor’s help for something like “charset” to see which menu allows it.

If you can do some research it is always recommended to set your editor to work in UTF-8, if it allows you to change the default charset. For example, Komodo Edit allows you to change the file’s charset set specifically for each file type or language you’re working with. It will save you trouble in the future, as it is an unpleasant experience to have files with different character sets in a project, mainly because it is a bit messy and a source of potential problems.

conclusion

We’ve seen the basic HTML 5 document, which differs from the basic document used in earlier versions of the language. Also, we have pointed out how important it is to work with UTF-8 and we have given some notes so that you can configure your preferred editor.

Fortunately for those of you working with MacOS or Linux, all files are always saved with UTF-8. Also, some editors like VSCode already work with UTF-8 by default on all systems, which makes things easier. There are even editors like Brackets that only save files with UTF-8, so if your files used another character encoding you wouldn’t be able to open them with that editor.