Some have been asking me to help them with the HTML coding for their websites. While I enjoy helping artists, I often do not have the time to go into detailed tutorials with everyone who asks.

Therefore, I have decided to write this crash course dedicated to some very basic HTML, which may help artists in optimizing images and links for SEO (Search Engine Optimization) and in formatting their websites. With WYSIWYG (What you see is what you get) editors, artists do not often need to understand advanced coding. As for myself, I have had to work with the html, especially for including widgets and adding alt and title tags to images (some editors do not have this option).

Even if you use a WYSIWYG editor your whole life, it does benefit knowing some basic things of how websites work underneath.

Basic Setup of a Website

Basic Rules: Everything in a website comes between the HTML tags. All tags on a site function in pairs. The closing tag always includes this symbol “/”

Header – This is where meta content and style sheets are placed. The style sheets control the formatting for your website. Certain claim codes, such as Google Analytics, are also placed inside this section.

Body – Everything displayed on a website is included within BODY tags.

Formatting Text

Formatting your websites and art blogs will help to emphasize certain parts of your content, and make it a more interesting read. Here are some basic formatting tags.

<b>bold text</b>

bold text

<i>italics</i>

italics

<big>big words</big>

big words

<small>small words</small>

small words

Alignment of text

Sometimes you may want to align an image or block of text. Just place them inside <div> tags and state your alignment like this:

<div align=”left”>This text is to the left</div>

This text is to the left

<div align=”right”>This text is to the right</div>

This text is to the right

<div align=”center”>This text is centered</div>

This text is centered

HTML Headings

Headings help to bring structure to a website, and search engines also love them. Include all your main keywords inside headings for proper SEO.

Headings go from one to six, with one being the most important.

They are structured like this:

<h1>This is the main heading</h1> <h6>This is the least important heading</h6>

Using Tables to Create Image Galleries

There are certain instances you may want to make use of tables, especially for a gallery of thumbnail images. If your HTML editor does not have this function, here is how to create a basic table from HTML coding.

To create a gallery of images, first create your thumbnails. Use your HTML editor to insert them inside separate cells in the table.

HTML Lists

Lists are useful for easily organizing links and items on your site. I use them often at Artpromotivate. Having blog posts organized into lists helps your content to be easily crawled by search engines. There are two types of lists – ordered <ol> unordered <ul>

An ordered list is represented by numbers, and unordered by bullet points.

Here is a basic list setup in HTML.

Unordered List:

<ul> <li>Abstract Art</li> <li>Surreal Art</li> </ul>

Abstract Art

Surreal Art

Ordered List:

<ol> <li>Paintings</li> <li>Sculptures</li> </ol>

Paintings

Sculptures

This is by no means a thorough HTML lesson, but only a crash course on some of the basics that can be useful for formatting and optimizing for SEO.

If you want to learn more about HTML, one of the best sites I recommend is W3Schools. This site has free step by step lessons on learning HTML and other programming languages such as CSS and Javascript.

@Sarah MillerThanks Sarah.. I have heard many say that HTML knowledge is not needed for the newer website builders. But, I still find myself having to use it all the time, especially for this blog. For people who plan on spending a lot of time working with a website or blog, I think it is very advantageous to know it.