The structure of a web page is fundamental in creating a great user experience. While working as a developer I’m sure you’ve come to understand how important well-structured code is. A poorly architected page is doomed from the start. It’s all too easy to get lost in countless nests of divs, spans, and if you’re really unlucky, tables.

Over the years the HTML spec has improved massively. Gone are the days when our options are limited to a generic one-size-fits-all element with no real meaning.

Thankfully now, we have Semantic HTML. This is a huge step forward not only for the developer but the user as well.

Lets explore why.

Who needs Accessibility?

If I were to ask you to guess what percentage of the population had a disability, what would your answer be?

In a former role, I was responsible for teaching workshops centered around user experience in mobile apps.

in one of my early classes, things got off the rails as when I encountered several people in the class were unable to see the web page. They were older and had become accustomed to using the screen magnifier or the zoom feature. However this time the page they were viewing wouldn’t zoom properly.

Another had a different method, this guy was clever, had a hearing aid that his phone connected to wirelessly. When he needed to, he used the screen reader to navigate the page.

In almost every workshop, someone was attending because they were unable to use a web page or application properly due to lack of accessibility features. They were all understandably frustrated and were seeking a solution.

To be honest, this surprised me at the time. I didn’t think anyone used those features. After some googling I came to learn that According to the World Health Organization: 15% of the global population lives with a disability. That’s more than 1 billion people. According to the United States Census Bureau : 12.7% of Americans lives with a disability. Roughly 41.1 million people.

Even with a large margin of error applied to those numbers, there is no denying that the demographic for accessibility features has to be quite large.

Personally, I want everything I work on to be as accessible and enjoyable as possible for every potential user. We take measures in our communities to make things accessible for everyone, and are always working to improve. The same should apply for the web.

Probably Your Users.

The figures above represent a staggering number of potential users that may experience similar difficulties when using the web.

When things don’t work properly, especially things that should be simple, or are intended to make life easier, it can be frustrating.

Imagine what a user must feel when they’re trying to complete a task or get some information and the website is working against them. Despite the popular notion that technology and convenience go hand-in-hand, that isn't always the case.

As we now know, for millions of people, not taking accessibility into account could make their user experience much worse, maybe even impossible.

Its unlikely a user ever returns to your website after it frustrates them or doesn’t take their preferences and needs into consideration.

Make Your Work Accessible w/ Semantic HTML

So how do we use what we know about the challenges surrounding accessibility, to begin structuring our web pages in a more accessible way?

By learning about Semantic HTML, and using Semantic HTML elements as much as possible.

What is Semantic HTML?

What does a div mean in HTML markup? Well, nothing really. Although we can use them for almost anything in our markup, a div doesn't inherently represent anything. We use them to group content together and for styling purposes. Since a div element has no context or explicit purpose, browsers don't quite know how to make logical sense of it. Not only that, but by not taking advantage of the proper elements, you’re also potentially missing out on key accessibility features that many elements provide.

Accessibility and HTML is a deep topic, there is a lot to be explored and learned about making pages more accessible and I encourage you keep taking steps towards writing more accessible code. For the remainder of this article though, I’m going to focus on replacing div elements with more useful semantic elements. These elements, known as “content sectioning” elements, allow you to organize your document into logical pieces.

Content Sectioning Elements

Rather than use divs to create our layouts, we can use these semantic elements instead. Here are the ones you can use right away to start replacing div elements in your pages and making them more accessible. Semantic elements are lighter than div based layouts, so your page will be slightly faster as well.

• <section>- We use section elements to represent a standalone section of a document, this is probably the closest semantic equivalent div.

  Sections should almost always have a heading to define the content within.

• <header> - is used as an element that contains the introductory content of a document. Often logos, search forms, and navbars can are placed within these elements. *This is not the same as the “ element.

• <article>- represents a self-contained block of content, which is intended to be independently distributed, published or reused (in syndication). Things like blog entries, forum posts, product cards, and user comments could appropriately use this element. “If you remove the rest of the site, can this content stand on its own?”

• <aside>- This element is for a portion of a document whose content is only related to the main content. These are often used for sidebars or call-out boxes.

• <nav>- Used to hold site navigation elements such as menus, tables of contents, index, or navbars.

• <main>- Used to represent the primary content of the documents body. The main content area could be considered the central functionality of an application, and is the primary topic of focus for any page.

• <footer>- Usually used for additional links, contact information and legal notices, the footer is often the last part of a document.

• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>- The heading elements are important for establishing a hierarchy. Use these to build a “table of contents” into your document by organizing your content with the proper heading.

In Conclusion

Being a bit more mindful and using semantic elements is a start, and its easy to fall back on old habits. We know that we can use CSS or JavaScript to make almost any HTML element behave the way you want. You could easily make a button out of a div, span anchor tag, or li for example.

But when you have a hammer, every problem starts to look like a nail.

What we need to keep in mind is that as developers we have not just hammers, but an entire hardware store of tools at our disposal. Anyone can apply brute force with a hammer, so to speak. However, those particularly skilled in their craft always strive to use the right tool for the task at hand, and their work, and their users, are better off because of it.

If you're interested in learning everything there is to know about accessibility and semantic HTML, I cant recommend MDN enough. They practically wrote the book on it.

I'm still pretty new to the whole article / blog post thing. If you have any feedback or comments, please don't be shy and let me know what you think, what I did wrong, and how I can do better. Thanks for reading.

Meta tags are HTML tags that we use to provide information about a website and it’s content. They are put in head head of a document, to be used by search engines and browsers to make sense of the content within our page and understand what a website is about.

If you “View Source” or “Inspect” almost any web page, you’ll see meta tags within the head of the document providing all sorts of useful information about it, such as a document’s character set, description, keywords, author, and viewport settings. Search engines use this information to help index a page and get a better understanding of it.

Why Use Them?

When it comes to SEO, (Search Engine Optimization) Meta tags play an important role. Particularly the title tag and the meta description. This is because these tags are what you will see on a search engines results page (SERP) when you search for your site. It’s important to have unique meta tags for every page, with a relevant title and description.

It almost goes without saying that users will not click on your site, if it isn’t related to exactly what they’re searching for.

How To Use Meta Tags.

Meta tags are self closing. Which means rather than having content between an opening and closing tag, all of the data for our meta tags gets defined as attributes in key/value pairs.

<meta name="example" content="this is an example of a meta tag" />

Many of the most popular meta tags are just a simple combination of a name and content attribute.

Essentially we’re saying “This is our data, and this is what it does”. The name attribute serves the purpose of being descriptive of the data itself. The content attribute’s value, is the actual data associated with the name.

Although the name attribute is most common, a meta data attribute can be any of the following:

• name: provides document level data that applies to the whole page. This attribute allows us to define the name of our metadata, and is paired with the content attribute. Essentially we are telling the browser what data we’re providing it.
• http-equiv: if this is used, the element can provide information similar to that found in an HTTP header.
• content: is the value associated with the name or the http-equiv attribute.

• charset: defines the character encoding, or character set we are using, to the browser. In most cases we use Unicode, which covers most symbols that exist in just about every language.

  It is also the only valid encoding for HTML5 documents.

    <meta charset="UTF-8" />
  

• itemprop: this is user defined meta data that cannot be represented by the standard types and attributes.

  *This attribute can not be used on an element that has any existing name, http-equiv, or charset attributes. in other words, it must be used by itself.

Popular Attributes and Values.

Now that we’re starting to wrap our heads around meta tags, lets take a look at some of the most commonly used meta elements and some of their attributes. There are a lot of different meta tags, some are important, others don’t work any more and are depreciated. I’m only going to go over the important ones here to keep it relatively simple. These are the ones that should be used on every page, either for the benefit of the user, or a search engine.

Title

I realize this doesn't start with “meta”, but each page should have a <title> tag. This serves as the name of our webpage for search engines and visitors, and is most prominently displayed in search results.

<title>Wrap Your Head Around: Meta Tags</title>

Description

A few short sentences of what content can be expected on your website. Usually displayed beneath the title in a search result.

<meta name="description" content="An informative article about HTML Meta Tags.">

Charset

To display a page properly, the browser needs to know what character set to use. Currently we use Unicode, or UTF-8 which covers almost all of the characters and symbols in the world! Additionally, the HTML5 spec says this is only valid charset, so we don’t have much of a choice, not that we’d need one.

<meta name="description" content="An informative article about HTML Meta Tags.">

Viewport - Setting it for Responsive Design.

Because this particular tag is so important to making our pages responsive, I thought it best to give it a space of its own.

We use the viewport meta tag to tell the browser what kind of device is being used. This makes web browsers aware of what device being used to view our page, and scales it appropriately. Lets break this down:

content="width=device-width tells the browser that our pages width should match the width of the current device.

initial-scale=1.0 scales the initial zoom level when the page is loaded by the browser.

So this tag basically says “match our pages with to the with to the device being used, and make it full sized (100%) ”. So whether we use a watch, phone, tablet or desktop, our content will be sized and scaled appropriately.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The End

<meta name=“conclusion” content=“End of Article” />

Thanks for reading my quick overview of meta tags. I covered the basics above, but there is always more to learn.

If you want a more technical explanation, I’d recommend checking out the MDN Docs.

I really appreciate a good UX. When a site I’m browsing comes to life, I really get a kick out of it. A lot of the web can be kind of, familiar. You see certain design elements so frequently that they start to feel predictable. When I encounter a great animation or find myself pleasantly surprised by an interactive element, I appreciate it. It's memorable and I find it leaves a lasting impression. It’s one of the reasons I enjoy visiting Apple’s website. They always find a way to add a refreshing flair to their pages. I almost always hear myself saying "Oh, that's cool!"

One way we can bring a similar flair in our own work is by using CSS animations. CSS provide us with a set of tools that makes it easy to add animation sequences of own design to our DOM elements. Let’s take a look at how we can use animations in our work to make our pages and components more interesting.

Before We Get Started

I've included a several examples. If you want to see the code in action, you can check out the CodePen here. Fork yourself a copy and experiement!

General Concepts

The Animation and Transition Properties

When animating things in CSS we are given two properties to handle the task. Transition and Animation. Each has their own advantages and disadvantages and choosing which to use depends on what you’re trying to accomplish.

Transition

The quickest way to get an animation working is with the transition property. It gives us the ability to describe how an element changes from one state to another. You can think of these as "A to B" animations. Usually, these are used in conjunction with pseudo-selectors like :hover, because they can be used to easily trigger a state change.

Transitions are easy to understand and use, but are limited when you want to add more complexity to an animation. If you need more control over the timing and other characteristics of your animation we need to use the animation property instead.

Animation

The animation property lets us configure things like the timing, duration, and other details of how our animation should progress. animation is actually a shorthand for animation-name which also has several sub-properties that we can use to further configure our animation sequence. These sub-properties along with the use of keyframes allow us to do things that are not possible with the transition property alone.

A list of animations sub-properties can be found here

despite the added flexibility we gain from using animation and its sub-properties, it's not often that we find ourselves needing all of them. Actually, we really only need to give it a name and duration (A duration is not technically required either, but the initial value is 0s. So, if you want your animation to play, you need to specify a duration). Because of this, I opt to use the animation shorthand property on its own, only change the properties I need and allow the browser to handle the rest.

Keyframes

Another fundamental concept to understand when it comes to animations, of Keyframes.

What is a Keyframe anyway?

Take a moment to think about a classic, “flip-book” style animation. There is a slightly different drawing on each page, then as the reader quickly flips through the pages, the images appear one after the other, giving the appearance of motion. Each of these individual pages is called a frame.

A Key frame (or keyframe) then, is essentially a moment in time in our animation. We can use keyframes to define what we want to happen in our animation, and when it should occur. The browser then uses a process called tweening to calculate what should be happening between the keyframes we’ve defined, and fills them in for us, this is how the illusion of motion is created.

Keyframes are used to control the steps in an animation sequence, by allowing us to define the styles for that particular frame.

Did You Know?

The concept of keyframes goes well beyond CSS! Keyframes are an essential part of both animation and filmmaking. You can read more about keyframes here

How To Use Keyframes

Using keyframes is fairly simple. We define our animation by giving it a name, and specifying where our keyframes exist in our animation sequence, by using a percentage of time. Within each keyframe we can define the styles of our element.

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

This creates an animation called slidein. We’ll use this name to reference the animation later in our CSS rule. Notice how rather than using a percentage above, I’ve used the values from and to. This is another way of saying 0% (from) and 100% (to), in a more readable way.

@keyframes slidein {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

What Have We Learned So Far?

We now know that we have two primary options when it comes to using animations in CSS. The transition property let’s us make simple “a to b” animations, and the animation property gives us complete control over our animations along with some added complexity.

We can then use keyframes or a pseudo selector to trigger our animation on the proper element.

Now that we have basic understanding of the fundamentals, let’s see them in action.

Examples

In our example we have a box that we are going animate by using two methods we just learned about.

Using the Animation Property

First we use the animation property to apply our animation to the box element.

We do this by using the same name that we define in our keyframes, which references the animation we want to use.

.box {
    animation: colorChange 3s
}

@keyframes colorChange {
    from {
        background-color: blue;
    }
    to {
        background-color: green;
    }
}

Notice that because we are using the animation property, which is a shorthand we can specify the other parameters we need and omit what we don’t and the browser will handle the rest. We’ve specified a name ( colorChange) and and duration (3s) for our animation.

Below our box element we’ve defined our colorChange animation using the keyframes at-rule. We also use the aliases “from” and “to”. Because we want our box to go from (0%) blue to (100%) green.

Using the Transition Property

And here is the exact same animation but this time we use the transition property to achieve the same results.

.box {
  background-color: blue;
    transition: all 3s linear;
}

.box:hover {
  background-color: red;
}

Rather than use keyframes, like we do when using the animation property. When using transition we don't need a separate name or keyframe rule for the animation. Instead, since we are just changing our element’s color from one state to another, we can make use of pseudo-selectors, in this case :hover, to act as the trigger for our animation.

Adding Complexity w/ the Animation Property

As I mentioned earlier, the animation property can be used to add additional complexity to our animation sequences that the transition property is not equipped to handle.

Let’s revisit our earlier example, but this time, I want to make it so that the box changes colors a few more times. Lets change it to cycle though all of the colors of the rainbow. (ROYGBIV)

After some quick math, we know that each color change should take roughly 14% of our total animation. (100 / 7 = 14.28). Lets add the remaining keyframes and test our new animation.

.box {
  animation: colorChange 3s;
}

@keyframes colorChange {
  0% {
    background-color: red;
  }

  14% {
    background-color: orange;
  }

  42% {
    background-color: yellow;
  }

  56% {
    background-color: green;
  }

  70% {
    background-color: blue;
  }

  84% {
    background-color: indigo;
  }

  98% {
    background-color: violet;
  }
}

After adding the remaining keyframes and telling our CSS what color we’d like our element to be at each one, we’ll see our updated animation come to life. Our box element will cycle through each of the colors, playing our animation sequence just as we’ve defined it in our keyframes.

The End

By now you should have a better understanding of CSS animations. Some nice animations can be the difference between an average site and a pleasant one, so take the time to dive into the topic even further. This is a good start, but what we've covered here is only the beginning of what is possible.

Thanks for reading!

Live Examples

If you want to see the examples in this article in action, you can fork the CodePen here.