I really believe that everyone in the world needs to have a minimum understanding of HTML. We live in a world that revolves around the internet. Its like knowing how to spell or do basic math – its just part of life and its something you need to know to function, particularly if you’re creating a website or running an online business.
Quite a few of us grew up in a life before the web so we never learned it in school. If this is you – don’t worry, they do a crappy job of teaching this in education now so its not much different and quite pathetic.
Having said that, what is the basic amount of HTML you need to know? I’ve created a short guide that should get you started learning HMTL in about 30 minutes including a little practice time. So lets get going.
HTML stand for Hyper-text Markup Language. Its not really advanced code, but it is a markup. Markup means we’re going to use tags to tell the web browser how to treat text. That’s it. The browser uses the tags as instructions to display things in ways you ask it to so you don’t see the raw markup tags in the final page.
If you right-click on this page (or hold down CTRL and click on a Mac) you’ll probably see some kind of option for viewing source code. If you do that you’ll see all of the markup on this very page. There’s a lot of it and you don’t need to know how to code markup at a full page level yet so don’t let it freak you out. Its just to show you what all you can do with tags.
Tags
Tags usually surround text with bracketed abbreviations. They open and close to indicate the start and end to what you want. These are very common in basic text markup for things like links, bold text or italics. Headings and page titles can use these also – they open and close around the text to tell the browser what it is.
For example:
<strong>This makes the text bold</strong> and a different tag like <em>would make things italic.</em>
The strong tag makes things bold and the em tag makes things italic.
So there! You just learned your first 2 tags.
Headlines use “H” tags combined with numbers. This separates subheadings – you can have up to 6 levels, but really the first 3 are used most often.
<h1>This is an H1 heading</h1>
<h2>This is and H2</h2>
<h3>And finally an H3, we could go up to 6</h3>
These look like this when you code them:
This is an H1 heading
This is and H2
And finally an H3, we could go up to 6
Also handy to know is the paragraph tag:
<p>This would be one paragraph.</p>
<p>This would be another</p>
Self Closing Tags
Some tags don’t deal with text, so they “self close”. There’s nothing ever between the tags so its just one tag. A prime example of this is an image tag. This tag contains what we call attributes. They give more information about what the tag is doing. So an image tag might look like this:
<img src="http://mysite.com/imagename.jpg" alt="A Description of the Image" />
Here we use 2 attributes, src (tells us where the image is), alt (describes the image or displays a name if the image can’t be displayed) and note the slash at the end of the tag. This just means its self closing – there’s no separate tag to close.
Another handy tag is the “break tag”. Its used when you need a line beak without leaving the paragraph. Its simply <br />
That’s it!
So lets look at what we’ve learned. There are tags that surround text and tags that self close (like the image tag).
If you learn just the basic stuff on this page and practice a little bit – this will get you very far. You can format a basic article and this my friends, will put you on the road to success!