Skip to Main Content or Page Contents

HTML Meta Tag Tutorial

Tutorial: All about HTML Meta Tags placed in the Head section of a Web page

Results per page:

Match: any search words all search words

This Page's Contents

Page Contents - Meta Tags and Head section contents

 

Meta Tags

author

description

keywords

revisit-after

viewport

Link Tags

text/JavaScript

Other head section entries

<!DOCTYPE HTML>

title tag

Introduction - Meta Tags and Head section contents

The contents of the head section impart information to search engine spiders and robots and to web browsers. Some of this information is also required to make you page validate at The W3C Markup Validation Service.

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="utf-8">

<title>HTML Meta Tags &amp; head content</title>

<meta name="keywords" content="Meta tag,meta,head,keywords,charset,description,title stylesheet,copyright,javascript,">

<meta name="description" content="Tutorial: All about HTML Meta Tags placed in the Head section of a Web page">

<link rel="SHORTCUT ICON" href="http://www.tutorials4u.com/html.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

</script>

<link rel="SHORTCUT ICON" href="favicon.ico">

<style>

/* place css fixes for all versions of IE in this conditional comment */ #sidebar { padding-top: 30px; } #mainContent { zoom: 1; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ </style> <link href="css/style-div2.css" rel="stylesheet">

</head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Required before your page will validate

<meta charset="utf-8">

A best character set for English language pages used in HTML5.

<title>Untitled Document</title>

The first few words of the Title appear in the Web browsers Title bar. This wording is also often used in the short description in Search engine results.

Google usually displays 50 to 60 characters, therefore the maximum length including spaces should be 60 Make sure your title contains 3 or 4 important keywords. The contents of the title can help with good Search Engine ranking.

Many HTML editors will insert the title as Untitled Document - Make sure you change it to something that describes the web page.

<META name="description" content="Again a description of the web page. Can be longer than thedescription given in the Title tag">

The Meta Description tag, provides a descrption of your page. used by search engines. The description can be longer than the description given in the Title tag with a maxium length, incuding spaces of 155 characters

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

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling & sets the viewport to make your website look good on all devices such as mobiles, tablets, lap tops & desktops.

The width=device-width part sets the width of the page to follow the screen-width of the device (which 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.

See Site Promotion for more information on it's use

<META name="keywords" content="List your keywords and keyphrases">

Used to be very important for SEO (Search Engine Optimization) , but now acts as a reminder to the web designer.

<h3 align="left"><a id="revisit-after"></a>&lt;META name=&quot;revisit-after&quot;

See Site Promotion for more information on it's use

<meta name="author" content="John Doe">

Defines the author of a page.

<META name="revisit-after" content="14 days">

Give Search Engines some idea of how often the page is being updated.

<SCRIPT type="text/JavaScript">

If you use Java script then you will require this line in the head section of an HTML5 document.

Earlier versions of HTML require the longer version <SCRIPT type="text/JavaScript" language="JavaScript">. to validate.

<LINK rel="STYLESHEET" href="nameofstylefile.css" type="text/css">

Used when you use an external Style Sheet

<META name="revisit-after"