Using HTML in your Bear Blog

While more complicated than Markdown, you can also use HTML in your Bear website. In this short article we will explore how we use it on ours.

Feel free to copy, customize, and paste our code into your site to kick it up a notch.

Most of your site's content will be written with Markdown or directly in the Bear editor. However, you can reach for some HTML functionality when those options can't provide it.

This is the third post in our "how to" series of building your Bear site / blog. The first and second are on Markdown and CSS.

HTML

HTML stands for Hyper Text Markup Language and is the programming language used to give websites structure.

Your Bear theme is built with it and CSS, but you can add additional HTML to your pages and posts via the Bear editor.

I am going to let Mozilla provide the following technical details:

"Hypertext refers to text containing links that connect web pages to one another, either within a single website or between websites.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as < head >, < title>, < body >, < header >, < footer >, < article >, < section >, < p >, < img >, < details >, < embed >, < nav>, < video >, < ul >, < ol >, < li > and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by the < and > characters."

Code Editors

Now, you can write your HTML directly in the Bear editor. But it's a better practice to write it in a plain text editor, then copy it into your page, posts template, or individual posts. It's an even better practice to write it in a code editor.

A code editor helps with writing and managing your HTML code more efficiently.

It gives you features like:

  • syntax highlighting

  • auto-completion

  • file navigation

  • and debugging helpers  

You would use it for the first two features more than the second two as you start your web development journey on Bear.

More advanced code editors are called IDEs. Internet Development Environments even provide local servers so you can preview your HTML in the IDE's integrated local browser. Plus much more.

The two options below are IDEs.

Pulsar

We are going to look at two simpler, free, opensource options here. Our recommendation is Pulsar.

Pulsar is a fork of the sunset Atom editor, which assumed its mission of combining hackability with usability.

Visit the link to see all the great capabilities it gives you in addition to writing your HTML code.

VS Codium

VS Codium is a community-driven, freely-licensed binary distribution of Microslop’s VS Code editor.

It is more complicated to install than Pulsar, but it does provide access to hundreds of extensions built for VS Code (Microslop's proprietary version of VS Codium).

But, that's probably overkill for your Bear site and I would stick with Pulsar.

Again, you can always just copy and paste the examples below into the Bear editor. Customize and preview them. And if everything looks good publish them on your pages, post template, and individual posts.

The Fulcrum examples

Preload

Preloading schedules HTML to be downloaded and cached with a higher priority.

Again, I'm going to let Mozilla describe the details:

"The preload value of the < link > element's rel attribute lets you declare fetch requests in the HTML's < head >, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance."

<link href="https://fonts.bunny.net/css?family=aclonica:400" rel="stylesheet" />

  Here we are preloading the link that pulls in the special font (Aclonica) used for our headers. This prevents a flashing of the fallback default font if it loads a split second before our custom font.

Custom Snippets

Custom snippets are like blocks of code you write that can be used over and over again in different parts of your Bear site. Write them and save them somewhere you can access later. For example, a snippets page in Bear that you don't add to your menu.

Here's a snippet we use on our site.

Share on Open Social

The following is a block for sharing our posts on open social media.

 <section>
  	<center>
  		<div class="button"><a href="https://shareopenly.org/share/?url=https://thefulcrum.dev/&amp;text=The+Fulcrum">Share on Open Social Media</a>
		</div> 
	</center>
<br>	 	 
<p>Copy and paste:</p>

<p>Explore this week's "The Programmer's Fulcrum". https://www.thefulcrum.dev/the-programmers-fulcrum-30-october-2026/
#ActivityPub #ATProto #WebDev #Programming</p>
</section>

  Here the button element is pulling in a link from Share Openly that will open a page to let our site visitors share the Fulcrum post to their Open Social platform of choice.

Note that in this case you will need to go to Share Openly to generate the custom code for your site's information. So, don't copy and paste the button code above.

You can copy and customize the paragraph code.

Footer

If you are using the free version of Bear, you cannot edit your footer. But you can create a faux footer by writing HTML and even Markdown to paste into the bottom of every page, post template, and post on your site.

Not having to do this is one of the advantages to using the Pro plan. You would just write this once in the footer editor and be done with it. And the same goes for your header.

Anyway, for our faux footer we use the following HTML code.

<center>
<table>
<td>
<row>
  <column>
 <div style="text-align:center; margin-bottom: -1em">
 <p>
    <a href="https://baccyflap.com/noai/?prv&s=tpf" target="_top" title="previous">« Prev</a>
    <a href="https://baccyflap.com/noai" target="_blank">&#x1f6ab; No AI webring</a>
    <a href="https://baccyflap.com/noai/?rnd" target="_top" title="random"> - Explore &#x1F3B2; </a>
    <a href="https://baccyflap.com/noai/?nxt&s=tpf" target="_top" title="next">Next »</a>
   </p>
</div>
  </column>
  &nbsp;
  <column>
  <div style="width: fit-content; text-align:center; margin-left: .5em; margin-right: .5em;">
	<p style="margin-left: 1.5em; margin-bottom: -.25em; padding: 0.1em">Member of P-U-N-K webring &nbsp; &nbsp;
    <a style="flex: 1; margin: 0; padding: 0.1em;" href="https://webri.ng/webring/punk/previous?via=https%3A%2F%2Fwww.thefulcrum.dev%2F">⇜ Prev </a>
    <a style="font-size: .75em; text-decoration: underline; margin-bottom: -.01em"><a href="https://webri.ng/webring/punk/random?via=https%3A%2F%2Fwww.thefulcrum.dev%2F">☠️ Explore PUNK Sites 🧷 </a>
    <a style="flex: 1; margin: 0; padding: 0.1em;" href="https://webri.ng/webring/punk/next?via=https%3A%2F%2Fwww.thefulcrum.dev%2F">Next ⇝</a>
    </p>
  </div>
  </column>
  &nbsp;
</row>
</td>
</table> 
</center>

&nbsp;

<img class="svg-image" src="https://www.thefulcrum.dev/content/images/2026/10/no-ai.svg" alt="No AI SVG" width="36" loading="lazy">

<nav>
<a href="/">🏢 Home </a> <a href="/blog/">📰 Blog </a> <a href="/about/">🤷🏽‍♀️ What's this? </a> <a href="/resources-and-tools/">🛠️ Tools </a> <a href="/feed" target="_blank">🗞️ Feed </a> <a href="https://publications.mobileatom.net/tam" target="_blank">🏴‍☠️ Techno Anarchism </a> <a href="https://site.manade.org/)" target="_blank">⛓️‍💥 LESS</a>
</nav>

 

We use the paragraph element < p > for the inspiration sentence.

Then we use the table < table > element and its sub-elements to hold our webrings content. Which is a variety of paragraphs and < a > links.

Next we use the image < img > element to pull in our No AI SVG image.

And finally the < nav > element to insert the links for our footer menu.

Wrapping it up

That's it. Like us, you shouldn't need a lot of HTML for your Bear site. Most of your content will be written in Markdown's equivalent of HTML elements (which render to HTML automatically) or what the Bear editor provides.

In any case, you now know how to add something a little extra special to your site. Explore the links below for inspiration on what's possible.  

Explore more

Here's a resource of resources:

Why and How to Write Minimal and Valid HTML, a Link Guide

Here's a free tutorial:

W3Schools HTML Tutorial

You can get into the nitty gritty (details) via Mozilla's developer site:

HTML: Hypertext Markup Language

Good luck becoming a web developer and having a well-structured site. But, don't fucking use AI to build it.  

CTAs

And please build something for a community! We're promoting the LESS stack via our Manade project.