The <meta> tag provides information (or metadata) about the HTML document.
The <meta> tags should be placed within the head of the HTML document, they are not displayed on the page.
The "Meta" elements are generally used to enable search engines to determine the contents of your web pages and catalog them correctly.
There are many types of meta elements, which are specified by the "name" attribute. Here will be presented a few of them, the most useful meta-tags used for page indexing optimization in search engines.
•
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
- - indicates that the page is an HTML document.
- - specifies the character encoding for a document as being UTF-8.
•
<title>Page title</title>
- While technically this isn't a meta-tag, it is the most important element in the <head> section. The contents of the <title> tag are generally shown as the title in search results (and in the user's browser).
•
<meta name="description" content="A short phrase that describes the content of the page" />
- This tag provides a short description of the page. In some situations this description is used as a part of the snippet shown in the search results.
- The text added in the meta description tag should contains between 70 and 160 characters.
•
<meta name="keywords" content="list of words, separated by, comma" />
- This tag defines keywords for a page. It is indicate to add between 5 and 10 keywords (separated by comma), most relevant for your page, and which are found in the page title.
- Because search engine spammers have abused this tag, it provides very little benefit to your search rankings..
•
<meta name="abstract" content="Short description of page" />
- Gives a short summary of the description. The content for this tag is usually 10 words or less.
•
<meta name="language" content="es" />
- The Meta Language tag is used to declare the language used on the website. The search engines like Google and Yahoo detect the language automatically.
•
<meta name="author" content="Author Name" />
- This Meta tag will reference the name of the person (or company) who developed the curent HTML document.
The words in the <title> tag is better to be found in the "keywords" and "description" meta tags, also in the headings (<h1>, <h2>) of the page.
Here is an example of an HTML document with these meta-tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Web courses HTML CSS PHP-MySQL JavaScript Ajax Flash</title>
<meta name="language" content="en" />
<meta name="description" content="Free online courses and tutorials for web developers: HTML, CSS, PHP-MySQL, JavaScript, Ajax and Flash" />
<meta name="keywords" content="courses, html, css, php, mysql, javascript, ajax, flash" />
<meta name="abstract" content="Free online courses and tutorials for web developers" />
<meta name="author" content="MarPlo" />
</head>
<body>
... Contents that appear in the webpage coursesweb.net ...
</body>
</html>
Meta redirect
The meta-redirect tag (
meta refresh) cause the visitor's browser to load a new web page after a given number of seconds.
<meta http-equiv="refresh" content="4;url=https://coursesweb.net/html/" />
The code above will redirect the visitor to the "
coursesweb.net/html/" page, after 4 seconds.
- Although setting the interval to 0 or a very short time will make the redirect almost undetectable but it is not advised b the 3WC because it can cause problems if the user hits the "Back" button.
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em><p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding positionh3 {
padding: 2px 0.2em;
}Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POSTif(isset($_POST["field"])) {
echo $_POST["field"];
}
