Practical Ecommerce

9 HTML Codes that Ecommerce Merchants Should Know

Running an ecommerce store can mean wearing many hats. Occasionally, that means dropping in some HTML code into your site. Just a rudimentary understanding of HTML can open new worlds for your website. This understanding allows you to embed photos into a site, add a link here or a button there, jump from one section of a page to another with a single click, and much more.

Here is a list of nine common HTML codes that could enhance most any website.

1. Embed an Image

To embed an image you will use the line of code below and adjust certain elements to your specification.

<img src="http://www.idahostockimages.com/images/stock1.jpg" alt="Mountain Range" width="200" height="137" hspace="5" vspace="5" align="left" />

Before embedding any image, be sure to optimize it by creating a compressed jpeg or bitmap file, so it loads quickly on your website.

This is what the code means in layman’s terms:

  • “img src” is the HTML attribute that points to the image you wish to embed; it abbreviates “image source.”
  • The image you wish to embed should appear after the equal sign and between the quotation marks. In this example it reads “http://www.idahostockimages.com/images/stock1.jpg,” which is a URL address to a stock image of a mountain range.
  • “alt” is the attribute that points to the “alternate text” to stand in for the image, if it cannot be displayed. In this example, it reads, “Mountain Range.” Alt text is also crucial for visually impaired users who rely on screen readers to navigate the web.
  • “width” and “height” are attributes that indicate the width and height of your image in pixels. Whatever the size of the original image, you can set it resize it with the the width and height attributes and customize the size of the image. In this example, width is set to “200” and height is set to “137.”
  • “hspace” and “vspace” are attributes that stand for “horizontal space” and “vertical space,” respectively. These attributes allow for a set amount of white space to surround the image so your text doesn’t run into the side of the embedded image. Again, this is measured in pixels. In this example, the hspace and vspace are both set to “5” pixels.
  • “align” is the attribute that sets the picture on the left, right or center of a web page. In this example, the image is set to the “right.”

This line of code results in an embedded image that looks something like this:

 

 

2. Add a Black Border Around an Image

Using the same line of code above, you can easily add, remove or adjust a border around the image, if desired. All that is required is an additional attribute to create a border and adjust its thickness. The code will look something like this:

<img src="http://www.idahostockimages.com/images/stock1.jpg" alt="Mountain Range" width="200" height="137" hspace="5" vspace="5" align="right" border="10" />

  • The code is identical to the image embedding code, but with one attribute added, “border=”10″.
  • Again, the attribute is measured in pixels. “10” is a fairly thick border so it’s obvious for the example, but typical black borders are set to “1.” It will look something like this when embedded into your website source code:

Mountain Range

 

3. Make an Image a Link

To make an image on your website into a link to another page on your site or to completely different website, follow these steps below. This code will combine pieces of the above code and add a few new pieces. Completed, the code will look like something like this:

<a href="https://www.practicalecommerce.com/" target="_blank">
<img src="http://www.idahostockimages.com/images/stock1.jpg" width="200" height="137" border="2" alt="Mountain Range" />
</a>

  • Notice that we’re still using the “Mountain Range” stock photo as an example and we’ve just added an extra line of code and some surrounding code to it to make this image into a link.
  • The “a” stands for anchor and, followed by “/a”, is what transforms the line of code into a link.
  • “’href’” is the attribute indicating that you are going to be pointing your new link to a specific URL. In this example, I’ve used “https://www.practicalecommerce.com” as the URL being linked to.
  • target ="_blank” is an attribute that allows your linked picture to open the new URL (in this example, www.practicalecommerce.com) in a new window rather than in the same window. So, this code will leave your website in one tab of the browser, and the new URL will open in its own tab. If you want the new URL to open in the same window, thereby leaving your website, just remove the entire “’target=”_blank’” line.
  • The rest of the HTML will look familiar — it’s the same line of code we started with. The final product will look like this.

Mountain Range

 

Alternatively, if you’d like to make an image a link, but you’d rather not have a border around it, simply remove the “border” attribute section of the code, which will then look like this:

<a href="https://www.practicalecommerce.com/" target="_blank">
<img src="http://www.idahostockimages.com/images/stock1.jpg" width="200" height="137" alt="Mountain Range" />
</a>

And it will look and function like this:

 

 

 

4. Add a Text Link

Making a segment of text into a link is a straightforward line of code. For this example, we’ll be creating a text link to “Practical eCommerce.” You’ll notice many of the elements previously discussed are used below:

<a href="https://www.practicalecommerce.com/">Practical eCommerce</a>

  • The “a” at the beginning of the code line and the “/a” at the end make this a link.
  • The “href” points to “https://www.practicalecommerce.com.”
  • The text between the two “> <” brackets will be visible and clickable – in this example, “Practical eCommerce.” This creates a link that opens the new URL in the same page. This results in a link that looks and behaves like this:

Practical eCommerce

If you’d like this text link to open in a new window, simply add the same code from the image link “’target=”_blank’” just after the new URL end quotation marks. It should look like this:

<a href="https://www.practicalecommerce.com/" target="_blank">Practical eCommerce</a>

Creating a link that functions like this:

Practical eCommerce

5. Align Text to an Image

HTML code allows you to determine the layout of the imagery and text on your website. The code, when completed will look like this:

<p>
<img src="http://www.idahostockimages.com/images/stock1.jpg"
width="200" height="137" alt="Mountain Range" align="left"/>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".</p>

  • You’ll notice that much of the same code is in use that has been used in the previous examples, only with the addition of some formatting code.
  • “p” at the beginning of the code indicates the start of a new paragraph and “/p” at the end marks the end of a paragraph.
  • Notice in the example that there are three paragraphs in the above code segment, each one can be found with the beginning and ending paragraph attributes.
  • This code produces an image that is aligned to the left of the window, with three paragraphs of text appearing next to it. The end code will produce an image and text style that looks like this:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”.

6. Add a Line to Break up a Page

If you have pages of your website that you would like to break up with a visual horizontal line, there is HTML code to produce this effect. This can be useful on FAQ pages or any page or a billing address page, where there are multiple sub-sections within the same page. The code looks like this:

<hr align="center" width="100%" size="1" noshade />

  • “hr” indicates a horizontal rule is being created in this HTML line.
  • “align” and then “center” indicates that this line that is being created will be centered on screen – “left” or “right” could also be used, if desired.
  • “width” is similar to the previous examples, except that instead of pixels, this uses percentage. In this example, “100%” width is used, so the line stretches across the entire frame, but you may find that a smaller percentage is visually effective as well.
  • “size” is the same as “height” that was used in the previous examples, size is measured in pixels, and here the size is set to “1.”
  • “’noshade’” indicates that this line should appear as one-dimensional, rather than two-dimensional with a shadow effect. The code will produce a line that looks like this:

7. Add a Page Jump Link

Jumping to another part of a current page can be a useful part of a FAQ or any kind of index contained on a single page. This jump will allow users to click a link that takes them a specific part of a page. It takes two lines of code, the first line creates the link:

<a href="#articles">Click Here To Jump To Related Articles at Bottom of Page</a>

The second line creates the landing spot that the link is pointing to on the page.

<a name="articles"></a>

  • The “a” and “/a” are used to create a link.
  • “’href’” is used to indicate what the link should point to, instead of a URL, as usual, it will point to some part of your page. The link will recognize the new part of the page with a trigger word that matches in both lines. In this example, I’ve used “articles” as the trigger. In the first line, a hash mark “#” is needed before the trigger word “articles.”
  • Then, type the text that you would like to link from. For this example, I’ve used “Click Here to Jump To Related Articles at Bottom of Page.”
  • Finally, place the second line of code at the position on the page you wish to jump to. The code will be invisible on the page, but your users will be able to jump with ease. It will create a link that functions like this below:

Click Here To Jump To Related Articles at Bottom of Page

8. Text Formatting

To format text on a web page using HTML formatting code, here is a list of basic and common text-formatting codes:

  • To make text bold, use the tag <b>, then the word or phrase you wish to make bold and then end with </b>. The end result will look like this: bold text.
  • To make text italicized, use the tag <i>, then the word or phrase you wish to make italicized and then end with </i>. The end result will look like this: italic text.
  • To make text underlined, use the tag <u>, then the word or phrase you wish to make underlined and then end with </u>. The end result will look like this: underlined text.

9. Page Formatting

Align your text and make it appear how and where you want it to with these simple lines of code:

  • For headers, there are six different header tags, all indicated by different sizes of text: H1, H2, H3, H4, H5 and H6. H1 is the largest size font and H6 is the smallest. Use an assortment of these — or use just one — to create a header to separate the rest of the text. Here’s an example of what the code looks like:

    <H1>This is a header</H1>
    <H4>This is the body of the text</H4>

This is the how it displays:

This is a header

This is the body of the text

  • To justify text to the center of the page simply use the word “center” in the appropriate brackets, for example:

    <center>This is centered text.</center>

This will create text that appears centered on the page like this:

This is centered text.

  • To produce a single carriage return, rather than start a new paragraph, use the tag <BR> at the end of any phrase you wish to have a carriage return. See the example paragraph below:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <BR>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<BR>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <BR> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <BR> nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <BR> officia deserunt mollit anim id est laborum.

The tag will create a visual effect that looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

 

Practical Ecommerce

Practical Ecommerce

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. beatnbite January 25, 2011 Reply

    I understand that this article is not for web designers, but the use of < b > < i >, < u > and < hr > tags is a bad practice today. Whenever possible replace < b > and < i > tags with < strong > and < em > ones, and use proper CSS styles for underlined text and horizontal rulers.

  2. molly griffin January 25, 2011 Reply

    Great tips! Many of our clients here at Dydacomp always ask for resources to help them with HTML especially since they are more focused on their ecommerce store, not learning HTML. Will definitely share these codes with them. Thanks

  3. beatnbite January 25, 2011 Reply

    It appears as all tag-like strings are removed from comments. I said that the use of B, I, U and HR tags is a bad practice today. Whenever possible replace B and I tags with STRONG and EM ones, and use proper CSS styles for underlined text and horizontal rulers.

    _Editor’s Note: We apologize, beatnbite. We’ve reinserted those tags in your previous comment. Our platform automatically pulled them, and we didn’t notice. Thank you for your comment._

  4. mgirouard January 27, 2011 Reply

    @beatnbite is right on the money. This kind of HTML was deprecated in 1997 when CSS was first introduced…

    All of this markup is greatly simplified by using CSS. Good luck to you if you take the advice from this article… You’ll need it every time you redesign your site.

  5. sgerbig January 27, 2011 Reply

    Well I appreciate this! I’m not a designer, but I know just enough HTML and CSS to be dangerous. It’s true that CSS greatly simplifies things. But sometimes I need to quickly insert something (e.g., clickable link or graphic) into, say, a widget. And inevitably, I’ll fail to remember all the required information and will need to dig around to find out how to do it properly. So thanks!

  6. Ericsabbag February 1, 2011 Reply

    This list is definitely outdated. CSS is critical in these cases. We’ve actually had great success using a chop shop like http://www.psdtohtmlcss.com to get our front-end coding done.