01/20/2023
Want to learn about HTML?
If you own a website, you'll need to understand at least the basics of HTML. Here's a short excerpt from one of our HTML trainings inside our "Building a Website" course...
HTML Basics:
HTML stands for HyperText Markup Language. Thatâs the language that web sites are written in. While it may sound daunting, itâs actually quite easy to understand. Here, weâre going to explore it in more detail and learn how itâs written, and other fundamentals such as tags, attributes, metatags, and much more.
By knowing the basics of HTML, youâll be able to ensure your website is always correctly displayed for your prospects and ready to sell. Youâll also be able to fix most errors quickly and easily without paying for a programmer.
Just the Facts, Jack
In this lesson, we are going to look at the very basics of HTML. Feel free to skip this section if you're familiar with tags and headers.
The first thing to note is that HTML is not case sensitive. An upper case works just as well as a lower case, however, most code is written in lower case to make it easier to read.
What is a Tag?
A tag is a command that you give to an element in your website. Elements can be things like a sentence, a paragraph, or an image. Tags are always enclosed in angle brackets like this . In order for the HTML code to work correctly, you must have a beginning tag and an ending tag. The ending tag always contains a forward slash first inside the bracket like this .
No matter what website software youâre using, if it contains HTML, these tags will look the same.
Time to Open a Window
If you're on your desktop, go ahead now and switch out of this screen for a moment (ALT + TAB), and go to any website (a small website is usually best for this example.) At the top of your browser somewhere, youâll see a command for View Code (or Source) depending on your browser. When you click on it, youâll see a dropdown list of options. This opens up the source code for that particular website. Donât worry about messing up the code â you canât hurt it unless you are in your website software and the website belongs to you.
Look through the source code now and notice all the things in brackets. Those are all the tags surrounding the elements. Notice that around each element, there is a beginning tag and an ending tag .
Now look for the html tag. The html tag is usually the first tag youâll see. You only see the beginning of the html tag because the end of the html tag is at the very bottom of the source code screen. (This tells the system that EVERYTHING in between those 2 tags is going to be HTML code.)
Next, youâll see a head tag. Sometimes the header information contains a LOT of code, and the ending head tag will be somewhere directly after that code.
To find the ENDING head tag in the source code window, just click on Edit, Find. Then type in the word âheadâ and you should be able to see both the beginning and ending head tags.
There are different sized headers in HTML. A header 1 tag is the largest. You should see the largest header surrounded by tags that look like this header. Note, some code will have a title header instead of a H1 tag, so the code will look like this header.
Youâll also be able to see the document type. This is usually the very first line of code in the source code. This tells the browser how to render (show) the page. Sometimes the document type will be xhtml or it could be something else besides html. If youâre creating a website with a software program (instead of from scratch), the program usually has this line of code already installed for you.
Meta Tags
Meta tags are indicators that provide direction to the search engines that look at your site. In the early years of the internet, unscrupulous designers would have their meta tags filled in with things that werenât true in order to get a higher ranking in search engines. This worked for awhile, until the search engines got smarter. Now, meta tags donât hold as much relevance as they used to in determining website ranking in the search engines; however, weâll still take a quick look at them, so you know what they are.
Keyword Meta Tag
One of the first metatags youâll see in your source code is that of keywords. Keywords are the terms inside your web page that are going to be pertinent for the search engines. Keywords are always separated by commas and the entire batch of keywords are enclosed in quotation marks. Youâll also have your beginning and ending brackets because itâs still an element.
The meta tag for keywords will look something like this:
The rule of thumb for keywords is no more than 6-8 at a time. Years ago, web designers would load line after line of keywords into this area in order to manipulate the search engines. This was called âkeyword stuffingâ and is no longer allowed. Note: For more detailed lessons about keywords, see our SEO course. If you're enrolled in our Full Membership, you already have access.
Description Meta Tag
Youâll see a meta tag for description. This is going to be the description of your website. It will look something like this You donât have to put commas in here unless you choose to.
The description that you put in here will be the description that loads directly underneath your title in the search engines, so itâs important that your description be accurate and specific.
For example, letâs stay with the same example and say that you teach piano and organ lessons in Washington, D.C. For your description you may want to put something like âteaching piano and music lessons for adults in Washington, D.C." One or two sentences is usually sufficient for this. However, be careful . . . if your description is too long, sometimes the search engines will cut off part of your sentence and it will read strange when looking at it from the search engine screen. Itâs always a good idea to check this out once your site gets in the search engine.
Name Meta Tag
Another important meta tag is your name. Your meta name is the name you are telling the search engine to give your website when someone searches for it. Your meta name on your website is going to be different from everyone elseâs. For example, if you are offering piano lessons, your meta name tag might look like this
Robots Meta Tag
Another important meta tag to learn about is the robot's tag. This is the tag that tells the search engine that it has permission to âcrawlâ your site (think of a spider in its web) and report its findings publicly. This is called âindexingâ your site. The pages that are shown in the search engine are indexed pages.
If you donât want some of your pages to show in the search engines, you can also de-index those pages. You can do all this via the robot's tag thatâs on that webpage. It is called âno followâ and looks like this: âno index, no followâ which tells the search engine not to index that page and not to follow any links that are on that page. You can reverse this at any time by changing the robots tag to âindex, followâ or change either one.
So, if you wanted the page to index in the search engine but you didnât want the search engine to follow the links on that page, it would look like this: âindex, no followâ
One thing youâll notice is that, unlike other HTML tags, meta tags donât have an ending tag. It simply ends with the slash.
As we mentioned above, HTML code isnât case sensitive. Also, the white space inside HTML code doesnât matter. A page with code on every single line will render exactly the same as code on every other line. (If you wanted spacing inside a web document, youâd need to write that into the code.) Sometimes coders do this to make their jobs easier.
Tag Order
Letâs talk about tag order â which tags come first. In the above samples, youâll notice that some tags are âinsideâ other tags.
Paragraph tags are only found inside the body.
Title tags are only found inside the header.
If you want to âboldâ a word, youâd use a tag (also called a tag). If you want to italicize it, use an tag. After the word or phrase you are bolding or italicizing, you need an end tag like and .
BUT, hereâs the rule: Whatever tag is CLOSEST to the word or phrase, gets the ending tag FIRST.
So, in this example:
Mary wanted to go to the supermarket.
Here we have a in tags and an which is italic. The italic tag is the one closest tag to the word/phrase, so it would be the one to end first. So, the tag thatâs closest to the text is the one that ends first and then the next tag, and so on.
So now, youâve learned the basics of HTML. Letâs continue on to learn a little bit more about this fascinating website language!
..
If you enjoyed this excerpt and would like to see more, just let us know! â€ïž
