21
- August
2018
Posted By : Code Buddy
Comments Off on HTML 101: 10 Basics Every Blogger Should Know
HTML 101: 10 Basics Every Blogger Should Know

Are you a blogger with little HTML understanding? While you may not think code is essential for your blog, basic HTML knowledge can make the blog writing process extremely easy.

To maximize our blog performance, it’s important that you learn some basic HTML practices. HTML also benefits our writing, such as by improving formatting and typography.

When you become a master blogger, you’ll naturally want to use some HTML codes. But how do you learn? Here’s an HTML 101 course where you’ll learn 10 basic HTML codes.

1. Site Structure

Do you know how bodies of text are organized on a web page? HTML code can differentiate different blocks of texts. This ensures your web page looks organize and it’s easily readable.

Start by identifying the header. This is the text on top of your page and is usually the blog title.

Wrap this code around your text: text

This block of text appears differently; compared to the text body, your header is usually a larger font, bolder, or is even a different color or font.

The text body should use this code:

text

This is the main body of your text, such as the blog.

2. Heading Codes

You don’t want your text body to look like big lumps of paragraphs.

Instead, break your text body up with heading texts and smaller paragraphs. Heading text is different than headers; rather than serving as a blog title, they almost serve as a paragraph title.

Headings are often broken up into different sizes:

  • Heading 1 (or H1)
  • Heading 2 (or H2)
  • Heading 3 (or H3)

The codes you use are as follows:

  • For H1:

    text

  • For H2:

    text

  • For H3:

    text

Headings make your blog posts easier to read and better organized. So use these tags wherever is appropriate.

3. Links

Linking is an essential part of your blogging strategy, for both your SEO and your readers’ sake. This is why you should know the basic linking code. However, it can be more complex.

For just the URL, use this code:

To hyperlink the URL into text, use this code:

Click here.

On your blog, the text should look like “click here” but “here” should have a link to the website.

4. Images

Images are another essential part of your blog. Images enhance your blog’s visual appeal and they help convey your message. In case your media upload tool isn’t working, you can manually include an image with HTML.

A tip: don’t save an image to your computer for HTML. Find a URL to an image (but the website should only be the image) and wrap the appropriate code around that.

Here are important facts to keep in mind:

  • All images have different file types. Most are JPG but many more exist.
  • Always specify the image’s width and height. Choose one that best fits your website.
  • Always come up with an image name. It benefits your SEO.

This code might seem complex, but you’ll never realize how easy it is to link images until after you use code.

5. Link Images

Do you want to create a linkable image? This is possible with HTML. Simply put, you’re combining the link code with the image code.

 

Why would you make an image a link? This is beneficial for your ads and even makes a creative CTA. You can also use image links for your social profiles.

6. Align Images and Text

When you edit your blog, do you notice the text doesn’t align with the images?

You can save your headache with HTML. There are plenty of HTML formatting options. The most popular ones for alignment are

  • Left
  • Center
  • Right

Here’s the code for image and text alignment:

For content on the left side:

object or text

For content in the center:

object or text

For content on the right:

object or text

Now you never have to worry about formatting issues.

7. Blockquote

Blockquotes are always a stylish way to quote someone important.

“But I love looking at random quotation marks in the middle of the paragraph.” — Said no one ever

Instead, use blockquotes. Does your CMS not offer a blockquote option? No problem, just use HTML.

Here’s the code:

“quote”

This code helps spruce up the typography while still quoting someone famous and relevant.

8. Ordered Numbered Lists

There’s nothing more annoying than your numbered list formatting going all funky. Instead, format your own numbered list.

Here’s the code:

  • item 1
  • item 2

Yes, you will have to add the code around each point. But it saves you hassle trying to fix your list, especially when your CMS program likes to mix numbers and lists around.

9. Bullets

Prefer bullets over numbers? You can do the same with bullet points as you do with numbers.

Here’s the code:

  • Item 1
  • Item 2

In case you’re wondering, “ol” stands for “ordered list” and “ul” stands for “unordered list.”

10. Typography Hacks

We all know the struggle: there are times we forget to bold or italicize something in our blog. But when you memorize typography code, you add the typography while you type.

Here are common typography codes:

  • Bold: text
  • Italics: text
  • Underline: text

This is probably one of the easiest codes to memorize.

Did This HTML 101 Lesson Help?

HTML may seem like something scary and difficult. But once you get the hang of it, HTML is simple. But you’ll still need HTML 101 lessons to get the hang of using code and memorizing them all. But once you do, blogging will never be better!

For more coding tricks and knowledge, visit our resources.