HTML Basics for Bloggers {+ A Free Printable}

Code, specifically HTML and CSS, can be extremely daunting and intimidating especially to a beginner. But, knowing the basics will help you feel more comfortable when it comes to code and can really help you make your blog or website look more professional, easier to navigate, and can increase your viewers and whether they come back or not. You don’t need to be tech-savvy or a computer programmer in order to use these HTML codes, all you have to do is copy and paste them into your template and/or blog posts to add a little OOMF! Easy peasy lemon squeeze-y. I’ve also added a free printable at the bottom of this post so you can have easy access to my favorite HTML basics!

Get your free printable here

HTML Basics for Bloggers

To add a paragraph:

<p>YOUR PARAGRAPH HERE</p>

To align your paragraph:

<p style=”text-align: center;”>YOUR PARAGRAPH HERE</p>

To change font size (change “12” to your size (px), em, or a percentage):

<span style=”font-size: 12px;>YOUR TEXT HERE</span>

To change your font color (replace the six-digit hexadecimal color with the one you want to use):

<span style=”color: #FF3399;”>YOUR TEXT HERE</span>

To highlight your text (replace the six0digit hexadecimal color with the one you want to use):

<span style=”background-color: #FF3399;”>YOUR TEXT HERE</span>

Get your free printable here

To cross out your text:

<del>YOUR TEXT HERE</del>

To italicize (emphasize) your text:

<em>YOUR TEXT HERE</em>

To bold your text:

<strong>YOUR TEXT HERE</strong>

To underline your text:

<u>YOUR TEXT HERE</u>

Hyperlinked text (use to link words or text within a post or sidebar):

<a href=”YOURURLHERE.COM”>YOUR TEXT HERE</a>

Hyperlinked text (open in new window):

<a href=”YOURURLHERE.COM” target=”_blank”>YOUR TEXT HERE</a>

Mail to (insert an e-mail address):

<a href=”mailto:YOUREMAILADDRESS”>E-MAIL US</a>

Ordered (numbered) list:

<ol>
<li>YOUR TEXT HERE</li>
<li>YOUR TEXT HERE</li>
<li>YOUR TEXT HERE</li>
</ol>

Unordered (bulleted) list:

<ul>
<li>YOUR TEXT HERE</li>
<li>YOUR TEXT HERE</li>
<li>YOUR TEXT HERE</li>
</ul>

Insert image:

<img title=”TITLE TEXT” src=”YOURIMAGELINKHERE” alt=”YOUR ALT TEXT” width=”100″ height=”150″ />

Insert linked image:

<a href=”YOURLINKHERE”><img src=”YOURIMAGELINKHERE” alt=”YOUR ALT TEXT” width=”100″ height=”150″ /></a>

Insert linked image (open in new window):

<a href=”YOURLINKHERE” target=”_blank”><img src=”YOURIMAGELINKHERE” alt=”YOUR ALT TEXT” width=”100″ height=”150″ /></a>

Grab this button (good for sidebar ads):

<div align=”center”><img title=”TITLE TEXT HERE” src=”YOURIMAGEURLHERE” alt=”YOUR ALT TEXT” width=”125″ height=”125″ />GRAB THIS BUTTON! <textarea cols=”14″ rows=”3″>&lt;a href=”YOURURLHERE”&gt;&lt;img src=”YOURIMAGEURLHERE” alt=”YOUR ALT TEXT HERE” title=”TITLE TEXT HERE” width=”125″ height=”125″ /&gt;&lt;/a&gt;</textarea></div>

Get your free printable here

What HTML basics do you use on a daily basis?

14 Comments

  1. May 16, 2016 / 12:12 PM

    Super helpful! Thank you!

    • May 16, 2016 / 12:14 PM

      You are very welcome Kate!

  2. May 16, 2016 / 12:15 PM

    Thank you! This is much needed. I try Google for this stuff and it never gives me a gauranteed successful result.

    • May 16, 2016 / 2:21 PM

      That’s the worst! Whenever I try to learn something new, it takes forever to figure out how to ACTUALLY do it! Code academy helps and its FREE!

  3. May 16, 2016 / 12:54 PM

    Bookmarking this and hanging on to it FOREVER! Super helpful, Rach!

    X,
    Cristina
    cristinawashere.com

    • May 16, 2016 / 2:20 PM

      YAY! Thanks so much Cristina!

  4. May 16, 2016 / 9:03 PM

    This is so helpful! I basically know bold/italic well enough to use them regularly, but I’m definitely going to use this to get more familiar with HTML. Thank you!

    • May 16, 2016 / 10:00 PM

      I think one of the most useful is the clickable links and opening a link to a new page!

  5. May 17, 2016 / 5:07 AM

    So awesome you did this!I was OBSESSED with learning html basics, and even designing blogs when I first started blogging. I think knowing the basics of html is so useful to any blogger!

    BlondieInTheCity.com

    • May 21, 2016 / 11:13 PM

      I definitely agree with you! I actually just took a website design and development class and I loved it! I can’t wait to learn more!

  6. May 17, 2016 / 9:22 AM

    i remember these in my high school html class! i know i should get more involved in html and css for my page but it is just so daunting!
    Xx
    Kali
    http://www.lovelaughexplore.com
    @love_laugh_explore

    • May 21, 2016 / 11:12 PM

      It definitely is a daunting task but once you practice you’ll get the hang of it! I actually have a free app on my Mac called “TextWrangler” which let’s me practice my coding without getting all the squiggly lines like Word gives you!

  7. May 18, 2016 / 3:40 PM

    Thank You for this! I am familiar with most of them but some I am not, so this will def be helpful for me!

    • May 21, 2016 / 11:10 PM

      You are welcome, Mistle!

Leave a Reply

Your email address will not be published. Required fields are marked *