डाउनलोड पी.डी.एफ. ई-बुक्स
HTML - HTML Meta tag

जिनको पूरी तरह से HTML सिखने चाह हो उसे meta tag सिखना अनिवार्य होता है, क्योंकि ये browser और search engines को कुछ महत्वपूर्ण information provide करता है |

<meta> tag ये <head> tag के अंतर्गत होता है और meta tag ये webpage पर display नहीं होता है |

हम निचे दिए हुए meta tag को सीखेंगे |

<head>
<meta name = "keywords" content = "">
<meta name = "description" content = "">
<meta name = "author" content = "">
<meta name = "viewport" content = "">
<meta charset="">
<meta http-equiv="" content="">
</head>

 

What is Metadata ?

Metadata tag ये HTML webpage की कुछ मुख्य information रखता है | meta में कुछ मुख्य information; programmer द्वारा दी जाती है | इन meta tags की जगह webpage के शुरुआत के head tag के अन्दर होती है |

Single webpage पर एक या एक से ज्यादा भी meta tags इस्तेमाल किये जाते है | ये tags; webpage को control करने के लिए भी इस्तेमाल किये जाते है |

meta tags में keywords, description, author name और viewport का इस्तेमाल आमतौर पर किया जाता है | meta tags का इस्तेमाल Browser और search engine द्वारा किया जाता है |

Meta tag and its attributes

Regular Meta tags

कुछ meta tags को name और value के जोड़ियों में लिखा जाता है | जैसे कि,

<meta name = "keywords" content = "">
<meta name = "description" content = "">
<meta name = "author" content = "">
<meta name = "viewport" content = "">

Example 1 :

यहाँ पर search engines के लिए keywords दिए जाते है, लेकिन 2009 से Google; keywords का इस्तेमाल ranking के लिए नहीं करता है |

<meta name = "keywords" content = "seo,fiteness,web development,health">
Example 2 :

यहाँ पर web page के लिए description दिया जाता है |

<meta name = "description" content = "Get free information about seo, fitness, web development and health">
meta description

Example 3 :

यहाँ पर web page के author का नाम दिया जाता है |

<meta name = "author" content = "UD">
Example 4 :

यहाँ पर दिए हुए meta tag से web page सभी devices पर बढ़िया दिखता है |

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

Why use meta 'viewport' ?

meta के viewport से webpage के layout को control किया जाता है | responsive webpages के लिए viewport का इस्तेमाल किया जाता है |

- some parts of meta viewport

width = device-width :- यहाँ पर screen के width के हिसाब से webpages के content को screen पर adjust किया जाता है |

initial-scale = 1.0 :- यहाँ पर जब Browser पहले load होता है तब initial zoom level पर initial-scale को set किया जाता है |

Without viewport

Show image with scrollbar

without viewport Show Demo

With viewport

Show image without scrollbar

with viewport Show Demo

 

viewport को अच्छे से समझने के लिए mobile या tablet का इस्तेमाल करे |

 

Other meta tags

<meta charset="">
<meta http-equiv="" content="">

Example 1 :

ये unicode के लिए character encoding होता है |

<meta charset="UTF-8">
Example 2 :

ये latin characters के लिए character encoding होता है |

<meta charset="ISO-8859-1">

कोई भी character set इस्तेमाल किया जा सकता है , लेकिन meta के charset इस attribute से browser को charset के बारे में बताना पड़ता है |


Example 3 :

यहाँ पर current page को हर 5 seconds के बाद refresh किया जायेगा |

<meta http-equiv="refresh" content="5">
Example 4 :

यहाँ पर 5 seconds के बाद www.hindilearn.in इस website पर redirect किया जायेगा |

<meta http-equiv="refresh" content="5; URL=http://www.hindilearn.in">
Example 5 :

यहाँ पर content type; html है और character set ये UTF-8 है | लेकिन इसका इस्तेमाल HTML4 में किया जाता था इसकी जगह पर HTML5 के <meta charset="character_set"> का इस्तेमाल किया जाता है |

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Example 6 :

यहाँ पर meta http-equiv के content attribute की value ये link tag के title इस attribute के value से match करेगा , वो stylesheet webpage की default-style set की जाएगी |

<meta http-equiv="default-style" content="red">
<link rel="stylesheet" href="red.css"  title="red">
<link rel="stylesheet" href="blue.css" title="blue">