See how Shopify makes it quick and easy to design, build and host your own cutting-edge, responsive online store/boutique.
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.
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:
- 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:
which gets displayed like so:
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:
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):
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>
<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
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.
What features makes a website good can be a really subjective thing. What works for one might be complete poison for another.
There are a few main reasons why every Webmaster should be constantly on the lookout for ways to improve or upgrade their websites.
Wix is one of the world's best online website builders with over 150 million sites created, and you can get setup for free in minutes by foll
Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsi
User eXperience (UX) plays a vital role in how well your site converts traffic, and we've got some interesting Web design tips that will give your v
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
Compare and rank the best website builders (all free to start and cheap to maintain) on everything from responsive design, to SEO, value for money a
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 profess
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
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
Learn how BigCommerce makes it quick and easy for anyone to sell (anything) online from their own eCommerce store.