Online content creation has become a central element to marketing and communications. Often times, content marketers and writers are creating content for web with little to no knowledge of formatting. Although HTML might sound like a foreign concept, there are a few quick tips that everyone should learn to make sure they can write the perfect blog, webpage or article.
What is HTML?
HTML stands for Hypertext Markup Language. When you’re browsing the internet, every webpage you look at is written in HTML. HTML acts as a frame that gives structure to webpages. In this blog post we’ll go through a few quick lines of HTML that any marketer, writer or blogger can use to add structure to their content!
Sometimes you might want to add an image from the web, but it might not fit properly on the webpage. With HTML, you can add the image you want and resize it with a simple line of code, like I have with this image of a cat.
In the below code, you input the URL of your image file, you can add some ‘alt text’ to describe your image (tip: this is great for SEO), and you can then resize the image by adding the new width after width: and height after height:.
<img src=”http://www.yourwebsite.com/imagefile.jpg” alt=”some_text” style=”width:width;height:height;”>
When you want to add a link to a webpage, hyperlinks give us the opportunity to make a page look a lot cleaner. For example, if I want to add a link to my blog on crisis management online without HTML, I might paste the URL directly into this blog post, like this: https://dyjaho.wordpress.com/2017/05/24/crisis-management/
However, if I want to keep a flow to the writing and keep the blog post clear and concise, I can use HTML to link to my blog on crisis management like this.
You can do the latter by adding the following tag:
<a href=”http://www.yourwebpagehere.com“>your text descriptor here</a>
You add the URL to your website after “a href=” and add the text that you want to appear on your webpage where it says ‘your text descriptor here’.
To add paragraphs in HTML, you simply place your text between <p> </p> tags.
<p>This is your paragraph</p>
If you want to increase the size of text to look like a heading, you can use <h1> and <h2> tags. The h1 tag will make your text look the largest and the h2 tag will make the text slightly smaller.
<h1> Your heading </h1>
<h2> Your sub heading </h2>
Your h1 and h2 headings should look something like this:
This is your h1 heading
This is your h2 heading
Bold & Italics
Finally, to add bold or italic characters, you can use the <b> tag for bold and the <em> tag for italics.
<b>Your bold text goes here</b>
<em>Your italic text goes here</em>
With these HTML basics, you’ll be on your way to expert formatting!