Code

Five Handy HTML Tags To Help Your Ecommerce Business

Editor’s Note: Ecommerce merchants operate businesses using complex technologies. We launched our “Need to Know” series to help merchants obtain a basic understanding of these technologies, recognizing that most merchants are not web developers or programmers. In this installment, contributing editor Armando Roggio explains common HTML tags and how to use them.

There is an analogy between driving a car and operating an ecommerce business.

With a car, you need to know a few basic things, like how to steer, accelerate, and brake. Likewise, the manager or owner of an online retail business really only needs to know how to process orders, manage customer service, and keep up with the accounting.

But a motorist who can also change a tire, the oil, or even a brake rotor, will save money on repairs and may be able to upgrade (add better tires) and optimize the vehicle. With this sort of advantage—and analogy—in mind, here are five handy HTML tags that could help an online retailer make minor changes or even repairs to an ecommerce site.

1. <!DOCTYPE>

The DOCTYPE tag or Document Type Declaration tells the web browser what set of rules to use when it renders a web page. Using the wrong DOCTYPE, or omitting it altogether, may cause the browser to render the web page in a safe or “quirks” mode.

Of course, when you specify which set of rules your page is using, you need to make sure that the actual code on the page follows those rules.

The newest and most updated DOCTYPE is HTML5. It is also the simplest.

<!DOCTYPE HTML>

Whatever DOCTYPE your site uses, make sure that your code follows those rules. You can test your site’s validity using the World Wide Web Consortium’s HTML Markup Validation Service.

2. <head>

The <head> tag and the element it represents is the container for non-content information about the web page. This section includes the page’s title and meta data about the page, and it is often the section wherein external style sheets and JavaScript files are referenced.

The head can play an important role in search engine optimization. For example, SEO experts recommend optimizing your page title so that it is both meaningful to site visitors (shoppers) and to search engines.

A poor title might be, “Some Hardware Store Website – Home Page,” while a better example would be, “Tools, Lumber, and Nails – Some Hardware Store.”

The head will also include meta data, like a description of the page. This description may appear on search engine results pages.

Ensure that the <head> tag on your site includes the proper title and meta data.

3. <link>

In HTML the <link> tag is most often used to reference an external style sheet—that is, a file containing page presentation instructions that is stored separately from the page’s HTML file. A typical link element will look like this:

<link type="text/css" rel="stylesheet" href="style.css">

In this example, type tells the browsers that we are using a Cascading Style Sheet (CSS); rel confirms that it is to be a style sheet; and href describes the path to the CSS file. In the example above, the style sheet, style.css is in the same directory as the HTML page, but we could have easily referenced a style sheet anywhere in the site hierarchy or even anywhere on the web.

In web design it is generally better to use external style sheets than it is to use internal style sheets like the one below.

<style type="text/css" media="screen">
<!--
body { margin: 10% auto;  text-align:center; background-color:#000;}
-->
</style>

So, for your website, check to see that style is managed with a <link> tag not a <style> tag. It is rather common to require several external CSS files, so don’t be surprised if you see a file <link> tags in the head section.

4. <script>

In web design, HTML provides the basic content, CSS provides layout and presentation, and JavaScript makes the site interactive. Like style sheets, JavaScript can be either external or internal.

While there are precious few reasons for using internal style sheets, there are plenty of times when an internal JavaScript makes sense. An internal JavaScript will look something like this example from a content slider called CU3ER:

<script type="text/javascript">
        var flashvars = {};
        flashvars.xml = "config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);
</script>

An external JavaScript reference is similar to an external CSS reference.

<script type="text/javascript" src="js/swfobject/swfobject.js"></script>

A <script> tag should be placed either in the head section or just before the closing </body> tag. Both positions are correct, and a typical web page may have script references in both places.

JavaScript can have a significant impact on how quickly or slowly a page loads. A site owner or manager will almost certainly want to use JavaScript, but will want to make sure that it is not over used.

When many JavaScript files are being added to the site, it is a good idea to concatenate them—putting them together—in order to create a few larger files.

5. <a>

The anchor or <a> tag is the backbone of the Internet. This is the tag that allows you to link from one page to another.

Given its relative importance, it is impossible to leave it off of a list of useful tags, but it should also be the tag that every Internet user is the most familiar with.

The anchor tag can take several forms, but at its most basic it looks like this:

<a href="http://some-url.html">Some Anchor Text</a>

Driving Your Business

HTML is primary coding language underlying an ecommerce business. While there are literally hundreds of tags and elements that make up that language, this handful of examples, can give you a basic understanding of how a web page works—not unlike changing a tire or driving a car.

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x