Simple CMS HTML code for Content Managers
Following on from my post about why writers and content managers need to learn a little bit of code, here’s a short yet comprehensive guide to the HTML basics you need to know.
Tags
Tags are tiny pieces of code that tell your browser what each bit of content it. You and I can tell the difference between a paragraph and a picture, but your computer needs some help.
Everything in HTML is based on tags.
Tags usually come in matching pairs - an opening and closing tag - and are placed before and after a piece of content. A paragraph looks like this:
<p>This is a paragraph.</p>
You’ll notice that the second, ‘closing’ tag is exactly the same, apart from the addition of a forward slash.
Everything in between these two tags is shown to the user. And if the website has been built well, the browser will know exactly which styles to apply to this paragraph. No need for you to worry about how it’s going to look.
The only tags you should ever need to know
You only need to know a very small number of HTML tags to be able to mark up your text like a pro. Here they are:
<p> is for paragraphs:
<p>This is an example of a paragraph</p>
<h2> is for level two subheadings:
<h2>This is a subheading</h2>
Level one headings are reserved for your page title, which should already have been dealt with automatically after you entered it into your CMS editor. Need a level three sub heading? That’s easy. Just use ‘3’s instead:
<h3>This is a level three subheading</h3>
<ul> is for lists:
Need a bullet list? Use pairs of these.
And for each list item…
<li> is for list items:
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
</ul>
You can have as many list items as you like, but it’s a good idea to break longer lists into smaller groups. Note how we don’t need to include the bullet character - that’s added automatically by the browser when it displays the web page to users.
<a> is for ‘anchor’ … or hyperlink if you prefer:
This one’s only a tiny bit trickier. When users click on this item, we want them to go off to a different web page. So we need to tell the browser which page to go to. And that’s done with an ‘attribute’. For a hyperlink, we need to add a href attribute to the opening tag. So it looks like this:
<a href="http://www.google.com">the text to display</a>
Note how there’s a space after the ‘a’ and an = immediately after the attribute name. And the whole web address is inserted in between the double quotes - including the http bit. That’s important. The simple solution is to go to the page you want to link to and copy the full address from your browser’s address bar.
<img> is for images:
Like the anchor tag, the img tag also needs an attribute, this time to tell the browser where to find an image file. This is done with the src attribute. Here’s an example:
<img src="/images/toy.jpg">
Here we include the file path to the toy.jpg image file. Starting with a forward slash in the example tells the browser that the file is in the images folder, which is in the file root for the website. You’ll need to upload the image first - which you should be able to do in your CMS. Upload it, find it and open it in your browser. Then copy the address for the image from the address bar ready to paste it in.
One other thing with img - you should add another attribute to help search engines and accessibility devices understand what your image is about with a useful description. It’s called ‘alt’. Here’s how to use it:
<img src="/images/toy.jpg" alt="A very brief description of what the image is about"></code>
And finally…
<strong> is for bold:
For example, I'd like to give this <strong>emphasis</strong>.
Don’t ever use <b> to make something bold. And, in case you were wondering, no you shouldn’t use italics or underlines. Ever.
And that’s it.
Of course, if you really want to dig deeper, then there are many more tags in the HTML toolbox, including: tables, blockquotes, ordered lists and video embeds.
But now you have the basics and the ability to mark up 99% of everything you write.
Enjoy!