HTML TUTORIAL

Introduction to HTML Meta Tags and How To Implement Them

HTML META TAGS
Written by ikenna

In this section of HTML tutorial, we will be looking at HTML Meta Tags and how you can easily implement them on a web page. In our previous article, we looked at HTML Phrase Tags, where we analysed the meaning and how to use them. If you haven’t gone through the tutorial, you can do so using the link below

PREVIOUS COURSE: Introduction To HTML Phrase Tags and Its Importance

Introduction to HTML Meta Tags

The HTML meta tag is used to add different properties to the web page. Properties such as keywords, description, name, title etc. The meta tag is is open and doesnt come with a closing tag. The typical syntax of an empty meta tag is shown below

<meta>. Additional information to be added to the web document are added inside of the meta tag.

Adding Meta Tags to Web Documents

Meta tags are added to a HTML web document at the head section, in between the opening and closing (<head> &</head>) head tags. Below are already list of information that can be added to the HTML meta tags

ATTRIBUTEDESCRIPTION
NAMEThis is used to specify property name
CONTENTThis is used to specify property value
SCHEMEThis is used to specify a scheme
http-equivThis is used for http response

SPECIFYING KEYWORDS

HTML meta tags can be used to specify keywords to be used at the head section of a web page. Keywords are search terms a particular web page is built to rank for. The keywords added inside the meta tags wont be visible to the web page visitors and can only be found at the HTML section of the web document. A typical example of how keywords are implemented on a web page is 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="keywords" content="bad, best, rough, platform" >
        <title>Document</title>
</head>
<body>
        
</body>
</html>

Document Description

The web page description are also added to the meta tag. This helps us inform the web browser and site engine on what a web page is all about. 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 Learning " >
        <title>HTML Document</title>
</head>
<body>
        
</body>
</html>

Web Page redirection

Another importance of the HTML meta tag is for the redirection of web pages. A web page redirection structure, can be added to the head section of the web page to inform the browser about redirecting the web page to a different 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 course " >
        <meta http-equiv="refresh" content="5; url=https://themustfeed.com/" /> 
        <title>Document</title>
</head>
<body>
        
</body>
</html>

The above code, tells the web browser to redirects the web page to another web page in 5 seconds. If you plan on redirecting the web page immediately, you can implement that by removing the timing.

Conclusion

The HTML meta tag is a very important aspect of web development. we hope that with the help of this tutorial, you will be able to structure an HTML meta tag properly.

NEXT TUTORIAL: HTML COMMENTS

About the author

ikenna

Leave a Comment