The basics of HTML coding for marketers and content editors

Ever wanted to make a small change in your website while being confronted with a bunch of code? Don’t despair: HTML coding may look hard at first, but after you grasp the basics and understand how HTML works, editing your online content will be easier than you think!

Subscribe to our blog

As a content manager, marketer or web content writer, you’re probably not a complete stranger to the world of HTML code. Although modern CMS have user-friendly WYSIWYG interfaces, knowing some basics of HTML language can come in handy for quick fixes such as defining links, paragraphs, headers and more.

If being confronted with a screen filled with HTML ever looked overwhelming, following our tips below will get you confident to make most modifications on your website, blog or emails.

1. Make it legible

The first step in understanding HTML is making it more legible. Reading a bunch of code can be challenging and time-consuming even for an experienced developer. That’s why most programmers work with code-editors that automatically add colour formatting and indentation to highlight the different code elements. Let’s try this free online HTML formatter to see it in practice. When you paste your code in this editor, it will break it and colour it to make it easily digestible:

 

Before

After

 legible-html-before  legible-html-after

Your confidence has grown substantially, hasn’t it? You now have a clear distinction between the code and the actual text content. Editing a text within HTML source code should be simple now. Let’s take it a step further so we can better understand it, to prevent the code from going horribly wrong.

2. It’s a sandwich

Creating HTML is like creating a sandwich: there are two slices of bread which contain the contents. There are always two of them, otherwise it wouldn’t be a sandwich. The two halves of bread are represented with an opening tag “ <div> “ and closing tag “ </div> “ for each element. The illustration below shows how this works in practice with two examples:

Good:
<div>       open first element
<h1>        open title element
contents
</h1>       close title element
</div>      close first element

 

Bad:
<div>         open element
<h1>          open title element
contents  
</div>        this closes first element, but the title element is not closed.

Whenever you edit HTML, always make sure you stay inside the sandwich and do not accidently remove the closing tag. Things will get nasty very fast when you don’t create a good sandwich. That’s why the code formatter is so important, it helps you visualize these structures so it’s easier to avoid any mistakes.
This error is particularly easy to make when you copy-paste some lines of code.

The same principle applies to the attributes of the element: An attribute is located inside the opening tag, and has quotes to group the so called property. Whenever editing these properties, be careful not to add an unnecessary quote or to remove a quote because this can cause layout problems.

<div class=c-multimedia> </div>
-> the attribute CLASS is opened and closed with quotes.

3. Digging deeper into the basics

As a content editor, the most common elements you might need to change are related to how text is presented. The HTML tools below should cover the essentials for text editing:

  • Break rule (next line)
    When you want to force a new line in a paragraph, you can enter a break rule. The code is a bit different than regular HTML: “<br/>”. Yes, that’s right: no opening or closing tag, just one simple tag.

    Nihil notare sit minim eorum. <br /> Dolore feugiat lorem qui lius tempor exerci.

    Keep in mind that break rules will be applied to all screen sizes, so use them wisely: while sometimes this looks great on desktop screens, it can appear strangely on smaller screens.

  • Hyperlinks
    Hyperlinks are fairly easy to edit:

    • Firstly, select if the link must open a new tab or not: target=”_blank” will open the link a new window, while target=”_self” will open it in the same tab.
    • Secondly, we have the page url to which you want to link: the so called “href”. Copy the url of your intended page into this attribute.
      The safest way to do this is to copy the url from your browser-address bar. Do keep in mind that some of the websites you access (like intranets) are only visible for you and will not be accessible for the user.
    • Lastly, we can define the contents inside the opening and closing tags: this will be the link itself, visible for the user.

This will result in the following example:

<a href="https://www.url.com" target="_blank"> insert text to hyperlink here </a>


  • Bold and italic text formatting
    Sometimes making text bold or italic is just what you need to make that word or sentence stand out. And it’s also easily done, just place the text you want to highlight between a “<strong>” or an “<em>” element.

    <strong>Bold text</strong>
    <em>italic text</em>

  • Lists
    Lists are very simple elements that either have numbers (Ordered List – “OL”) or bullets (Unordered List – “UL”). There is one wrapping element (the tags OL or UL) that contains all list elements (the LI tag):

    <ol>
       <li>

          This is the first list element

       </li>
        <li>

          This is the <strong>second</strong> list element.<br/>
          With some more text

       </li>
    </ol>

    This will result in:

    • This is the first list element
    • This is the second list element.
      With some more text
  • Font sizes and text alignment
    Adding different font-sizes and text-alignments are layout options that should be defined for the entire website and not individual text fragments, using CSS. This not only ensures that there’s a global design concept behind the visual style of the website, but also that the text will adjust to smaller or larger depending on the different screen sizes.

Getting the hang of it?

These are only the bare basics: enough to let you edit some code without causing entire disasters. The key take-away is that you always close the sandwich. If you’re looking for additional resources on HTML and CSS, here are some that can help take your skills to the expert level:

Got any questions? Share them through the comments section below or get in touch to find out more about how we can help you manage your digital content.

Published on 31/01/19    Last updated on 31/01/19

#CMS, #Content Management

About the author

Wouter Lemoine doubles as Front-end Developer and Functional Analyst at AMPLEXOR, based in Belgium. He specializes in user experience and web-animation. With over 10 years of experience in digital marketing and software development, Wouter has worked on digital platforms and applications across the globe.

SUBSCRIBE TO OUR BLOG

Participate in this discussion