What is Meta tag in HTML and what does <meta charset="utf-8"> do?

By -

1. Introduction

What is Metadata?

        Metadata is data that describes data. It can be data about HTML, such as author, and import keywords that describe the document. The metadata can be added to an HTML document using the <meta> element. There are a lot of different types of elements that can be added to your HTML document. Out of these <meta charset="utf-8"> is also one type.



Where should we place <meta> tag inside HTML document?

     The <meta> must be placed inside the <head> tag. The job of the HTML head tag is to contain metadata about the document. The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS, links to custom favicons, and other metadata.

2. What does <meta charset="utf-8"> do?

This element simply specifies the document's character encoding - the character set that document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means your webpage will be able to handle displaying any language. therefore a good idea to set this on every web page you create.

for example, your page could handle English and Japanese just fine.

If you set your character encoding to ISO-8859-1 i.e Latin alphabet, your page rendering may appear all messed up:

Note: Some browsers (e.g Chrome) automatically fix incorrect encodings, so you may not see this problem in chrome. But you should always set encoding of utf-8 on your page, to avoid any potential problems in other browsers.


More Examples of types:

for example if you want to add an author and description, you can try the below meta
<meta name="author" content="Sreenath Ulasala">
This speicifies, the metadata is about author and author's name is "Sreenath Ulasala". Here name specifies the type of meata element it is, what type of information it contains and the content specifies the actual meta content.

one more example.. If you want to have a description about the page, then you can use
<meta name="description" content="lorea ipsum lorea ipsum">
This types of metadta that specifying a description, that includes keyword relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO)

3. Conclusion

    In this tutorial, we have seen essentials of <meta> tag. If you want to learn more about metadata, go through
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML.

The best source to know everything about metadata. Here, You can find various metadata types and also about proprietary metadatas from Facebook and twitter.

Comments

Post a Comment