Meta tags provide metadata about the HTML document. They are placed inside the <head> element and contain information that helps browsers and search engines understand the page’s content. Meta tags do not display on the webpage but play a crucial role in SEO and user experience.
Common Meta Tags
<meta charset="UTF-8">: Defines the character set for the webpage, ensuring all characters (including special ones) display correctly.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls how the page is scaled and displayed on different devices, especially mobile phones.<meta name="keywords" content="HTML, web development, tutorial">: Provides a list of keywords relevant to the page for search engines.
HTML Meta Tags Example Code
Explanation of the Code:
<meta charset="UTF-8">ensures the webpage can handle all character sets, like symbols and foreign languages.<meta name="viewport" content="width=device-width, initial-scale=1.0">makes the webpage responsive, meaning it adjusts correctly to various screen sizes (especially important for mobile).<meta name="keywords" content="HTML, web development, tutorial">helps search engines understand the content and topic of the webpage for better ranking in search results.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, web development, tutorial">
<title>Meta Tags Example</title>
</head>
<body>
<h1>Understanding Meta Tags</h1>
<p>This page uses meta tags to enhance its SEO and compatibility across devices.</p>
</body>
</html>