HTML5 and CSS3

Hello, and welcome to my CSS Core Essentials course 🥳

Before we get started, I just wanted to point out some key aspects to the lessons:

  • Most lessons have video and written content. These compliment each other as the videos are meant to be brief and the written content is meant be more detailed.
  • In the lessons, key concepts will stand out with a special graphic.
  • At the end of each lesson is a way to track your progress. It's optional, but if you set it to "I Know This", it will help you see what progress you've made when reviewing all lessons.
  • If you want, you can take the optional quiz at the end of most lessons. The purpose is to help you gauge whether or now you understood the main concepts.
  • Enjoy the course...
    Brad Westfall

You're about to embark on a big journey. We hope you find this course engaging, detailed, and fun. I'd love to get some feedback, so please let me know how the course goes for you.

I totally understand that you want to jump in and start writing HTML and CSS right away. Let's just do a brief mention of the version numbers for HTML and CSS and their "standards". If you want to keep reading the optional content at the bottom, we'll get into some of the back story of these technologies.

Languages like HTML and CSS have version numbers. There are "standards bodies" that control how HTML and CSS work and sometimes they update the standards and therefore update the version numbers. In 2009, these standards bodies decided to change how the versions work. They just released HTML5 and CSS3 with tons of new standards but the problem with web standards is that they are subject to a waiting game for browsers to implement them. As a web developer I have to wait for enough browsers to update in order for me to be able to safely use the new standards. If I use a new standard feature of HTML or CSS too soon, it might work in the browser I prefer to use but perhaps a lot of the website's users will have a broken experience because their browser is behind.

This causes a huge lag between when standards are released and when I can actually start to use them. Even though the standards bodies are the authority, if the browser doesn't yet support the latest things, or for some reason decides to not ever support it, I'm stuck between deciding if I want to go without this new feature or using it and alienating some of my users.

When a new big version comes out with tons of new standards, it can take a while for all the browsers to get caught up. So after HTML5 and CSS3, they started doing what is called a "living standard" which basically means to release the new standards more frequently and without big version numbers. As soon as a new feature of HTML and CSS becomes standardized, the standard for that one feature is released right away. Also, they decided to be much more open about the drafts of these specifications as they're being worked on so that browser creators can start to implement these new standards earlier. The idea is that by the time the standard is finalized, the browsers can very quick have that feature ready to go.

For web developers, this is a huge win.

Because of this, it has been said for years that there will not ever be an HTML6 or a CSS4. But sometimes plans change and there actually might be a CSS4 someday after all.

All you need to know now is that the standard body for HTML and CSS is the W3C and Mozilla writes the official docs for those standards called MDN: https://developer.mozilla.org/en-US/

With that, you know enough to get started. Feel free to move into the next lesson.

Next Lesson: HTML, DOM, and Elements

If you're interested in hearing the back-stories about fractured standards, browser wars, and competing documentation feel free to keep reading.

The Open Web

The web is yours. It is open and free.

Nobody owns HTML, CSS, or JavaScript which are the three core technologies of the web. The stewards of the web are the standards bodies who have committees consisting of technology leaders from a diverse group of tech companies around the world including the browser vendors themselves.

Standards

The most well known standards body is the W3C (World Wide Web Consortium). Their role is to advance the web by creating documented and fair specification for the browsers to implement. The W3C was created by Tim Berners-Lee, the person who invented HTML and the concept of a browser in 1989. CSS was created later around 1997/98.

Without a spec, browsers would just implement any feature that suits their needs and we would have a fractured web. At times, certain browsers have dominated the market share. Imagine if they created their own non-standard features and didn't care about creating consistency with other browsers. Because of their large market share with users, you as a web developer would almost have to fall in line and do what they wanted and eventually they would own the web because the standard bodies would be meaningless with no fair oversight. This almost happened in the late 90's and early 2000's with what is known as the "Browser Wars".

Some of the biggest committee members on the W3C are the browser vendors themselves like Mozilla for Firefox, Apple for Safari, Microsoft for Internet Explorer, etc. I'm not sure if Google was a committee member at the time, but Chrome didn't exist yet at the time of the browser wars. The W3C was debating abandoning HTML in favor of a new specification they wanted to call XHTML. A minority of the committee members did not agree. Even though they were a minority, they were Mozilla, Apple, and Opera (three of the biggest browser vendors besides Internet Explorer).

In 2004, that minority of committee members created their own group called WHATWG. This would mean a fracture in the standards. As a web developer like you and me, this is a bad thing because now we have to do extra work to make our sites functional for both sets of standards at the same time.

As bad as it is to have this sort of fracturing, I think the direction of the WHATWG was overall better for the web. I don't mean to give you the impression that the two specs where completely different either. For the most part, the vast majority of the things you would do to make a website were consistent between the two specs but imagine trying to implement something one way and it works for Internet Explorer and if you implement it the other way it stops working for IE and now it works for the other browsers. This was our reality back then.

In 2019, the two standards bodies settled their differences and WHATWG re-joined the W3C. If you're interested in this story more, Wikipedia documents it pretty well.

Documentation

The actual specification can be fairly complex to read and understand from W3C and WHATWG. I don't think they're for most web developers to read and to gain understanding of the web. Mostly the specification is a blueprint for the browser vendors to know how to build browsers, not necessarily for web developers to learn how to build websites.

Web developers should use the official documentation instead. The only problem is, who's in charge of that?

In the 2010's, Microsoft, Google, and Mozilla all had their own version of web documentation. It's not coincidental that they're also the creators of the biggest browsers so they were trying to document how HTML and CSS works in their browser. Eventually, they came to an agreement that it probably wasn't best for the web to have three independent sets of documentation. They decided that Mozilla's documentation called MDN should be the official one.

Their docs are now called MDN Web Docs. You probably don't need to memorize their URL. If you want to find the docs, just include "mdn" in your search. If I want to see the docs on how Flexbox works, I'll do a Google search for "mdn flexbox".

You can always visit the MDN Homepage if you want to see the docs, but most likely you're going to search on Google for some CSS, HTML, or JavaScript solution to what you're working on and you'll stumble upon the right MDN page through that search.

On this topic, I just want to also point out that the website w3schools.com is not the official guides or docs and has no official tie to the W3C. You'll certainly find yourself doing searches for things and find yourself there sometimes, and I'm not saying it's a bad resource (although some developers might not like it), I'm just saying they're not official and sometimes new developers think that it is.

Loading content