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:
- Semantic HTML
- 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.
- 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.
- 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.
- Semantic Navigation:
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.
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:
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.
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.
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:
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:
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.
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.
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.
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!