HTML Tips for Blog Posts

From my head to yours… Here’s a little insight into HTML and what you can use on your blog. I am by no means an expert, but I have been using these things for a few years now and whilst my language is still basic, I can understand it! Hope it helps!

HTML Tips for Blog Posts | lifeofkitty.co.uk

What is HTML?

HTML stands for Hypertext Markup Language. It is a standardised system used for formatting documents, and can format format font, text size, color, hyperlinks, paragraphs, and much more. All web browsers read HTML and use the tags to determine how content within a website should be displayed.

With most blogging websites, HTML knowledge isn’t really necessary. The post section will have buttons that automatically format whichever highlighted text you choose, and will add hyperlinks/images and whatever else you need. Most of the time. However, if you have a basic knowledge of HTML, you can take a look at the code and see what is happening. If something doesn’t look right, you can find that code and check it out. HTML knowledge is also helpful for when you delve into the world of CSS – something I’m slowly becoming more comfortable with, yet still google for answers a lot.

Each part of the HTML code is called an attribute, and I’m going to link you to w3schools for this, because they can explain it far easier than I can. And in fact, they have all this stuff on the website – it’s where I’ve done most of my learning! Anyway, here are some basic codes that could help you with your everyday blogging! You won’t see any of the text in these < > when actually using the code, and just a note – if copying and pasting, you may have to retype the ” marks for it to work on some things.

Writing in HTML

Basic HTML Codes

<p>paragraph</p>
<br/> line break
<strong>bold</strong>
<em>italic</em>
<il>underlined </ul>
<s>strikethrough text</s>
<center>centres text</center>

These are the simple codes that you will use for your text. I personally always use the ‘text’ option when blogging through WordPress, rather than ‘visual’, as I just prefer to be working with HTML myself. If you do use the visual setting (or the equivalent in Blogger), these codes are perfect for if you want to change text anywhere else on the blog – for example I’ve used them in my sidebar. I think they are pretty self explanatory – just copy the code and insert your text in the middle of each one and you’re good to go!

Heading Tags

<h1> TEXT HERE </h1>
<h2> TEXT HERE </h2>
<h3> TEXT HERE </h3>
<h4> TEXT HERE </h4>
<h5> TEXT HERE </h5>
<h6> TEXT HERE </h6>

Heading tags convey a hierarchy to web browsers and search engines. You are most likely using headings in your blog’s formatting, but the difference between headings 1-6 mean more than just text size and font weight.
Heading 1 should be used for the main heading of the document, such as your blog post’s title. Heading 2 should be secondary information, such as your sub-headings (on this post, ‘WRITING IN HTML’, ‘CREATING LINKS WITH HTML’ and ‘CREATING LISTS’). Heading 3 for sub-subheadings (the rest of my smaller headings), and so on through Heading 6. Also, you should have keywords in your headings to really get the most out of them, SEO wise. I do fail at this sometimes, admittedly.

Creating Links with HTML

Hyperlinks

<a href=”URL” target=“_blank” alt=”LINK KEYWORDS”>HYPERLINK TEXT</a>

To create a hyperlink this is the code you need and to begin with, ‘a href=”URL”‘ is where you would paste in the link that you want to lead readers to. The ‘target’ attribute is telling your blog how that link will open. I primarily have it set as “_blank” which opens the link in a new tab. Finally we have the ‘alt’ attribute. This is for alternative text, and it is basically a short description – useful to have because it helps with SEO. The HYPERLINK TEXT is basically the text that will show up in your post as the link.

BOOKMARK:
<h2 id=”tips”>Writing in HTML</h2>
ADD THE LINK
<a href=”#tips”>Visit What is HTML</a>

If you want to link to a specific section of a page, you need to add a bookmark to that section, using the code above. So where you would usually have just <h2> you want to add id=”tips”. The tips can be any word at all. Then when you are creating your hyperlink, you use the second code that you can see above – just make sure that the id word is exactly the same. This should link to the What is HTML section.

Adding Images

ADDING AN IMAGE:
< img src=”IMAGE URL” alt=”IMAGE KEYWORDS” width=”800px”/>
ADDING A HYPERLINKED IMAGE:
<a href= “LINK URL” target=”_blank”><img src=”IMAGE URL” alt=”IMAGE KEYWORDS” width=”800px”/></a>

When I add images to a blog post, I’ve started to upload my images to Flickr. I’ve never uploaded through the ‘add media’ button on WordPress, and I don’t particularly like doing it that way. Once my image has uploaded there, I click the share option and then take the IMAGE URL from the BB Code section or use the Inspect Element option on Chrome. Long winded, sure, but it’s just how I work! Most of my images on the blog are hosted on Tinypic, but I found that the image URLs were being re-used and I’d have random photos appear. That’s a totally different matter though.

Next up here we have the ‘alt’ attribute. If you use pinterest or pin an image straight from a blog post, you should be able to see whether the blogger has used an alt tag. The alt tag is important because it provides information about your image. If, for example, the image isn’t showing up, the alt text will appear instead – showing the user what that image would have been. As I mentioned above, using this attribute helps with seo and google searches.

I discovered quite recently that my photos were not responsive like my theme was. This may have been because of my old theme, but now I will just determine the set ‘width’ of an image, and then the height is automatically proportioned. Since changing to that method, my photos have reduced in size correctly on smaller screens.

To create a hyperlinked image, you are simply just surrounding the original image html code with the link code. Instead of adding HYPERLINK text, your image html code works instead. If you hover over the photos below, you will see in the bottom left corner of your web browser that the image on the right leads to another page, whereas the one on the left doesn’t. Clicking on the image will open the page up into a new tab.

My ALT text is: Healthier Snacks 2016 Filofax Set-Up

Creating Lists

All lists have two parts to them. The first part is either <ul> or <ol> depending on if you want it numbered or not. The O basically stands for ordered, and the U unordered. Easy to remember right? Now for each item that you want to list, the <li> code needs to be used with the </li> closing that line. Then we finish with </ul> or </ol> depending on which type you choose. You can add as many lines to a list as you’d like. You can even add a list within a list, as shown on the first. Just add <ul><li> Item 1.1 </li> /ul> underneath the bullet you want it, and then carry on with the rest of the code. Because the /ul tag has been used, this adds a complete list item in that section.

    <ul>

  • <li> Item One </li>
    • <li> Item 1.1 </li>
  • <li> Item Two </li>
  • <li> Item Three </li>
  • </ul>

    <ol>

  1. <li> Item One </li>
  2. <li> Item Two </li>
  3. <li> Item Three </li>
  4. </ol>

——————————-
Hopefully this helps some people – I’ve noticed that HTML is always one of those things that is mentioned on twitter chats. If there is anything in particular that you’re stuck with, let me know and I can try to help you or get a post up about it!

Follow: