HTML Coding Every Blogger Should Know
Chances are when you decided to become a blogger you did it because you love to write, not because you are super tech savvy. But how do you gain the most attention to your awesome writing? By having a visually appealing blog!
Blogging with WordPress makes it pretty simple and straightforward for anyone to create a visually appealing blog post. But what happens when you want to edit text or images within a widget or menu? There’s no simple click of a button option for this like there is when writing up your blog post.
Therefore, knowing a few shortcuts and tricks can actually make your blog look like you have a better idea of what you’re doing — especially if you are just starting out blogging and have no idea what you are doing!
For instance, do you know how to create a simple table of images? How about bolding your words, or striking out the words? Can you add a hyperlink to any text or photo? Center or off-center all or some of your work?
Again, I am not just talking about your blog posts, but your entire blog. The widgets, header, footer, and menu area!
Are you able to format the look of your blog the way you want? Change the font style and colors at any given moment?
Having some simple HTML coding knowledge as a blogger can be super beneficial to the look of your work and to the appeal of your readers!
Trust me, once you see how easy it is to incorporate a few HTML codes within your blog you will be so happy you have this knowledge!
HTML Coding For Bloggers
Before getting started, there is ONE simple rule.
The one thing you must remember when adding HTML code is that you must start and end with the <html> tag.
Remember the greater than (<) or less than (>) signs from math class? Those are exactly what you need to use for HTML coding.
<b>Make sense?</b>
See how I could make that a bolded question? That’s because I used the bold HTML tags, which is the letter “b” enclosed by the greater than and less than sign. Easy to remember!
To end the HTML coding, you must use the same tag but only add the backslash.
Did you catch that up there? It looked like this </b>
ALWAYS make sure you end your HTML coding with the </> otherwise the HTML coding will affect everything after the HTML tag <>. For instance, if I had written out <b> BOLD and I never closed it with </b> ALL OF MY TEXT WILL BE BOLD.
**Remember to edit the HTML coding in the text format, where you will be able to see all the other HTML coding WordPress automatically adds to your blog.
Ok, let’s get started!
BOLD ITALICIZE UNDERLINE STRIKEOUT
Adding emphasis to your words can make them stand out in a sentence and make a bold bolder statement.
See what I did there?
This can be super easy to do while writing up your blog post in WordPress where the options are available to you.
But what happens if the option isn’t there, or you’re editing your menu and widget area of your blog and you MUST rely solely on your HTML knowledge.
This is the HTML coding for bolding, italicizing, underlining, and striking out words:
HEADINGS
Headings are very simple and range from <h1> to <h6>.
The <h1> headings will be your largest and the <h6> will be your smallest.
Main titles are generally used in the <h1> and <h2> code, while all other subtitles and contents of your blog falls under <h3> <h4> <h5> and <h6>.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is what all six headings look like with my blog theme! You can see that they gradually get smaller as the number gets larger.
LISTS
Adding lists within your blog help break up the material into easier to read sections for your readers. You may have an ordered/numbered list, or an unordered/bulleted list.
An ordered list (with numbers) will have the HTML tag <ol> and </ol>.
An unordered list (with bullet points) will have the HTML tag <ul> and </ul>
The items within the list will have the HTML tag <li> and </li>
An ordered list will end up looking like this:
- List Item 1
- List Item 2
- List Item 3
An unordered list will end up looking like this:
-
-
- List Item 1
- List Item 2
- List Item 3
-
HYPERLINK
No one wants to click on some long, ugly link. This is how you can make your links (affiliate links, perhaps?) look pretty and clickable!
Where it says “link name” is the text that will turn into a hyperlink. For example, this is a link to my most popular blog post: you can click it here!
It looks a lot prettier and less messy than this one here: http://www.diydarlin.co/best-blogging-resources-and-tools/
IMAGES (WITH AND WITHOUT HYPERLINK)
Adding an image to your blog (menu, page, widget) or blog post is SO easy.
Just remember to add the quotation marks around your image title — your image title is whatever name you have saved the image as in your Media Library on your blog.
Want to turn your image into a hyperlink? Use the Hyperlink HTML coding and the Image coding together! Now you have a picture for your readers to click, which is much more appealing than a long, ugly link!
FONT FAMILY, SIZE, AND COLOR
Changing the font family can be crucial to the aesthetic of your blog.
You may purchase a theme because you love the design and layout, but the font may not be what you want.
Easy solution: change it!
With the above HTML coding, your text will look like this: Times New Roman, Size 12 in pink!
With the font color, you need to type in the hex color code.
What is the hex? It’s a six-digit number that represents a certain color.
With this option, you aren’t just stuck using traditional red or blue, but you can use any variations of the colors.
Use this link here to look up hex color codes!
EMAIL ADDRESS LINK
As a blogger, you want to make sure your readers can easily contact you.
You can send readers to a simple link like this here:
Or you can add in a graphic that acts as a link to your email. For example, click on the graphic below to send me an email!
Both options you should now know how to do!
TABLE
I love using tables when I want to create a block of images.
Tables take a little extra time, and I seriously stress on the words a little!
Once you get the hang of what you are doing, implementing HTML code will come so naturally for you.
Typically, I am creating tables with images and hyperlink attributes (I know you can do this too!).
The above HTML coding for a table will end up looking like this:
| YOUR TEXT HERE. | MORE TEXT HERE. |
I prefer to use tables when I am adding graphics next to and below one another; it helps keep the placement of the graphics clean and evenly spaced out.
So there you have it, basic and easy HTML coding for your blog! Keep in mind there are a ton of other things you can do with the basic HTML coding knowledge you now have (i.e. hyperlinks within a list, images in a table, hyperlinks within an image within a table, etc… ) but this very basic HTML coding is provided to get you started!
