07 Sep Basic HTML That Everyone Should Know
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>
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>
<p>A paragraph of text.</p>
<p>A paragraph of text.</p>
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.
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.