HTML Title Tag in FastHTML

by Audrey M. Roy Greenfeld | Wed, Jan 8, 2025

I get so lazy about title tags. The point of today's notebook is to make me less lazy, so I actually fix the title of this site. Oh, and to explore `Title` and `Titled` in FastHTML.

from fasthtml.common import *
from fasthtml.jupyter import *
from nb2fasthtml.core import render_nb

To create a <title> tag, you use the Title FT:

Title("Hey")

Titled is a shortcut to give you <title> and <h1> containing the same thing, with the <h1> wrapped in a main container:

to_xml(Titled("Hey this is Titled"))

It doesn't make much sense until you add a list of FTs to Titled:

print(to_xml(Titled("Hey this is Titled", P("Here's some page content in a paragraph."), 
             Div(P("And here's a paragraph in a div.")),
             Ol(Li("You can add stuff here"), Li("And more stuff"), Li("And the page can go on and on.")))))

FastHTML App With Titled Pages

Here's a FastHTML app I'm running from this notebook.

app,rt = fast_app(pico=False)

@rt
def index():
    return Titled("My Homepage",
        Div(P("This page has a title and h1.")),
        P("Here's some page content in a paragraph."), 
        Div(P("And here's a paragraph in a div.")),
        Ol(Li("You can add stuff here"), Li("And more stuff"), Li("The page can go on and on.")))

server = JupyUvi(app)

@rt('/pages/{title}')
def page(title:str):
    return Titled(title,
        Div(P("The title and h1 match the title page URL slug")))

server.stop()

Titles From nb2fasthtml

name = "2025-01-07-Verifying-Bluesky-Domain-in-FastHTML"
css = ':root {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;} p {line-height: 1.5;}'
nb = Path(f'{name}.ipynb')

render_nb from the nb2fasthtml package already turns the notebook's title into an h1, but it appears it doesn't add a title tag.

To get around that, I have my notebook route handler return:

r = (Title(name[11:].replace('-', ' ').replace('_', ' ')),
Style(css),
render_nb(nb, wrapper=Div))
r

Which we can see generally more readably with:

print(to_xml(r))