A HTML block is a blank block used to add text, multimedia, widgets etc to a site front page or course page.

The HTML block is one of the most flexible and versatile blocks in Moodle. It uses the standard Moodle Text editor for formatting text, adding images or creating links, switching to code view and, importantly, allows any valid HTML mark-up to be used.

It therefore enables the creation of custom menus, embedding video, sounds and other files, as well as Twitter or other social media feeds. You can add mutiple HTML blocks to a single Moodle space.

See these pages for information on adding, moving and deleting blocks.

To setup your new HTML block, click on the cog icon, then 'Configure (new HTML block) block'.

This will open a window with an optional Block title field (1), and a Content box (2) that will be familiar if you have added activities or resources previously that have a 'Description' field (see the 'Text editor' guide for more information on the options available).

The content toolbar includes options to change between WYSIWYG and HTML views (3), add and remove links (4), and insert images and videos (5).

Creating a link

1. Add text for the link and select it.
2. Click on the 'link' button to add a hyperlink.
3. Add a URL.
4. Choose if you want this to open in a new window or replace this one.
5. Click 'create link' to finish.

Add as many links as you wish. You can also insert an image, select this and add the link to it.

Save the block - if this step is not done and you navigate away, the changes will be lost.

Adding a twitter feed

An HTML block can be used to display the latest tweets from any Twitter account.

1. Log in to Twitter
2. Go to https://publish.twitter.com/
3. Enter the Twitter address e.g. https://twitter.com/warwickuni then click the 'Create widget' button
4. Add and configure a new HTML block to your Moodle space (as above)
5. Click the 'Edit HTML source' button (< >) then copy and paste the code provided by Twitter into the HTML source
6. Click the 'Save changes' button

The new block will appear in the right hand column.

Using a HTML block as a menu

One of the more effective uses for the HTML block is in providing a consistent module / department wide navigation menu - particularly for links to external (SiteBuilder and elsewhere) pages. Below you can see an example from Classics.

As you can use any standard HTML including Bootstrap, it is possible to create horizontal menus using tabs or pills, with panes, and even collapsible accordions to create more complex versions:

For more information on this, please contact moodle at warwick dot ac dot uk.

---

Moodle.org - HTML Block