Semantic HTML, CSS Selectors & Specificity.

Matt Basile
Nov 7, 2018 · 7 min read
Image for post
Image for post

Day 1 is in the books folks, and that means it’s time for a blog post. In case the title didn’t give it away, this post will cover:

  1. Semantic HTML
  2. CSS Selectors & Specificity (A two for one deal!)

1. Semantic HTML

What is it?: Semantic HTML is the practice of using more descriptive and meaningful tags when coding in HTML. A tag is simply anything you use to wrap content in. Some of the most common are <h1>, <header>, <footer>, <p>, <section>, <nav>, and <div>.

Five of the six tags provided above can be considered semantic, can you identify which one is not? If you guessed the <div> tag you’re absolutely correct.

The reason why is, compared to the other tags, a <div> doesn’t provide a description of the content it holds. Whereas, if you use a <p> we know that’s a paragraph of content or a <section> is a section of content. It’s this difference that highlights the strengths of semantic HTML; understanding the contents of the page before even looking at it.

Why is it important?: Using semantic HTML is important for a few reasons.

  1. Matching Standards: Did you know that we can create a custom HTML tag using any word we want? For example, we can make a <mattbasile></mattbasile> tag and it would be interpreted by our local IDE or browser as normal HTML. While this seems neat, it was a huge problem in the early days of HTML. Many companies used custom tags to build their products so that their unique content was represented by the tags. Sounds semantic, but this led to a lot of issues with browser compatibility, new employee understanding, and SEO maximization. That’s when a set of standards were introduced. The standards help browsers, new employees, and companies focus on universal tags that would be understood almost everywhere.
  2. Browser Understanding & SEO: Mentioned slightly above, when search engines parse your page they are looking for content. In a nutshell, when you use semantic HTML tags, search engines immediately recognize that as content. For example, the H1 tag is your most powerful tag. So ensuring it includes the most important text will help search engines understand your product.

How to implement: Using semantic HTML is easy! It’s just like coding anything else in HTML except we use semantic tags to define our content. Here’s an example of two sets of code to show you the difference between the two.

  1. Semantic Navigation:
Image for post
Image for post

2. Nonsemantic Navigation:

From these examples, you can see the semantic version uses tags that define the content. While the nonsemantic, though accurate, is much bulkier and harder to immediately understand.

Additional Resources:

  1. W3C Standards
  2. Interneting is Hard: Semantic HTML
  3. W3School Semantic Elements

2. CSS Selectors & Specifity

What are they?: CSS selectors are HTML items(elements, classes, IDs) that we target in order to apply CSS styles to our HTML. Each of these selectors carries a level of specificity as well. Meaning that compared to other selectors some carry more influence. Part of specificty is the design of selectors and the other half is the cascading nature of CSS.

My instructor told us to visualize specificity as a waterfall. At the top, we have more general selectors and as we trickle down specificity grows more and more… specific. The image below illustrates that relationship:

Image for post
Image for post
As we step down the “waterfall” our specificity is magnified.

Why are they important?: Selectors are the backbone of CSS. They allow us to target and style everything on our web pages. If we didn’t have them, we would rely on inline styling techniques. While inline styling can be useful with some Javascript frameworks, it’s best practice to link an external .css file or embed your markup in a <style> tag in the <head> of your webpage. Embedding has become a popular practice for some marketing pages, but in our stage of the game using an external stylesheet will be great!

Specificity is important because it allows us to understand how CSS will output our styles. In understanding which selectors carry more weight, it will allow us to use CSS successfully. Additionally, it will provide us with the tools to debug overwritten styles.

How to implement: Implementing CSS selectors in relation to their specificity is how we use CSS. We target a selector and then apply styles to it, making sure it’s not overwritten later by other styles. But you might be thinking what selectors are available to me? Which ones are the most powerful? Here’s a list of the selectors in the order of their “waterfall” specificity (reference photo above).

I’m not going to talk about the !important selector. One, because I don’t intend to use it and I suggest you should it avoid it as well. However, you do need to know about it so here’s a link to give you a synopsis…it’s super powerful 😈.

The Universal Selector (*): Represented by the asterisk(shift+8), this will select every object on your page and apply the styling to it individually. While useful, it happens to be the least specific selector. Meaning almost all other selectors to be listed can overwrite based on their specificity.

I say almost because, the next selectors listed, elements, apply stylings generally. That means that if you’re not specific enough in targeting a nested element, the universal styling can overwrite it.

Image for post
Image for post
By using the * selector we’ve turned our text red and applied a padding of 10px around it.

Elements (<p>, <h1>, <div>): HTML elements will be all over your page and can be selected to apply styles. They carry more specificity than universal but less than the rest.

Like I mentioned before, be wary when targeting a nested element because element selectors apply styles generally vs. individually. This can lead to conflict if there’s a universal selector at play.

Image for post
Image for post
We’ve targeted the <nav> tag in our CSS by typing nav and applying our styles.

Classes (.main, .header): Classes are attributes we assign to HTML elements primarily for styling and javascript purposes. The syntax of assigning a class looks like this:

Image for post
Image for post

This class will allow us to select that item (<header>) in our CSS and apply styles individually to it. A class carries more specificity than the universal and element selectors but less than IDs - IDs are coming next.

In order to target classes in CSS, we use a period before calling the class name. That looks like this:

Image for post
Image for post
Notice the . before main-header in our CSS

IDs (#main, #unique): IDs are the last selector I’ll go over and they happen to be the most specific selector on our list! ID’s are similar to classes, except you can only apply a single ID to a single element per page.

Now, you can have multiple IDs on an HTML document, but each ID is its own unique entity. It’s very bad practice to apply the same ID to multiple elements or multiple IDs to one element. To assign an ID to an element we use the following syntax:

Image for post
Image for post
id=”main-text”…. looks similar to assigning a class right?

When targeting an ID in CSS we use the syntax #idName. When targeted and styled, it will take the most priority. Meaning it will overwrite all other selectors listed above. The example below shows this action at play. Although the class “main-header” has assigned a color value of purple, the value of green assigned by the ID “main-text” prevails.

Image for post
Image for post
Look at the power of that ID! Taking the styles right on over. Notice we use an # in our CSS to target our ID.

To conclude, here are two more important facts about Specificity.

The Cascade in CSS: CSS stands for cascading style sheets, meaning as you cascade down the page the lowest style takes priority. Similar to our waterfall example, as you go down a CSS stylesheet the styles listed lower gain significance.

This tends to be an issue when an HTML object has multiple classes assigned or if you apply a style to a class at the top of your CSS page and then adjust it later down the page.

Image for post
Image for post
The assigned styles applied lower in our CSS prevails here!

Inline Styling: Lastly, inline styling can be a real pain in the tush. As I mentioned prior, inline styling is usually not a good idea. That’s because of the strength it holds. When an inline style is applied none of the selectors above can overwrite it. Not only that but it’s often very hard to find it in your code because you’re not expecting CSS to be tucked away in your HTML.

Additional Resources:

  1. Interneting is Hard — CSS Selectors
  2. CSS Specificty
  3. W3Shool — Specificity

I hope this was an enjoyable look into the world of Semantic HTML, CSS Selectors and CSS Specificity. If there’s any confusion along the way or a topic you want more clarity on, feel free to Tweet me. I’m always looking for feedback and ways to improve. Happy coding!

Matt’s Lambda Minutes

A compilation of blog posts reflecting the topics I’m…

Matt Basile

Written by

Full Stack Developer sharing updates of his journey through Lambda School’s course. Check-in for a recap of core concepts and how-to guides.

Matt’s Lambda Minutes

A compilation of blog posts reflecting the topics I’m learning during my experience at Lambda School.

Matt Basile

Written by

Full Stack Developer sharing updates of his journey through Lambda School’s course. Check-in for a recap of core concepts and how-to guides.

Matt’s Lambda Minutes

A compilation of blog posts reflecting the topics I’m learning during my experience at Lambda School.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store