While I was writing our Money Blogs articles over the past few weeks, I mentioned that people who are interested in making money with content should be comfortable with using HMTL. Then I noticed that we don’t have any articles that cover HTML Basics! So, that’s what this post is all about: Basic HTML tags that every beginner should know.
Before we dive into the details, let’s take a brief look at just what HTML is meant to do. HTML (hypertext markup language) is simply a means of marking up a text file so that it can be rendered into a web page by a web browser. You could create a web page (any web page) in a plain ‘ole text editor (like Notepad or Wordpad) if you wanted to. In fact, I’d say doing just that would be an excellent exercise. But, my point is that there’s nothing special about web pages. Ideally, if you were to strip out all of the special HTML tags that markup a web page, you should be left with a perfectly readable text document (this is the content I keep talking about!).
How HTML Tags Work
You may be wondering just what these “tags” are exactly. A tag is simply a way of telling a web browser what’s what within a web page. For example, when I want text to be rendered as a page’s main heading, I surround that text with the <h1> tag. For example:
<h1>This is the main heading</h1>
So, tags are simply a set of special characters that mark or tag sections of a web page to be rendered a specific way. Note the use of angle brackets (the, < >) in the tag. Every HTML tag will be surrounded by these. Also note how there is a “opening” and “closing” tag (the closing tag has a forward slash / ). If you happen to forget to close a tag properly, your web page will probably look funny when you view it in a web browser!
Just about every HTML tag is going to have a opening and closing set. There are a few exceptions, such as image and break tags (<img /> and <br />) that do not have a closing tag. Instead, there is just an opening tag with the terminating forward slash just before the last angle bracket (aren’t exceptions fun?).
One last bit of info before we move on to the actual tags. All of the HTML tags should be written in lower case. Years ago when the web was young, it was acceptable (and sometimes taught) to capitalize the tags. Times have changed and the new, standard way of forming tags is to use only lower case letters. Don’t confuse this with the actual text content of the page, which can be anything!
Basic HTML Tags for Beginners
<html> </html>
Alright! Let’s take a look at the basic HTML tags you’ll need to make a simple web page. This first one is going to blow you away. Yes folks, it’s the <html> tag!
<html> </html>
The <html> tag is the first and the last tag that occurs within a web page. It encompasses the entire web page, so that a web browser knows that everything in between the tag is part of a HTML document. If you don’t have the opening and closing <html> tags in your web page, none of the other HTML tags in that web page will work!
<head> </head>
The next tag that you need to have in every web page is the <head> tag. Inside the <head> tag is where you’ll include important information about the web page (meta information), references to external scripts such as CSS files and javascript files, and the title of the web page (which is very important!).
The <head> section of the web page is always at the top of the page, just after the opening <html> tag.
<title> </title>
The <title> tag is located inside the <head> section, and is very important. The text you include inside the <title> tags is what you see at the very top of your browser. Also, when SEO (search engine optimization) is a concern, the title you choose can be crucial. When you are writing a page and wish to target specific keywords, you should include these keywords in your <title> and your main heading.
<body> </body>
The next tag that every web page needs, is the C tag. Just as the <head> section is designated for information about the page, the <body> section designates the section for all of the content or body of the web page.
The body of your web page contains the reason why you’re creating the web page in the first place, which is the content. The content can be nothing more than a few simple paragraphs, a list, an image, or quite possibly all three. The content is the information that you wish to present to the reader, and all of it must be within the <body> section.
<h1> </h1>, <h2> </h2>, and <h3> </h3>
The heading tags, <h1>, <h2>, and <h3> are another way to add structure to your web page. The <h1> tag is the most prominent, as it declares the subject of the web page. To break down the subject into smaller sub-headings, use the <h2> and <h3> tags.
Be aware that you should have only one <h1> per web page. You can have several <h2> and <h3> on a page, just be sure to use them appropriately. Remember, these are headings and are meant to be used to organize your web page. Don’t mark all of your content as a <h1>, <h2>, or <h3> tag.
<h1> tags are a very important part of SEO (search engine optimization). Not only do they announce the subject of a particular web page to the visitor, but the search engines as well. If you’re targeting a particular keyword, you should be sure and include it in the <h1> tag somehow.
<p> </p>
Most web pages contain at least one paragraph of text. Whenever you need to include one or more paragraphs in a web page, enclose each paragraph with its own <p> and </p> tags.
You can get away with not using <p> tags; the text will be rendered by the web browser. However, you should use <p> tags to provide the page with structure as well as a means to apply styling with CSS. By applying CSS to the <p> tag, you can define which font is used, the font size, and text color all in one place. That’s handy for making site-wide changes, as well as reducing file sizes and bandwidth.
<a> </a>
The <a> (anchor) tag is really what gives the web its power as they allow one web page to link to another! Anchor tags can seem tricky to those who are new to HTML, so let me give you a quick example of a complete anchor tag:
<a href="http://www.geekinspired.com" title="Geek Inspired">Get Geek Inspired!</a>
As you can see, the text that your visitor will read and click on (what they see as a link) is surrounded by the opening and closing tags, <a> and </a>. Doing this tells the web browser to render that text as a link, but we have to tell the web browser what we’re linking to. That’s what the href attribute is for. By setting the href attribute to a different page, we allow the visitor to jump from one page to another by clicking on the link.
One other thing to mention about anchors, is that you should try to set a title attribute when ever possible. Setting the title attribute is helpful in a couple of ways. First, the visitor will see the title when they hover their mouse over the link. This can serve as a way of giving the visitor a bit more information before clicking on the link. Second, using a title in your links gives search engines information about the link, and is helpful in SEO.
<br />
Need a break? No, no… sit down, not that kind of break! When you’re writing your web page, you may find yourself needing to place a line break into a paragraph, or to add extra line spaces between page elements (though, you really should use CSS for this). For this you will use a break tag <br />.
Note that this is one of those special tags that don’t have an opening and closing tag. Instead, it’s all built into one tag, with the forward slash / occurring just before the last angle bracket >.
<ol> </ol>, <ul> </ul>, and <li> </li>
Everyone makes lists, and it’s easy enough to make a list of your own within your web page. But first, you must decide on which kind of list you want to make, an ordered list or an unordered list
An ordered list, <ol>, will automatically number each item of the list for you. An unordered list, <ul>, will simply list the items you have included, without any sort of numbering. Regardless of which list you use, both require the use of the the list item tag <li> .
The <li> tags are always used inside of the ordered or unordered list tags. Here’s an example:
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<img />
Adding images to your web page is done with the use of the <img> tag. As I mentioned earlier, the <img> tag is one of the rare html tags that do not have a separate opening and closing tag. Instead, it’s all combined into one tag. For example:
<img src="http://www.mygardensite.com/images/image-001.jpg" alt="a picture of my garden" />
The code above is actually, more than just the tag. That’s because, unlike the other tags we’ve covered, the <img> tag doesn’t surround other parts of your web page. Instead, you must include attributes that tell the web browser where to find the actual image with the src attribute. Also note the alt attribute, which provides an alternate text description in case the image is missing or if the visitor is visually impaired.
There are other attributes that you can include for an image, such as height and width, which will manually scale the image within the web browser. Be careful using the height and width attributes, though, as you may be tempted to scale a really large image down to a smaller size. Doing this doesn’t effect the actual file size of the image, so the visitor will still have to download the large file, and only get to see the smaller scaled down version you’ve presented on your web page.
HTML Example
To conclude, here’s some example code for a very simple web page so that you can see how it all fits together:
<html>
<head>
<title>My Garden - Tomatoes</title>
</head>
<body>
<h1>Garden Tomatoes</h1>
<p>I decided to plant some tomatoes this spring. They're really taking off and I hope to have lots of tomatoes to give to all my friends and family this summer!</p>
<p>Here are a few things I like about tomatoes:</p>
<ol>
<li>They taste great.</li>
<li>They're good for me.</li>
<li>They're easy to grow!</li>
</ol>
<p>Here's a picture of my garden:</p>
<img src="http://www.mygardensite.com/images/my-garden-001.jpg" alt="a picture of my garden" />
<p>Here's a <a href="http://www.welovetomatoes.com">link</a> to check out more interesting things about tomatoes!</p>
</body>
</html>
discuss this topic to forum
