10 Minute Markup Crash Course

So you’ve been given the keys to the company blog.  You’ve been specially selected by your peers and/or supervisors for your ability to craft prose. Or, you are an entrepreneur who needs/wants to do most things in your business and are setting down for an afternoon of blog writing.  

Your website could be a bespoke design that is pixel perfect, or just a basic starter theme on WordPress, Squarespace, or Wix.

Now, you have that blank page in front of you.  How do you make your writing conform to your site?  Assuming your site was built to industry standard, the styling has been done for you – all you have to do is declare what each element is.  You do that by wrapping the word, sentence, phrase, or paragraph in tags.  In the web speak, this is called markup.

Most CMS’s have a built in editor that lets you copy in text from Word and other sources – these are very beneficial and efficient.  However, what happens if the result of pasting has you wondering why all the text is super big, or some random color? You need more control.

Introducing, your personal 10 minute crash course in markup!

The Bare Minimum

The following section is an example of the most popular structural and styling elements you will need for your blog – you’ve been familiar with these since your days in school writing term papers:

The Elements

How It Works

Page Title

Your blog post needs a title.  Normally your CMS takes care of marking it up – you just enter it in a box and hit save/publish/post.  Behind the scenes just put the title between H1 tags – for example, this post’s title would look like <h1>10 Minute Markup Crash Course</h1>.  

Tip: limit use to one – no exceptions

Section Heading

You know how when writing in Word you type out a section heading, select it, make it bold, and increase the font-size a couple points?  In markup, you just wrap it in <h2></h2>. Done.

Tip: use for as many sections as you have, no limit.

Paragraph

You’ll be doing a lot of these. Every paragraph gets a <p> at the beginning and a </p> at the end.  Oh, did you notice the syntax of these tags? The first set is the opening – it goes bracket, element, bracket. The second set is the closing – it goes bracket, forward slash, element, bracket.

Bullet List

These are called ‘unordered lists’ – abbreviated as ‘ul’.  Start by wrapping the entire list in <ul></ul>. Then, each list item, or line, gets wrapped in <li></li>.

Numbered List

Take everything you just learned from the bullet list and change one set of tags – the <ul></ul> is now <ol></ol> – that stands for ‘ordered list’.  Easy!

Tip: don’t bother typing in the digit here – the browser does that for you.  So double check that you remove them or your first line will read ‘1. 1.’

Bold

Say you want to draw focus to text by making it boldface – wrap it in <strong></strong> – as in ‘I strongly encourage  you to look at this’

Italic

Just use <em></em> – as in ‘I am emphasizing this here’

Underline

<u></u> – as in ‘u is the first letter of underline’

Tip: avoid using underlines to style text because in a browser links have a default style of an underline (unless the site designer turned that off) – don’t want to confuse people!

Strikethrough

This one would be seldom used, but occasionally you need to update a post and need to reflect a change in the text visually – use <strike></strike> to denote text that has been removed.

The Bonus

In a future post we will cover other elements: Images, Links, Pull Quote

The Wrap Up

One last term for you to know on your way to blogging glory: nesting – the styling tags you just learned can be used in combination, so nest them like a set of mixing bowls, one inside the other, working your way out. The structure tags should not be nested, but you can nest styling within structure.

Oh, and guess what? You just wrote HTML and it works on a few billion devices around the globe.