22.HTML Head and Meta Elements

HTML Head and Meta Elements

1.Head Element
2.Meta Element

Head Element

the head element contains general inforamtion, also called meta information, anout a document
meta means "information about". you can say that meta-data means information about data or meta information means information about information
The head element includes important information such as the document's title, style instruction, and more

what's inside head element

<base>
<title>
<meta>
<link>
<style>
<script>

the element inside the <head> element are not intended to be displayed by a browser

<head>
<p>This is some text</p>
</head>

display the text because it is inside a <p> element
hide the text because it is inside a <head> element

if youput an HTML element like <h1> or<p> inside head element like this, most browsers will display it, even it is illegal.

title Tag

the documents title information inside a head element is not displayed in the browser window, but is used for indexing and cataloging.

<html>
<head>
<title> the document title is hidden</title>
</head>
<body>
<p>This text is displayed</p>
</body>
</html>

base tag

use <base> tag to let all the links on a page open in a new window

<html>
<head>
<base target="_blank">
</head>

<body>
<p>
<a href="http://www.w3schools.com" target="_blank">This link</a>
will load in a new window because the target attribute is set to "_blank".
</p>

<p>
<a href="http://www.w3schools.com">This link</a>
will also load in a new window even without a target attribute
</p>

</body>
</html>

TAG Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
<!DOCTYPE> Defines the document type and tells the browser which version of the markup language the page is written in.
this tag goes before the <html> start tag.

Meta Element

the purpose of the meta element is to provide meta-information about the document.
most often the meta element is used to provide information that is relevent to browsers or search engines, like describing the content of your document.

<html>
<head>
<meta name="author" content="Jan Egil Refsnes">
<meta name="revised" content="Michael Woodward, 3/14/2010">
<meta name="generator" content="Microsoft FrontPage 5.0">
</head>
</html>

Keywords for search engines

Information inside a meta element can also describe the document's keywords, Which are used by search engines to find your page when a user conduct's a search on the keyword.

<html>
<head>
<meta name="description" content="HTML examples">
<meta name="keywords" content="HTML,DHTML,CSS,XML,JavaScript,VBScript">
</head>

<body>
<p>
the meta attributes of this document describe the document and it's keywords.
</p>
</body>
</html>

name and content attributes is to describe the content of a page

<meta name="description" content="Free web tutorials on HTML,CSS,XML, and SML"/>
<meta name="keywords" content="HTML,DHTML,CSS,XML,JavaScript"/>

name and content attributes of the meta tag to index your pages
however,because too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher search ranking, some search engines have stopped using them entirely.

Unknown Meta Attributes

<meta name="security" content="low"/>

Redirect a user

<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.w3schools.com">
</head>
<body>
<p>
Sorry! we have moved! The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a>
</p>
<p>
you will be redirected to the new address in five seconds.
</p>
<p>
If you see this message for more than 5 seconds, plese click on the link above!
</p>
</body>
</html>

Note:
The w3 Consortium states that "some user agents support the use of META to refresh the  current page after a specified number of seconds, with the option of replacing it by a different URL.
Authors should not use this technique to forward users to different pages, as this makes the page inacceceble to some users.
Instead, automatic page forwarding should be done using server-side redirects."

No comments:

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams