HTML Coding Basics for Jewelry Designers

HTML coding basics are helpful to know if you have a jewelry business website. HTML is the building blocks of your website; think of it as the blueprint for your websites that browsers read to display on your computer.

Sometimes though, when you’re working on a blog post, or pasting in other elements, things just don’t display correctly. In this instance, knowing HTML coding basics can help you troubleshoot what’s wrong.

After working in email and websites for the last five years, I’ve learned some important HTML basics you can use to modify basic text elements that I want to teach you today.

Before you go running off, HTML isn’t as scary as you think. In fact, if you have even more questions after this post I recommend checking out W3 Schools. I can’t recommend this website enough; it is a fantastic free resource that does a great job breaking down the elements of code and is searchable so you can find answers to any of your questions.

HTML Coding Basics

You typically open an HTML with a start tag, <tag>, and end it 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.

In summary:

• To have your code work use tags
• Make sure you include a start tag <tag> and an end tag </tag> for all phrases
• Include correct corresponding letters or phrases to note different elements>
• Use attributes for advanced styling

Breaking Text

There are two ways that you can break text using HTML. The overall look you want to use will depend on what you use.

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. These tags add a bit more space between your content.

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. Note line breaks are actually empty tags, which means you do not need to have a closing tag for this.

I will say that you can also use the closing tag version to create breaks </br>. The same rule applies; this is an empty tag.

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. For the record, I personally choose to use h2 headings for my sub-heads in posts.

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

• 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 by layering in attributes. These are added within your larger tags. If you’re looking to make an entire paragraph a style, add to the paragraph tags. If you want to style only specific areas of text, add the <span></span> tag.

Adding color: Use the “color” attribute to your code followed by a 6-digit color code that matches your hue. You can find the 6-digit code using Photoshop or another color picker extension on your browser.

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>

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 for me to flip into HTML and add these manually.
You will use the <a></a> 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 or window, you’ll add in a “target” attribute To open a link in a new tab or browser 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. If I wanted my URL to display in a grey color, my final code would read: <a style=”color: #999999; href=”URL” target=”_blank”>

In summary:

• Use the <a> 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

If you learn anything from this blog, I hope you learn to switch to the code if something isn’t displaying correctly. There have been many times that I have copied something in from Microsoft Word or a Google Doc and I will find additional code that carries over into my post. By removing this formatting and starting fresh I can usually fix any problems.

What other HTML coding basics do you use often? How do you feel about HTML code? Leave your comments in the notes below!