SME Pals is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.
Basic HTML code for bloggers and newbies

Basic HTML for Internet entrepreneurs

Having a basic knowledge of HTML (HyperText Markup Language) can be a huge help for bloggers, online entrepreneurs, or anyone who might be asked to put a WORD document onto the company website (for example).

HTML is super easy to learn and we're going to show you how it works and then run through some of the more useful tags that will allow you to create hyperlinks, format an online document, and even embed media - like YouTube clips.

DesignModo email and website design apps

How HTML works

HTML code is used to control how content should be presented on a Web page. This could be anything from a plain paragraph to a table or a bullet list.

A generic piece of HTML code looks like this:


It has:

  • an opening tag that specifies what you want the code to do
  • content between the tags
  • a closing tag that is the same as the opening tag with an extra backslash (/)

Pretty simple right? You can try it out for yourself by putting some text between an opening and closing <strong> tag, like this:

<strong>strong text</strong>

which gets displayed like so:

strong text

So HTML consists of lots and lots of different tags like this - each of which does it's own thing. Although, there are a few optional extras you'll need to know too.


HTML tags also have attributes, which are optional. But certain tags, like the anchor (hyperlink), need an attribute in order to be useful.

Attributes are added to the opening tag and take the following form:


So a tag with an attribute would look something like this:

<tag name="value">content</tag>

We'll look at how the href attribute makes links do what you want in a moment. But first, we need to quickly talk about a few really important attributes that are used in conjunction with CSS in order to style HTML elements.

IDs, classes & CSS

ID and class attributes tell your browser to apply certain CSS styles, and in this way you can control the look and feel of any HTML element on a page.

Including CSS in your Web pages is beyond the scope of this article, but there is a great beginner guide on YouTube that will show you how to link a CSS file to an HTML page in the page header:

If you are still unsure how to create a CSS file and associate it with a Web page then drop me a line in the comments or go to our forums and ask a question.

There's a great example of how class and ID attributes can convert a plain hyperlink into a professional looking button in the section entitled hyperlinks section below.

Useful HTML tags

Some tags are much more commonplace and useful than others, and some of the more obscure ones can often be copied and pasted into your HTML document without requiring you to memorize them.

Great tip: If you see another website doing something you want for your own site, right click on the page and select 'View source', or 'inspect element'. Then copy and paste the snippet of code you want.

Here's a list of the most commonplace HTML tags that are important for every day use...


A hyperlink tag, denoted with an a, allows a visitor to jump to a new Web page. You can create internal links, which go to another page on your own site, or external links which direct the browser to another website.

Where a hyperlink points to is determined by the href attribute, like so:

<a href="URL">link text</a>

Now, the URL value can be relative, which means it points to another page on the same domain, or absolute, which means it includes everything from http:// onwards (used to link to other websites).

For example, the following link:

<a href="/development/basic-html">Basic HTML</a>

is a relative one and links directly back to this page (click it and you'll come straight back here):

Basic HTML

I could just as easily linked out to anywhere else on the Internet using an absolute URL, like this:

<a href=" David_Mercer_%28writer%29"> Basic HTML </a>

which would take you to my author page on Wikipedia.

Now, because I use CSS to style elements on this site, there's a great example of how to create a class attribute to alter the look and feel of the link. In this case, I can use a combination of classes to create different buttons using the button class plus a predefined color class, like this:

<a class="button red" href="/web-design/how-build-website-free-weebly-website-builder" > How to build a wesbite with Weebly </a>



<a class="button blue" href="/websites/how-create-free-website-wix" > How to build a wesbite with Wix </a>



Headings are really easy, and come in a hierarchy. The most important heading is h1. This is usually reserved for the title of the page.

From h1, we move down through the ranks - h2, h3, h4, and so on.

Headings can be used to structure a document and break up the text into logical sections.


The paragraph tag is denoted with a p. Simple enclose any text you like within a paragraph and away you go.


The emphasis tag is denoted with em. And if you enclose text within it, it comes out looking like this:

This is emphasized text

You can also emphasize text using the strong tag to make it stand out. Text that is enclosed within strong tags looks like this:

This is strong text

Rich media

Ok, so here's where things get a bit funky. It's not really a good idea to try an learn every bit of obscure HTML or HTML5 that gets invented. Instead, most media can be embedded using a snippet.

For example, YouTube makes their videos embeddable and all you need do is copy and paste the HTML snippet they provide into your Web pages and the video will appear.

YouTube uses the iframe tag to create a frame within a Web page that displays the video, like this:

<iframe width="640" height="360" src="//" frameborder="0" allowfullscreen></iframe>

Copy and paste that into your site and it will show you a pretty neat video introduction to HTML by Jake Wright, which you can watch here:

Different media may use different tags, and HTML5 has a whole range of cool new features that can be used to display rich media. You can start learning about HTML5 with this tutorial video:

Good online CSS generators

Because HTML and CSS are so powerful, and many people want to make better use of these without having to spend months and years becoming a Web developer, there are plenty of great free tools available online.

I use a few of these myself because more complex effects like color gradients, can be a pain to write by hand and are much easier to get right with a graphical interface. In particular:

  • CSS gradient generator: Create a wide variety of color gradients with preset color schemes and a live preview.
  • CSS3 generator: Take advantage of the power of CSS3 to implement incredible features like transformations, drop shadows, scaling, rotations, and more.

So that should get you through much of what you'll need for every day usage as a blogger, or business person maintaining a website.

Remember that basic HTML is not enough to develop a professional quality site. It takes too long to learn all the skills required. If you are thinking of designing a website from scratch I strongly urge you to look at an online website builder instead.

Website builders will get you up and running at a fraction of the time and cost it takes to do a site from scratch even if you make use of a CMS (Content Management System).

What other HTML tags do you use on a day to day basis? Share your HTML and CSS design tips in the comments.

Weebly website builder

Here's a quick step-by-step, beginner's guide to making a free website (start for free, or choose from their low-cost paid plans) using Weebly - one

Free Website designs from top website builders. Pic by Yann Coeuru

Website builders have forever changed the world of Web design by allowing us to use free, responsive themes and templates to manage the look and feel of our

Five great ways to make your site better

There are a few main reasons why every Webmaster should be constantly on the lookout for ways to improve or upgrade their websites.

Structured data can improve SEO and sales

Any eCommerce store owner looking to increase sales by driving Website traffic from organic search needs to pay close attention to what structured data (rich snippets) is all about.

From a technical point of view, structured data is implemented by using additional markup in your HTML code that uses an agreed upon vocabulary for representing data in webpages (defined at

Create a free website

Learn how to create the perfect website for free with great design and functionality that's super easy to maintain and cheap to operate.

BigCommerce shopping cart software

Learn how BigCommerce makes it quick and easy for anyone to sell (anything) online from their own eCommerce store.

How to add Getresponse email marketing to your store

One of the key factors in the success of any eCommerce site is great marketing - and email is one of the most effective of all Internet marketing strategies.

Top 3 eCommerce site builders, comparison review. Pic by Martin SoulStealer

We've researched and compared each of the three leading eCommerce website builders to highlight which ones are the most popular, offer the best value for mon

comparing two leading site builders

At some point, you're going to need to decide which of the most popular website builders (Wix or Weebly) to use for your own small business website.

Web design mistakes that can be fixed (unlike spilled milk)

Good Web design is important for success online, but big companies implement bad design all the time.

Dedicated Server Hosting Comparison

Are you looking for dedicated server hosting for your blog or business website, and want a comparison table of the best plans from leading Web hosts to help

Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsi

Back to Top