We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t write any actual CSS, but we discuss CSS as we go, because markup choices and where we do/don’t need classes/ID’s are directly related to that.
#100: Let’s Write Semantic Markup
Chris Coyier
on
(Updated on )
Wow… Pretty awesome. 100!! w00t w00t!!!
Agree!!!
Nice video and congrats on the 100’th video.Was a Long video, but interesting enough to keep me watching. I was also wondering about the whole section tag acting like a replacement for the div tag and how i should use them.
Anyways thanks for the video and keep up the good work!
Hey Chris,
what do you have against styling elements with the #id property ?
I’d quite like to understand this as well. I tend to use ID’s when styling certain elements on the page – elements like a header, footer, etc, of which there will only ever be one.
I’m lead to believe that ID’s are more efficient, and if this isn’t a shared rule (because, for example, it contains specific positioning and dimensions) wouldn’t it make more sense to use an ID that can also be used in JS to select that element, than to have to define a class AND an ID?
I recently came to the conclusion: Only use IDs if I have a very good reason to that I can clearly define. “I’m using an ID instead of a class because…why?”
If it’s just because the element seems should have an ID because it’s the only one of it’s kind on the page, because it’s a major element like a page wrap or a sidebar, that’s not good enough.
For most things IDs cary too much weight and can cause headaches down the road when I wonder why a new style is being overridden.
As usual, Chris has some good thoughts on the matter: https://css-tricks.com/818-the-difference-between-id-and-class/
The main reason you shouldn’t be using them to style with is they have a very high hierarchy and can clutter your css.
Thanks Gabe. I guess it hasn’t really helped me understand, though – when you say “thats not good enough”, it leaves me wondering _why_ it is not good enough.
Take a div that I’m using as a wrapper, for example, to set the fixed width of my page. It’ll have a width, a height, maybe some margin:auto to keep it centred. Maybe a border or some rounded corners, who knows. There are going to be _no_ other elements on the page sharing that combination of rules, and I don’t think my use of an ID here will impact any of my other styles.
These are the kind of elements I use ID’s one. Maybe that is ok – I guess I am just looking for clarification whether it is or it isn’t – but I had the debate with myself when I wrote the code and decided that using a class made less sense than using an ID, and Rafael’s question has prompted me to want to know more.
Part of it is: Performance. It is well known that ID’s take slightly longer to process in the browser than classes. Don’t ask me why, but it’s well documented. Enough ID’s instead of classes and you could probably see the performance difference.
Also, semantics. Chris has a great article on semantics, some of which is up for debate :P but.. nonetheless, Chris knows his stuff. Do a search for semantics on here, it’s recent enough im sure you’ll find it.
I can think of two good reason to use the #id property for single page layout elements:
Let’s, for instance, take Dave’s header and footer example. That’ll work great in IE7 and up — you can just use
body > headerfor the page header andarticle > headerfor article headers — but what if you have to support &*#@ IE6? You can’t use the>combinator. For this,#headerworks better, IMO.And how about if you’re making, say, a WordPress theme and trying to mark up the content block. On some page templates it’s appropriate to use
<article>and sometimes you should be using a<div>if the text on that page doesn’t make sense as an article. But how do you mark up all those bits so you can style them identically on every page? I suppose you could make a selector likebody > article, body > div(if that’s how your markup structure works), and maybe it’d be a bit more efficient. But wouldn’t it be much easier to maintain if the selector were simply#content?About the possibilities of section tag inside another section tag, please read: http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
Great screencast Chris, i agree with how you wrote your markup 100% because HTML5 is still quite fresh and arguments will continue about it but until i see the final copy for HTML5 semantics on W3C i say that let people have their fun.
As a front end web developer i use HTML5 myself but i base most of my markup loosely on the XHTML standards which i think works fine, my work always validates fine and looks exactly the same in all browsers.
We are all human and if we do what we feel is right then the world can keep turning, debates can continue raging about the topic but in the end we all get the same result.
Personally i don’t think i would have changed anything in your markup.
Just my 2¢
Good work reaching 100!!
This video was really long, but helpful. I’ve learned how to analyse my psd’s with a really interesting process. Plus, this was an extra because I wanted to hear someone using HTML5 and how it should be used semantically, I’m getting into it so it’s pretty helpful. Thanks once more Chris!
Another great screencast Chris! Happy 100th!
I’m just learning about the semantics and advantages of HTML5, and appreciate being shown how others structure their markup. This was indeed a great exercise in concentrating on creating only markup from a design. I must admit, I usually jump between CSS and HTML when developing a website.
I agree with Chris (above); as long as our markup validates and works consistently across all major browsers, we are golden! Everyone has a unique workflow and their own best practices, the debates about proper markup will still rage on indefinitely.
Thanks!
We are 2 of a kind then =)
Great work!
Congrats! We appreciate all the time you spend to generate content.
Anyone else having trouble with the video? I can’t get it to play in the browser or download it :(
Agreed, I can’t get the video to play either had to result to downloading the mp4. I am using OS X lion which has flash problems.
Same, video will not run in Firefox 6 on Windows 7.
Nice demo/screencast (whatever), thank you!
Let me just add a thought:
For the login form submit buttons, you can just use a name (and id) like on the other form elements. This will show up fine on any backend.
Hey Chris,
One note on the NEW, new Sectioning / Outlining Algorithms for HTML5 and Beyond ®™:
When you nest a section inside a section, H1-6 are scoped for that section.
The upshot of that is you can do
And everything is interpreted the way you want.
This is awesome, very important, to see the best way, or options to create a semantic website
Awesome man, congratulations!
I had a couple of questions regarding the search feature.
1) Why not use <fieldset> rather than a <div>? Wouldn’t that be more semantically correct?
2) Similarly, would <button type=”submit”> be more appropriate than <input type=”submit”>?
I’m not trying to nitpick, just wondering :)
1) I think of fieldsets as groups. If there are multiple grouped sets of inputs, I use them, otherwise I don’t. They are a pain in the ass to style around, so I avoid it if I can. But yes, semantic, if multiple groups.
2) I think those are a horse apiece. I think of the input as being more semantic, but use button if a) I need HTML inside them, like an image or b) I want a button element outside of a form.
Great screen cast. Really helping me brush up on my fundamentals. Also, love the new layout.
Hey Chris (and everyone else),
First I wanna say that I loved this screencast! The screen-casts related to my initial reason for finding the blog in the first place. Great to see the progression of them!
As for the subject matter, I didn’t realize semantics could make me question so many of the markup-related choices that I’ve made in the past. In respect to the comment you made about using HTML 5 all the time now, my approach to this is always using the HTML 5 doctype (giving me the option to use new elements) but not going the whole nine yards. For example, I would nearly always use an aside element for a sidebar, or a footer element for a footer, but use good old divs for the main content and header sections. My thinking behind this is the elements that I use new tags for aren’t critical to functionality or display so that, if the CSS doesn’t know what the element is – and js isn’t enabled in the browser – it won’t really matter.
Next thing on my mental list was the theory you mentioned about changing the hierachy of headings based on the page that the user is on. I’d never thought about that before but think it’s a super-cool concept. The only thing I would say on that is that, wouldn’t that be a lot of extra logic in a header file in something like a WordPress because you may have to check what page you’re on first before outputting the chosen tag for the site title in the given situation?
For me, this subject is going to get more and more prevalent because I’m currently 16 so browser support will have advanced a long way by the time I start doing professional design work. After whatching the screencast I started to question the philosophy noted at the start of my comment releating to only using new elements is some cases. Do you think that, because I’m just starting out, I should already be trying to use every forward-thinking technology that I can or is what I mentioned to begin with is still acceptable.
Thanks, Tom
well i have to say i have missed your videos a lot. love the way it always sound like we are working in real life (even though i am much more rude while something goes wrong ) and not too edited. all these “wtf” “grrrr” and so on. just like me:)
ho, and they almost always refresh my mind
Great screencast, enjoyed the new intro/outro as well. Only criticism I have is that you have nested <a:gt; tags in the last <aside> section.
Hey Chris,
I was hoping to watch the video but Its not loading AND when I tried downloading it to see if I could watch it that way it won’t load the download either? Is there a problem somewhere?
But button up top is a direct link to the file. As long as it doesn’t 404, it’s downloading. Maybe right-click-save-as. The problem is probably because the file is like 400MB and it’s going to take a while.
Not sure what the problem is because its been 2 hours and still nothing starting.
For me i had to switch from the HTML5 player to the flash player as the video never loaded using HTML5, however the flash player loaded the video but took about 40 minutes to load.
I think the old MediaElementJs Player was better
Chris, I love how many typos you make xD
Noticed that you used ‘a’ elements inside li elements for navs and lists; I read somewhere that HTML5 supports href attr for all elements, which eliminates the use of ‘a’ elements just for the sake of linking sth. Now that I’m searching about this, this is the only resource I found: http://meyerweb.com/eric/html-xhtml/html5-linking.html
@Hassan – Not sure if you’re proposing something like this:
Whilst it might be supported by HTML5 are there any browsers and assistive technologies that currently support it? Also for keyboard users are the elements able to receive focus?
If I’ve misunderstood, please clarify.
BTW the screencast looks interesting – I’ll be watching it later.
Cheers
Hi, nice tutorial. Can we see also a tutorial with css on this? Thanks in advance
agree..
can u pls do a CSS screencast for this..
thanks..
Yeah, that would make a nice Webcast #101! The CSS for what was done here… ;-)
P.S. Chris Coyier, you rock! You have no idea how much you have inspired so many of us (or maybe you do, but still!). Your screencasts are such a joy to watch, and many of us really learn a lot from them, so thank you!
Would also like to see CSS to accompany this brilliant video
Screencast is very informative. I love the way how you explain things.
Nice tut! Will you also be doing a css tutorial on this same layout?
I would agree. I would love to see the CSS side of this project. As always, great video and fun to watch. Enjoy California!
Great job! Really a nice video.
What would you think of using a link with a class of “button” for the signup and the three quicklinks?
In that case any additional javascript-magic for the clickaction wouldn’t be needed.
Great video.
Don’t know when I had the time to watch it all.
Would be great if you would make the css tutorial for this too.
I know people aren’t (or isn’t ?) crazy about it but… why not use <time> ?
Inside the Campus section we got a complete date (day, month, year) so it would be easy to fill the datetime attribute – it seems that the only issue with it is that it doesn’t accept partials dates and all of them have to be from Gregorian calendar.
Oh, and microformats… but I guess that span.date isn’t that helpful either…
Wow your ThemeForest account has quite a bit of money.
I would have made the grey and red bars a background of the body tag repeating horizontally. This way you don’t need <div class=”inside”>. Other than that, fantastic! A great way to get a head start in writing HTML5 markup.
Thanks bud!
How to see this video on iPad?
I’m not a designer, but I am a web developer. This screencast interested me because I usually write the markup and want to add as little extra work for the designers as possible.
I’m pretty sure there is a reason (which someone will likely be able to point it out) why one couldn’t write something like this:
and then one could surely use CSS to make the render like a and the <a> render like a (or not as in many cases one removes the default behaviors these elements have).
The downside I see is that your markup doesn’t specify that it is a list, but is navigation not semantically more significant than the fact that it is a list? What if later it is no longer a list? Perhaps this is just a matter of preference, but I’ve never seen it done this way and I have no idea why.
Intended to say one could surely use CSS to make the <nav> render like a <ul> and the <a> render like a <li> (or not as in many cases one removes the default behaviors these elements have).
Quick question.
Would it not be a good idea to wrap the whole page is a div like:
Then you could set the width of that div and set the right and left margin to auto?
Cheers,
Cory
Hi Cory,
This is completely fine IMHO, and is what Chris has too…except in his screencast example, the header stretches to the complete left and right of the browser window (which can change sizes). Specifying a size like 960px with your wrapper would prevent you from doing a full screen stretch if the screen goes beyond 960px in width. This is limiting if you have to do that in your example:
vs what Chris uses in his example code:
Basically, your method works if you don’t want your header or footer to go to the edge of the browser window when it’s on a larger screen.
Instead of #wrapper you can also use body tag
Y U no put this on Youtube!
Excellent! This actually answered some questions for me about what is meant when people say semantic in reference to HTML.
Curious as to whether you’d consider following this up with a screencast about styling this layout.
I am running the latest version of Google Chrome and I can’t see the movie :|. I download it with Internet Download Manager!
Bad idea with video tag! Is not working very well, yet.
DUDE! You’re in Palo Alto!
It’s a pretty amazing place, and you should totally check out the Hardly Strictly Bluegrass festival in October in SF. It’s free and amazing…
If you want any other tour-guide beta, let me know.
Cheers,
Matt
Really want to go to that but out of town =/
hey Chris
cool screen cast
thanks
hi Chris,
particularly where we use HTML5 New elements like
section,header,footer,aside
in one layout/page we can use multiples times above elements
Thanks a lot for this video Chris. It helped me focus on “starting from the beginning” on a project I just started.
why are your videos not working on my browser any more, all other work at other sites just yours stop working just wondering if U did something diff.
First of all, great screencast, this one. Second, I’d like to ask a question. When you write your markup so that the content comes before left-hand navigation, how do you, in CSS, still get that left-hand navigation there? It seems that writing your markup in layout order makes it easier to apply a little simple floating column CSS to get everything where you want it. This would not be possible when writing markup in a different order.
Does anyone have a good suggestion?
The whole point is simply to keep the markup structured in order of importance, generally main content is more important than what’s in the aside (as Chris was saying).
The benefit of floats is, no matter how you mark it up, they will re-form. (obviously requires width etc). Simply ‘floating column CSS’ works just fine ;)
Great screencast Chris, well presented and informative as always.
How do you sell the benefits of moving to HTML5 for client sites?
Hey Chris, love to see how you go about writing your mark up!
Using div class=”inside” inside of nav and header look funky to me and a lot less semantic, I usually try to do:
Then use margin:0 auto; width:960px; on nav and header so they are centered, then the backgrounds go on the “wraps”.
Also, I never use ID’s anymore, and if I do they are specifically there for Javascript calls, makes for a nicer stylesheet to come back too as well, especially with daily production work!
I’ve been a fan since screencast #1, glad to see you hit #100! Keep going strong bother!
~ Chris
Nice screencast, I always wana know how I should deal with the new HTML5 tags.
But I’ve one question:
You say that there is a CSS first word selector, I can’t find him, can you tell me more about that?
There’s :first-letter and :first-line but no :first-word pseudo selector, but there are scripts that will wrap the first word with a span and class:
http://www.dynamicsitesolutions.com/javascript/first-word-selector/
What’s better:
1. With HTML
2. With JavaScript
Wrap the first word into a span with a JS script.
And another question:
When should I use a <div> and when a <section>?
i learned so much from this video, thanks for sharing it!
Part way through you mentioned that you don’t always use the standard html way to comment out notes such as stating what div is being closed. You said you used some form of commenting (I think you said php) and that the comment doesnt get processed at all when the page loads.
Would you be able to show what that form of commenting looks like please?
Sweet video intro! Who set that up for you? I have a job I could use them for.
Hey Chris,
You said “We could setup this nugget with Sudo class selectors” in the section where there is the Campus Event Calendar. What do you mean by that? I’ve always wondered how people make those items look a bit more 3d by hanging over the edge a bit. Do you know of any tutorials that would go over that? You start talking about styling it at around 49:40.
–Lands Alive!–
I’m enjoying this screencast. Thanks for creating it. You make instructing seem easy.
You rule, Chris! Just watched your “WordPress 3: Creating and Editing Custom Themes” at Lynda.com. One of the best videos I’ve ever seen teaching anything.
Awesome video! I’ve been searching for a video that illustrates just this! Keep up the great work!
Awesome Bro…Keep it up
Some great work Chris. Your videos and tutorials are a great help.
awesome tutorial that exactly what i needed!!!!
so may be Chris Coyer gonna show us how style it with the css and css3
in this time i don’t know witch proprieties in css3 and if propropriety is not supported by somme browsers how to make sure that our design isn’t messed.
a great tutorial like that must be completed!!!!
thank you very mutch Chris Coyer. Even if you’re a busy you still giving….
absolutely awesome! thank you so much Chris. I abolultely love your video screencasts. I’ve learned a lot. I’ve deigned a photoshop mockup and tried my best to write a clean semantic markup – http://ht.ly/7QdwT
I’d love to learn more. how’s my markup? where I’ve made mitakes?
thanks!
Unfortunately the video doesn’t play. :( I’m using chrome btw and flash player is updated. The video does buff but whenever i hit play it doesn’t take any action.
Super work as always. Unrelated to the content: I think you couldn’t turn off the “preview” layer in Photoshop because you had inadvertently clicked on or moved another layer (you can it edged with the “move” functionality later in the screencast) and the file was waiting for you to click on the confirm or abort button in the top right – which prevented you from doing anything else in the file.
@chris … don’t know if you’re still checking comments on this post – but I’m trying to watch it now after your new theme update and find that it looks like it’s loading but, it’s taking sooooo long that for all intents and purposes it’s hung. I’ve tried to dowload the file – like I’ve done several others and find that it comes over as an mp4 – but nothing I can find will play it. I’m wondering if the file extension got combobulated in the move or something?
Very good video Chris, I got a few ideas from it. I really liked how you kept thinking out loud about the semantic possibilities.
When you were hiding the labels, I would have just had a .hidden class which can then be used on many different elements. It is part of my general stylesheet which I use for most things!
Hello Chris,
Conrats for your big 100. I just started to watch your screencasts last week, so it has been a busy week…
I just want to comment, that a smart solution for the ‘sign up’ ‘login’ buttons situation you mentioned could be to use
formactionand redirect the user to a page with a pre-filled form to finish the sign up.I tend to use the word accent for alternate class styling;
button accent1.Thanks! It’s always great to see another person’s workflow. Great screencast!
Hey,
Why don’t you use
display: none;for hiding the label in thenav?Hi Chris, very good video. Thanks!