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.


Steps

  1. 1
    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.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Click and hold on a ".html" file. We have one called "visi.html" that we have been working with in our HTML5 tutorials.
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Drag the file over the blank Notepad window.
    Was this step helpful? Yes | No| I need help
  4. 4
    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.
    Was this step helpful? Yes | No| I need help
  5. 5
    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.
    Was this step helpful? Yes | No| I need help
  6. 6
    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.
    Was this step helpful? Yes | No| I need help
  7. 7
    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.
    Was this step helpful? Yes | No| I need help
  8. 8
    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.
    Was this step helpful? Yes | No| I need help
  9. 9
    Proofread the line. The entire line should read, "<meta charset="utf&dash;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.
    Was this step helpful? Yes | No| I need help
  10. 10
    Click "File".
    Was this step helpful? Yes | No| I need help
  11. 11
    Click "Save". We could also press "Ctrl" and "S" to do this.
    Was this step helpful? Yes | No| I need help
  12. 12
    Double-click on the file on the desktop to open it up in a browser.
    Was this step helpful? Yes | No| I need help
  13. 13
    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.
    Was this step helpful? Yes | No| I need help
  14. 14
    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.
    Was this step helpful? Yes | No| I need help

Video: Create the Meta Charset Tag on an HTML5 Web Page

If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

User Reviews

There is no user reviews.

Article Info

Categories : Software

Recent edits by: Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 366 times.

Did this article help you?
 
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No