Anyone can do this.

Headings are important, by varying degrees

There are actually 6 levels of headings, depending on how important they are. Thinks of a legal document with clauses and subclauses and so on. Most people would only use a couple of levels. In blogging you probably won’t use headings at all, but later on, if you want to make changes to your blog’s theme, then you need to at least know about headings.

The heading level 1 tags are <h1> </h1> .

The heading level 2 tags are <h2> </h2> .

I imagine you can now figure out how it works for the other 4 levels.

H1 is more important than h2 and so on.

Here’s an example: <h1>A most important heading indeed </h1>

A best practice writing note: When people read longer documents that have headings they scan down the headings till something catches their interest then read that part. Think of headings more as headlines that summarise in a few words the paragraphs that follow. An example from this document: originally I wrote a heading called Spaces and line breaks. Then I improved it to be more helpful: Multiple spaces and line breaks in HTML are ignored.

Make a list of things

Lists can be handy things, even in blog posts. Here’s a partial list of things to pack for a trip: phone, charger, passport. That list has 3 items. The order of the items is unimportant, so we need an unordered list.

Lists have 2 parts: the instruction to the browser that a list is coming up and again when it’s ended. That instruction also tells the browser what type of list it is. So, an unordered list uses the tags: <ul> and </ul>. The browser will automatically add bullet points to the items.

The second part is that inside the ul tags we need to put all the items, but wait! We also need to put list item tags around each item: <li> and </li>.

Here’s my list after I’ve coded it up:
<ul>
<li>phone</li>
<li>charger</li>
<li>passport</li>
</ul>

Here’s what the browser shows:

  • phone
  • charger
  • passport

A recipe is a great example of an ordered list where a sequence or steps is important.

While the list items still need to be coded up with li tags the ordered list tags are simply <ol> and </ol>. Here’s the ordered list:

<ol>
<li>phone</li>
<li>charger</li>
<li>passport</li>
</ol>

Here’s what the browser shows, with magically added numbers:

  1. phone
  2. charger
  3. passport

Quotes and blockquotes

Very often bloggers want to quote something from someone else. Depending how long it is, you could just put the quote inline — in the middle of your sentence — or do it as a blockquote if it’s long.

Here’s what you need: <q> and </q> or <blockquote> and </blockquote>.

For example:

Manton says Micro.Blog is <q>the fastest way to blog</q>.

Supposing your stylesheet has a rule like q {font-style:italic;} then your inline quote might come out like this:

Manton says Micro.Blog is the fastest way to blog.

<p>Manton also says </p> <blockquote><p>Today’s social networks are broken. Ads are everywhere. Hate and harassment are too common. Fake news spreads unchecked.</p><p>There’s a better way: a network of independent microblogs. Short posts like tweets but on your own web site that you control. </p></blockquote>

That blockquote should come out like this:

Manton also says

Today’s social networks are broken. Ads are everywhere. Hate and harassment are too common. Fake news spreads unchecked.

There’s a better way: a network of independent microblogs. Short posts like tweets but on your own web site that you control.

Remember to acknowledge the source of quotes, whether they’re short or long. Source of Manton’s quotes.

Make a link

Links are where you can click on a word or phrase and automatically be taken to that web page, for example, the words just above Source of Manton’s quotes.

In the link above, those words are known as the link text.

Links always have two parts:

  1. the link text (an image could also be a link). Example: Source of Manton’s quotes.
  2. the URL (web address) that the link takes you to. Example: https://micro.blog/.

In Micro.Blog you can write your blog posts just as text, if there’s nothing special like a link. Or you can use Markdown or HTML, or a mix of both. I’m not a huge fan of Markdown, but I will concede that writing a link with Markdown is easier for most people than writing it with HTML. So, even though this is an HTML tutorial, not a Markdown tutorial, I’l show you both ways, using the Source of Manton’s quotes example from above.

Here’s how to do it in Markdown, with square brackets around the link text and round brackets round the URL and no gap between:

[Source of Manton’s quotes](micro.blog/)

Micro.Blog takes that Markdown code and transforms it into HTML, which will then look like this:

<a href=“https://micro.blog/">Source of Manton’s quotes</a>

Here’s a screenshot that shows how the HTML coding for a link looks with syntax colouring. That makes it easier to see what’s going on.

How the HTML coding for a link looks with syntax colouring.

How the HTML coding for a link looks with syntax colouring.