🤗 Setting the Deno Fresh HTML lang Attribute #
In this video, we see how you can set the Deno Fresh HTML lang attribute.
This is HTML markup, important for site visitors using screen readers. Setting
the attribute to a language descriptor matching the page content will help screen reader apps
and devices pronounce correctly. Screen readers are often used by people with visual impairments. You cannot add the attribute directly onto the html element with
Deno Fresh, but we will see there is quite an easy way to set it, keeping your site accessible.
Anyway, that is enough of an introduction, if you still think you’re in the right place then hit play below on the video! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.
📹 Video #
Please enable JavaScript to watch the video 📼
🗳 Poll #
🖥 Deno Fresh HTML lang Attribute: Code #
9 import { start } from "$fresh/server.ts";10 import manifest from "./fresh.gen.ts";11 12 await start(manifest, {13 render: (ctx, render) => {14 ctx.lang="pt-BR";15 render();16 }17 });
Alternative using Fresh 1.4 #
If you are using Deno Fresh 1.4 or newer, instead of updating main.ts, create a routes/_app.tsx file, in which you can edit the html element directly (adding the lang attribute):
1 import type { PageProps } from "$fresh/server.ts";2 3 export default function App({ Component }: PageProps) {4 return (5 <html lang="pt-BR">6 <head>7 <meta charset="utf-8" />8 <meta name="viewport" content="width=device-width, initial-scale=1.0" />9 </head>10 <body>11 <Component />12 </body>13 </html>14 );15 }
🔗 Links #
- Getting started with Deno Fresh post
- MDN docs on the HTML
langattribute - Language codes
- Common accessibility issues
- Element chat: #rodney matrix chat
- Twitter handle: @askRodney
🏁 Deno Fresh HTML lang Attribute: Summary #
How can you add an HTML lang attribute in Deno Fresh? #
- You can set the HTML lang attribute in Deno on the `` element by modifying the Deno Fresh `start` function call. You can find this function call in the `main.ts` file in the root directory of your Fresh project. By default, the start function call will only have one argument: `manifest`. Add a second, options, argument. This needs to be an object with a `render` field. Set the value of the new render field to an anonymous function: `(ctx, render) => { ctx.lang = 'en-GB'; render(); }`. Swap out `en-GB` here with the appropriate BCP 47 language code. You will now be good to go, and the attribute will be set on all pages in your app.
How can you update the HTML head section in Deno Fresh? #
- You can update the HTML head section in your Deno app by using the inbuilt Head component. Often you will need to update the head section to include SEO metadata, stylesheets, and script tags. Import `Head` as a named import from `$fresh/runtime.ts`. Then add separate opening and closing Head component elements to your page markup. Finally, insert the meta, link or script tags as children using regular HTML. Changes apply on a page-by-page basis, but you can create a layout component element with Head as a child to reuse the same group of tags over multiple pages.
Why set the HTML lang attribute on websites? #
- The HTML lang attribute is important for screen reader users. By communicating the language of the webpage, it is able to help screen reader apps and devices use the correct pronunciation.
🙏🏽 Deno Fresh HTML lang Attribute: Feedback #
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @[email protected] on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. Also, subscribe to the newsletter to keep up-to-date with our latest projects.