Warning signs that your blog or newsletter might need an HTML intervention:
- You lay awake at night wondering how to get more people to even FIND your blog.
- You ask strangers on the street for help adding graphics to your newsletters.
- You’ve actually shed tears over broken links…
OK. Maybe your situation isn’t THAT hopeless – yet. ;) But, no matter what hopes or dreams you have for your blog or newsletter, you can make creating and maintaining them easier and your content better by learning a bit of HTML.
And knowing even just a little code can be a real lifesaver. When your post formatting looks wonky or your links turn out to be clicks to nowhere, having even one or two HTML superpowers will let you rescue your blog or newsletter, rather than having to send out a signal for help to that techie friend of yours yet again…
And don’t worry! HTML is more simple than it seems.
HyperText Markup Language, or HTML as it’s better known, is just a coding language made up of elements that tell your web browser what each part of a web page is. And HTML tags are just the containers for each of those elements.
Tags are made up of angle brackets and the name or abbreviation for the element. And tags usually come in pairs – with an opening tag like this <> on the left and a closing tag (which is the same as an opening one except with a forward slash to show that it’s the end of the element) like this </> on the right.
: :Easy-peasy-lemon-squeasy: :
And, to prove just how easy using HTML tags can be, we’re taking you behind the scenes of this very blog post for a look at 5 HTML tags you can start using TODAY! These 5 tags will take your blog, or even that fancy email newsletter you’ve been meaning to create, to the next level with just a few keystrokes.
5 Must-Have HTML Tags for Your Blog or Newsletter
Headings pack a powerful punch for two main reasons. First, search engines (like Google) use heading tags to decide what the most important content of your site is. And then they use that information to index your site, or make your awesome blog easier for interested readers to find.
Second, the content of different headings are displayed in different sizes. So, they have the visual effect of headlines or sub-headlines, which help break up your text so that all those TLDR folks out their can quickly skim your content and still understand what your post is about.
To use headings, like many other HTML tags, you just need to “nestle” the text you’d like to have in your heading between the opening and closing tags of the appropriate heading size, like this:
The <h1> tag is the one given the most importance and displayed in the largest size. It’s generally reserved for the title of the web page or, in the case of a blog, the particular page’s blog post.
<h2> tags are used for subheadings within web pages or blog posts to indicate different sections, for example.
<h3> and <h4> tags are then used for further sections and are usually just large enough create a bit of a “speed bump” for the reader’s eye when moving down the page while <h5> and <h6> headings are less commonly used but might come in handy for small print like a footer at the base of a newsletter.
Relevant links are one of the most common additions to a well-thought-out blog post or an attention-grabbing email newsletter. With links, you can connect to great content that drives home your point, offers fun learning opportunities for your audience, or even just shares a little bit more about yourself or your company.
The HTML link tag starts with <a href="">, which stands for “anchor hypertext reference equals”.
Then the link you want to share goes in between those quotes. (BTW – Make sure they’re straight quotes " " – NOT curly quotes “ ”. Otherwise, your link won’t work. Cue those tears!)
Finally, after that, you can (and should!) put the text that will actually be visible and clickable for your reader, and you close the whole thing with the ending tag: </a>
Voilà! You’ve just created a link in your blog or newsletter.
Make your content pop by adding images using the <img> tag. And with a little more HTML, you can add cool formatting, control the width or height, or – depending on what your blog or newsletter template allows – add a border around your image.
Our images here at Skillcrush are uploaded into a library of images we store on WordPress. Once the image is in our system, it’s given a link that can be used to reference it in the HTML code for our website or blog. That link is considered our image source, or “src” in HTML speak, and is put in quotes in the tag to call up the image.
Quick tip: Search engines can’t “read” images. So, be sure to fill in the “alt” attribute for the image tag with a short description of the image. That way, search engines will know what the image actually is. And this will also be the text that’s shown if your image can’t be displayed by a browser for some reason.
There are two types of HTML lists: unordered lists and ordered lists.
An unordered list just has bulleted items, like this:
- My Absolute Favorite Cupcakes
- Red Velvet
- Peanut Butter Cup
- Wedding Cake
An ordered list has items, but they’re numbered in sequential order, like this:
- My Absolute Favorite Cupcakes (in order!)
- Red Velvet
- Peanut Butter Cup
- Wedding Cake
Items in an HTML list are each designated by an <li> tag, and all the items for one list are nested within <ul> tags for an unordered list or <ol> tags for an ordered list.
When you’re looking to add some extra oomph to your text, bolding and italicizing can provide just the variety you need.
The <strong> tag will bold your text.
And the <em> tags will italicize (or add emphasis) your text.
And, once again, all you have to do is throw your text between the opening and closing tag of each, and you’re SO good to go.
That was fun, right? See, HTML is your friend! And, like with any friend, the more you get to know HTML, the more good times you can have with it. Start by challenging yourself to work these tags into your blog or newsletters, and you’ll soon be having a blast making beautiful content with your new buddy, HTML.
If you’re interested in learning more about HTML, check out the Skillcrush Web Designer Blueprint and Skillcrush Web Developer Blueprint. In addition to becoming an HTML wiz, you’ll learn all you need to get started with an amazing career in web design or web development in just a few short weeks.