Way back, when the web initially got going, there were lots of sites, just as there is today. The way you got from one website to another was you had to discover links on that specific site. And those links connected the sites together throughout the web. Imagine WalMarts homepage from approximately 1996 and you can see down here in the bottom in the navigation there’s a link here for links. Therefore this was a way that we would get between sites. There were no search engines, it was actually hard to find anything.
HTML5 is the latest specification of HTML as released by the W3C, the worldwide web consortium. In this latest version of HTML, the W3Cdecided to incorporate more semantic information into the specification. This resulted in some new HTML tags which were created based onthe way many web designers and developers were building their pages already. This chapter will address those tags in detail, including their proper use. So let’s start at taking a look at a typical HTML5 webpage that might be used without the use of Symantic tags.
I’m in sublime text two, I’m looking at the surfaces that HTML filed which is located inside of the zero one underscore zero one folder inside of your exercise files. I showed you how to configure sublime text to to in an earlier video, and I’m giving you just the HTML here once again, for our work here. Because we’re not really going to do anything with the CSS, we’re not going to do anything with the images. And the point of this semantic HTML is really truly to focus on your mark up.
So, rather than give you all of those additional CSS and images file, I’m just giving you the markup here to look at. Since you’re an experience HTML developer, you’re pretty familiar with the markup already. Take a look at this page and you’ll notice that it’s fairly typically,you’ll notice that there are a ton of divs here on the page. And the divs are marking off major sections of the page. They markup the navigation the markup the header the article. The footer of the webpage, and as is typical for many designers and developers, this particular developer has incorporated those div tags with IDs.
So we have an ID of nav, or we have an ID of content, or we have an ID of header. And the point of all of that is really just to mark off major sections of the webpage. The CSS might incorporate some of those IDs in laying out the webpage but really we’re marking off the sections of the page using this div with an ID type of combination here. At the very top of this page, you’ll see a doctype declaration that’s right there on line one. This is the indicator that this page has built using HTML file. Previously doctypes could be quite long indicating whether the sitewas built in a strict format or a transitional format for HTML.
Or for XHTML. The doctype for HTML four is very short because there’s only one flavour of HTML five. This is it. Be sure you include this doctype declaration at the top of every web page that you build, provided that you want to build it in HTML five. If you don’t have this doctype declaration on line one, it’s not going to validate. So validation is a comparison of your webpage versus the specification that the W3C publishes. And I can show you how the validator works.
So this is the validator that’s located at the W3C website at validator.w3.org, and you can put your HTML markup directly into this webpage.And it will tell you if it is quote valid or not. Valid HTML means that it is following the specification as laid out by the W3C. It doesn’t necessarily mean that the page is semantically correct. Which is very important to understand. It just means that the code is following the specification. There’s a couple of different ways you can validate your webpage.
If I had this up on the web right now, I could enter my URL or URI, right here on this tab that I have open at the moment. I could also upload the file, so I could choose the file from my computer and upload it or I could copy my HTML. Enter it in this box and validate from there, so I just going to go ahead and do a file upload which is pretty simple to do I am going to choose my file from my desktop. And I am going to go into my exercise files folder in chapter one in 0101 in services and say open And then I’m going to say chat.