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.
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.
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 <strong>text</strong> is bold.
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.
<center>This sentence is centered.</center>
Cross out words with a strikethrough using <del> or <s> tags.
<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 <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 <span style="font-family:Times New Roman;">the font</span> of text.
Font-size changes <span style="font-size:22px;">the size</span> of text.
Color changes <span style="color:#C39;">the color</span> of text.
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>
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 <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 <a href="https://bloggertoblogger.com/" title="Blogger to Blogger" target="_blank">link</a> opens in a new tab.
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:
If a web browser can’t display an image, it will instead show the text in the <alt> tag.
<img src="https://bloggertoblogger.com/images/no-image.jpg" alt="basic html for bloggers" />
You can make an image a clickable link by putting the <a> link tags around the image tag.
<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!