The Semantics of Prototyping with HTML and CSS

This week we explored more of the syntax and semantics of the web and discovered why it is important to chose the right tag for the correct purpose. So in this week’s blog post we will be discussing the different categories of tags and their proper use cases.

Non-Semantic Tags

We are going to start out by talking about non-semantic tags as they seem to be much more prevalent on the web than the semantic tags, which we will cover soon. Non-semantic tags like <div> and <span> tags do nothing more than separate content into smaller chunks so CSS can be applied to those chunks later. But other than that it is difficult to know what section (<div>) of the website we are looking at, when we look at code that only contains div tags. The problem is they are not descriptive enough to clearly and easily outline the sections of a website, and that’s why we need semantic tags.

Semantic Tags

So in order to fix the problem caused by the vagueness of non-semantic tags, we have semantic tags to help clean things up. Semantic tags are a way of saying exactly what type of contents should go inside of a tag. The first and most simple example that we have already seen in previous posts, is a <p> tag, a <p> tag is designed for holding one thing, paragraphs. Now let’s say we wanted to hold multiple <p> tags in one section together, we could use another semantic tag <article> to hold these paragraphs. We can then wrap all of our <article> tags into a <main> tag which is a tag used to hold the “main” content of a page, that is unique to that page. Ok, so now we have a <main> tag which holds a couple <article> tags, which hold many <p> tags, so what’s the point?… We could just as easily have done that with <div> tags.

So what’s the point?

The point is now your website has easily readable structure that anyone can understand, and even more importantly it has structure even a computer can understand. Since computers in the form of parsers, spiders, and indexers, are the ones responsible for ranking your site, for a given search, it is important that you create sites where these parsers can understand your structure. The reason why is because, if you have a site about cars, and you have the word “cars” in a semantic <h1> tag, which is used to hold your highest level heading font, the parser will probably think your site has more to do with cars than a site that holds the word “cars” in a <p> tag; For the simple reason that one site has “cars” as a title in the site and the other mentions the word “cars” in a paragraph. The point being semantic tags allow the parsers to know what your site is about, and this will help better match your site for searches and could increase your ranking over sites that do not use these tags correctly.

More Tags

Below are just a few semantic tags which are important when structuring your site.

<header>

Holds the top or head of your site.

<nav>

Holds the navigation section of your site.

<aside>

Holds the content that will appear on the sides of your webpage.

<section>

Used to represent groups of related content.

<footer>

Holds the bottom of your site.

Targeting with CSS

If boosting your page rank wasn’t enough motivation to use semantic tags, how about making styling with CSS enough easier. These tags can be addressed through the CSS directly to edit these sections. Once again this seems like nothing new, but using something called a child selector you can do more advanced targeting. For example let’s say you wanted to make the font in your <p> tags bigger, but only in the <article> sections of your site, you could do this.

article>p{

font-size: 3em;

}

By doing this we are targeting only the paragraph tags that are directly inside the article tag. However if the <p> tag was nested in another tag it would not be targeted.

<article>

<section>

<p>

</p>

</section>

</article>

In this example the <p> tag would not be targeted because it is not the direct “child” of the <article> tag. Although we can add another layer of targeting to effect the <p> tag the way we want to, as seen below:

article>section>p{

font-size: 3em;

}

This will target any <p> those parent is a <section> tag and grandparent is an <article> tag.

Final Thoughts

Semantic tags are very important for defining structures and roles within your website. While this post sound very negative toward non-semantic tags, non-semantic tags are also useful for designing your site, the point of all of this is knowing the difference between which types you should be using. At the very least semantic tags should contain the major parts of your webpage: header, footer, nav, aside, main; Non semantic and semantic tags can then be used to fill in those sections.

Sources

Semantic vs. Non-semantic

http://www.hongkiat.com/blog/html-5-semantics/

Tags

http://blog.teamtreehouse.com/use-html5-sectioning-elements

Targeting

https://www.impressivewebs.com/targeting-html5-css/

https://www.sitepoint.com/web-foundations/child-selector-css-selector/

Like what you read? Give Tom Raybould a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.