Even with website builders the norm these days, bloggers should still know basic HTML. Most blog comment sections allow you to format your comments using HTML, too.

Here’s a list of basic HTML every blogger should know.

I tried to make this as accessible as I know how, so I do not use images for the examples; it’s all coded.

Opening and closing

A small, precursor lesson: All HTML tags open and close, unless they’re self-closing (e.g. <br />, used for line breaks*).

If you don’t close your tags, you’ll probably break your website or just make it look weird. Depends on the tag. It’s like forgetting } in PHP, which is the worst because then you have to review every line of code. So try not to forget to close them.

*It depends on what HTML you’re using. It’s hard to explain, so I’ll let someone else mess with that.

Some HTML element anatomy

Using the <p> element:

<p>1I love this song.2</p>3

1. opening tag: <p>
2. content: I love this song.
3. closing tag: </p>

With an attribute:

<p class="class-name"2>1I love this song.3</p>4

1. opening tag: <p>
2. attribute: class="class-name"
3. content: I love this song.
4. closing tag: </p>

Acronyms & abbreviated text (abbr)

I haven’t figured out how to make abbr compatible via touch devices yet (ugh), but this is still a useful thing to know and would be something to look into if you use a lot of acronyms.

I noticed the book blogging community uses a lot of acronyms, so if you opt out of using the abbr element/making it accessible, consider defining what it is at the first mention, parenthesizing the abbreviation, and then using the abbreviation henceforth—per post.

An example of abbreviated text in action:

OMG. I have a doctor’s appt. tomorrow.

The code looks a bit like this:

<abbr title="Oh my gosh">OMG</abbr>. I have a doctor's <abbr title="Appointment">appt.</abbr> tomorrow.

Sometimes these are styled to appear in a tooltips class. I don’t use a tooltips class because I’m lazy and can’t be bothered, so mine appear boringly (as per the user’s browser’s default appearance).

The best way to make abbreviations accessible is to use the long-form the first time, with the abbreviation or short-form in parentheses.

Basic text formatting

Bold text
Italic text

Bold text gets wrapped in <strong> element, while italic text is wrapped in <em>.

Headings

Headings are what break up the text. It’s better to use text wrapped in heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) than images because of accessibility and SEO. Plus, when you change your theme, those images don’t change with it. Over time, it starts to look tacky. Heading tags can be styled in CSS to match across your site universally.

Typically, the titles of posts and pages are in <h1>, while subsequent headings in posts are in <h2> through <h6>. They work hierarchically, so if the outline of your post goes like this:

1. How to build a bottle rocket (title)
2. Materials
   1. Decorations (optional)
3. Directions

The headings output would look something like this, minus the title*:

<h1>How to build a bottle rocket</h1>
<h2>Materials</h2>
<h3>Decorations (optional)</h3>
<h2>Directions</h2>

*Assuming you’re using a content management system (CMS) and have a theme that automatically displays this properly for you.

Using stylized text (via CSS) headings rather than images to announce new headings is better than using images for headings at all, because of accessibility first, and SEO second.

WordPress shortcuts

If you use WordPress, you should have the shortcuts! These only work in the Visual editor, which I use frequently when I’m not needing to edit/write lot of code (like in this post, ugh), because I’ve styled my visual editor to match much that which you see when you read my posts.~

The shortcuts remind me a bit of markdown, but here goes:

##Heading 2
###Heading 3
####Heading 4
#####Heading 5
######Heading 6

The catch is that you have to press Enter for them to automatically change into headings and be wrapped in their respective heading tags. You can separate the text from # if you want, like ## Heading 2, I just go with none from habit and because less effort.

Images (<img>)

Images are fun, and as much I love the written word, the web is a visual place. For this example, I’m using placehold.it, a nifty tool that creates placeholder images!

Code:

<img src="https://via.placeholder.com/900x250/00a4a6/fff?text=Basic+HTML+for+bloggers" alt="Basic HTML for bloggers">

In the img tag, src and alt are attributes. It’s important to note that the alt attribute is for alternative text, or text which describes the image, not for the mere title of the page and keywords for the page’s content.

In other words: Pinterest descriptions get their own attributes.

Links (<a>)

Links are fun. I like making them, and I like getting lost in them. Wikipedia is a rabbit hole for me, but it’s also how I learned about trash in the ocean, so the rabbit hole isn’t always bad.

When creating a link, you’re using an anchor tag (<a>). They’re not nautical, unfortunately, but still quite fun and full of many uses.

Example: About page

Code:

<a href="https://lemonandlively.com/about">About page</a>

If I’m linking to something within my current blog, it’ll look like this in the text/HTML editor:

<a href="/about/">About</a>

Adding a nofollow is a common Q among the blog-related Facebook groups I’m part of, so one of those links would look like this:

<a href="https://lemonandlively.com/about/" rel="nofollow">About page</a>

To make a nofollow link, we just have to add a rel (relationship) attribute with a value of nofollow: rel="nofollow". The anchor tag <a> then has two: href and rel.

You can also make links open in new windows/tabs and combine attributes, e.g.

<a href="https://lemonandlively.com/about" rel="nofollow" target="_blank">

Anchor tags can have more attributes, too, including classes! Learn more at W3Schools.

Lists

You can make ordered/numbered (<ol>) and unordered/unnumbered (<ul>) lists in HTML.

You can set how it appears via CSS and alter the type attribute inline, if needed, but I won’t be going into that extraneous detail here.

I will touch on the basics and rely on default styling as per the CSS file. (And encourage you to check out W3Schools for more options.)

Every list item is wrapped in <li>, e.g. <triangle>, but you need to wrap it in list tags to make it function properly.

Ordered lists example

How not to adult (according to society):

1. Have an opinion
2. Rent instead of buy
3. Be & express yourself

The code for this:

How not to adult (according to society):
<ol>
    <li>Have an opinion</li>
    <li>Rent instead of buy</li>
    <li>Be &amp; express yourself</li>
</ol>

Unordered lists example

List of shapes:

1. circle
2. square
3. triangle

The code for this:

List of shapes:
<ul>
    <li>circle</li>
    <li>square</li>
    <li>triangle</li>
</ul>

Nested lists example

This is a bit trickier, because you have you to open a new list inside a list item and remember to close it.

I did this in my list for #Headings, and changed the type of ordered list to a so it would show as lowercase alphabet and (hopefully) confuse people less.

In the example below, I used HTML comments (<!--comment content-->) to explain things.

Feel free to keep the comments if you intend to make these lists, ’cause they’re super helpful in the beginning!

Current playlist:

1. Powerful – Major Lazor
   • Original & instrumental versions
2. New Rules – Dua Lipa
3. Some a capella songs
   1. Imagine Dragons Melody – Jared Halley
   2. Something Just Like This – Mike Tompkins

The code looks like this:

<ol><!--opens ordered list-->
    <li>Powerful - Major Lazor<!--parent list item remains open to give birth to child list item-->
<ul><!--opens child list-->
    <li>Original &amp; instrumental versions</li><!--child list item-->
</ul><!--closes child list-->
</li>&lt!-- closes parent list item-->
    <li>New Rules - Dua Lipa</li><!--list item is closed straightaway because there is nothing to add-->
    <li>Some a capella songs<!--parent list item; let's make another OL of a different TYPE-->
<ol type="a"><!--opens child list-->
    <li>Imagine Dragons Melody - Jared Halley</li><!--child list item-->
    <li>Something Just Like This - Mike Tompkins</li><!--child list item-->
</ul><!--closes child list-->
</li><!-- closes parent list item-->
</ol><!--closes ordered list-->

However, if you have WordPress, you should be able to achieve similar results by pressing TAB to create nested lists.

Other styling

Lists are frequently used for navigation, the CSS for the <ul>‘s class containing list-style: none; or something similar.

On my archive page, I add .column (class) to my <ul> elements to make them display in well-proportioned columns. The code looks a bit like this:

<ul class="column">
    <li><!--list item--></li>
    <li><!-- list item--></li>
</ul>

Though this requires more coding knowledge, it is not impossible.

Coding requires a lot of trial and error; it’s problem-solving much like logic puzzles.

You don’t learn how to work logic puzzles until you actually try them for yourself.

BUT! Once you get it going, you’ll find you can tweak things how you like them.

I’ve been told something isn’t impossible and then a year later seen someone have that feature with the latest code (because even code gets upgraded).