HTML: Meta

Defining Metadata

Metadata will not be displayed on the web page but will be machine parsable, and can be used by browsers, search engines like Google or other web services.

The following section describes the use of meta tags various purposes

Declaring Character Encoding in HTML

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

To set the character encoding inside a CSS document, the @charset at-rule is used

Defining the Author of a Document

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

Keywords and Description of Search Engines

<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tuts">
</head?

Configuring the Viewport for Mobile Devices

Without a viewport meta tag, mobile browsers render the web pages at typical desktop screen widths and then scale it down to fit the mobile screen. As a result, it requires pinch-and-zoom to view the web page properly in mobile devices, which is very inconvenient.

The following demonstration shows two web pages — one with the viewport meta tag and other without the viewport meta tag set. Open these links on mobile devices to see how it works

The viewport meta tag allows you to set the best viewport size and scaling limits for viewing the web pages on mobile devices. A typical meta tag definition will look as follows

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

The width=device-width key-value pair inside the content attribute sets the width of the viewport to the same as the screen width of the device, whereas the initial-scale=1 sets the initial scale or soom lelvel to 100% when the page is first loaded by the browser

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kudzanayi Dzvairo

I write about JavaScript, HTML and CSS things as I learn them. I have other interests too,I just don’t write about them.