HTML Metadata Elements
HTML
Metadata defines information that are needed for other elements in the document.
HTML Metadata elements
➔ Metadata content sets up the presentation or behavior of the rest of the content, or sets the relationship of the document to another document.
➔ Metadata defines information that are needed for other elements in the document.
Metadata elements are
<base>,
<link>,
<meta>,
<noscript>,
<script>,
<style>,
<template>,
<title>.
HTML Metadata element base
➔ The base HTML tag specifies the base URL for all relative URLs on a page, so that each URL on a web page does not require typing the full address of the resource.
➔ This metadata element must be defined in the head section of the HTML document.
HTML Metadata element link
➔ The link HTML metadata element specifies the relationship between the current HTML document and an external resource using the href and rel attributes.
➔ The href attribute is used to specify the URL or path of a resource.
➔ The rel attribute is used to specify semantic relationships to the resource.
HTML Metadata element meta
➔ The meta HTML element is used to provide metadata about the HTML document
➔ Metadata can be accessed by various agents such as browsers to learn about encoding or viewport information, search engines to get a better idea of the page content.
HTML Metadata element script
➔ The script HTML element is used to embed internal scripts or provide a link to create a relationship with external JavaScript using the src attribute.
➔ Scripts embedded inside the script tag are called internal scripts, whereas the file given as the JavaScript path in the src attribute is called external scripts.
HTML <template> Tag
➔ The HTML <template> tag is used to specify HTML content that is not rendered when the page loads, but can be cloned and inserted into the DOM immediately at runtime using JavaScript.
➔ This is a blueprint for reusable content.
Example <template> Tag
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
margin: 5px;
padding: 5px;
}
ol li span {
margin: 5px;
padding: 5px;
}
button {
margin: 5px;
padding: 5px 15px;
}
</style>
</head>
<body>
<h2>Item List</h2>
<button onclick="addItem(event)">Tomato</button>
<button onclick="addItem(event)">Potato</button>
<button onclick="addItem(event)">Carrot</button>
<button onclick="addItem(event)">Pumpkin</button>
<button onclick="addItem(event)">Lettuce</button><br>
<button onclick="addItem(event)">Eggplant</button>
<button onclick="addItem(event)">Cabbage</button>
<button onclick="addItem(event)">Cauliflower</button>
<button onclick="addItem(event)">Broccoli</button>
<h2>Cart Item List</h2>
<ol id="container-id">
</ol>
<template id="template-id">
<li>
<span>Item Name Placeholder</span>
<button class="remove">Remove</button>
</li>
</template>
<script>
let counter = 0;
function addItem(e) {
const template = document.getElementById('template-id');
const templateCopy = template.content.cloneNode(true);
//counter++;
let productName = e.target.textContent;
templateCopy.querySelector('span').textContent = productName;
templateCopy.querySelector('.remove').onclick = (event) => {
event.target.closest('li').remove();
};
document.getElementById('container-id').appendChild(templateCopy);
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.
Example <template> Tag
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
margin: 5px;
padding: 5px;
}
ol li span {
margin: 5px;
padding: 5px;
}
.product {
width: 150px;
height: 220px;
padding: 10px;
margin: 10px;
font-size: 10pt;
line-height: 0.1;
border: 1px solid #f2f2f2;
text-align: center;
float: left;
}
button {
width: 120px;
margin: 15px 5px 5px 5px;
padding: 10px 5px;
}
.product button:hover {
background-color: #105060;
color:white;
}
.card {
clear: left;
}
</style>
</head>
<body>
<h2>Item List</h2>
<div class="product">
<img src="./resources/images/veg-tomato.png" width="100px" height="100px" />
<p>Tomato</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-cabbage.png" width="100px" height="100px" />
<p>Cabbage</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-bellpepper.png" width="100px" height="100px" />
<p>Bell Pepper</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-lettuce.png" width="100px" height="100px" />
<p>Lettuce</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<h2 class="card">Cart Item List</h2>
<div class="card">
<ol id="container-id">
</ol>
</div>
<template id="template-id">
<li>
<span>Item Name Placeholder</span>
<button class="remove">Remove</button>
</li>
</template>
<script>
let counter = 0;
function addItem(e) {
const template = document.getElementById('template-id');
const templateCopy = template.content.cloneNode(true);
//counter++;
const parentNode = e.target.parentNode;
const scopedChild = parentNode.children[1];
let productName = scopedChild.textContent;
templateCopy.querySelector('span').textContent = productName;
templateCopy.querySelector('.remove').onclick = (event) => {
event.target.closest('li').remove();
};
document.getElementById('container-id').appendChild(templateCopy);
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.