Back to the basics pt4
Now we are going to look at parts of the html that are not visible when looking at the page i a browser. These are extremely important to the performance of the browser. I guess we should have started here, at the top of the html document. First things first, we need to declare what type of HTML. This is handled with the html <!doctype> declaration, the very first line, there to tell the browser what version of markup language we will be using. It might appear as.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
The part we want to focus on is the part after /TR/. Our options are
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
- XHTML 1.0 Strict
- XHTML 1.0 Transitional
- XHTML 1.0 Frameset
- XHTML 1.1
To find out more about what each of these means, check out the w3c.
Right under the doctype, we actually start denoting html coding with the <html> tag. Inside at the top starts with the head, not to be confused with a header. It’s contents are not displayed. It is denoted with <head></head> tags. The head contains information like the title of the webpage, which usually appears in most browsers above the toolbar. But more importantly, the title tells search engines information about the page (more on that later). Title tags look like this <title>Welcome to webpage, where you can find something</title>.
Also residing in the head are meta tags. These are extremely important in telling search engines like Google, Yahoo, and Bing, how to handle your web page, as well as how to rank it with others. This is where you input things like
- description- a small paragraph representing why users want to find your site
- keywords- relate to what people are searching for by word
- index- wether you want the search robots to follow your links to other pages with relevant information
Along with this basic data, you can also delve more in-depth with tags to tell the robots when to expire the information as well as when to come back and visit for fresh data. The meta tags are very important with regards to your ranking with search engines, but by no means are the end. Google has spent a lot of money and effort to create smarter ways to index websites, so a few of the “black hat” tricks with meta data that used to guarantee rankings don’t work anymore. They are more focused on how relevant the actual information on your site is helpful to people searching, not on how clever your keywords are. Which in my opinion, is the best way to rank sites.
Typically inside the head, you also include the reference to other items crucial to operation and styling. Like referencing that css sheet we created earlier, or actual css coding. A css reference might look like this <link href=”styles.css” rel=”stylesheet” type=”text/css” />. The href points to where the document physically sits in relation to the web page and what its name is. You might choose to link to scripts here also, depending on your choice. I sometimes link to javascript language (we will go in depth on java later, thats a whole can of worms by itself). A java ref might look like. <script language=”javascript” src=”jquery.tweet.js” type=”text/javascript”></script> I told the browser to look for the source (src) and what language type (javascript). Don’t fret over details yet, we are just looking at things that occur in the head tag for now.
Now, the next tag will contain actual displayed content. And it begins with denoting the body of the page with, you guessed it <body></body> tags. Inside those appear all your HTML stuff we discussed earlier. Here is a pic of what we have discussed so far.
