Metadata Elements
Learn about HTML metadata elements and how they enhance document structure, styling, functionality, and SEO optimization.
Metadata elements in HTML provide essential information about the document and help enhance its functionality, styling, and interactions.
These elements don't directly affect the visible content of the webpage but serve crucial roles in linking, defining document settings, and improving performance and accessibility.
Common elements:
meta
The <meta> HTML element defines metadata for a document. Metadata is information about data (character set, page description, keywords, author of the document, and viewport settings). This will not be
displayed on the web page, but is machine-parsable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body></body>
</html>The <meta> HTML element is a self-closing tag and does not require a closing tag. Attributes for this element are charset, content, http-equiv, and name.
base
The <base> HTML element defines the base URL for all relative URLs in a document.
There can be only one single <base> element in the document, and it should be inside the <head> element.
You can try the code below for a better understanding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- This is the base URL for the document. -->
<base href="https://shefali.dev" target="_blank" />
<title>HTML Elements</title>
</head>
<body>
<!-- This link opens in a new tab even if you don't give it a target attribute because the base element has a target
attribute. -->
<!-- You don't have to write the whole URL here. This will be https://shefali.dev/blog automatically. -->
<a href="/blog">Blog</a>
</body>
</html>The <base> element must have either an href or a target attribute present, or both.
The <base> HTML element is a self-closing tag and does not require a closing tag.
link
The <link> HTML element is used to link the external style sheets to your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HTML Elements</title>
</head>
<body></body>
</html>The <link> HTML element is a self-closing tag and does not require a closing tag.
Attributes for this element are crossorigin, href, hreflang, media, referrerpolicy, rel, sizes, title, and type.
style
The <style> HTML element is used to define style (CSS) for an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
<style>
h1 {
color: blue;
}
p {
color: purple;
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<p>This is paragraph.</p>
</body>
</html>The <style> HTML element includes both opening (<style>) and closing (</style>) tags. Attributes for this element are media and type.
script
The <script> HTML element is used to specify client-side script such as JavaScript, in the HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>The <script> HTML element includes both opening (<script>) and closing (</script>) tags. Attributes for this element are async, crossorigin, defer, integrity, nomodule, src, and type.
noscript
The <noscript> HTML element is used to define alternate content to be displayed on the browser if the browser does not support a script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body>
<script src="script.js"></script>
<noscript>Sorry, your browser does not support the script.</noscript>
</body>
</html>The <noscript> HTML element includes both opening (<noscript>) and closing (</noscript>) tags.
On this page