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):
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>
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.
Found This Useful?
Share it on your own site using this quick link (and tell us about it in the comments so we can read your article too).
<a href="http://smepals.com/development/basic-html">Basic HTML for Internet entrepreneurs</a>
Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsing device of choice for the burgeoning millennial market.
If you are one of those unlucky people to have built your site more than a few years ago, on a platform that used the old table based Web design paradigm, then you have two choices:
I run a small eCommerce business and it's proving extremely hard to get any visitors to the site. Of the few that...
An SME (Small & Medium Enterprise), sometimes called an SMB (Small & Medium Business), is any business under a certain size. With so many differing definitions, we focus on the people responsible. Smart Modern Entrepreneurs.