Basic HTML code for bloggers and newbies

Basic HTML for Internet entrepreneurs

Disclosure: Just so you know, we may sometimes earn a small commission from affiliate links on this site.

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.

Website Quick Start

Start with the most popular ways to build a website right now.

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:

<tag>content</tag>

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.

Attributes

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:

name="value"

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...

Hyperlinks

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=" http://en.wikipedia.org/wiki/ 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>

rendering:

or:

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

rendering:

Headings

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.

Paragraphs

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

Emphasis

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="//www.youtube.com/embed/bWPMSSsVdPk" 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.

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

Make stunning sites using Google fonts

Regardless of whether you have a blog or an eCommerce store, having a beautiful website will lead to an increase in conversions, because people trust professional looking sites more.

Even though there are a few examples where unattractive site design has not prevented a business from becoming popular, good Web design makes better financial sense.

So why not make the effort?

Managing 404 server error response pages

Well managed 404 "file not found" errors can turn potential problems into great opportunities that help you get the most from Web traffic that might otherwise slip between the cracks.

Even if visitors are trying to find content that no longer exists, a good 404 error page can direct them to the information they are after and lead to a conversion - just like any other good landing page.

Makes sense right? Just because a visitor is after a non-existent page (perhaps they have been directed to a mistyped URL from another site) doesn't mean we can't try give them what they're after anyway.

Critical features of a Website. Pic by Michael

What features makes a website good can be a really subjective thing. What works for one might be complete poison for another.

website design guide for beginners

This step-by-step simple guide to creating a website is for beginners who want a professional site with great design and functionality that's easy and cheap

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.

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

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.

Shopify eCommerce website builder

Shopify is an eCommerce website builder that makes it quick and easy for anyone to build and host their own cutting-edge, responsive online store.

It's the fastest growing hosted shopping cart solution that is dominating the market due to it's elegant user interface, simplicity, power and speed.

Because it's important for an online venture to become operational as quickly and cheaply as possible, Shopify undoubtedly represents the best solution for small to medium sized startups.

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 schema.org).

Wix website builder

Wix is one of the world's best online website builders with over 55 million sites created, and you can get setup for free in minutes by following our step-by

Complete guide to website builders. Pic by Alex Kislow

We've compiled research data on the top website builders; comparing and ranking them on everything from responsive design, to SEO, value for money and even o

Back to Top