Content formatting tips for Course Creators: What is HTML?

Have you ever wanted to know how to format a bit more beyond the what the standard ATTO editor offers?

You can! The ATTO editor in Moodle gives you the ability to edit content using HTML.

Editing content using HTML is an excellent way to make more detailed changes than the standard ATTO editor usually supports, and will maintain consistency when content is displayed across different devices.

In my next few posts, I’ll explore some tips and tricks for anyone who is a complete novice at HTML. I’ll give you some ideas for editing content using HTML so that displays consistently, and to keep it aligned within WCAG guidelines.

What is HTML?

HTML stands for Hyper Text Markup Language and is the standard markup language used for documents displayed in a web browser. This is what you see when you click on the </> button in Moodle’s ATTO editor.

If you want to see the HTML for a whole webpage, click on the following shortcut keys. You won’t be able to save any editing you do here, but it’s fun to have a look and play around with it. It’s also helpful to use these web developer tools to see where certain elements on a page are located.

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines and provides the standards you should strive for when creating web content so that your content can be accessible for all users of the internet, regardless of ability or disability. Its four principles propone that websites must be perceivable, operable, understandable, and robust.

You can use clean HTML to edit your web content so that it is able to be seamlessly read by a screen-reader and heard in an effortless and expected way by the person accessing the site.

Clean HTML means that it has been stripped of all unnecessary formatting that can inadvertently be copied over when copying and pasting from other places. You can use HTML to make your content WCAG-friendly, making you and your site a good A11y.

How do I use HTML?

The first thing to know about HTML is that it has ‘tags’. These tags are used to ‘instruct’ the web browser how to display your content. You’ll need to use different tags for different ‘instructions’.

We use < > to open the ‘instruction’ and < /> to close it.

15 commonly used tags

Notice that you must have an opening tag and a closing tag.

To edit using HTML, click on the [</>] button on the ATTO editor.

Paragraph tags

Paragraphs are opened by using the <p> and closed using </p>.

‘Paragraph’ means any new line of text, not necessarily a paragraph in the normal sense of the word. Essentially, it means text that is not a heading, in a list, or has any other special use.

When working with blocks of text, the paragraph tag is the most common tag you will see.

Paragraph tags are indicated with a <p> at the beginning and a </p> at the end.

Remember: you will need to make sure you have an opening tag AND a closing tag.

<p> signals the opening of a paragraph of text.
</p> signals the closing a paragraph of text.

<p>This is a paragraph of text.</p>

Have a go!

Take a look at any of your text content in your LMS by clicking on the [</>] button to view and edit it in HTML.

• Can you identify any of the tags from the list above?
• Does each opening tag also has a closing tag?
• Are there any opening tags that don’t have closing tags?

In my next post, I’ll talk about headings: how to use them appropriately, how to modify them to suit your needs, and why they are important for accessibility.

• About
• Latest Posts

Tish Kirkland

eLearning Consultant at YES! IELTS

Moodler since 2008
Moodle Educator Certificate holder

Latest posts by Tish Kirkland (see all)

• HTML for Course Creators: Headings – 22nd September 2021
• Content formatting tips for Course Creators: What is HTML? – 22nd August 2021
• More Tips for Writing MCQs – 22nd November 2019