The <head> element is a special one that contains all the “head” elements on the page. It’s located in the HTML after the <html> tag, before the <body> element, and gives lots of valuable information about the page. Usually the format looks like this
<!DOCTYPE html>
<head>
Various header elements.
</head>
<body>
Content of site.
</body>
</html>
<title> defines the title of the document, and is what appears in the tab at the top of the screen. Additionally, it provides a title when you save the page as a bookmark, and is what is displayed in search engine results.
<title>Back to Basics</title> gives us:
The <base> tag specifies the base url for all other urls on the page. A good example for this is if you had all your images hosted in one section. You could then do something like in the example shown here.
<base href=”http://www.mywebsite.com/images/” target=”_blank”>
Then, is we write <img src=”imageofstickman.gif” alt=”stickman”>, it would pull the image from http://www.mywebsite.com/images/imageofstickman.gif, which makes things a lot easier if you have a ton of images you need for a page, so you don’t have to write the full url every time.
Additionally, the target=”blank” there ensures that any link on the page will automatically open in a new tab or window, even if it isn’t related to the value we put for the href attribute in the base element.
A pro tip is to write the <base> element first in the header, in case you need something else to link using it (keep in mind that the HTML is read top to bottom).
The <link> element is used to define a link between the HTML document and an external resource. “rel” is an important attribute here, as it defines relationship between the current document and the one it’s linked to. This is usually used to link the page to its style sheet, like this:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
The <style> element is used to define how certain elements will look and be styled in the browser. I’m pretty sure this is widely unused, and linking to CSS is used instead.
<style type=”text/css”>
body {background-color:green;}
p {color:red;}
</style>
The <meta> element is used to give metadata about the page, such as the author of the page, keywords and when the page was last updated. This isn’t displayed on the page, but is readable by the browser. It’s used for a variety of things, like how to display the page for certain browsers, and search engine results. Its name attribute specifies what the content attribute of the meta data is talking about. There give 5 options for this, but I think there may be more varieties from various page sources I’ve looked at:
application name – specifies the name of the web application this page represents
author – the person who wrote the web page
description – a description of the page, which search engines can then pick up and show with the results of searches. So this with the <title> tag would make up the search results you’d see in Google.
generator – specifies which software was used to create the page, like Frontpage. If you hand wrote the page, this isn’t needed.
keywords – a list of keywords, separated by commas and spaces, which is used by search engines to categorize the page.
Here’s are some examples:
<meta name=”author” content=”Kyle Damken”>
<meta name=”keywords” content=”html, css, tutorial”>
Now, I’ve heard “index the page” used a few times so far, and didn’t know what that means. So, I looked it up and found this solid explanation. To take the TL:DR from Tomasz Nurkiewicz‘s already short explanation, indexing basically means analyzing large amount of data and then building some sort of index to access the data in a more efficient way later, often based off of some sort of search criteria.
Finally, the <script> tag is used to define a client-side script, like Javascript. W3C tells me we’ll learn more about this later, which I’m looking forward to.
Kyle's Awesome Awful Websites 