HTML title & meta tags

The HTML <title> tag and <meta> tag are bits of HTML code in the header of a website. They help search engines to understand the content on a web page.

The HTML <title> tag and <meta> tag always go inside the <head> element.

HTML <title> tag

The HTML <title> tag specifies the title of the document. The title of the document can be text-only. It is displayed in the browser’s title bar/ or in the page tab.

Note: The HTML <title> tag is required in all HTML documents and also you can not have more than one <title> element in an HTML document.

Example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML title tag</title>
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>
</html>

Output:

HTML title tag

This is a heading.

This is a paragraph.

HTML meta tag

The HTML <meta> tag specifies metadata (information about data) about an HTML document.

The metadata is used by browsers (how to display content or reload the page), search engines, and other web services.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

Attributes:

charset (value- charset_set) – defines the character encoding for the HTML document (UTF-8).

Syntax:

<meta charset="character_set">

Example:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>

</html>

This is a heading.

This is a paragraph.

content (value- text) – defines the value associated with the http-equiv or name attribute.

Syntax:

<meta content="text">

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
</head>
<body>

</body>
</html>

http-equiv (value- content-security-policy/ content-type/ default-style/ refresh) – provides an HTTP header for the information/value of the content attribute

Syntax:

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

Example:

Refresh document every 45 seconds:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="45">
</head>
<body>

<h4>This is aheading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

name (value- application-name/ author/ description/ generator/ keywords/ viewport) – defines a name for the metadata.

Syntax:

<meta name="value">

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h4>This is a heading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Attribute values:

application-name – defines the name of the Web application that the page represents.

author – defines the name of the author of the document.

 <meta name="author" content="Web Developer">

description – defines a description of the page.

 <meta name="description" content="Web development">

generator – defines one of the software packages used to generate the document.

keywords – define a comma-separated list of keywords.

viewport – controls the viewport (the user’s visible area of a web page).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport varies with the device (will be smaller on a mobile phone than on a computer screen).

An HTML viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

Enjoy coding!

This is a heading.

This is a heading.

Share this: