W02 Learning Activity: The Content Template Element
Overview
The HTML <template> element is not rendered by the browser until evoked by script. The <template> element is useful for repeated HTML markup containing records or other data that is used repeatedly.
"Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the template element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered..." – MDN
Prepare
- Read: 📃 The Content Template Element – MDN
- Read: 📃 HTML Template Tag – w3schools
Activity Instructions
- Reference the data structure of this latter-day prophet JSON file.
- Create an HTML template element with an id of "prophet-card" within a section with the
class of "card" and the contents should allocate for the:
- full name (h2)
- birth date (p)
- birth place (p)
- profile image (with class named "profile")
View a Solution Example
<template id="prophet-card">
<section class="card">
<h2></h2>
<p></p>
<p></p>
<img class="profile" src="" alt="" loading="lazy" width="200" height="300">
</section>
</template>