Jump to content

HELP: PSD to HTML to HTML5 Conversion w/CSS


psionicsin

Recommended Posts

OK so I was following a very easy tutorial on NetTuts (Located here).It's on converting a PSD to HTML. Very simple. I knew how to do it, but read anyway.But my trouble comes here. I've been, as of late, trying to convert HTML like this to HTML5...but I can't for the life of me figure out how to do it. There are things that we DON'T need to use div tags for anymore in HTML5, and it's throwing off my CSS coding because of that as well.Would someone be able to take his code, and show me step-by-step (doesn't have to be 100% involved) on how I would do about converting it to HTML5, while also making sure his CSS (with slight changes I'm sure) coding works with it?I'd be greatly appreciative of this so I can finally wrap my head around the whole conversion process.

Link to comment
Share on other sites

Why is it throwing off your CSS styling? Many HTML5 tags behave the same as divs. The point of all these new tags, I believe, is just to have "divs" that can be used relevantly to make your page structure more obvious. For example:

<div id="sidebar">Archives:JanuaryFebruaryMarchAprilMay JuneJulyAugustSeptemberOctoberNovemberDecember</div><h1>Article Title</h1><div>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div><div id="foot"><a href="/blog">Blog</a><a href="/">Home</a><a href="/contact">Contact</a></div>

Now look how much meaning HTML5 can give to this same page structure:

<aside id="sidebar">Archives:JanuaryFebruaryMarchAprilMay JuneJulyAugustSeptemberOctoberNovemberDecember</aside><h1>Article Title</h1><article>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </article><footer id="foot"><a href="/blog">Blog</a><a href="/">Home</a><a href="/contact">Contact</a></footer>

You can still reference the same ids in your stylesheet. HTML5 just made the structure of your page much more self-descriptive.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...