How to Write a Smart HTML Code
Category: CSS, CSS3 Tutorial | 808 views | 1 Comment |
- 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” & “Script”) - 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.
