Metadata is data (information) about data. Metadata is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents.
The <head> tag contains all the metadata and meta tags - it is the metadata container.
The <head> tag is the HTML document's metadata container.
The <head> element can include a title for the document, scripts, styles, meta information, and more.
The following elements can go inside the <head> element:
<html lang="en">
<head>
Title of the document
</head>
<body>
The content of the document......
</body>
</html>
The <link> tag defines a link between a document and an external resource.
The <link> tag is used to link to external style sheets.
The <link> element is an empty element, it contains attributes only.
The rel attribute is a required with the link tag. It specifies the relationship between the current document and the linked document.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is the title tag</title>
<style>
p.important {
color:blue;
}
#pstyle1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>My first paragraph.</p>
<p class="important">This paragraph is important.</p>
</body>
</html>
<a href="http://google.com">This text will link to Google</a>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is the title tag</title>
<style>
#pstyle1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>My first paragraph.</p>
<p id="pstyle1">My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is the title tag</title>
<style>
#pstyle1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>My first paragraph.</p>
<p id="pstyle1">My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is the title tag</title>
</head>
<body>
<p style="color:green;">This paragraph is important</p>
</body>
</html>