HTML5 Meta Tags with Example

HTML5 Meta Tags with Example: The <meta> tags are basically used to structure the metadata of web documents like keywords, description, character encoding, author name, and other metadata. Any meta tag can be used inside the head section of the HTML or XHTML document. The metadata is machine parsable not just simply displaying the content on a web page so it can be used by web browsers.

HTML5 Meta Tags

Let’s see various use of metadata.

Character Encoding in HTML 5

For character encoding in the HTML document, we can use meta tags.

Character Encoding in HTML 5 Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

NOTE: In the CSS document, you may want to set character encoding then use @charset rule.

Author of a Document

To define the author of your web page then use the meta tag. Hence this author may be one person, the company, third party.

Author of a Document Example

<head>
<title>Defining Document's Author</title>
<meta name="author" content="Alexander Howick">
</head>

Keywords and Description for Search Engines

Some of the search engines like to use metadata especially like keywords and descriptions for web pages which might be false. The keywords add extra weightage to the document whereas the description specifies a short summary of the web page.

Example of Keywords and Description for Search Engines

<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tutorials and references
on HTML, CSS, javaScript and more...">
</head>

Viewport Configuration for Mobile Devices

To display web pages correctly on mobile devices we can use the viewport meta tag. In case if we don’t use the viewport meta tag for mobile devices you may get the desktop screen widths version. This doesn’t fit on the mobile screen which you have to zoom for the content on the web page.

The following image will demonstrate the web pages with and without the Viewport meta tag.

HTML5 Meta Tags View Port Demo                                HTML5 Meta Tags 2

To define Viewport meta tag in the HTML document follow the given example

Viewport Configuration for Mobile Devices Example

<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Here the width=device-width is the key-value pair within the content attribute which helps to set the width of content on the web page as within the screen width of the device. The initial-scale=1 is the initial scale or 100% zoom level of the web page when it is loaded first.