HTML, or hypertext markup language, is the code language behind the internet. Every web page your browser displays is written in HTML, which your browser converts into nicely formatted, readable content on a web page. This entire website uses HTML, including this article you are reading at this moment. If you own a business, you should understand a few basics of HTML for your own website. Follow along to learn HTML basics you should know.
What is HTML?
HTML came about in the 1980s and moved into prominence in the 1990s with the rise in popularity of the internet and browsers like Netscape. The origins of HTML go back to physicist Tim Berners-Lee, who developed the first versions of the language while working at CERN, the home of the Large Hadron Collider and other amazing physics projects.
HTML allows web page creators to add elements to a web page. Everything from text and images to videos and audio are directed by the HTML code, usually in tandem with a style sheet written in CSS, a related web programming language. While it may sound like Greek to you, it’s actually quite simple to use and understand. Once you have the basics down, you can quickly make a boring web page look brilliant without paying a developer or designer.
The base of all HTML formatting comes from tags. Every tag starts and ends with a bracket, and the words inside the bracket tell the browser what the element should do on the webpage. For a tag to work, it always needs a partner. Together, an opening and closing tag complete the element. For example, if you want to create a paragraph of text, you will want to surround it by a <p> tag and a </p> tag. I you want to create a paragraph with the text “I am a paragraph,” here is what it looks like in HTML:
<p>I am a paragraph</p>
In this case, p stands for paragraph. There are lots of different types of tags, but we only need a few to do most of what any business owner needs. A full listing of tags available for use in the latest version of HTML, HTML5, is available here.
The most common use of HTML is adding and formatting text. You may want to make some text bold, or maybe you need to emphasize with italics. Either way, it’s quick and easy with HTML!
To make text bold, you use the <b> tag. To make text italic, you use the <i> tag. If you want to make it bold for emphasis, use the <strong> tag. For italics with emphasis, use the semantic <em> tag.
For example, let’s say you want to recreate this sentence: The giant tortoise couldn’t keep up with the fast rabbit.
In HTML, it looks like this: The <strong>giant tortoise</strong> couldn’t keep up with the <em>fast rabbit</em>.
Simple, right? Headers work the same way, but inside the tag you use the text H1, H2, H3, and so on for the six levels of HTML headers. At the start of this section, the HTML code for the header that says “Formatting text” looks like this: <h2>Formatting text</h2>. H1 is generally used for the largest, most important headers like a page title. H2 and H3 are commonly used for section headers, like in this paragraph. H4, H5, and H6 are used far less frequently, and are most common in very long, complex articles or pages with multiple levels of organization.
Add an image
Text is great, but what if you want to give your page a little pizzaz with some images. You can do that easily with HTML as well. All you need is the file location, usually on your server, and you can insert any image.
Recommended for You
A random 580 pixel wide by 300 pixel tall image.
Let’s say you want to add an image called image1.jpg, which is saved in your site’s images folder. If you want to open the image in your browser, it would be located at http://yoursite.com/images/image1.jpg. But we don’t want to just open it in the browser to view, we want to embed it in a page. Here is the HTML code you would use for that:
In this line, we are telling the browser to load an image with the img tag. But inside the image tag, we tell the browser the source using src=”source”. This all goes inside the brackets. You can add additional attributes for the size, border, and more, but we’ll keep that one for HTML 202 for business owners. In most cases you will want to use an image that is already formatted for your site, and the plain old <img> tag with the source is enough for your needs.
Link to another page
If you want to link text, an image, or any other element to another web page, you do so with the <a> tag. The a tag allow for multiple attributes, similar to the img tag, but the basics you need to understand is that you should put an a with a link attribute before the element you want to link and a closing a tag at the end. Everything inside those tags is linked.
For example, let’s say you want to link from your blog to your sales page at http://yoursite.com/sales. Doing so is easy! Just use this format to build your link:
<a href=”http://yoursite.com/sales”>Click here to view the sales page</a>.
In this case, we created a sentence that says Click here to view the sales page. If you click any words in the sentence, you will go to the sales page. Notice that the period is outside of the closing </a> tag, so it would not be linked. The href attribute stands for hypertext reference, and tells the browser that anything inside the <a> tags should link to that URL. (URL stands for uniform resource locator, and is another name for the web address starting with http.
Resources to learn HTML for free
If you ever get stuck or want to learn more, don’t worry, there are plenty of free resources available. Whether you want to answer a simple question or prefer a full course in learning HTML, check out these great resources:
These courses could all have you building websites in no time! But if you use WordPress or another CMS, you don’t need to build the entire site, you’ll just need a little HTML here and there to polish off the way you want. Then your business can make you money online while you sleep, or at least help land a sale or two.