Categories
Web development

Viewport

Viewport

The viewport is the visible area of a web page. The viewport can vary with the device and will be smaller on a mobile phone and tablet than on a computer screen.

You can control the viewport, through the <meta> element. Include the following <meta> viewport element in your website to give the browser instructions on how to control the page’s dimensions and scaling:


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

The width=device-width part sets the width of the page to follow the screen-width of the device (that will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Example:

  1. Without the viewport meta tag:
viewport meta tag

2. With the viewport meta tag:

viewport meta tag

Enjoy coding!

Read also:

CSS Responsive Web Design – Introduction

How to create a responsive zig zag layout?

How to create a responsive two-column layout?

Categories
Web development

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.

HTML title tag and meta tag

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!