beautiful websites should be built with beautiful code. but what makes beautiful code? In HTML, it really comes down to craftsmanship. It’s all those little things added up that make the whole. the following is a list of elements that should show up in the specific order listed below:
- DOCTYPE Properly Declared
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. - Clean Head Section
Title is set. Character set declared. Stylesheets linked. Scripts linked and NOT included in full. External files have their own related folders. - Body w/ an ID
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 than on your about page. - Clean navigation
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="navigation"> <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> - wrapper DIV
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, etc. This kind of content should be dynamically loaded. Either from a database or with simple PHP include statements. - 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. <h1> for most important stuff. <h2> next. <h3> after that. - Content, Content, Content
Remember to keep your paragraphs distinct and in <p> tags. Use lists where appropriate. Don’t go overboard with <br /> tags, that’s sloppy formatting. that’s what your <p> tags are for. - 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 (<font>) in site.
Related posts: