Simple HTML Code Rules All Jewelry Business Owners Need to Know

If you have a jewelry business website, having a basic understanding of HTML (hypertext markup language) and code is a great tool to have. HTML provides the building blocks for your website; think of it as the foundation that browsers read to display the website on your computer. What looks like weird characters and abbreviations like “<a href=>” mixed in among your body text will be translated into words displayed the way you want them to look: larger font, blue font, italicized font, etc.

[Editor’s note: we are using quote marks like this “<tag>” to help keep the coding used as examples from actually working! These quote marks are not part of the HTML.]

Knowing simple HTML code is also helpful for troubleshoot when your content displays incorrectly. For instance, when working on your website, adding a blog post, or pasting in other elements, sometimes extra elements will also be inserted causing your copy to display incorrectly. In this case, you can go behind the scenes and read between the lines to fix the issue.

After fixing a slew of display issues for email and websites over the last five years, I’ve learned some important HTML basics you can use to modify basic text elements.

Simple HTML Code Basics

The first rule of HTML is that you open with a start tag “<tag>” and end with an end tag, “</tag>”. Each different “tag” is noted by a specific letter or series of letters that mean something. Within each tag you can also have attributes to further style elements.

Breaking Text:

There are two ways that you can break text using HTML.

For paragraph text, you will want to include “<p></p>” HTML tags. The opening phrase goes at the beginning of your content, and the closing goes at the end. For a softer break, use a line break tag: “<br>.” Line breaks are good ways to introduce lines of content without gaping spaces in between. One note about line breaks: they are empty tags, which means you do not need to have a closing tag for this.

Paragraph Break and Headings HTML Code

Paragraph and Heading Code Results

If you want to give emphasis to text, use headings. Headings are specific formats that will display your text in different ways. There are typically four different sizes, h1, h2, h3, and h4 with h1 being the largest in size. Display these using “<h1></h1>” tags.

In summary:

Use the “<p></p>” tags to note paragraphs

Create a softer break using “<br>”

Add emphasis with heading tags “<h1></h1>”

Styling Your Text

Basic styling to use in your text includes:

Bold: “<b></b>”

Underline: “<u></u>”

Italic: “<i></i>”

Make sure these tags are placed around the copy you would like to give emphasis to. If you want to universally add styling to your text, do so within paragraph tags. If you’d like to go beyond and add color, layer in attributes to your tags. If you want to style only specific sentences or words within a larger body of content, add the tag.

Adding color: Use the “color” attribute to your code followed by a 6-digit color code that matches your hue.

Changing Font: Use a “font-family” attribute to change your font, and change the size by using a “font-size” attribute.

Let’s put these into action. If you want to turn a paragraph of text blue, have the font display as arial, and the font size display as a 10px size, do so by adding: “<p style=”color: #4285F4; font-family: arial; font-size:10”>paragraph text</p>”

Styling Code

Styling Code Results

In summary:

Use the style attribute for styling HTML elements

Use color for text colors

Use font-family for text fonts

Use font-size for text sizes

Adding Links

Links can sometimes be difficult to manage, and for this reason it occasionally makes sense to flip into HTML and add these manually. You will use the tags to designate a hyperlink and an “href” attribute to designate a destination address. The code for adding links is: “<a href=”URL”> link text </a>.”

To specify whether a link opens in a new tab of windows, you’ll add in a “target” attribute. To open a link in a new tab, you will use the phrase:“<a href=”URL” target=”_blank”>link text</a>.”

All links default to displaying in a blue color and are underlined. If you want to change the color you can apply the same “color” attribute rules from above to your link code. For example, if I wanted my URL to display in a grey color, my final code would read: “<a style=”color: #999999; href=”URL” target=”_blank”>”

Link HTML coding

Link Coding Results

In summary:

Use the element to define a link

Use the href attribute to define the link address

Use the target attribute to define where to open the linked document

Change the color formatting using the color attribute

I hope this blog is a helpful launching point for learning HTML. If you need more help, W3Schools is a great online resource for all HTML and other coding questions.

What other HTML coding questions do you have? Leave your comments in the notes below!

Ashley Lauwereins is a marketing professional by day and a jewelry designer for her own business Fifth Essence Jewelry by night. She resides in Colorado where she also enjoys hiking, running, and drinking craft beer.