fbpx
April 2, 2020
html meta tags

Tutorial #7 | Understanding the HTML Meta Tags and The Usage

Hello on this seventh tutorial on HTML we will be handling HTML Meta Tags which are very important during web development and can also be useful during site engine optimization.

READ PREVIOUS TUTORIAL ON: Tutorial #6 | Understanding the HTML Phrase Tags and The Usage

What are HTML Meta Tags ?

HTML Meta Tags are elements used to add further information to the web document.   Information such as name, title, keywords, description can be added to the web document using HTML Meta tags (<meta>). The meta tag is an empty element which does not carry a closing tag but accepts information inside the opening tag. Further study of this tutorial will expose you to how you can easily place more information between the HTML Meta tags.

How To Add Meta Tags To A web Document

Meta tags can be added to a web document by placing it in between the head section (<head> & </head>) of the web document. Some information that can be added to the web document using the HTML Meta tag include:

ATTRIBUTE DESCRIPTION
NAME For name property such as author name, keywords etc.
CONTENT Can be used to specify a property value
DESCRIPTION  
SCHEME Specifies a scheme to interpret the property value
http-equiv Used for http response such as refresh, redirect etc.

KEYWORDS SPECIFICATION

HTML Meta tags can be used to specify the keywords related to a web documents. Keywords are search queries which are related to a particular topic and document. They are useful during site engine optimization. Adding a keyword structure to your Meta tag won’t be visible on the web browser page but will be read and understood by site engines such as Google.  Example of adding keywords to a web document is showing below

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="keywords" content="boy, girl, html, windows" >
        <title>Document</title>
</head>
<body>
        
</body>
</html>

DOCUMENT DESCRIPTION

Meta tags can also be used to describe the content of a web page to the web browser and site engine. With the Meta tag description you can easily tell the web browser and site engine what a page is all about. Example as shown below

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <title>Document</title>
</head>
<body>
        
</body>
</html>

WEB PAGE REDIRECTION

A web page redirection structure can be added to the Meta of a web page to tell the web browser where to redirect the web page to after a user visits the web page. The meta structure to use for this is

<meta http-equiv="refresh" content=" time in seconds; url=https://siteurl" /> 

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <meta http-equiv="refresh" content="5; url=https://www.develoferd.com" /> 
        <title>Document</title>
</head>
<body>
        
</body>
</html>

This redirects the web page to develoferd.com after 5 seconds. if you intend redirecting the web page immediately you can do that by eliminating the timing as shown below

<meta http-equiv="refresh" content="url=https://siteurl" /> 

DOCUMENT REFRESHING

A document refreshing Meta structure is similar to that of the web page redirection structure but without the addition of a URL component. This tells the web page when to refresh automatically.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <meta http-equiv="refresh" content="5" /> 
        <title>Document</title>
</head>
<body>
        
</body>
</html>

This refreshes the page after 5 seconds.

Conclusion

Now you understand the basics of HTML Meta Tags and you are really doing great. Lets move on to the next tutorial on   HTML COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *