{"id":12201,"date":"2016-04-23T22:45:40","date_gmt":"2016-04-24T02:45:40","guid":{"rendered":"http:\/\/blog.shareaholic.com\/?p=12201"},"modified":"2016-04-23T22:50:36","modified_gmt":"2016-04-24T02:50:36","slug":"html-101-for-bloggers","status":"publish","type":"post","link":"https:\/\/www.shareaholic.com\/blog\/html-101-for-bloggers\/","title":{"rendered":"HTML 101: The Complete Guide to Understanding Code on Your Blog"},"content":{"rendered":"
\"HTML<\/a>

Photo by ryanoshea<\/a>.<\/p><\/div>\n

Make your website awesome with Shareaholic. Get our free tools now<\/a>.<\/em><\/p>\n

Let\u2019s be real. When most of us started our first blog, we didn\u2019t sign up to learn how to code\u2014I know I didn\u2019t. I was excited to express myself, learn a ton and maybe even get a job out of it.<\/p>\n

Once I joined Shareaholic<\/a> and began blogging more often<\/a>, I realized that I needed to get myself in gear and learn some basic HTML. And here\u2019s a reality check: you do too. No matter how many pageviews you have, having an understanding of HTML is key to having a successful blog.<\/p>\n

Need to force an image to stay on the right of your post instead of drifting to the middle? HTML.<\/p>\n

Need to install analytics<\/a> to track your success? HTML.<\/p>\n

Don\u2019t want to bother your web designer with the small stuff? HTML.<\/p>\n

You don\u2019t need to be a coding genius to rock your blog, but you should have a basic understanding of the terminology and a few tags up your sleeve to take your blog posts to the next level.<\/p>\n

Understanding HTML<\/h2>\n

Before we get into the tags you need to know, I wanted to give you a quick intro into some general HTML terminology and structure. This way, you\u2019ll understand what I\u2019m talking about later in the post once we get to the top tags you should know.<\/p>\n

Opening and closing tags<\/h3>\n

In any piece of code, there will be an opening and closing tag. The opening tag starts off the sequence with a left angle bracket, a character (or two) signifying what the tag is supposed to do, and a right angle bracket. A closing tag ends the sequence in the same manner\u2014it looks just like the opening tag, but it has a forward slash before the character. Here\u2019s a visual breakdown for you:<\/p>\n

\"opening<\/a><\/p>\n

Include the object or text you want to modify in between<\/h3>\n

Think of opening and closing tags like a container for content. The opening and closing tags surround all the elements they are modifying\u2014anything in that \u201cbucket\u201d of HTML will obey the rules of the opening and closing tags.<\/p>\n

It\u2019s very important to understand what opening and closing brackets are and how to place elements in between them when you first start to understand code\u2014they give you a reference point for what\u2019s happening in the code. You’ll also be a pro at copying and inserting any code on your blog since you have an idea of where code starts and stops.<\/p>\n

X HTML Tags You Should Know<\/h2>\n

1. Site structure<\/h3>\n

<head> <\/head><\/strong><\/p>\n

This tag is at the top of the page. In between these two brackets, you\u2019ll see information about the page (including the page title<\/a>) any analytics you have installed<\/a>, and theme styling code for the rest of the page. Think of this section of HTML as the description of your page.<\/p>\n

<body> <\/body><\/strong><\/p>\n

Everything between these two tags appears in the body of your webpage\u2014aka, what your readers see whenever they visit your site. All of the HTML code for your post and any widgets that people can see directly go here.<\/p>\n

Note: You don\u2019t have to paste these tags in your post\u2014they are part of your site structure already.\u00a0<\/i><\/p>\n

2. Organize with headings<\/h3>\n

\"1<\/a><\/p>\n

We\u2019ve talked a lot about the importance of using headers in your blog posts<\/a>. They\u2019re a great way to break up your text, making it easy to skim and understand. There are three different sizes of headings: H1 is the biggest, H2 is the second biggest, and so on. I\u2019d recommend not using more than two different types of headers in your posts because having too many becomes distracting to readers.<\/p>\n

3. Create links<\/h3>\n

\"2<\/a><\/p>\n

This is probably the most important tag for a blogger to know–readers expect bloggers to include relevant links in their posts. Place the link you want to use in between those quotation marks in the opening tag and you are good to go.<\/p>\n

4. Embed images<\/h3>\n

\"3<\/a><\/p>\n

This is probably the second most important snippet you should know. Whether you\u2019re sending an email to your blog subscribers or putting together the most pinable post ever, using HTML for images is important. Notice that you should include the link to the image itself, the size of the image in pixels and then the alt tag. The last part is especially important for SEO purposes<\/a>.<\/p>\n

5. Link images<\/h3>\n

\"4<\/a><\/p>\n

Now, to make an image a link (like our CTA at the bottom of this post), all you have to do is surround the image code from step #4 in a the code for a link (step #3)–basically you are replacing the “text you want to link to” text and inserting the code for embedding images.<\/p>\n

6. Align images and text<\/h3>\n

\"5<\/a><\/p>\n

There are few things more frustrating than when an object won\u2019t align the way you intended it. No matter how many times you click the alignment buttons, the image or text stays stuck a different way. To specific a certain alignment, include <p align=\u201dleft\u201d>before the thing you want to align and <\/p> after.<\/p>\n

Note: Most people recommend using CSS, the language used to style your blog, to align aspects of your site. While this is generally a good rule, I\u2019d recommend using the above alignment codes when you\u2019re trying to fix a specific object that isn\u2019t properly aligned already.<\/em><\/p>\n

7. Blockquote<\/h3>\n

\"6<\/a><\/p>\n

A great way to spruce up the formatting of someone\u2019s quote with HTML is with the block quote. This snippet of code styles the quote differently than the rest of your body, making it clear that someone else said or wrote the that text.<\/p>\n

8. Numbers (ordered lists)<\/h3>\n

\"7<\/a><\/p>\n

If you want to make a numbered list, this is the tag for you. For all of those top 10 blog post lists, this tag will be your best friend.<\/p>\n

9. Bullets (unordered lists)<\/h3>\n

\"8<\/a><\/p>\n

If you want a list without numbers, use this tag. Great for highlighting a few quick points under a main idea in your post, especially if your post is running long.<\/p>\n

10. Formatting fonts<\/h3>\n

\"9<\/a><\/p>\n

Super simple stuff. If you want to make some parts of your post stand out, these tags are essential.\u00a0<\/b><\/p>\n

See, that wasn\u2019t so bad! You’ll be a coding wizard in no time.<\/p>\n

To our more experienced bloggers\u2014what pieces of HTML do you use daily? What do you wish you knew how to do in HTML? Share your thoughts with us below.<\/strong><\/em><\/p>\n

\"Shareaholic<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Make your website awesome with Shareaholic. Get our free tools now. Let\u2019s be real. When most of us started our first blog, we didn\u2019t sign… 
Continue Reading<\/a><\/p>\n","protected":false},"author":40,"featured_media":12265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[522],"tags":[295,358],"_links":{"self":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/12201"}],"collection":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/comments?post=12201"}],"version-history":[{"count":0,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/12201\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media\/12265"}],"wp:attachment":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media?parent=12201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/categories?post=12201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/tags?post=12201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}