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:
- Page Title
- Section Heading
- Bullet List
- Numbered List
How It Works
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
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.
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.
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>.
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.’
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’
Just use <em></em> – as in ‘I am emphasizing this here’
<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!
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.
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.