Introducing: ht-attrs

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 the ht-attrs attribute. The content:description value tells HyperTemplates to add an attribute named content to the <meta> element with the value of the description property from our page data file (index.md).

Small but mighty! 💪

The ht-attrs attribute 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 description property 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.html

To view the description in a browser, hover over the browser tab, or use "view source" to inspect the rendered HTML. Otherwise, just open index.html in 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:

Attributes reference

ht-attrs attribute

Data reference

Markdown reference

CLI reference

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. 👉

← PREV
Lesson 1: Introducing ht-content NEXT →
Lesson 3: Introducing ht-if

Attribute Templating Tutorial

Goal

What is attribute templating?

Exercises

Discussion

💬 Join the community