Basic HTML for Bloggers

When I first had the idea to start a website back in 2010 I had no idea how much coding I would do in the subsequent years. Honestly, if I had known the extent of what I’d have to learn to accomplish what I wanted to do, there would’ve been a lot more procrastination and self-doubt.

Fortunately, I had slightly more determination and curiosity than fear thanks to my blissful unawareness of the nuances and complexities of code…most of which you definitely don’t need to delve into. Knowing basic HTML, though, is empowering and can help you maniacally completely customize your blog.

Basic HTML for bloggers. Customize your posts with HTML!


Wordpress and other blogging platforms have come a long way in the last decade, with better UI, customization, and community support. Proficiency in HTML isn’t necessary, but if you’d like to dip your toes into the mysterious code that lurks beneath the surface of your blog, here are some ways you can use HTML within your posts.

STYLING FONT

Rich text editors let you easily change font with the click of a button, but if you want to make a particular word or set of words bold or italicized using HTML, place it between the corresponding tags:

This text is bold.

This <strong>text</strong> is bold.

This text is italic.

This <em>text</em> is italic.

NOTE – While <b> for bold instead of <strong> and <i> for italics instead of <em> are also used, I’ve always used <strong> and <em> and use those in my examples based on W3Schools’ notes on the <i> tag and the < b> tag.

You can center a line or paragraph of text by putting it between <center> tags.

This sentence is centered.

<center>This sentence is centered.</center>

Cross out words with a strikethrough using <del> or <s> tags.

This text as well as this text are crossed out.

<del>This text</del> as well as <s>this text</s> are crossed out.

STYLING FONT WITHIN A <SPAN>

Another way to change the styling of a word or set of words within a paragraph is to use the <span> tag. You can declare a span to be any combination of font changes (e.g. bold, italic, underlined, color, size), separating your choices by a semi-colon and closing the span with </span>.

Font-weight and font-style make this text bold and italic. Font-style and text-decoration make this text italic and underlined.

Font-weight and font-style make <span style="font-weight:bold; font-style:italic;">this text</span> bold and italic. Font-style and text-decoration make <span style="font-style:italic; text-decoration:underline;">this text</span> italic and underlined.

Font-family changes the font of text.

Font-family changes <span style="font-family:Times New Roman;">the font</span> of text.

Font-size changes the size of text.

Font-size changes <span style="font-size:22px;">the size</span> of text.

Color changes the color of text.

Color changes <span style="color:#C39;">the color</span> of text.

You can find the hex code for colors on sites like HTML Color Codes or use JavaScripter to convert RBG (red blue green) values to hex.

You can incorporate any and all of these to make text stand out.

You can incorporate any and <span style="font-weight:bold; font-style:italic; text-decoration:underline; font-family:Arial Black; font-size:26px; color:#939;">all of these</span> to make text stand out.

To apply these changes to an entire paragraph, you can put the styling in the <p> tag, and within that still use the <span> tag.

This is a paragraph with a span that has different font.

<p style="font-weight:bold; font-style:italic; color:#2980B9;">This is a paragraph with a <span style="font-weight:normal; font-style:normal; text-decoration:underline; font-size:20px; color:#16A085;">span</span> that has different font.</p>

LINKS

Putting the <a> </a> tags around text turns that text (aka anchor text) into a link.
The href attribute is the location (URL) of a link and the title is the text that appears when the link is hovered.

This link opens the homepage.

This <a href="https://bloggertoblogger.com/" title="Blogger to Blogger">link</a> opens the homepage.

To force the link to open in a new tab, designate the target:

This link opens in a new tab.

This <a href="https://bloggertoblogger.com/" title="Blogger to Blogger" target="_blank">link</a> opens in a new tab.

IMAGES

If you have permission to use an image that’s online, you can link to the photo so that it’s embedded on your page by specifying the image source (i.e. image URL). You can change the size you want the image to display as with height and width.

<img src="https://bloggertoblogger.com/images/blogging-html.jpg" height="172" width="125" />

The above snippet appears as:

html for bloggers

If a web browser can’t display an image, it will instead show the text in the <alt> tag.

basic html for bloggers

<img src="https://bloggertoblogger.com/images/no-image.jpg" alt="basic html for bloggers" />

IMAGE LINKS

You can make an image a clickable link by putting the <a> link tags around the image tag.

html for bloggers

<a href="https://bloggertoblogger.com/blog/basic-html-for-bloggers/" title="Basic HTML for Bloggers"><img src="https://bloggertoblogger.com/images/blogging-html.jpg" alt="html for bloggers" height="139" width="100" /></a>

Clicking on this image will open the link to this post.

Knowledge of HTML isn’t a prerequisite of blogging, but even basic HTML can be powerful for transforming your blog posts! If you want to try any of this code for yourself but are afraid to mess with your blog, enter it into the HTML box of JSFiddle and click Run. Happy coding!

Leave a Reply