And I say hidden because it’s the ‘engine’ working with your browser to display a page on the Internet. You don’t see it when you land on a particular page. It’s the non-visible part of your browsing experience. But, as you’ll see, absolutely necessary.
A website is made up of pages, from a single page to many. You only see the text, pretty pictures, text, video, etc. But behind the scenes, HTML is the boss! (along with the technical infrastructure.)
And much like any language, it has its own syntax and it must be learned.
It’s really quite easy.
In this post, we’ll cover some of the basics of an HTML page, look at the anatomy of a page, and how you can create an HTML page for yourself.
I remember my first experience with HTML in late ’95 online. My background is in software programming, database development and I thought HTML was just a silly little scripting language and quite lame. Not a real programming language by any means. I was certainly way too smart for for this ‘low-grade’ language (big head!).
Many of us didn’t see the future as Tim Berners-Lee saw it. He had started in hyper-text land several years earlier. (Tim is considered The Father of the World Wide Web). The good news is: you don’t need to worry about this level of detail.
Things have changed.
Today – the online environment, technology, tools, people – it has all evolved.
You too have progressed and learned much about the use of the Internet. You’ve figured out what is important to you. In the REAL world, if you needed help with your automobile, you discovered that you don’t have to become a car-mechanic. The work of doing the 52-point inspection, changing oil, changing out an air filter, or checking and filling up water fluids is done by the experts. They will use their talents, skills and experience to make it happen for you, quickly and efficiently. They’ll use technology too. Insert a couple of cables, flick a few switches and he’ll track and diagnose your car’s health on a monitor in minutes.
However, here’s the point: if you know a little bit about how the engine works and what some of the “under-the-hood” issues are – you can speak the language, and even do these basic things yourself in the future.
The same with HTML. It’s good to know the fundamentals.
Basic Structure of an HTML page
Think of an HTML page as you would any page, whether it’s a digital version (word-document, PDF), or a physical one – a student whitepaper, a report of some kind, a magazine or a newspaper. They are made up of pages and elements that are connected.
For example, a newspaper article will have a headline, a sub-head, some body text, some pictures and references. Additionally, the article may include or add things that make you take action (call a phone number, subscribe, author-box info, website, etc). A well constructed HTML page uses a similar approach. You just need to know how to use the language of HTML and think a little about structure and layout to get the same effect.
For example, a BIG headline in the New York Times: “Obama Wins a Second Term!” would be written as <H1>Obama Wins a Second Term!</H1> using HTML syntax. You simply place the text between “tags”. Your browser takes care of the rest and displays it in a large font size, creates bigger spacing around the sentence, bold-faces it, etc. This can be modified by using a style-sheet, but that’s for more advanced use. To see examples, and test it yourself – try a complete HTML tutorial. Here is the H1 Example.
Anatomy of an HTML page
A simple structure and outline of an HTML page is depicted below. It contains these tags:
Every page on the Interwebs follow this structure. It is what makes up every page that is available online. As you can see – it’s not very complex. Understanding this basic syntax and layout will be important as you move ahead.
For example – for search engines – the TITLE tag is important. This is where you can place a search friendly phrase or sets of keywords along with a benefit or call to action statement. It is one of the first “real” text items the search engines see. They use it to help understand what the page is about. Users can bookmark, print and email this same page. The title will be included with it. It acts like a “informative bookmark or index tab” of sorts.
This TITLE tag also show up in the search engine results. It’s can be similar to the H1 tag “headline” tag inside the body text.
If you build and think about each page on your website as the below, you’ll do well online. The step-by-step approach is listed (1 thru 4). Each page should be clear on the message you are trying to convey. For example if we are talking about “financial planning” for example, we could do the following: (See #3 below for link on keyword research)
1. Place keywords and phrases in the TITLE tag – naturally. An example of a home page might be: “The Robson Company – Financial Planners in Atlanta, Georgia”
2. Place keywords and phrases in the H1 tag – naturally. (This tag is used inside the BODY tag. See #3) An example might be: “Discover The 7 Financial Planning Mistakes Baby Boomers Make With Their Inheritance”
3. Place content using keywords and phrases in the BODY tag – naturally. I’m not going to show a complete example here, but I trust you are starting to see the path. In our example, we speak to the topic of ‘financial planning’. Yes, similar terms should be included. “Financial advisor, CFP, Online financial planner”, for example. Keyword research (click to try for free) will be critical — to make sure you include the right terms naturally on your page overall. You create more (additional) pages with other terms, for example “estate planning, estate planner, living trust”, etc. Breaking things up and into additional pages is natural. You start thinking about categories and classification and create links between them. (see #4 below)
4. Include some links to other external authoritative resources, as well as internally on your pages. As you learn more about the HTML syntax, you’ll see that creating a link is as easy as this: <a href=”your or others website domain-page here“>your call-to-action or keyword text here</a>. This creates the commonly known blue, underlined text that is called a “link”. It’s what the software of the search engines use to find yours and other pages on the world wide web.
The above should help you understand the principles of use of HTML, as well as the layout – and finally – how search engines think about your pages. All of this should have one goal in mind: to serve your virtual visitor.