What beautiful html code looks like?
Source : http://css-tricks.com/what-beautiful-html-code-looks-like/
I have an addiction. I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if it’s beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Art. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of it’s creator and there is craftsmanship abound. It gets me to thinking, what makes beautiful code? In HTML, it really comes down to craftsmanship. It’s all those little things added up that make the whole. Here is a list of just some of the little things that I look for in other’s code and that I try to do myself that make for good craftsmanship in HTML:
- DOCTYPE Properly Declared It looks like a lot of gibberish, but DOCTYPES are important. They not only allow your code to validate, but they tell browsers things about how to render your page. Simple <html> tags don’t cut it.
- Tidy Head Section Title is set. Character set declared. Stylesheets linked (including a print stylesheet!). Scripts linked and NOT included in full. External files have their own related folders (e.g. “CSS” & “Scripts”)
- Body IDed Putting an ID on your body allows you to create CSS properties that are unique to that page. For instance, you may want your <h2> tags to look different on the homepage. In your CSS you can write: #home h2 {} to accomplish this and not affect <h2> tags elsewhere.
- Semantically Clean Menu You’ve seen it before, you’ll see it again. There is a reason unordered lists are used for menus. Because it really gives you a lot of control.
<ul id="menu"> <li><a href=”index.php”>Home</a></li> <li><a href=”about.php”>About</a></li> <li><a href=”contact.php”>Contact</a></li> </ul> - Main DIV for all Page Content Putting all the content of your page into one main “wrap” DIV gives you lots of control right off the bat. There is where you can set the width of your page for a fixed width site or maximums and minimums for a fluid width site.
- Important Content First It is best if your most important content, like news and events, can be listed first in the HTML. If your sidebar is just navigation or less important content, it is best if it comes last in the HTML.
- Common Content INCLUDED A lot of web content is common from page to page. Think menu bars, sidebars, footers, “boxes”, etc. This kind of content should be dynamically loaded. Either from a database or with simple PHP include statements.
- Code is Tabbed into Sections If each section of code is tabbed in once, the structure of the code is much more understandable. Code that is all left-justified is horrific to read and understand.
- Proper Ending Tags You started strong, now end strong. Don’t be lazy and exclude closing tags for any element, even if the page renders OK without them.
- Hierarchy of Header Tags Use header tags as they were designed, to create titles for sections and signify their position in the content hierarchy.
- Content, Content, Content This is where your content belongs, so go nuts. Remember to keep your paragraphs distinct and in <p> tags. Use lists where appropriate. Use codes like © for © symbols. Don’t go overboard with <br /> tags, that’s sloppy formatting.
- No Styling! Your HTML should be focused on structure and content, not styling! Keep all of your styling in your CSS, there should be no deprecated tags (e.g <font>) in site.
