Top 10 HTML and CSS Codes That All Bloggers Should Know
Thanks to powerful visual editors that are standard with most content management systems (like WordPress!), almost anyone can write and format their blog posts without the need for learning HTML or CSS. But just because you can, doesn’t mean that you should in this case. I believe a little knowledge can go a really long way, and so I have compiled a list of the Top 10 HTML & CSS codes that a blogger should know.
^ See that? That’s a heading. It’s a way of formatting and breaking up a blog post so that the information is easier to read. It not only looks better visually, it makes the content easy to follow and visually digest. Every blogger should be using headings and know how to use them correctly.
There are 6 size options as follows:
It’s important to know first that for SEO purposes, you should use headings in order of importance – the most important heading on the page (for a blogger, this would be the title of the page or blog post) should utilize Heading 1 or 2, while headings in the content would use Headings 3-6.
Here’s what the coding would look like:
Learning how to write out a link yourself and understanding how they work is something any blogger should know – especially if you’re linking to content outside of your website. Here’s what a pretty standard link would look like, and how to create it:
Another blog post written by Kimi
Adding No Follow Tag
Did you know that the FTC requires your sponsored and affiliate links to include what’s called a “No Follow” tag? It prevents other websites from capitalizing further on those links. Not including a No Follow tag is sort of like giving the page found at that link a “vote” in favor of its content. Here’s how you add the tag to your links:
Manually Inserting Images
Sure, you probably have some sort of visual editor (like the one in WordPress), but every blogger should know how to manually insert an image into a post, page, or widget.
Linking an Image
Turning your images into links is not only easy – it’s a great way to get people to click through to important content. You can combine the HTML for making links, and manually inserting images – even add in the no follow tag too if you’d like!
I love a good list… and they don’t have to be difficult to put together. There are a couple of types of lists: Ordered (1, 2, 3) and Unordered (usually made of bullet points). Here’s what they look like.
- List Item 1
- List Item 2
- List Item 3
- List Item 1
- List Item 2
- List Item 3
These are so simple to make, and they are a nice formatting trick that makes everything easy to read in your blog posts. The big difference between the two types is the opening and closing tag – “ol” for Ordered List, and “ul” for Unordered List. Easy, right!?
Basic Text Styling
Putting special emphasis on words in your blog posts is a bold way to add make your sentences
striking! See what I did there? Basic text styling is one of the more commonly used HTML codes, and are a great way to change the voice of your blog posts.
Advanced Text Styling
Maybe you want more advanced ways of changing the styling of your text including changing the color of a few words, or even changing the font family or the size of your words.
CHANGING THE FONT COLOR
CHANGE THE FONT
CHANGE THE SIZE OF WORDS
Email Address Link
You can make it easy for people to email you with just one click by turning your email address into a link like this one: Click Here to email Hello You Designs
This is a great way to provide another form of communication in case your contact forms ever fail you.
Table with Headings
Another fantastic formatting trick for your blog posts that can keep information organized is a Table with a Heading. It looks like this:
|Row 1, Cell 1||Row 1, Cell 2|
|Row 2, Cell 1||Row 2, Cell 3|
These can be a little tricky to make because you have to pay close attention to the tags for Table Headings (th), Table Row (tr), and Table Details (td). Here’s the code for the table shown above:
Most themes will come with the option to add a button to your post or page. This button style will be preset within your theme.
What HTML and CSS codes are important to you?
Let us know what codes you use regularly in the comments below.