Create the Meta Charset Tag on an HTML5 Web Page
Edited by Grimm, Amanda, Eng
You're watching VisiHow. In this tutorial, we are going to show you how to choose the correct character set, or "charset", for your HTML5 document that meets the most widely applicable standard.
To get started, open Notepad. In our demonstration, we are going to scroll down to the taskbar and click on Notepad, which we have pinned there.
Click and hold on a ".html" file. We have one called "visi.html" that we have been working with in our HTML5 tutorials.
Drag the file over the blank Notepad window.
Release to drop the code in. Now our file is open in Notepad. The charset tag is a meta tag, so that means that it is going to go inside the head section of the document, after the opening head tag, "<head>". The head section of the document is something that browsers look at.
Place the cursor after the opening head tag, and add one carriage return. This creates a new blank line for us to work with. Press the "Enter" or "Return" key to do this.
Press the space bar twice. We are indenting this line of code because it is one piece of code nested within the head section. For more information on formatting HTML5 code, check out our tutorial on how to format HTML5 code for easy reading and editing.
Open the meta tag. Type, "<meta ". Note the space after "meta". Now, meta tags are a bit different, in that they are not actually closed in the way that other tags are closed. All of our code will be added in a string, and then simply closed up with a right-pointing arrow.
Enter in the character set. Character sets are spelled out as "charset". Type "charset" and then an equals sign, "=". Then add a double quotation mark symbol and enter in the most commonly, most widely used character set. This is "utf-8". Close with another double quotation mark symbol, and then close the meta tag with the right-pointing arrow.
Proofread the line. The entire line should read, "<meta charset="utf‐8">". That's it. Meta. Charset. UTF of 8. This tells our web browser that we are using the standard UTF-8 character set. Now, there is a UTF-16, and there are a number of other character sets that may be in use on a page. For example, they may be used if the page is using different languages, or certain types of uncommon characters. However, as a general rule, this is what we would use on every single web page that we make, unless there is a custom reason why we wouldn't.
Click "Save". We could also press "Ctrl" and "S" to do this.
Double-click on the file on the desktop to open it up in a browser.
View the page carefully. We can see that nothing has changed that is visible. This is because, even if we don't specify the character set, it is assumed to be UTF-8. This is also because our meta tag is in the head section, which is only read by the browser, not displayed.
This concludes our tutorial on setting the proper charset or character set for your HTML5 document. If you have additional questions, comments, or suggestions, do please let us know in the section below. Thanks for watching VisiHow. Have a great day.
Video: Create the Meta Charset Tag on an HTML5 Web Page
Recent edits by: Amanda, Grimm