How to create timeline in html

HtmlHow-ToBeginner · 4 min read

How to Create a Timeline in HTML with CSS Styling

To create a timeline in HTML, use a list structure like <ul> or <ol> with each event inside <li> elements. Style the timeline with CSS using Flexbox or Grid to arrange events vertically or horizontally and add lines or dots to show progression.

📐

Syntax

A timeline is usually built with a list element like <ul> or <ol>. Each event is an <li> inside the list. You add descriptive content inside each <li>. CSS styles the list to look like a timeline with lines and markers.

<ul>: Container for timeline events
<li>: Each timeline event
CSS: Adds lines, dots, and layout

html

<ul class="timeline">
  <li class="event">
    <h3>Event Title</h3>
    <p>Event description here.</p>
  </li>
  <li class="event">
    <h3>Next Event</h3>
    <p>Details about this event.</p>
  </li>
</ul>

💻

Example

This example shows a vertical timeline with events connected by a line and dots. It uses semantic HTML and CSS Flexbox for layout and styling.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Timeline</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .timeline {
    list-style: none;
    padding-left: 0;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ccc;
  }
  .event {
    position: relative;
    margin-left: 50px;
    margin-bottom: 30px;
  }
  .event::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 5px;
    width: 15px;
    height: 15px;
    background: #007bff;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #007bff;
  }
  .event h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
  }
  .event p {
    margin: 0;
    color: #555;
  }
</style>
</head>
<body>
  <ul class="timeline">
    <li class="event">
      <h3>Started Learning HTML</h3>
      <p>January 2023 - Began with basic tags and structure.</p>
    </li>
    <li class="event">
      <h3>Built First Website</h3>
      <p>March 2023 - Created a simple portfolio site.</p>
    </li>
    <li class="event">
      <h3>Learned CSS</h3>
      <p>May 2023 - Styled pages with colors and layouts.</p>
    </li>
  </ul>
</body>
</html>

Output

A vertical timeline with three events, each with a blue dot on the left connected by a vertical gray line, event titles in bold, and descriptions below.

⚠️

Common Pitfalls

Common mistakes when creating timelines include:

Using non-semantic elements like <div> without structure, making it hard to maintain.
Not positioning the timeline line and dots correctly, causing layout issues.
Ignoring responsive design, so the timeline breaks on small screens.
Using fixed widths or pixels for fonts and spacing, which hurts accessibility.

Always use relative units like rem and test on different screen sizes.

html

<!-- Wrong: Using divs without structure -->
<div class="timeline">
  <div class="event">Event 1</div>
  <div class="event">Event 2</div>
</div>

<!-- Right: Use semantic list -->
<ul class="timeline">
  <li class="event">Event 1</li>
  <li class="event">Event 2</li>
</ul>

📊

Quick Reference

Use <ul> or <ol> for timeline container.
Each event goes inside an <li>.
Use CSS position: relative and ::before for dots and lines.
Use Flexbox or Grid for layout control.
Use relative units like rem for spacing and fonts.
Test responsiveness on small screens.

✅

Key Takeaways

Build timelines with semantic HTML lists and style with CSS for clarity and accessibility.

Use CSS pseudo-elements to create connecting lines and dots for timeline events.

Avoid fixed pixel sizes; use relative units for better responsiveness and readability.

Test your timeline on different screen sizes to ensure it looks good everywhere.

Keep your HTML structure simple and semantic for easier maintenance and better SEO.