At Media Box, we make quite a few websites and understanding basics, like HTML and CSS, is the backbone to providing web design services. However, as with all things, there is a right way and a "not-wrong-but-less-optimal" way to do things. While HTML is a simple language, it is also the foundation of your website. The markup for a large site or web application can easily get out of control and transform into a bloated, illegible nightmare. However, do not fear ladies and gentlemen! Here are a few tips to help get the most out of your markup.
1. Separate structure, presentation, and interactivity
The beauty of a standards-based approach to web design is in freeing HTML, CSS, and Javascript to take their roles independent of each other. Separating your markup, styles, and scripts allows you to write your code once and use it everywhere you need it.
Suppose you wrote your markup using inline styles to save time:
<div style="background: none repeat scroll 0% 0% black; color: white; font-size: 12px; font-weight: bold;">
<p>Here's a paragraph with white text on a black background.</p>
</div>
This happens frequently and works great when you're short on time, but imagine coming back to make changes months later. Now you have to track down each style on each element to make modifications. Imagine having to repeat this exercise on multiple pages if you reused the same code snippets frequently. Your initial time savings has evaporated, instead becoming the monumental task of finding each style on each page and changing them...over and over and over again. You'll most likely end up re-writing your styles the way you should have done so in the first place.
Save yourself the hassle and link your style sheets or script files to the head of your HTML document and isolate their functionality as best you can.
<head>
<title>My Awesome Website</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="myScripts.js"></script>
</head>
This way, you write your code once and can modify features and presentation to your heart's content, all without changing your page's structure!
2. Use Attributes
HTML elements have a variety of attributes that help describe details about the element. You're probably familiar with a few of them. For instance, <a> tags require an "href" attribute to link to documents or locations, and you must utilize the "id" or "class" attributes to target a specific element with CSS or Javascript. Often, this is all that's necessary to display the element and style it correctly, but there are other attributes that can help you out with things like usability and Search Engine Optimization.
Using the "title" attribute on an element will give it the tooltip text that appears when you hover over an element. "Title" can also be useful if you have replaced an element with image content rather than text.
<p id="myParagraph" title="My Awesome Paragraph">Here is my awesome paragraph text.</p>
The "tabindex" attribute is used to specify the order in which elements respond to hitting the "tab" key on the keyboard. This is a nice feature to include if you have the time and resources as not all of your users may be using a mouse and power users may want to cycle through your navigation or other elements with their keyboard.
<ul>
<li tabindex="1" >List Item 01</li>
<li tabindex="2" >List Item 02</li>
<li tabindex="3" >List Item 03</li>
</ul>
Search Engine Optimization techniques often take advantage of HTML attributes to help your site rank better within search engine results. Search engines often like to see these attributes in the markup that they crawl. For instance Google's ranking algorithms absolutely take into account additions like "alt" attributes on images or "name" attributes on links. Be sure to include these attributes to help meet your SEO goals. Take a peek at the W3C specifications for HTML to find out which attributes are available to you and their purposes.
3. Semantically Sound Markup
Semantics refers to the interpretation of words and their meaning in a given context. In the case of HTML, this refers to the practice of utilizing elements for their intended purpose and leveraging that purpose to improve the structure and meaning of your markup. Once you understand the context of your site's content, you can decide how to mark it up using the right element for the job.
Consider the very common scenario of writing a paragraph of text. You will most likely use the element to contain this text, since the element is intended for paragraphs.
<p>My awesome paragraph. It's the best paragraph ever.</p>
By default <p> is block level, meaning that other elements will take their place above or beneath it, but not on the same line. You could use a <div> just as easily for the same purpose as <div>'s are also block level and can contain text. But a <div> is a division, not a paragraph, it's intention is different and it's scope is broader.
<div>My not so awesome paragraph. I intend for it to be a paragraph, but your screen reader thinks it's a division. Ruh-roh...</div>
I'm not implying here that all text has to be contained in a paragraph element. In fact, almost all HTML elements can contain text and still render as valid markup. Elements like <li> or <span> are supposed to contain text this way. But if you INTEND to create a paragraph, use the paragraph element to describe it. By not marking it as a paragraph, you're subverting the main function of HTML, which is to describe a document and it's pieces in order for the browser to understand it.
This next one is a bit trickier but is a perfect example of using semantics to better serve your markup. Consider having a list of people's names, beside which you have their descriptions. You could easily mark it up like this:
<ul id="myListOfPeople">
<li>
<span class="personName" >Johnny Awesome</span>
<p class="personBio" >Here is Mr. Awesome's biography.</p>
</li>
</ul>
Simply float the <span> next to the paragraph, apply your other styles, and you're good. However, if you grab your HTML cheat sheet, you'll find another type of list called a "Definition List" created with the <dl> element. A defintion list contains two additional elements that make up the list items, a "definition term" and a "definition description", <dt> and <dl> respectively. Let's revisit our list again using these elements instead of spans and paragraphs:
<dl id="myListOfPeople">
<dt class="personName">Johnny Awesome</dt>
<dd class="personBio">Here is Mr. Awesome's biography.</dd>
</dl>
Here we've made the person's name a definition term, whose description is their biography. We now have a structure that semantically supports the idea we're trying to get across, that the description of a given person is related to their name. We've also saved ourselves the extra <span>.
There are plenty of other examples like this where a little research into the available HTML elements can come in handy marking up your document. You can find them using the official W3C specification for HTML or taking a peek at the W3Schools tutorial site for HTML. If you're looking towards the future, HTML5 has some excellent new element additions (like <section> or <article>) and modifications of old elements to help better implement semantics in future HTML documents.
4. Comment and Indent your Markup
You can get away with writing code as a haphazard mess and still render your page successfully. Unfortunately, if someone else picked up your code it could prove difficult to read and understand. To make it easier on others, make sure to comment and indent your code.
Organizing your markup is fairly simple. The browser will parse your code from top to bottom, so elements will render in the order in which you write them. If you've placed all your code on a single line or didn't indent new lines, you can create a very difficult to read mess. Sure, it may render properly, but if you were to hand off that code to someone else, they may spend more time trying to read what you wrote, rather than improving your code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11"><title>My Title</title><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" /><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset-min.css" type="text/css" media="screen" charset="utf-8" /><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" charset="utf-8" /><script type="text/javascript"></script></head>
<body>
<div id="masthead" class="group"><h1 id="title">My Crazy Mess of Markup</h1></div>
<ul class="navBtns group"><li class="item01 left"><a href="#">Post 01</a></li><li class="item02 left"><a href="#">Post 02</a></li><li class="item03 left"><a href="#">Post 03</a></li>
</ul>
Got all that? You must have better eyes than mine, and mine are pretty good! It is much cleaner and easier to read something more like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title>My Title</title><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset-min.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="masthead" class="group">
<h1 id="title">My Crazy Mess of Markup</h1>
</div>
<ul class="navBtns group">
<li class="item01 left"><a href="#">Post 01</a></li>
<li class="item02 left"><a href="#">Post 02</a></li>
<li class="item03 left"><a href="#">Post 03</a></li>
</ul>
See how nice and clean that looks? You can glance over this and get a sense of what is going on much, much faster now that you're not drowning in text, trying to figure out where one element ends and the next begins.
5. KYSS - Keep Your Structure Simple
There are any number of ways to markup your document and have it render the way you want it to. For instance, say you want to make a list and then move it 10px to the right. Maybe you start by writing:
<div id="myListContainer" style="position:relative; left:10px">
<ul id="myFancyList">
<li>List Item 01</li>
<li>List Item 02</li>
</ul>
</div>
This looks exactly the way you want it, but think about that structure for a second. Why do you need that containing <div>? Unordered Lists are already block level elements, just like <div>'s. You can get rid of that <div> if you don't need it to contain anything but the list. Consider if you had done this for ten different lists or something. Removing that much markup doesn't seem like much, but it can absolutely help reduce your page weight and rendering time. Most importantly though, if you don't need it, why bother writing it?
These are some great tips to get your markup under control and at maximum efficiency. Unfortunately, production circumstances may not permit you to create your markup in a calm, cool, orderly fashion. You may very well find yourself without the time you need to properly comment your code or you may need superfluous markup to circumvent browser or technological shortcomings (for example, flexible rounded corners!). But I guarantee if you implement these practices into your workflow you'll have a happier, more satisfactory experience developing HTML.