You are currently viewing HTML Meta Tags | Lesson 25 HTML Tutorial
HTML META TAGS IMAGE

HTML Meta Tags | Lesson 25 HTML Tutorial

In this lesson you will learn how deal with HTML Meta Tags like description,keywords, author, http_equiv and charset.

For Visual Explain! watch this video:

HTML Meta Tags Video

The HTML <head> Element

The <head> element is a container for metadata (data describes data) and is placed between the <html> tag and the <body> tag at the top of the web page. HTML metadata is data about the HTML document. Metadata is not displayed it talks with the browser. Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

First HTML <title> Element

The <title> element defines the title of the document, and is required in all HTML/XHTML documents.

The <title> element:

  • Defines a title in the browser tab.
  • Provides a title for the page when it is added to favorites
  • Also it displays a title for the page in search engine results

Example:

 <!DOCTYPE html>
<html>

<head>
  <title>Title</title>
</head>

<body>
The content of the web page......
</body>

</html> 

Second HTML <style> Element

The <style> element is used to define style information for a single HTML page, Also it exist between html and body at the top of web page.

Example:

 <style>
  body {background-color: green;}
  h1 {color: red;}
  p {color: blue;}
</style> 

Third HTML <link> Element

The <link> element is used to link to external style sheets and exist in the top too.

Example:

 <link rel="stylesheet" href="mystyle.css"> 

Fourth HTML <meta> Element

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Metadata is used by browsers (how to display content), by search engines (keywords), and other web services. It helps better ranking in search engines and help easy detection from the web browsers.

Some Example:

Meta Charset Example:

<meta charset="UTF-8">

Charset defines the type of charset used by web page, UTF is the most common.

Meta Description Example:

<meta name="description" content="HTML tutorial">

Description contain some description about the web page so it could help archiving and google result view.

Meta Keywords Example:


<meta name="keywords" content="HTML, technology, tutorial, learn">

Keywords contain some keywords about the web page so it could help archiving and google result view.

Meta Author Example:

<meta name="author" content="Safha Tech">

Author meta tag help in defining the author of the website so it could be more acceptable and more secure by SEO.

Meta http-equiv Example:

<meta http-equiv="refresh" content="30">

Http-equiv helps in defining the amount of refreshing the web content.

Fifth Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user’s visible area of a web page. It varies with the device or screen size, and will be smaller on a mobile phone than on a computer screen. You should include the following <meta> viewport element in all your web pages to make it more responsive.

Viewport Example:

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

Note: The previous code will resize the web page content width to device width so it will be more responsive.

Sexth HTML <script> Element

The <script> element is used to define client-side JavaScripts, it could be defined at the end of the web page.

Example:

 <script>
function myFunction {
  document.getElementById("id1").innerHTML = "Hello Safhatech!";
}
</script> 

Seventh HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a page. So when we change this tag all link tags “<a>” well be change depending in the <base> tag change.

Example:

 <base href="https://www.safhatech.com/images/" target="_blank">

Note: in the previous code all web page links will be opened in new blank tab.


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: www.w3schools.com/

Leave a Reply