Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Patrick Johnson
Patrick Johnson
9,505 Points

Web Standards & Best Practices

So I've casually coded (HTML&CSS) for about two years now, nothing serious, just for fun.

But one thing that is also on my mind, and now in a more socially-focused web development world, are best standards and practices.

Curious if anyone can point to one or two sources that is a culmination of best practices for various languages?

While I understand that some folks like to indent their code to all align in their CSS that isn't what I'm looking for.

Looking for small things like why you should or shouldn't import a CSS page into another page, why you should or shouldn't use a jpeg over a png or gif. Why you should or shouldn't create div tables or have some elements floating without a div?

6 Answers

Well I don't know of any pages that sum up best practices (I'm sure they exist though) but here's one I use.

Try limiting loading images and files in your HTML pages. Every "object" (in this case, javascript file, image, stylesheet or any other external resource that is loaded into your page) adds a little strain to the page. The more objects you have loading, the cumbersome your page will become.

You can reduce the amount of objects loaded into your page by using sprites in your CSS files instead of seperate images.

For example, you have about 20 icons on your page. Instead of loading all icons as seperate images you can load one "big" image that contains all of your icons. Using CSS you can reposition the background so that for each icon the correct part of the "big" image is displayed (the part where the icon is visible).

Another way to reduce the amount of objects is to combine CSS and Javascript files. Instead of loading 10 CSS files, just 1 file is loaded containing all 10 files combined. This is quite tricky to do though since it'll probably involve PHP, Ruby or another "server-side" language.

Hope i've been able to contribute!

James Barnett
James Barnett
39,199 Points

Most of that info is buried inside blog posts and books on web design.

"Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied."

  • div tables

    • div tables are a form of div-itis (see below)
  • Floating without a div

    • any element can be floated, using a div when it doesn't have a semantic meaning is called div-itis
    • Among other issue div-itis includes, wrapping elements in a div solely to class and/or id attributes for styling with CSS.

The downsides of div-itis include:

  • It dilutes the separation of presentation & structure.
  • It makes code harder read, harder to style and mistakes become more common.
  • Non-semantic elements are meaningless to screen readers, search bots, feed readers

Accessibility and Responsive design are very cool practices.

Treehouse has a badge to get you started. http://teamtreehouse.com/library/websites/accessibility

(I just reviewed it and put it to use).

Keeping up with your image alt tags is important for screen readers.

Responsive web design is cool, too. I haven't worked through the Build A Responsive Website project, but the videos are making sense.

James- care to comment on <section> vs. <div> ?

James Barnett
James Barnett
39,199 Points

@Anthony - I'm not 100% sure I know what you are asking me.

However if I were going to pick a few guiding principles I'd go with:

  • Semantic Markup
  • Progressive Enhancement
  • Accessibility

@James- Apologies- markup hid my question. I was asking your thoughts on section / header / footer tags vs. div tag. I've seen these HTML 5 tags used for structuring your content, though I'm learning with the div tag for css.

Seems div is used for visual organization, and potentially structural (for a screen reader), though I've seen the semantic tags for header footer nav section and article for HTML5.

Thanks for posting so much info on this forum, with quality links!

James Barnett
James Barnett
39,199 Points

@Anthony - Here's my understanding of the HTML5 structural elements:

  • nav: main navigation block
  • article: A grouping of content that can stand on it's own. For example it could be synidated in a feed reader (e.g. blog post)
  • aside: Usually a side bar
  • header / footer: Usually metadata / nav links for a section element
  • section: A "thematic grouping of content"

Most of those seem kinda blog-centric to me except for nav of course. As header & footer are not for sectioning content instead they are to be used inside of the section element. So in a lot cases I'll still be sectioning my pages with div's using semantically meaninful classes.

Here's a blog post where you can also read more about the HTML5 structural elements.

Here's a flowchart to help you decide which element you should use:

HTML5 Doctor's Sectioning Flowchart

image source

If you want to get more info about a particular one HTML5 Doctor is a great resource:

I've also read some intresting dicussions by people far smarter than I am over at HTML5 Doctor and 465 Berea Street among others about the pros and cons of the "new" HTML5 structural elements.