How to Create an Interactive HTML Timeline

by Steve Sweeney-Turner
paddington clock face image by Karen Hadley from

A time line is a useful way to display a list of events on a web page, and an interactive time line gives users some control over viewing content. While many ways exist to create an interactive time line, most require more than just hypertext markup language (HTML). However, there is one very simple HTML solution. You can easily create interactive scrollbars for your time line by using HTML's "style" attribute. By doing this, your time line's users will be able to scroll through its contents as they like.

Step 1

Create your HTML file. Open a new document in a text editor software program and create a basic HTML page. Add this code within the HTML "body" section:

The division element ("div") is a container for your time line's list of events. The "overflow" value of "auto" adds an interactive scrollbar when your time line gets wider or higher than this container. Save the page as "timeline.html".

Step 2

Create your own time line content. In the space between the opening and closing "div" tags, add your time line's events in ascending or descending order. Add each event within its own section of well-formed HTML. Keep saving the page as you work.

Test your HTML code. Open your computer's web browser and load "timeline.html." If its content is bigger than the "div" container, you will see an interactive scrollbar. Adjust the "width" and "height" values of the container to suit your vertical or horizontal layout.


  • Vertical layouts are the easiest to code. Simply wrap each of your event sections within its own "div" element. For a horizontal layout, you could use a table with a single row and a column cell for each event. If you do this, make your table's height the same as your "div" container's height. Take care with your table's vertical "margin" and "padding" values.
  • This article creates an interactive scrollbar by using an "inline" cascading style sheet (CSS). "Inline" style sheets go inside the "style" attribute of a HTML element's opening tag. You could use an "internal" or "external" style sheet instead, however. "Internal" style sheets go inside the HTML "head" section. "External" style sheets are separate ".css" files. Using either of these types gives you more control over the formatting of any HTML content.
  • You could extend the interactivity of the example by using JavaScript. You could start by adding HTML buttons, and then write a JavaScript to move your time line content when users click the buttons.


Photo Credits

  • paddington clock face image by Karen Hadley from

About the Author

Steve Sweeney-Turner's writing career began in 1989 as a classical music journalist for magazines such as "The Musical Times," "Tempo" and "Cencrastus." He has also written extensively as an academic, including book chapters published by the university presses of Oxford, Manchester and Cork. He holds a Ph.D. in musicology from Edinburgh University and a postgraduate diploma in information technology from Glasgow University.

More Articles