Attribute Templating Tutorial
Goal
In this lesson we will template HTML element attributes using HyperTemplates.
What is attribute templating?
HTML attributes adjust the behavior or display of an HTML element.
One of the most well known attributes is the href.
It is used to configure the destination for a hyperlink, like this example:
1<a href='https://example.com'>click here</a>
Have you noticed that links on some websites open in a new tab?
That's accomplished using the target attribute!
1<a href='https://example.com' target='_blank'>click here</a>
HyperTemplates makes it easy to template HTML element attributes using the ht-attrs attribute.
Let's see it in action in the following exercises. 🏋️♂️
Exercises
- EXERCISE 1: Create attribute templates
- Create attribute templates.
Let's add a description metadata element to our layout template.
layouts/default.html 1<html lang='en-US'> 2 <head> 3 <meta charset='utf-8'> 4 <title ht-content='title'>Learn HyperTemplates</title> 5 <meta name='description' ht-attrs='content:description'> 6 </head> 7 <body> 8 <main> 9 <article ht-content='markdown:content'> 10 <h2>Hello, world</h2> 11 <p> 12 This is an <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>HTML</a> layout! 13 </p> 14 </article> 15 </main> 16 </body> 17</html>Frontmatter properties in a Markdown document are accessible to HyperTemplates as template data properties. In this example we have templated the
<meta>element using theht-attrsattribute. Thecontent:descriptionvalue tells HyperTemplates to add an attribute namedcontentto the<meta>element with the value of thedescriptionproperty from our page data file (index.md).Small but mighty! 💪
The
ht-attrsattribute can be used to add multiple attributes to a single HTML element. This is really helpful because attributes are the primary interface for configuring HTML element appearance and behavior. 💥OK, let's move on to step 2 to create a new page that includes a description.
- EXERCISE 2: Create a new page
- Create a new page with a description.
Let's add a
descriptionproperty to our page:content/index.md 1--- 2title: Introduction to HTML templating 3description: My first HyperTemplates page! 4--- 5 6## Hello, world 7 8This is my first HyperTemplates content!Render the page to see the description
<meta>tag populated, then refresh your browser to see what changed.1hyperctl render -d content/index.md -l layouts/default.html > index.htmlTo view the description in a browser, hover over the browser tab, or use "view source" to inspect the rendered HTML. Otherwise, just open
index.htmlin your text editor.
Discussion
In this lesson, we learned about one of the HyperTemplates power tools: the small but mighty ht-attrs attribute.
We can already build some pretty interesting templates with ht-content and ht-attrs!
As you start imaging the more complex layout templates you might build with HyperTemplates, you might start to have questions about how to show or hide some content based on the template data. And that is exactly what we'll cover in the next lesson!
Core Concepts
Learn more about the concepts in this lesson:
Do you have any questions and/or feedback about ht-attrs or this "Learn HyperTemplates" tutorial?
Join the @hypertexting.community and visit the "Getting Started" category. 💬
When you're ready, let's go ahead and move on to lesson 3. 👉
Lesson 1: Introducing ht-content
Lesson 3: Introducing ht-if