Simple HTML Tips for Bloggers

Photo credit: f-l-e-x on Flickr
When I first started blogging, I was well aware that it would entail writing consistently every week. What I didn’t really consider, however, was just how useful my limited HTML knowledge would be.

You see, the large majority of blogging is getting the words to screen, but before you publish a post, you have to check the formatting, and depending on the blog host you use, the formatting might not always play nice. Which is when you have to dig into the code in order to avoid serious formatting frustration.

When formatting my posts, these are the most common HTML tags that I use:

NOTE: You’ll notice that most of the tags actually come in pairs—that’s because in HTML there are opening tags and closing tags. The opening tag indicates where a certain feature or style should begin (for example: italics begin HERE) and the closing tag indicates where the feature/style should end. Closing tags are always indicated with a backslash (/) before the abbreviated code within the brackets.

  • <body></body> : I don’t actually touch these tags, and for simple blogging, you won’t need to either. All you need to know is that the next within these tags is what makes up your post. 

  • <br /> : This is a paragraph break. I often have to insert these manually when doing bulleted or numbered lists so that there are spaces between the bullets or spaces within a bullet for a multiple paragraph bullet. These don’t need an opening and closing tag–just place <br /> wherever you’d like your paragraph break. 

  • <ol></ol> : This is an ordered list tag, to be used to create numbered lists. You place the opening tag at the very beginning of the list, and the closing tag at the end, with list item tags (<li></li>) to differentiate every point within the list. So, for example, a simple 1-4 numbered list in HTML would look like:

              <ol>
                        <li>One</li>
                        <li>Two</li>
                        <li>Three</li>
                        <li>Four</li>
              </ol>

    NOTE: You don’t need to indent in order for the HTML to work—I just did that to make it a little easier to read.

  • <ul></ul> : This is an unordered list tag, to be used to created bulleted lists. You use this the exact same way as an ordered list tag, except you use “ul” instead of “ol.” You can easily convert an ordered list to an unordered list or vice versa by simply going into the code and changing a single letter in the opening and closing tags of the list. 

  • <i></i> : This indicates italics. You don’t usually need to type this manually because I’ve rarely had the italics button glitch out on me, but it’s useful to know so you can recognize it while looking at the HTML. To put a word or phrase in italics, you insert the word(s) between the opening and closing tags, like so:

              <i>I want this to be in italics.</i>

  • <b></b> : This indicates bold text. It’s used the exact same way as the italics tags. 

  • <u></u> : This indicates underlined text. It works just like bold and italics. 

  • <blockquote></blockquote> : I'll bet you can guess what these do (hint: I use them for my Twitter-sized bites and/or any quotes). Like italics, bold and underline, these are tags that I rarely have to adjust manually, but it's helpful to know what it does. 

  • <h1></h1> : These are heading tags. There are actually six different heading tags, varying from <h1> to <h6>. The <h1> tags are the largest and <h6> are the smallest. Like the last couple tags, the text between them is what is affected. 

  • <a href=“[website address]”> [link text] </a> : And this, my friends, is what an embedded link looks like in HTML. Allow me to break it down a little:

    The <a href=“[web address]”> is all part of the opening tag. Within the quotations, you place the web address you want the link to go to (without the brackets). So if you were awesome and linking to my blog, the opening tag would look like this:

              <a href=“www.avajae.blogspot.com”>

    Next is the link text. This is the visible text that people see and click on, so, for example, it might look like this:

              <a href=“www.avajae.blogspot.com”>Check out this awesome writing blog.

    Finally, you need the closing tag, or the link won’t work at all. This is the easiest part—you just add </a> at the end. So your full embedded link would look like this:

              <a href=“www.avajae.blogspot.com”>Check out this awesome writing blog.</a>

The nice part is these tags are all universal and can be used on any server that allows for HTML editing and in any browser.

I hope this helps your HTML-editing needs. If you have any questions, feel free to give me a shout below. :)

Have you edited HTML before? What tags do you most commonly use? 

 Twitter-sized bites:
Are you a blogger struggling to understand HTML? @Ava_Jae shares some easy tips to demystify your blog's code. (Click to tweet) 
Do you struggle with your blog's HTML? Here are some simple tips to make editing HTML easy. (Click to tweet) 

2 comments:

  1. Michelle HauckDecember 20, 2013 at 5:34 AM

    Very interesting. It's not something I usually think about, but could be very helpful. Usually I only flip to the html side to insert a rafflecopter link or to copy the entire formatted post for my contest co-hosts.

    ReplyDelete
  2. Ava JaeDecember 20, 2013 at 6:01 AM

    Thanks, Michelle! I think most bloggers really only use it if they need to, raffle copter and other widgets being a good example. Always helps to know the basics. :)

    ReplyDelete