HTML Old School

META tag

Word meta determines something what is hidden to our eyes, for example mataphysics.

In html document meta data is information that is sent to our browser but it is not displayed in the browser window.

NAME vs HTTP-EQUIV

There are two types of meta data: name and http-equiv.

<meta name="keywords" content="html,css,php">

<meta http-equiv="content-type" content="text/html; charset=utf-8">

The basic difference is that http-equiv is sent via http header and name is sent as variable=value pair to the browser.

1. NAME

Attribut name must comes in combination with attribute content. Thus the tag creates name=content pair that is sent to the browser as meta information.

<meta name="keywords" content="html,css,php"> <meta name="description" content="Lekcije iz hTML, CSS i PHP-a."> <meta name="author" content="Pero Perić"> <meta name="publisher" content="Perica d.o.o."> <meta name="robots" content="index,follow"> <meta name="googlebot" content="index,follow"> <meta name="slurp" content="index,follow"> <meta name="viewport" content="width=500, initial-scale=1">

Basic meta name attributes:

a) name="keywords" content="word1, word2, some words1,..."

HTML document keywords for easier finding information on web page. Keywords should have 256 chars or 5 to 10 words .

b) name="description" content="Soem description of web page."

Gives the description of the web page. Search engines generally truncate snippets longer than 160 characters. It is best to keep meta descriptions between 150 and 160 characters.

c) name="author" content="author name"

This gives the author name. Usually instead of name we can use Google+ account link. For example:

<meta name="author" content="https://plus.google.com/101242836008623800913/about">

d) name="publisher" content="publisher name"

It is the name of the publisher e.g. the web site owner. It can be a company or private person.

Defines web crawler, robot, spider accessibility to the web page.

More specific we can use:

name="googlebot"
name="slurp"
name="msnbot"

- default is content="all"

- content="none" no index (caching), no follow links

The most common is: <meta name="robots" content="index,follow">

This is new attribute and serves for responsive design.

width=500 - define default width of 500px
height=300 - define default height of 300px
initial-scale=1 - set default zoom to 1 (number from 0.0 to 10.0)
maximum-scale=3 - set max zoom to 1 (number from 0.0 to 10.0)
minimum-scale=1 - set min zoom to 1 (number from 0.0 to 10.0)
user-scalable=yes - 'yes' enable zooming, while 'no' disables zooming

Other meta name elements see at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta .

2. HTTP-EQUIV

There are two types of http-header:

server http header

HTTP/1.1 200 OK Date: Sun, 12 Aug 2001 15:54:22 GMT Server: Apache/1.3.14 (Unix) ApacheJServ/1.1.2 Mod_dtcl 0.6.4 PHP/3.0.18 Last-Modified: Fri, 22 Jun 2001 00:28:46 GMT ETag: "75f87-200-3b32913e" Accept-Ranges: bytes Content-Length: 512 Connection: close Content-Type: text/html

browser http header

Host www.procato.com Connection keep-alive Accept text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36 Referer https://www.google.hr/ Accept-Encoding gzip,deflate,sdch Accept-Language en-US,en;q=0.8,hr;q=0.6

The most common attributes:

1. http-equiv="content-type" content="text/html; charset=windows-1250"

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=windows-1250">

To define charset in HTML 5 simply use:

<meta charset="utf-8">

2. http-equiv="content-language" content="en"

This is HTML 4.01 standard to define web documnet language.

<html lang="en"> -HTML5

<meta http-equiv="content-language" content="hr"> -HTML4.01

3. http-equiv="refresh" content="3;URL=http://www.yahoo.com">

Redirects web page to another URL.

Redirect example: 02refresh.html

Cookie

Browser's cookie can be set with: JavaScript, PHP or HTTP-EQUIV meta tag.

<meta http-equiv="set-cookie" content="var=xyz; expires=21-Feb-2020 14:30:00 GMT; path=/;">

or if we know which is day in the week:

<meta http-equiv="set-cookie" content="var=xyz; expires=Fri, 21-Feb-2020 14:30:00 GMT; path=/;">

Above examples set var=xyz cookie which expires on 21-Feb-2020 .

path=/ defines that we can take cookie from root directory and any other subdirectory.

When we want to set two cookies we must use two meta tags:

<meta http-equiv="set-cookie" content="var1=xyz; expires=Fri, 21-Feb-2020 14:30:00 GMT; path=/;"> <meta http-equiv="set-cookie" content="var2=auto kuća; expires=Fri, 21-Feb-2020 14:30:00 GMT; path=/;">

Set cookie example: 03set-cookie.html

To preview cookie in Chrome browser use:

Settings - Show Advanced Settings - Privacy - Content Settings - All cookies and site data