HTML Basics

Knowing the basics of HTML can come in handy when you’re trying to format a post or add items to your sidebar. Here’s a quick breakdown of some HTML basics that I use on a regular basis. When you’re editing in HTML make sure you’re editing in the HTML or Text view, adding HTML to the visual view will not work!

  1. Text Links

    Most platforms will allow you to automatically build text links with the click of the button, but there’s always the occasion where you’ll need to manually add a text link. Make sure you add the http:// at the front and close the link tag so that it works properly! Here’s how: <a href="http://LINKHERE.com">text here</a>

  2. Image Links

    Image links aren’t too different. You’ll use the same link code, but instead of wrapping it around text, you’ll wrap it around a piece of HTML that calls an image. Upload your image to your media library or a third party host like Photobucket. Now, to build the link:<a href="http://LINKHERE.com"><img src="http://IMAGE-URL-HERE"></a>

  3. Spaces

    Occassionally I find the need to add space between paragraphs or images manaully. The easiest way to do this is adding a little bit of code! If you want to manually add a break in a paragraph, use this tag once where you want to break the paragraph — there’s no need to open a tag here, just this little bit will do:
    </br>
    And if you just need to add some extra space, you can simply add this little chunk:
    &nbsp;

  4. Basics on HTML tags

    If you’re not used to using HTML tags, they can be a bit tricky, but a good rule of thumb with tags is to always make sure that you close any tags you’ve opened. If you leave a tag open, the tag’s function will affect the rest of the content after it. Closing the tag tells it where to stop applying the function. Closing a tag is simple. Just use the same tag as the opening one, but add a backslash right after the opening carrot. Here’s an example: <em>This text is now italic!</em> This text is not.

  5. Link Targets

    A link target tells the link where to open. When there’s no target, the link will open in the same browser window. For outside links, it’s best to open the link in a new browser so you’re not taking people away from your site. To add a link target you simple add a little bit of extra code to the link code like this:
    <a href="http://LINKHERE.com" target="_blank">text here</a>

    This trick works for ANY link — text or image!

Try these basic tips to enhance your blogs and if you have any questions, leave a comment and we’ll get back to you as soon as we can!


Be sure to follow Blair of The Fox & She on Facebook, Instagram, Pinterest & Twitter!

  • erinmbassett

    Since I’ve visited this post 12 times in the last few weeks – I figured I’d comment that it really is so basic, but so helpful!!!