The HTML code that underpins all the content in our Library Guides can really affect their accessibility. We need to be careful about what we add when we're adding content, to make sure we don't introduce problematic code that will make things difficult for our users. 

How can you tell?

If you open the HTML window on one of the boxes in your guide, it can be tricky to tell which code is fine, and which code is a problem. Some of the information below will help you identify specific HTML elements that might cause accessibility problems.

Also, most of our code should be reasonably simple and straightforward. If the code in your HTML window is complex to the point that you can't find or read the page content (ie the parts you wrote), this could be an indicator that something is wrong. 

If you don't feel confident fixing it yourself, please contact the LibGuides team. 

HTML lingo

A single piece of HTML code is called an element. An element consists of two tags: a start tag like this <tagname>,and an end or close tag like this </tagname> The start tag is placed before the content you intend to change, and the end tag after. 

For example, to make bold content in a paragraph, you place start and end tags around the text you'd like to bold. The bold element is <strong> so it looks like this:

 The text I'd like to <strong>bold</strong> in this sentence has tags around it.

You need to remember to close the tags, or the rest of your content will be affected by whichever style you're applying.

As noted above, when you copy and paste from Microsoft Word (or other programs) you also copy and paste the underlying code. This introduces unnecessary code into your HTML. This can affect the accessibility of your guide, as well as its Look and Feel.

If you wish to paste content from Word, or from other webpages, you should paste as plain text. This will strip out all of the copied formatting, leaving only the text. There are instructions on how to do this in LibGuides Help at Rich Text/HTML Content. 

Alternatively, you can use the Remove Format icon in the text editor. This is designed to return text to its original formatting, but can also be used to strip formatting from copied content. See LibGuides Help on Remove text formatting.

Changing font size and style introduces <span> tags which override global styles and prevent us from achieving consistency in the look and feel of our guides.

Variations on the <span> tag can include:

• <span style="font-size:14px;">
• <span style="background-color:#FFFF00;">
• <span style="font-size: 14px; line-height: 22.4px;">
• <span style="line-height: 1.6;">
• <span style="font-family: arial,helvetica,sans-serif;">

These tags should be removed. Don't forget to remove the close tag (</span>) as well!

Sometimes, instead of two or three nice orderly columns, everything on your page will fall into one column, or spill out where it's not supposed to, or the bottom banner on your page will disappear.

This usually happens when a <div> tag has been introduced, and hasn't got a close tag. These tags can be introduced in copied content, video embed code, or in iFrame code.

The <div> tag defines a division or section in an HTML document and is important in governing the layout. Introducing one of these tags into a Libguide page changes the way pages are divided up and can override the sectioning that happens automatically when boxes are created.

If this problem occurs, look through the html code and see if you can find an unpaired <div> tag. And remember to be careful when copying content from other sources!

If you'd like to learn more about HTML and coding, here are some great resources:

• The w3Schools.com HTML Tutorial
• A Simple Guide to HTML: HTML Cheat Sheet
• CodeAcademy: Learn HTML