In this post we are going to demo how to create a search engine optimized company timeline using HTML and CSS.
Company timelines are a common feature of business website about pages. Some visitors want to know where your organization has come from (and where it is going). And, let’s be honest, most businesses like to show their growth over the years.
Some companies design their timelines as a simple list – like Starbucks:
Other companies design interactive timelines with accompanying media – like Ford:
In this post you will learn how to create a company timeline using HTML and CSS that looks beautiful but stays simple. This method also maintains proper HTML heading structure so that search engines can easily index your timeline. You can use this method yourself on nearly any website.
Our timeline will be stylized but simple. When we are finished we will have something that looks like this:
[text_with_frame id=”368c1dbfefba91dceb946d322e0e86bc” content=”‹¨›p‹˜›‹¨›em‹˜›If you find this article helpful consider giving it a share‹¯›nbsp;‹¨›/em‹˜›?‹¨›/p‹˜›” line_color=”rgba(0,0,0,.07)” text_font=”body” heading_font=”heading” animation=”none” animation_speed=”2″ animation_delay=”0″ __fw_editor_shortcodes_id=”e6852c2dacc162bc8c34ba646905e841″ _fw_coder=”aggressive”][/text_with_frame]
Step 1: Write Your Timeline’s Content
Before you get to any HTML or CSS go ahead and write up your timeline. Here’s ours:
Rystedt Creative Origins Timeline
1994 - Gabrielle picks up a blue crayon and writes her name - a writer is born.
2002 - Joshua builds a PC and checks out some books on HTML from the library.
2005 - Joshua begins regular web maintenance for a display product retailer.
2007 - Joshua begins offering web-development consultation to organizations as a young word of mouth freelancer.
2013 - Gabrielle graduates college with a BS in business administration. Joshua and Gabrielle get married but don't yet realize they will soon be doing business together as well as family.
2015 - Family changes spark content creation. The Rystedt's first child is born. Joshua leaves non-profit work to focus on his accounting job and his development projects. Gabrielle reduces her work for a major publishing house from full time to part time and begins writing for clients online.
March of 2017 - Gabrielle leaves her part-time job with a major publishing house to write full time and doubles her personal income.
June of 2017 - Joshua and Gabrielle launch Rystedt Creative. Joshua and Gabrielle realize that many organizations need both web and writing services. In order to better serve these organizations they launch Rystedt Creative and expand the business beyond themselves by partnering with other creative professionals.Notice that this is all in plain text meaning that we don’t have any headers to help the search engines index this.
Step 2: Markup Your Timeline with HTML Headers
Now remember, search engine optimized content uses proper HTML heading structure. So let’s add some headers:
<h2>Rystedt Creative Origins Timeline</h2>
<h3>1994 - Gabrielle picks up a blue crayon and writes her name - a writer is born.</h3>
<h3>2002 - Joshua builds a PC and checks out some books on HTML from the library.</h3>
<h3>2005 - Joshua begins regular web maintenance for a display product retailer.</h3>
<h3>2007 - Joshua begins offering web-development consultation to organizations as a young word of mouth freelancer.</h3>
<h3>2013 - Gabrielle graduates college with a BS in business administration. Joshua and Gabrielle get married but don't yet realize they will soon be doing business together as well as family.</h3>
<h3>2015 - Family changes spark content creation.</h3>
<p>The Rystedt's first child is born. Joshua leaves non-profit work to focus on his accounting job and his development projects. Gabrielle reduces her work for a major publishing house from full time to part time and begins writing for clients online.</p>
<h3>March of 2017 - Gabrielle leaves her part-time job with a major publishing house to write full time and doubles her personal income.</h3>
<h3>June of 2017 - Joshua and Gabrielle launch Rystedt Creative.</h3>
<p>Joshua and Gabrielle realize that many organizations need both web and writing services. In order to better serve these organizations they launch Rystedt Creative and expand the business beyond themselves by partnering with other creative professionals.</p>We have chosen to make every subheader of the timeline an h3 and some of these items contain additional info that is formatted as paragraphs.
Step 3: Markup Your Timeline with HTML Divs and Classes
Now we need to give this timeline it’s own container and probably some CSS classes so that we can modify its look later on.
<h2>Rystedt Creative Origins Timeline</h2>
<div class="timeline-container">
<div class="timeline-item">
<h3 class="timeline-item-primary">1994 - Gabrielle picks up a blue crayon and writes her name - a writer is born.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">2002 - Joshua builds a PC and checks out some books on HTML from the library.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">2005 - Joshua begins regular web maintenance for a display product retailer.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">2007 - Joshua begins offering web-development consultation to organizations as a young word of mouth freelancer.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">2013 - Gabrielle graduates college with a BS in business administration.<br />Joshua and Gabrielle get married but don't yet realize they will soon be doing business together as well as family.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">2015 - Family changes spark content creation.</h3>
<p>The Rystedt's first child is born. Joshua leaves non-profit work to focus on his accounting job and his development projects. Gabrielle reduces her work for a major publishing house from full time to part time and begins writing for clients online.</p>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">March of 2017 - Gabrielle leaves her part-time job with a major publishing house to write full time and doubles her personal income.</h3>
</div>
<div class="timeline-item">
<h3 class="timeline-item-primary">June of 2017 - Joshua and Gabrielle launch Rystedt Creative.</h3>
<p>Joshua and Gabrielle realize that many organizations need both web and writing services. In order to better serve these organizations they launch Rystedt Creative and expand the business beyond themselves by partnering with other creative professionals.</p>
</div>
</div>Because we will be stylizing our timeline with an actual line and points we want our dates to match those timeline points. In order to do that we have decided to use the dates as psuedo elements. Let’s move the dates to attributes of the timeline-item class. We will then make these dates visible where we want them using some CSS.
<h2>Rystedt Creative Origins Timeline</h2>
<div class="timeline-container">
<div class="timeline-item" date-is='1994'>
<h3 class="timeline-item-primary">Gabrielle picks up a blue crayon and writes her name - a writer is born.</h3>
</div>
<div class="timeline-item" date-is='2002'>
<h3 class="timeline-item-primary">Joshua builds a PC and checks out some books on HTML from the library.</h3>
</div>
<div class="timeline-item" date-is='2005'>
<h3 class="timeline-item-primary">Joshua begins regular web maintenance for a display product retailer.</h3>
</div>
<div class="timeline-item" date-is='2007'>
<h3 class="timeline-item-primary">Joshua begins offering web-development consultation to organizations as a young word of mouth freelancer.</h3>
</div>
<div class="timeline-item" date-is='2013'>
<h3 class="timeline-item-primary">Gabrielle graduates college with a BS in business administration.<br />Joshua and Gabrielle get married but don't yet realize they will soon be doing business together as well as family.</h3>
</div>
<div class="timeline-item" date-is='2015'>
<h3 class="timeline-item-primary">Family changes spark content creation.</h3>
<p>The Rystedt's first child is born. Joshua leaves non-profit work to focus on his accounting job and his development projects. Gabrielle reduces her work for a major publishing house from full time to part time and begins writing for clients online.</p>
</div>
<div class="timeline-item" date-is='March of 2017'>
<h3 class="timeline-item-primary">Gabrielle leaves her part-time job with a major publishing house to write full time and doubles her personal income.</h3>
</div>
<div class="timeline-item" date-is='June of 2017'>
<h3 class="timeline-item-primary">Joshua and Gabrielle launch Rystedt Creative.</h3>
<p>Joshua and Gabrielle realize that many organizations need both web and writing services. In order to better serve these organizations they launch Rystedt Creative and expand the business beyond themselves by partnering with other creative professionals.</p>
</div>
</div>Step 4: Style Your Timeline Using CSS
First we need to style the timeline-container. Let’s just give it a max width and center it.
.timeline-container {
max-width: 1024px;
width: 90%;
margin: 0 auto;
}Now for the fun stuff! Let’s add the actual timeline line.
.timeline-item {
padding: 3em 2em 2em;
position: relative;
border-left: 2px solid #1f78e6;
}Let’s make our dates visible and position them right next to where the points on the timeline will be.
.timeline-item::before {
content: attr(date-is);
position: absolute;
left: 1em;
font-weight: bold;
top: .1em;
display: block;
font-size: 2rem;
color: #1f78e6;
}And finally we place some points on the timeline!
.timeline-item::after {
width: 15px;
height: 15px;
display: block;
top: 1em;
position: absolute;
left: -9px;
border-radius: 10px;
content: '';
border: 1px dotted #98ffa1;
background: #1f78e6;
}Here’s all that CSS put together:
See the Pen wpeNBp by Joshua Rystedt (@RystedtCreative) on CodePen.
