For some of you, HTML (hyper-text markup language) is as foreign a language as when you first learned to read and write. This article is for you. For those of us who have been working with HTML for over 10 years, this article will not apply. However, there is a growing number of writers and contributors to content sites that have never spent time with HTML, because their expertise is in writing and editing, and not necessarily formatting articles for online publication.
These days though, if you’re a freelance writer, you are probably being asked to submit your articles through some kind of CMS (content management system), whether it be WordPress, Joomla! or a proprietary content management system. Regardless, they all treat HTML the same and learning a little HTML now can help writers a long way down the road.
Some of the main issues come into play when a writer starts off in Word or another type of word processing tool. When a writer copies text from Word and then pastes it into a CMS, a ton of proprietary MS code is copied along with it. This can mess up the default CSS (cascading style sheet) and formatting for a site. The remedy is to copy from Word, paste into Notepad or another type of plain text editor, and then copy and paste that into the CMS. However, that still does not always do the trick.
In my experience, I have seen all sorts of strange code appearing when a writer submits an article into the Joomla! CMS that I use for my site. Everything from extra <div> tags to <p> tags showing up after each and every line instead of each paragraph and <span> tags that have no purpose in the code other than to fool the default CSS formatting. The extra <div> tags can be especially dangerous because they can alter the appearance of columns and suddenly the bottom footer is appearing in the right-hand column.
Hopefully, this article will help you move past the Rookie mistakes and you can reach the rank of Beginning HTML expert. That will undoubtedly look good on your resume and it’s something you can mention the next time you are looking for new freelance work.
In the majority of CMS’, there is most likely an icon in the WYSIWYG (what you see is what you get) text editor. You can identify the HTML icon because it probably has a couple of carrots (<>) on it. If you click the HTML editor icon from the text editor, you can see what your article looks like in HTML. From here, you can look for any extra code that was carried over from Word or whatever software you used to write your article. By removing the extra code, and making certain that only clean code is in place, you will be saving your editors and publishers a vast amount of work.
The Paragraph Tag
Let’s start with the absolute basics. In HTML, you work with tags, which are identified with carrots. Each tag has an opener and a closer. To format a paragraph, you use a <p> tag at the start of a new paragraph. You most likely will not have to be concerned with font, size, color and the rest because the CSS in the CMS takes care of that for you. You also need to close the paragraph with a closing </p> tag. You will notice the difference between an opening tag and a closing tag is the slashmark. Here’s an example paragraph using <p> tags:
<p>This is a sentence formatted with the HTML paragraph tags.</p>
<p>This will be the beginning of a new paragraph.</p>
Header Tags
Now, let’s get into a little SEO (search engine optimization) to help visitors find your articles through search results on Google, Bing and so on. Header tags are treated as important text within an article and search engines read this to help determine content on a page and search results. Typically, the title of your article will be enclosed within <h1> tags, which is the highest level for headers. Then comes <h2>, <h3> and sometimes even <h4> tags. Most likely, the subheads in your articles will be <h2> and <h3> tags, but check with your editor and publisher to see what they use for subheaders. Here are some examples that show how to use header tags in conjunction with <p> tags.
<h1>Title of Article</h1>
<p>Introduction paragraph goes here.</p>
<h2>Subheader</h2>
<p>A paragraph of text.</p>
<h3>Another Subheading</h3>
<p>A paragraph of text.</p>
Image Tags
It’s a good bet that the CMS you use to submit articles has some kind of image icon that you can click to upload and insert an image. However, once that image is in your article, you should know how to format it so that the image flows with the text. Within the <img> tag you can set all sorts of parameters to format your images and help with SEO. The <img> tag is one of the rare tags that does not require a closing tag. Here’s some example code:
<img style=”margin: 10px; float: left;” alt=”keyword” src=”images/path/image-name.jpg” width=”400″ height=”350″ />
The margin attributes allow for 10px (pixels) of space around the image so that text does not bump up into it. The float attribute keeps the image flushed aligned left or right. The alt attribute is for SEO, so use good keywords here. The src is where the image is stored. And width and height are self-explanatory. For more information on images, you can see my previous article.
HREF Tags
What would the internet be without links? It’s the links that keep the World Wide Web running smoothly so that visitors can jump from one site to another. Without links, we might as well have printed books. Links in HTML are created through <href> tags. Why they aren’t called <link> tags, I don’t know. Here’s an example of how to code a link:
<a href=”http://www.URL.com”>Linked Text Here</a>
You must start the <href> tag with the letter ‘a.’ The URL within the quotes is where you want the visitor to go. The text, “Linked Text Here” can be whatever you want but should be simple enough so that people understand where that link will take them. You must close this tag with </a>, otherwise, the entire rest of the page will appear as a link. You can add in one more bit of code to an <href> so that when the visitor clicks the click, the new page will open in a window, which is nice if the link takes the visitor off your site. If the link is to another page within your site, then this extra code is not advised.
<a href=”http://www.URL.com” target=”_blank”>Linked Text Here</a>
Bold and Italics
Sometimes writers like to put emphasis on certain words. Using bold or italics can accomplish this trick. Chances are, when you copy your article from your word processing software to the CMS, you’re going to lose this type of formatting. To add it back in, the easy way is to probably find the bold and/or italics icon in the CMS text editor. But if you want to learn the HTML code for it, you simply use a <b> tag for bold and <em> for italics. Don’t forget to close these tags with </b> and </em>.
Now that you’ve learned a few more tags, let’s see how they look all put together.
<h1>Title of Article</h1> <img style="margin: 10px; float: left;" alt="keyword" src="images/path/image-name.jpg" width="400" height="350" /> <p>This article builds on <a href="http://www.URL.com">another article</a> that was previously published.</p> <h2>Subheader</h2> <p>I really want this text <b>bold</b>.</p> <h3>Another Subheading</h3> <p>I really want this text <em>in italics</em>.</p>
By learning the <p> tags, the header tags, how images are formatted, how links work and how to do basic formatting like bold and italics, you are improving your skill set as both a writer and editor. Next time you are asked about your HTML knowledge, you can confidently say that you understand the basics.
Joomla! Extra Takeaways
I’ll leave you with a few more takeaways that you can use the next time someone asks if you’re familiar with Joomla! Most Joomla! content sites show a blurb of text on the front page with a Read More button that takes visitors to the full article. The code that inserts that Read More button and tells the CMS where to break the text is this:
<hr id=”system-readmore” />
So, if you see that in your HTML, don’t remove it. That code serves a very special purpose and must remain in place.
Also, your publisher might use modules to insert the same content into each article. For my site, these modules appear at the beginning of the article and at the very end. If the site you are writing for uses this method for inserting content, it’s a good bet they are using modules. These modules will each have their own name. To insert the module into your article, you use this code:
{loadposition nameofmodule}
Again, that is special for Joomla! You’ll have to ask your editor or publisher if they use this, and if so, what the names of the modules are.
Last, every writer loves to read comments on their article. It shows that the visitors cared enough to leave a message. In Joomla!, the code that allows comments to be left on your article looks like this:
{jcomments on}
