Basic Elements

Block quotes and callouts are used to call attention to some important information. JamsEDU supports many different styles for callouts by default. This page will demonstrate how to customize callouts for your needs.

Go Back

There are two ways to add the Go Back link on a page. You can manually add the link to a page by placing the following HTML code above the h1 tag for the page:

<div id="go-back">
    <a href="../"><i class="fas fa-chevron-left icon"></i> Go Back</a>

An easier way to accomplish this automatically is by adding the class go-back to the main content section. Here is what the main content section looks like with this class added to it:

<section id="main-content" class="go-back">


Headings are used for accessibility and to visually notify sighted users of a section of content. The h1 or heading level 1 tag has the most importance and should be used at the top of every page. In contrast the h6 or heading level 6 tag has the lowest importance. You may use any amount of header tags on a single page but it is best practice to limit duplication as much as possible. For JamsEDU site headings are styled relatively the same. Below is the HTML code for all possible headings. This page is using quite a few of them already.

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>


A common feature for web browsers is the ability to link directly to part of a web page, this is known as anchoring. JamsEDU will automatically generate anchors for headings with an id attribute. You can learn more about the id attribute here. To see how anchors work try clicking on one of the icons on this page.

Horizontal Rule

Horizontal rules allow you to draw a line across the page to separate sections of content. You can use this when you want to create space or a break between content and a header does not make sense to use. Here is a demo of the hr tag in action, its HTML code follows:



The mark tag is an HTML5 tag that allows you to highlight a word or words to call attention to them. JamsEDU slightly modifies the default style of this tag.



The kdb tag is used to define keyboard input: B A

<kbd>Konami Code</kbd>


Tables are supported by JamsEDU and have been designed with mobile-first design principles. The following table is from W3School's HTML Table tutorial and demonstrates how a table looks in JamsEDU. Following the demo is the code to make up to the first row of this table.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>


The code tag code can be used for short snippets of inline code. It looks similar to the kbd tag but uses a bold font and lighter drop shadow:

<code>inline code here</code>

If you have larger blocks of code you wish to share on a page you should use a code block instead. The following code demonstrates an example you could use on your site. Please keep the following important points in mind when using a code block:

  • By default JamsEDU only supports the languages in the common package of Highlight JS.
  • You need to change the lang (language) attribute to match the language of your code; again it must be in the supported list. The demo below uses lang-html because it is an HTML example.
  • Your first line of code should start on the same line as the opening pre and code tag, otherwise your code example will have an empty space at the top.
  • If you place the closing pre tag on its own line you may end up with extra bottom margin on some browsers.
  • You must replace any greater than (<) or less than symbols (>) with their HTML entities: &lt; is < and &gt; is >.
<pre class="lang-html"><code>Your code inside here...
This demo uses HTML...
Over 3 lines.