Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In most browsers, if the browser comes across an element that it doesn't recognize, it doesn't freeze up or stop rendering the page; it simply renders it as an unknown element and just keeps on going. That's great news for those of us who want to use some of the new HTML5 elements but might be worried about older browsers that don't support them. Of course the downside of this behavior though, is that most browsers treat unknown elements as inline-level elements, which could absolutely wreck your carefully crafted HTML5 layouts.
So let's take a look at how we can prevent that. So I actually have two files here open. I have the trails.htm and the main.CSS open. You can find the trails page in the 06_02 folder, and you can find the main.CSS in the 06_02_CSS folder. All right. So what we really need to do here is we need to take the HTML5 elements that an older browser might not understand or might not recognize and we need to, through CSS, to go ahead and tell those browsers that we want those elements to behave as block-level elements so that they display properly.
So to do that, I'm going to switch over to the main.CSS file. So depending upon which IDE or which text editor, you are using just make sure you're working on your main.CSS file. And I'm going to scroll down to roughly line 37 or so. So here you'll find a comment in the CSS code that says html5 display rule. I've seen different people write this rule different ways, so what you need to think about is how your page layout is going to look, which HTML5 elements that you're going to use or might be used in the future for this particular site, and how you want those elements to display.
So we're just going to group a lot of these selectors together, and I'm going to try to do this in alphabetical order. That way if a new element is added a little bit later on to the specification, or I want to take one out, it's easy to add and take elements out of this selector a little bit later on. So I'm going to start by doing address. Then I'm just going to type in a comma so I can group all these together. Then I'm going to do article, aside, canvas, details.
Now there's a lot of discussion right now as to whether the details element is even going to be in the HTML5 specification within a year or so, because browsers just simply haven't been implementing it. So even though I don't use the details element on the page, you know I might use it in the future of the site, so I'm going to go ahead and list it here. So this doesn't have to be just a list of the elements that you're using; you can certainly say well you know I might use this element in the future, so I'll go ahead and put it in here. Just being thorough. We're going to do figcaption, figure, footer, header, hgroup, menu, nav, section, and summary.
And all I'm going to do here guys is go into these rule, this long sort of grouped selector rule, and just type in display and set that to block. So obviously here I have to put a little thought into this, you know which of these HTML5 elements that I'm going to be using or might be using in the future, which of these need to display like block. You'll notice that we're not listing every single HTML5 element or new semantic element here; we're just listing the ones that we think should be displayed as block-level elements. So I'm going to go ahead and save the file, and if I were to preview this in my browser right now, we wouldn't see any change.
As a matter of fact, we wouldn't see a visual change in any of the browsers that we've been testing in, because they all support these elements. However, older browsers that weren't around when say the article element was proposed will now format the element properly as a block-level element, even if they don't really understand what it means.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100158 Viewers
56 Video lessons · 113178 Viewers
71 Video lessons · 82038 Viewers
131 Video lessons · 39367 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.