HTML Meta

By | January 18, 2020

We use the meta tag to indicate the keyword, author, character, etc. of the documents, we write the meta tag in the head section of HTML. Meta tag will not show on the browser. It is used by search engines like browser Google. This is how we declare a meta tag.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML Meta</title>
	<meta charset="UTF-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Defining the Author:

We use meta tag to indicate the author of any website. The name in the meta tag represents the name of the meta tag and the author’s name appears in the content. We cannot use any HTML tag in the content.

Example:-

<head>
	<title>HTML Meta</title>
	<meta name="author" content="Michael">
</head>

Description & Keywords for search Engines:-

Some search engines use meta tags, use the description and keywords present in meta tags in their search engines.

<head>
	<title>HTML Meta</title>
	<meta name="keywords" content="HTML,CSS,javaScript">
	<meta name="description" content="Lorem ipsum dolor sit amet, consectetur.">
</head>

Meta tag viewport is used to correctly display web pages on mobile devices. Without viewport , the web page does not appear properly in mobile devices and even if it does not zoom, we use meta tags to get rid of these problems.

The following two examples are given, one of them is without the viewport meta tag and the other is with the viewport meta tag.

without viewport meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML Meta</title>
</head>
<body>
	<img src="shoes.jpg" alt="shoes">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea officia, aspernatur reiciendis ab minima autem ipsum animi beatae delectus vero.</p>
</body>
</html>

with viewport meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML Meta</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<img src="shoes.jpg" alt="shoes">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea officia, aspernatur reiciendis ab minima autem ipsum animi beatae delectus vero.</p>
</body>
</html>
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *